HTML5：理解head
2019独角兽企业重金招聘Python工程师标准>>> 
HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载样式表，以及加载JavaScript文件（出于性能考虑，多数时候放在页面底部</body>标签结束前加载JavaScript）。除了title，head里的内容对页面访问者来说都是不可见的。
下面是HTML文档head部分的一个例子：
- <head>
- <meta charset="utf-8" />
- <meta name="author" content="Adam Freeman"/>
- <title>Your page title</title>
- <base href="http://titan/listings/" target="_blank"/>
- <style type="text/css">
- a{
- background-color: grey;
- color: white;
- padding: 0.5em;
- }
- </style>
- </head>
title元素
base元素
- <base href="http://titan/listings/" target="_blank"/>
1）href即为指定的基准URL。
2）target属性规定在何处打开页面上的所有链接，包括值：
1）_blank：在新窗口中打开被连接文档；
2）_self：默认，在相同的框架中打开被链接文档；
3）_parent：在父框架打开被链接文档；
4）_top：在整个窗口中打开被链接文档；
5）framename：在指定框架中打开被链接文档。
meta元素
指定名/值元数据对
- <meta name="author" content="Adam Freeman"/>
name属性用来表示元数据的类型，content属性提供值。name属性包含以下值：
1）application name：当前页所属Web应用系统的名称；
2）author：当前页的作者名；
3）description：当前页的说明；
4）generator：用来生成HTML的软件名称；
5）keywords：描述页面的内容。
除了以上5个预定义的元数据名称，还可以使用元数据扩展，这里（http://wiki.whatwg.org/wiki/MetaExtensions）有这些扩展的一份时常更新的清单。有些扩展用的比较多，例如robots元数据，HTML文档的作者可以用它告诉搜索引擎该如何对待该文档：
- <meta name="robots" content="noindex"/>
该属性有三个大多数搜索引擎都认识的值：
1）noindex：不要索引本页；
2）noarchive：不要将本页存档或缓存；
3）nofollow：不要顺着本页中的链接继续搜索下去。
大多数搜索引擎都提供了优化网页或整个网站的指南，可以查看相应搜索引擎提供的网页或网站优化指南。
声明字符编码
- <meta charset="utf-8" />
head元素中的meta元素声明文档的字符编码为UTF-8（默认）。
模拟HTTP标头字段
- <meta http-equiv="refresh" content="5"/>
http-equiv属性的用途是指定所要模拟的标头字段名称，字段值在content属性中指定。http-equiv属性的可选值如下：
1）refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入，如：
- <meta http-equiv="refresh" content="5;http://www.apress.com"/>
2）default-style：指定页面优先使用的样式表，content属性的值必须是同一文档中某个style元素或link元素的title属性值；
3）content-type：另一种声明HTML页面所用字符编码的方法，如：
- <meta http-equiv="content-type" content="text/html charset=UTF-8"/>
style元素
- <style type="text/css">
- a{
- background-color: grey;
- color: white;
- padding: 0.5em;
- }
- </style>
上面为a元素设计了一个新样式。style元素可以出现在HTML文档中的各个部分，一个文档可以包含多个style元素，该元素可以用于为模板定义的样式（link元素导入）提供补充。
可以为style元素指定样式适用的媒体：
- <style media="screen AND (min-width:500px)" type="text/css">
- ......
- </style>
media属性中的screen是设备类型，可选值的范围包括：
1）all：将样式用于所有设备（默认值）；
2）aural：将样式用于语音合成器；
3）braille：将样式用于忙问设备；
4）handheld：将样式用于手持设备；
5）projection：将样式用于投影机；
6）print：将样式用于打印预览和打印页面时；
7）screen：将样式用于计算机显示器屏幕；
8）tty：将样式用于电传打字机之类的等宽设备；
9）tv：将样式用于电视机。
media属性中的(min-width:500px)指定特性，包括：
1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256
8）scan：指定电视的扫描模式，包括值progressive和interlace
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）
link元素
1）href：指定link元素指向的资源的URL；
2）hreflang：说明所关联资源使用的语言；
3）media：说明所关联的内容用于哪种设备，同style中的media属性；
4）rel：说明文档与所关联资源的关系类型，值的范围如下：
---alternate：链接到文档的替代版本，比如另一种语言的译本；
---author：链接到文档的作者；
---help：连接到当前文档的说明文档；
---icon：指定图标资源；
---license：链接到当前文档的相关许可证；
---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：载入外部样式表。
5）sizes：指定图标的大小；
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。
载入外部样式表
- <link rel="stylesheet" type="text/css" href="styles.css"/>
可以使用多个link元素载入多个外部资源。
为页面定义网站标志
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
浏览器载入HTML页面时，会加载并显示网站标志。
注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。
预先获取资源
- <link rel="prefetch" href="/page2.html"/>
注：目前不是所有浏览器都支持该功能。
script元素
1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用
定义文档内嵌脚本
- <script>
- document.write("This is from the script");
- </script>
默认情况下，浏览器在页面中一遇到脚本就会执行。
载入外部脚本库
- <script src="simple.js"></script>
推迟脚本的执行
- <script defer src="simple2.js"></script>
由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。
- <script async src="simple2.js"></script>
noscript元素
- <noscript>
- <h1>JavaScript is required!</h1>
- <p>You cannot use this page without JavaScript</p>
- </noscript>
还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。
- <noscript>
- <meta http-equiv="refresh" content="0;http://www.apress.com"/>
- </noscript>
转载于:https://my.oschina.net/zhanghaiyang/blog/593199
HTML5：理解head相关推荐
- 前端 python java三者哪个比较容易就业_前端和后端（Java）开发哪个难？，哪个学习容易一点？...
关于前端和后端java学习难以程度,以下是我的分享. 难易程度: web前端开发 起点低.容易入门,相对于Java来说,前端对于逻辑思维的要求比较低,所以学习前端也要容易一些,所以你不用担心学不会.很 ...
- 微信调试--微信内置浏览器为什么对pharser.js支持这么差？？？
微信内置浏览器对于html5的支持如何? 是否可以等同于webkit内核的浏览器?CSS3动画的支持程度怎么样? 添加评论 分享 按投票排序按时间排序 31 个回答 28赞同 反对,不会显示你的姓名 ...
- html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
- HTML5标签的语义认知和理解
HTML5标签的语义认知和理解 http://blog.csdn.net/shyleoking/article/details/7269137 转载于:https://www.cnblogs.com/ ...
- 深入理解html5系列-文本标签
文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在具体的开发中会有什么作用呢?相对于html,他又有怎样的新的定义与新理念在里面呢?为什么一些专家认为html5完全完成后,所有的工作 ...
- [html] 说说你对HTML5中pattern属性的理解
[html] 说说你对HTML5中pattern属性的理解 好像是判断input在输入时按下tab键跳转到下一个input的优先级 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚 ...
- [html] 说说你对HTML5中“一次编写，全体使用”的理解
[html] 说说你对HTML5中"一次编写,全体使用"的理解 这个有点组件化的意思? 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起 ...
- html5 客户端数据缓存机制,深入理解HTML5离线缓存机制
TML5提供了一种离线应用缓存机制,使得网页应用可以离线使用,这种机制在移动端浏览器上支持度非常广,所有版本的android和ios浏览器都能很好的支持.我们可以放心的使用该特性来加速移动端页面的访问 ...
- 深入理解html5:语义,标准与样式pdf,深入理解html5语义标准与样式.doc
深入理解html5语义标准与样式.doc 深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互)[美]布拉德福(Bradford,A.)[美]海涅(Haine,P.)著高京译ISB ...
- html5新特性的理解
1.标签语义化,例如:header,footer,nav,aside,article,section等,新增了很多表单元素:输入类型email,url等,除去了center等样式标签,还除去了有性能问 ...
最新文章
- 深度排序模型在淘宝直播的演进与应用
- 用了10多年的 Tomcat 居然有bug，这能忍？
- 108页报告一文看懂光刻机，看国产替代如何破局【附下载】
- ios系统 ipa文件 打包流程详解 及 常见问题处理
- 在Ubuntu中用anaconda快速安装opencv3
- git 提交_使用Git-Rebase合并多次提交
- 监理公司的核心竞争力
- Linux终端登录和退出Dockerhub
- 开盘暴涨193.9%，市值1.39万亿港元！快手正式上市
- 【Es】Elasticsearch 7.x 新的集群协调层
- 设计网站导航|强大且智能的设计师导航
- oracle+dblink不管用,oracle dblink问题
- 程序员如何巧妙学习算法技巧？
- 上下求索——基于双向推理的多跳知识库问答技术
- matlab串级控制系统设计,SVPWM在串级调速系统中的MATLAB仿真研究
- flex布局及flex实现常见的前端布局
- 数字图像隐写术之卡方分布
- SCI收录声学学科期刊31种
- hevc编码merge 模式
- Day6-2021.1.14 计算机网络面经从基础到总结+力扣 链表 题目的整理。