HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份 <head>
部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的 <head>
头部标签,可以很有效的增强页面的可用性。
HTML基本的头部标签
下面是HTML基本的头部元素:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!--具体可以查看本文 为移动设备添加 viewport 部分--> <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* --> <title>页面标题</title> ... </head>
其中
<meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- 在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。 如果你的页面确定只在桌面浏览器中运行,那么--> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 也可以省略。-->