重学前端之HTML(二)HTML页面的主要标签详解

时间 2020-01-10

标签前端 html 页面主要标签详解栏目 HTML 繁體版

原文原文链接

这篇文章主要是讲构成一个HTML页面的主要标签的功能详解。涉及到的标签有:<!DOCTYPE>、<head>、<meta>、<title>、<link>、<body>、<script>、<noscript>。css

标签详解

<!DOCTYPE>的做用: 告知浏览器使用哪一种HTML规范或XHTML规范来解析页面。如果没有<!DOCTYPE>或者形式不正确,会致使HTML和XHTML文档以混杂模式呈现,就是把如何渲染html页面的权利交给浏览器,而每一个浏览器的展示方式都不一样。因此想要提升浏览器兼容性就必须重视<!DOCTYPE>。
浏览器渲染方式:
严格模式: 又称标准模式,是指浏览器按照W3C标准来解析代码,呈现页面。
混杂模式: 又称为怪异模式或者兼容模式,是指浏览器按照本身的方式来解析代码,使用一种比较宽松的向后兼容的方式来显示页面。
参考博客: 深刻理解DOCTYPE的做用
html

<head>标签: HTML头部都是包含在<head>元素里面的内容,head里面的内容不会在浏览器中显示。web

<meta>标签:
1、做用
设置meta标签的主要做用是描述网页,便于搜索引擎抓取,兼容浏览器,适配移动端,开启或者是禁止一些默认样式和默认事件等等。
2、经常使用例子
1)chrome

<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)yii

<meta http-equiv="Refresh" content="1, URL=http://127.0.0.1/index.html">

做用: 隔1秒后,跳转到指定页面
5)ui

<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、做用
1) 定义文档与外部资源的关系
2) 连接样式表
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">

3、相关问题
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 方法是基于文档的，没法使用@import的方式插入样式。
5) 在link标签引入的 CSS 文件中，使用@import时需注意，若是已经存在相一样式，@import引入的这个样式将被该 CSS 文件自己的样式层叠掉，表现出link标签引入的样式权重大于@import引入的样式这样的直观效果。
参考: link和@import的区别

<body>标签: HTML body 元素表示文档的内容。

<script>标签: HTML <script> 元素用于嵌入或引用可执行脚本。

<noscript>: 若是页面上的脚本类型不受支持或者当前在浏览器中关闭了脚本，则在 HTML <noscript> 元素中定义脚本未被执行时的替代内容。若是浏览器支持脚本,则不会显示noscript标签的内容。

以上内容若有不对,但愿你们指出,谢谢。