html5头部内容通常包括:1、title标签定义的网页标题;2、Favicon(网站小图标);3、编码方式;4、网站描述;5、页面关键字;6、页面作者;7、Viewport(移动端适配);8、CSS样式表;9、JavaScript脚本。
本教程操作环境:windows7系统、HTML5版、Dell G3电脑。
根据我们的需求,可以在 HTML 头部定义大量的元数据,也可以定义很少或者根本就不定义。虽然头部标签是 HTML 文档的一部分,但其中的内容并不会显示在浏览器中。
html5头部内容
1、网页标题--
注意,在
示例:
<head> <title>PHP中文网</title> </head>
2、Favicon
网页标题左边的小图标,指定他的路径,如果没有指定,浏览器会在根目录下寻找
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
3、编码方式
编码方式的规范是放在head的最前面,如果不指定,浏览器也会根据服务器的header进行判定,但是不一定准确。
<head> <meta charset="UTF-8"> </head>
标签用于提供有关 HTML 文档的元数据,例如页面有效期、页面作者、关键字列表、页面描述等信息。 标签定义的数据并不会显示在页面上,但却会被浏览器解析。
charset 属性用来指定 HTML 文档的字符编码,上面的示例中,我们将文档的字符编码设置为了“UTF-8”。
4、网站描述
<meta name="description" content="这里是对网站的描述">
定义页面的描述信息有利于搜索引擎的搜索。
5、页面关键字
<meta name="keywords" content="HTML, HTML教程, HTML入门">
关键字用于为搜索引擎提供与页面有关的信息。
6、页面作者
<meta name="author" content="作者名">
通过某些内容管理系统可以自动提取作者信息。
7、Viewport(移动端适配)
这个就很常见了,viewport一般是做移动端适配,将页面放在一个虚拟的窗口中-viewport中,如果网页没有用viewport就会出现我们在手机浏览器打开时很小,而且还可以移动缩放,low爆了,viewport就是让网页开发者通过其大小,动态的设置其网页内容中控件元素的大小,从而使得在浏览器上实现和web网页中相同的效果(比例缩小)。,用来更好支持响应式网站。
<meta name="viewport" content="width=device-width, initial-scale=1">
width:控制viewport的大小,一般情况下指定为device-width(单位为缩放为100%的CSS像素),也可以指定一个固定的值例如600.
height:和width相应,指定高度。
initial-scal:初始缩放比例,页面第一次load的时候的缩放比例。
maximum-scale:允许用户缩放到的最大比例。
minimum-scale:允许用户缩放到的最小比例。
user-scalable:用户是否可以手动缩放。
8、内嵌CSS样式--