您现在的位置是:网站首页> 编程资料编程资料
HTML中head头结构
2021-08-30
1317人已围观
简介 HTML head头部分的标签、元素有很多,涉及到浏览器对网页的渲染,搜索引擎SEO等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素。了解每个标签的意义,写出满足自己需求的head标签,十分重要。
下面介绍下常用的head头部结构,以及对各个标签、元素的意义以及使用场景一一介绍(本篇以一丝大神的文章为基础,进行扩展总结)。
padding.me的head头结构
https://plus.google.com/u/1/105241873904238310190/?rel=author">
http://padding.me/humans.txt" />
http://feeds.feedburner.com/paddingme" />
DOCTYPE
DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于html标签之前,此标签告知浏览器文档使用哪种HTML或者XHTML规范。
DTD(Document Type Definition)声明以开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共DTD,名称格式为“注册//组织//类型 标签//语言”,“注册”指示组织是否由国际标准化组织(ISO)注册,+表示是,-表示不是。“组织”即组织名称,如:W3C;“类型”一般是DTD,“标签”是指定公开文本描述,即对所引用的公开文本的唯一描述性名称,后面可附带版本号。最后“语言”是DTD语言的ISO 639语言标识符,如:EN表示英文,ZH表示中文。XHTML 1.0可声明三种DTD类型。分别表示严格版本,过渡版本,以及基于框架的HTML文档。
•
HTML 4.01 strict
http://www.w3.org/TR/html4/strict.dtd">
•
HTML 4.01 Transitional
http://www.w3.org/TR/html4/loose.dtd">
•
HTML 4.01 Frameset
http://www.w3.org/TR/html4/frameset.dtd">
•
而最新HTML5 推出更加简洁的书写,它向前向后兼容,推荐使用。
HTML里的doctype有两个主要目的。
•对文档进行有效性验证。
它告诉用户代理和校验器这个文档是按照什么DTD写的。这个动作是被动的,每次页面加载时,浏览器并不会下载DTD并检查合法性,只有当手动校验页面时才启用。
•决定浏览器的呈现模式
对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响html排版布局。浏览器有三种方式解析HTML文档。
◦非怪异(标准)模式
◦怪异模式
◦部分怪异(近乎标准)模式
关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE标签,可详细阅读模式?标准!,以及盒子模型。
charset
声明文档使用的字符编码,
html5之前网页中会这样写:
这两个是等效的,具体可移步阅读:http://stackoverflow.com/questions/4696499/meta-charset-utf-8-vs-meta-http-equiv-content-type,所以建议使用较短的,易于记忆。
lang属性
简体中文
繁体中文
很少情况才需要加地区代码,通常是为了强调不同地区汉语使用差异,例如:
菠萝和
相关内容
- 使用vertical-align实现input和img对齐纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- 一个不错的html 打印代码支持翻页css transform 翻页动画记录的实现HTML5 3D书本翻页动画的实现示例使用纯CSS实现书籍3D翻页效果的示例很酷的HTML5电子书翻页动画特效css实现点击滚动翻页的效果(无js)css3实现书本翻页效果的示例代码
- a标签的背景图在ie8下不显示问题的解决方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- HTML标签嵌套规则详细归纳适合新手朋友HTML5标签嵌套规则详解【必看】html标签的嵌套规则介绍XHTML标签的嵌套规则分析HTML中的块级、行级元素,特殊字符,嵌套规则
- input输入框中的光标大小显示不一致的解决方法纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- HTML cellpadding与cellspacing属性图文详解纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- a标签href属性与onclick事件使用实例纯html+css实现Element loading效果纯html+css实现奥运五环的示例代码HTML+CSS实现导航条下拉菜单的示例代码html+css实现滚动到元素位置显示加载动画效果纯html+css实现打字效果html+css实现环绕倒影加载特效html输入两个数实现加减乘除功能html中显示特殊符号(附带特殊字符对应表)关于html选择框创建占位符的问题html css3不拉伸图片显示效果
- html 可输入下拉菜单的实现方法HTML+CSS实现下拉菜单的实现纯CSS+HTML大型下拉菜单特效HTML+CSS实现简单下拉菜单效果纯html+css制作三级下拉菜单基于HTML5代码实现折叠菜单附源码下载html 仿百度百科导航下拉菜单功能
- html 用超链接打开新窗口其可控制窗口属性HTML基础知识——设置超链接的样式简单实例HTML中的超链接标签使用教程XHTML中的超链接标签使用教程html超链接a标签的href跳转跟onclick之间执行顺序示例介绍解决html 图片img加超链接后产生难看的蓝色边框问题html超链接样式(四种不同状态)设置示例html 中文乱码 HTML超链接中文乱码问题分析及解决方法HTML利用超链接打开链接文件的方法介绍HTML设置超链接字体颜色和点击后的字体颜色网页制作初学者:学用HTML的超链接A标记
- html用title属性实现鼠标悬停显示文字CSS3防疫知识图文响应式布局代码CSS3响应式个人名片图文布局代码详解CSS3实现响应式手风琴效果css3 响应式媒体查询的示例代码HTML5 图片悬停放大的实现代码示例 html+css实现响应式卡片悬停效果
