这篇文章主要是讲构成一个HTML页面的结构标签的功能详解。涉及到的标签有:<!DOCTYPE>、<head>、<meta>、<title>、<link>、<body>、<script>、<noscript>。
标签详解
<!DOCTYPE>的作用: 告知浏览器使用哪种HTML规范或XHTML规范来解析页面。若是没有<!DOCTYPE>或者形式不正确,会导致HTML和XHTML文档以混杂模式呈现,就是把如何渲染html页面的权利交给浏览器,而每个浏览器的展现方式都不同。所以想要提高浏览器兼容性就必须重视<!DOCTYPE>。
浏览器渲染方式:
严格模式: 又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面。
混杂模式: 又称为怪异模式或者兼容模式,是指浏览器按照自己的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面。
参考博客: 深入理解DOCTYPE的作用
<head>标签: HTML头部都是包含在<head>元素里面的内容,head里面的内容不会在浏览器中显示。
<meta>标签:
一、作用
设置meta标签的主要作用是对网页内容进行概括,便于搜索引擎爬取、兼容浏览器、适配移动端设备、开启或者是禁止一些默认样式和默认事件等等。
二、常用例子
1)
<meta name="author" content="yywy">
<meta name="description" content="This is a test page"> 定义了页面的作者和描述
name: 指定了meta元素的类型,说明该元素包含了什么类型的信息
content: 指定了实际的元数据内容
2)
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 该meta标签的作用是让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放。name 为 viewport 的 meta,它没有在 HTML 标准中定义，却是移动端开发的事实标准。移动页面使用。
width：页面宽度，可以取值具体的数字，也可以是 device-width，表示跟设备宽度相等。
height：页面高度，可以取值具体的数字，也可以是 device-height，表示跟设备高度相等。
initial-scale：初始缩放比例。
minimum-scale：最小缩放比例。
maximum-scale：最大缩放比例。
user-scalable：是否允许用户缩放。
3)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 具有http-equiv属性的meta标签,表示执行一个命令。X-UA-Compatible表示强制浏览器的渲染方式。
作用：IE = edge告诉IE使用最新的引擎渲染网页，chrome = 1则可以激活Goole Chrome Frame(谷歌浏览器内嵌浏览器框架GCF,需要下载,2014年就不再提供支持)。如果安装了GCF，则使用GCF来渲染页面，如果没安装GCF，则使用最高版本的IE内核进行渲染。Google Chrome Frame（谷歌内嵌浏览器框架GCF）。这个插件可以让用户的IE浏览器外观不变，但用户在浏览网页时，实际上使用的是Google Chrome浏览器内核。
X-UA-Compatible的值，可以指定网页的兼容性模式设置。
4)
<meta http-equiv="Refresh" content="1, URL=http://127.0.0.1/index.html"> 作用: 隔1秒后,跳转到指定页面
5)
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 --> renderer是为双核浏览器准备的，用于指定双核浏览器默认以何种方式渲染页面。比如说360浏览器。
6)
<meta name="keywords" content=""> 告诉搜索引擎,网页的关键字是什么,对于 SEO 场景非常关键。关键词一般不超过3个,每个关键词不宜过长,而且词语之间要用英文“,”隔开(因为计算机只对英语的敏感度较高),尽量将重要的关键字靠前放,因为靠后的关键字排名较差,除非你站有很高的权重。
7)
<meta name="format-detection" content="telephone=no, email=no" />作用：telephone=no就禁止了把数字转化为拨号链接！告诉设备不识别邮箱，点击之后不自动发送email=no禁止作为邮箱地址！
8)
<meta charset="utf-8"> charset: 规定 HTML 文档的字符编码。
作用: 告诉浏览器以 utf-8 的编码格式来解析代码
参考链接: 移动端meta标签:
浅析网页meta标签中X-UA-Compatible属性的使用:
<title>作用: 用来表示整个HTML文档标题的元数据(不是文档的内容)。
<link>标签:
一、作用
1) 定义文档与外部资源的关系
2) 链接样式表
二、常用例子
1) 页面图标
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 页面添加图标,以.ico格式保存(大多浏览器将支持更通用的格式,如.gif或png,单使用.ico格式将确保它能在IE6一样久远的浏览器显示)
2) 链接样式表
<link rel="stylesheet" href="index.css"> 三、相关问题
link和@import的区别:
相同: 都可以引入外部样式
不同:
1) @import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel(rel 此属性命名链接文档与当前文档的关系,该属性必须是链接类型值的用空格分隔的列表)等属性。
2) 加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载,所以网速不好时浏览@import加载CSS的页面有时会没有样式(也就是闪烁)
3) @import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。
4) 可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，所以JS无法使用@import的方式插入样式。
5) 在link标签引入的 CSS 文件中，使用@import时需注意，如果已经存在相同样式，@import引入的这个样式将被该 CSS 文件本身的样式层叠掉，表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。
参考: link和@import的区别
<body>标签: HTML body 元素表示文档的内容。
<script>标签: HTML <script> 元素用于嵌入或引用可执行脚本。
<noscript>: 如果页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。如果浏览器支持脚本,则不会显示noscript标签的内容。
以上内容如有不对,希望大家指出,谢谢。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。