04_创建HTML文档

本章节介绍最基础的HTML5元素: 文档元素和元数据元素

构建基本的文档结构

这些基础成份确定了HTML文档的轮廓以及浏览器的初始环境, 文档元素只有四个, 但是任何的HTML文档都需要这些元素

DOCTYPE

DOCTYPE元素独一无二, 自成一类, 每一个HTML文档都必须以DOCTYPE元素开头, 浏览器据此得知自己将要处理的是HTML内容, 及时学略DOCTYPE对于大多数浏览器来说也是可以的, 但是最好不要

这个元素告诉浏览器两件事情

1. 处理的是HTML文档

2. 用来标记文档内容的HTML所属的版本

该元素没有结束标签, 只需要在文档开头放置它唯一的标签即可

html

head

head元素包含着文档的元数据, 在HTML中, 元数据想浏览器提供了有关文档内容和标记的信息, 此外还可以包含脚本和对外部资源的引用,

每个HTML文档中都应该包含一个head元素, 而head元素中必须包含一个title元素

body

用元数据元素说明文档

元数据文档可以用来提供关于HTML文档的信息, 它们本身不是文档内容, 但提供了关于后面的文档内容的信息, 元数据元素应该放在head元素中

设置文档标题

title元素的作用是设置文档的标题或者名称, 浏览器通常将该元素的内容显示在其窗口顶部或标签页的标签上

每个HTML文档都应该有且只有一个title元素, 其开始标签和结束标签之间的文字在用户眼里应有实际意义, 至少用户应能区分各个浏览器窗口或浏览器的各个标签页, 并且知道那个显式的才是你的Web应用窗口

设置相对的URL解析基准

base元素可同来设置一个基准的URL, 让HTML文档中的相对链接在此基础上进行解析, 相对链接省略了URL中的协议, 主机和端口部分, 需要根据别的URL(要么是base元素中指定的URL, 要么是用以加载当前文档的URL)得出其完整形式, base元素还能设定链接在用户点击时的打开方式, 以及提交表单时浏览器如何反应

HTML文档中至少应该包含一个base元素, 它通常是head元素中位置最靠前的子元素之一, 以便随后元数据元素中的相对URL可以用上其设置的基准URL

使用href属性:

href属性指定了解析文档此后部分中的相对URL要用到的基准URL

提示: 如果不使用base元素, 或不用其href属性设置一个基准URL, 那么浏览器会将当前文档的URL设定为所有相对URL的解析基准,

使用target属性:

target属性的作用是告诉浏览器该如何打开一个URL, 这个属性的值代表着一个浏览上下文(browsing context)

用元数据说明文档

mate元素可以用来定义文档中的各种元数据, 它有多种不同的用法, 而且一个HTML文档中可以包含多个meta元素

注意每个meta元素只能用于一种用途, 如果在这些特性中想要使用不止一个, 那么就应该在head元素中添加多个meta元素

指定名/值元数据对:

mate元素的第一个用途是名/值对定义元数据, 为此需要用到其name和content属性

此处的name属性用来表示元数据的类型, 而content属性用来提供值

声明字符编码:

meta元素的另一种用途是声明HTML文档内容所用的字符编码

模拟HTTP标头字段

meta元素的最后一种用途是改写HTTP标头字段的值, 服务器和浏览器之间传输HTML属性时一般使用的就是HTTP, 服务器每条响应信息中都包含着一组项浏览器说明其内容的字段, meta元素可以用来模拟或者替换其中的三种标头字段

http-equiv属性的用途是指定所要模拟的标头字段名称, 字段值由content属性指定, 将标头字段refresh的值设置为5, 意思是让浏览器每隔5s就再次载入页面

提示: 如果在刷新间隔时间值后面加上一个分好再加上一个URL, 那么浏览器在指定事件之后将载入指定的URL

http-equiv属性有三个值可用

定义CSS样式

style元素可用来定义HTML文档内部样式

style元素可以出现在HTML文档中各个部分, 一个文档中可包含多个style元素, 因此不必把所有样式都塞进head部分, 在使用模版引擎生成页面的情况下这个特性很有帮助, 因为这样一来就可以用页面特有的样式为模版定义的样式提供补充

定义样式类型:

type属性可以用来将所定义的样式类型告诉浏览器, 但是浏览器支持的样式机制只有CSS一种, 所以这个属性值总是text/css

指定样式作用范围:

如果style元素中有scoped属性存在, 那么其中定义的样式只作用与该元素的父元素以及所有兄弟元素, 要是不使用scoped属性的话, 在HTML文档中任何地方使用style元素定义的样式都将作用于整个文档

