HTML<head>
元素
<head>
元素是所有头部元素的容器,<head>
元素可包含脚本,指示浏览器何处找到样式表,元信息等等。
1.1 <title>
元素
<title>
元素定义文档标题,在HTML/XML中是必须的,其完全作用:
- 定义浏览器工具栏的标题
- 当页面添加到收藏夹时,显示在收藏夹中的标题
- 显示搜索引擎结果页面的标题
1.2 <base>
元素
<base>
元素用于描述了基本的链接地址/链接目标,该标签作为HTML文档中所有的链接标签的默认链接:
eg:
<head>
<base href="//www.w3cschool.cn/images/" target="_blank" />
</head>
1.3 <link>
元素
看 W3C笔记-HTML样式简介,字体基于内容的样式与物理样式、字符实体 。
<link>
元素还可用作DNS预处理,dns-prefetch作用是:当你浏览网页,浏览器会加载网页的同时会对对网页中的域名进行解析缓存,这样在你单击当前网页链接无需DNS解析,减少浏览者等待时间,提高用户体验。
语法形如:
<link rel='dns-prefetch' href='http://www.seieiblog.top'>
1.4 <style>
元素
看 W3C笔记-HTML样式简介,字体基于内容的样式与物理样式、字符实体 。
1.5 <meta>
元素
<meta>
元素提供元数据,比如针对搜索引擎和更新频度的描述和关键词。元数据也不显示在页面上,但会被浏览器解析。 <meta>
元素通常用于指定网页的描述,关键词,文件的最后修改时间,作者,和其他元数据。也可以使用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他Web服务。 <meta>
元素的可选属性有http-equiv
,name
以及scheme
,* 属性提供了名称/值对*,详情可看这里
<meta>
元素是空元素,而且不能没有属性。
eg:
1、为网页定义编码方法:
<meta charset="utf-8" />
<!-- 字符编码必须要写 -->
2、为搜索引擎定义关键词:
/3、定义网页作者:
<meta name="keywords" content="HTML,JavaScript,CSS" />
<meta name="author" content="Seiei" />
4、每三十秒刷新页面内容:
<meta http-equiv="refresh" content="30" />
5、告诉一些国产浏览器,这个网址应该用哪个内核渲染(有些国产浏览器是双核的,基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站)
<meta name="renderer" content="webkit">
<!-- 页面需默认用ie兼容内核 -->
<meta name="renderer" content="IE-comp">
<!-- 页面需默认用ie标准内核 -->
<meta name="renderer" content="IE-stand">
6、以下代码主用于告诉IE使用最新的引擎渲染网页(也就IE8),chrome=1则可以激活Chrome Frame(Chrome Frame可以让旧版IE浏览器使用Chrome的WebKit渲染引擎处理网页,因此旧版IE用户可以体验到包括HTML5在内的众多现代网页技术)
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7、以下元信息用于禁止苹果手机将如电话,邮箱,地址的文本转换为链接
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="adress=no">
8、用了<meta Property=og>
标签,意思是同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用,eg:
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”五月天_突然好想你MV现场版”/>
<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... 9-76EA-E5E20A1887C4″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/v.swf”/>
<meta property=”og:width” content=”500″ />
<meta property=”og:height” content=”416″ />
<meta property=”og:type” content=”video”/>
<meta property=”og:title” content=”五月天_突然好想你MV现场版_AA”/>
<meta property=”og:image” content=”http://g1.ykimg.com/0100641F464A ... EA-E5E20A1887C44444″/>
<meta property=”og:url” content=”http://v.youku.com/v_show/id_XMTIyMTY5NzMyyyyyyyyyyyyyyyy.html”/>
<meta property=”og:videosrc” content=”http://player.youku.com/player.p ... AutoPlay=true/y.swf”/>
<meta property=”og:width” content=”600″ />
<meta property=”og:height” content=”716″/>