指定样式适用的媒体:

media属性可用于表明文档在什么情况下应该使用该元素中定义的样式

浏览器负责解释设备归类, 有些设备类型在各种浏览器上解释比较一致, 但是有些就不太好说了, 因此在使用的时候需要先行查看下浏览器对所针对设备的支持情况

我们可以使用AND来组合设备和特性条件, 除了AND还有NOT, OR和逗号,

指定外部资源

link元素可用来在HTML文档和外部资源之间建立联系

link元素定义了六个局部属性, 这些属性中最重要的是rel, 它说明了HTML文档与link元素所关联资源的关系类型

为rel属性设定的值决定了浏览器对待link元素的方式

载入样式表:

为页面定义网站标志:

除了CSS样式表, link元素最常见的用处要算定义与页面联系在一起的图标, 各种浏览器处理这种图标的方式有所不同, 常见的做法是将其显示在相应的标签页标签上或者收藏夹中相应的项目千, 该图像名为favicon.ico

浏览器载入HTML页面的时候, 也会载入并显示网站标志

注意: 如果网站图标位于/favicon.ico(服务器的根目录), 就不必使用link元素, 大多数浏览器都会自动请求这个文件, 就算没有link元素也是如此

预先获取资源:

可以要求浏览器预先获取预计很快用到的资源

将rel属性设置为prefetch, 并且要求载入HTML的xxx页面, 为载入此资源做好准备

使用脚本元素

与脚本相关的元素有两个, 一个是script用于定义脚本并控制器执行过程, 另外一个是noscript用于规定在浏览器不支持脚本或者禁用脚本情况下的处理方法

script元素

script元素可以用来在页面中加入脚本, 方式有在文档中定义脚本和引用外部文件中的脚本两种, 最常用的脚本类型是JavaScript, 不过浏览器也的确支持其他的一些脚本语言

这个元素的所属类型因其用法而异, 唯一head元素中的script元素属于元数据元素, 位于其他元素中属于短语元素

定义文档内嵌脚本:

定义脚本最简单的方式就是内嵌定义, 不使用type属性的时候, 浏览器会假定使用的是JavaScript, 默认情况下浏览器在页面中一遇到脚本就会执行

载入外部脚本库:

可以把脚本放到单独文件中, 然后使用script元素载入HTML文档, 使用src属性引入这个脚本

提示: 设置了src属性的script元素不能含有任何元素, 不能用同一个script元素即定义内嵌脚本又引用外部脚本

src属性的值应为所要载入的脚本文件的URL, 可以使用相对URL, 也可以使用一个绝对URL

推迟脚本的执行:

可以用async和defer属性堆脚本的执行方式加以控制, defer属性告诉浏览器要等页面载入和解析完毕之后才能执行脚本, 要明白defer属性的好处, 需要认识他所要解决的问题

默认情况下, 浏览器一遇到script元素就会暂停处理HTML文档, 转而载入脚本文件并执行其中的脚本, 在脚本执行完毕之后浏览器才会继续解析HTML, 在这里可以使用defer属性解决此问题, 浏览器在遇到带有defer属性的script元素时候, 会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后

提示: defer属性只能用于外部脚本文件, 他对文档内部脚本不起作用

异步执行脚本:

async属性解决的另外一个问题, 浏览器遇到script元素时候的默认行为是加载和执行脚本的同时暂停处理页面, 各个script元素一次同步执行

作为处理脚本的默认方式, 同步顺序执行自有其意义所在, 不过有些脚本并不需要这样处理, 对这类脚本可以使用async属性提高其性能, 使用async属性后, 浏览将在继续解析HTML文档中其他元素,的同时加载和执行脚本, 如果运用得当, 可以大大提高加载性能

使用async属性的一个重要后果是页面中的脚本可能不再按照定义他们的次序执行, 因此如果脚本使用了其他脚本中定义的函数或者值的时候, 那就不宜使用async属性

noscript元素

noscript元素可以用来向禁用JavaScript或浏览器不支持JavaScript的用户显示一些内容

与script元素类型, noscript元素所属属性取决于它在文档中的位置

尽管现在JavaScript已经得到了广泛的支持, 但是仍然有一些专门用途的浏览器不支持它们, 而且就算浏览器支持JavaScript, 有些用户会禁用它

一个页面中可以加入多个noscript元素, 以便于需要脚本控制的各个公共区域对应, 在提供不依赖于JavaScript的备用标记内容时候尤为有用

除此之外还有一种选择是在浏览器不支持JavaScript时缓降器引至另外一个URL, 只需要在noscript元素中加入一个meta元素