1-构筑基本的文档结构
1.1 DOCTYPE元素
DOCTYPE元素 | |
元素类型 | 无 |
允许具有的父元素 | 无 |
局部属性 | 无 |
内容 | 无 |
标签用法 | 单个开始标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | HTML4中要求要有的DTD 已不再使用 |
习惯样式 | 无 |
例子：
<!--这个元素告诉浏览器两件事情： 第一， 它处理的是HTML文档；第二，用来标记文档内容的HTML所属的版本-->
<!DOCTYPE html>1.2 html元素
html元素 | |
元素类型 | 无 |
允许具有的父元素 | 无 |
局部属性 | manifest (详见第40章） |
内容 | head元素和body元素各一 |
标签用法 | 开始标签和结束标签、内含其他元素 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | manifest属性是HTML5 中新增的。HTML4版本中的属性已不再使用 |
习惯样式 | html { display: block; } html:focus { outline: none;} |
例子：
<!DOCTYPE HTML>
<!--html元素更恰当的名称是根元素，它表示文档中HTML部分的开始-->
<html>
</html>1.3 head 元素
head元素 | |
元素类型 | 无 |
允许具有的父元素 | html |
局部属性 | 无 |
内容 | 必须有一个title元素，其他元数据元素可有可无 |
标签用法 | 开始标签和结束标签。内含其他元素 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | 无 |
例子：
<!DOCTYPE HTML>
<html>
<!--head元素包含着文档的元数据。在HTML 中， 元数据向浏览器提供了有关文档内容和标记的
信息， 此外还可以包含脚本和对外部资源（ 比如css样式表）的引用-->
<head>
</head>
</html>1.4 body元素
body元素 | |
元素类型 | 无 |
允许具有的父元素 | html |
局部属性 | 无 |
内容 | 所有短语元素和流元素 |
标签用法 | 开始标签和结束标签 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | alink 、background 、bgcolor 、link 、margintop 、marginbottom 、marginleft 、marginright 、marginwidth 、text和vlink属性已不再使用。这些属性的效果可用css实现 |
习惯样式 | body { display: block; margin: 8px; } body:focus { outline: none; } |
例子：
<!DOCTYPE html>
<html>
<head>
</head>
<!--文档的内容包装在body元素中-->
<body>
</body>
</html>2 用元数据元素说明文档
2.1 设置文档标题（title元素）
title元素 | |
元素类型 | 元数据 |
允许具有的父元素 | head |
局部属性 | 无 |
内容 | 文档标题或对文档内容言简意骸的说明 |
标签用法 | 开始标签和结束标签。内含文字 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | title { display: none; } |
例子：
<!DOCTYPE HTML>
<html>
<head>
<!-- 使用title元素设置文档标题和名称-->
<title>Example</title>
</head>
</html>2.2 设置相对URL的解析基准（base元素）
base元素 | |
元素类型 | 元数据 |
允许具有的父元素 | head |
局部属性 | href 、target |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | 无 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<base href="http://titan/listings/" target="_blank"/><!--设置好URL后在下面的a元素就会用到这里的路径-->
</head>
<body>
<!--浏览器就会把基准URL和相对URL拼接成完整的URL: http://titan/listings/page2. htm1 。-->
<a href="page2.html">Page 2</a><!--这里会使用上面base的路径-->
</body>
</html>2.3 用元数据说明文档（meta元素）
meta元素 | |
元素类型 | 元数据 |
允许具有的父元素 | head |
局部属性 | name 、content 、charset和http-equiv |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | charset属性是HTML5 中新增的。在HTML4 中， http-equiv属性可以有任意多个不同值。而在HTML5 中情况有所不同，只有本小节所说的值才能使用。HTML4 中的scheme属性在HTML5 中已不再使用。此外，现在已不再使用meta元素来指定网页所用的语言（本章稍后会介绍HTML5 中的做法） |
习惯样式 | 无 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<!--1、在meta元素中用名／值对定义元数据-->
<meta name="author" content="Adam Freeman" />
<!--
供meta 元素使用的预定义元数据类型
application name 当前页所属Web应用系统的名称
author 当前页的作者名
description 当前页的说明
generator 用来生成HTML的软件名称（通常用于以Ruby on Rails 、ASP.NET等服务器端框架生成HTML页的情况下）
keywords 一批以逗号分开的字符串，用来描述页面的内容-->
<!--2、声明字符编码-->
<meta charset="utf-8" />
<!--3、模拟HTTP标头文字-->
<!--http-equiv属性的用途是指定所要模拟的标头字段名称，字段值则由content属性指定。此例
将标头字段refresh 的值设置为5, 其作用是让浏览器每隔5秒就再次载入页面。-->
<meta http-equiv="refresh" content="5" />
<!--
meta元素的http-equiv属性允许使用的值
refresh 以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入。如<meta http-equiv="refresh" content="5" http://apress.com" />
default-style 指定页面优先使用的样式表。对应的content属性值应与同一文档中某个style元素或link元素的title属性值相同
content-type 这是另一种声明HTML页面所用字符编码的方法。如<meta http-equiv="content-type" content="text/html charset=UTF-8" />
-->
</head>
<body>
</body>
</html>2.4 定义css样式（style元素）
style元素 | |
元素类型 | 无 |
允许具有的父元素 | 任何可包含元数据元素的元素，包括head 、div 、noscript 、section 、article 、aside |
局部属性 | type 、media 、scoped |
内容 | css样式 |
标签用法 | 开始标签和结束标签。内含文字 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | scoped展性为HTML5 中新增 |
习惯样式 | 无 |
例子：
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<!--使用style元素指定样式
type属性指定样式类型
scoped属性指定样式作用范围（尚无主流浏览器支持style元素的scoped属性）
media属性指定样式适用的媒体-->
<style media="screen AND (max-width:500px)" type="text/css">
a {
background-color: grey;
color: white;
padding: 0.5em;
}
</style>
<style media="screen AND (min-width:500px)" type="text/css">
a {
color: Red;
font-style: italic;
}
</style>
<!--供style元素的media属性用的规定设备值
all 将样式用于所有设备（默认值）
aural 将样式用于语音合成器
braille 将样式用于盲文设备
handheld 将样式用于手持设备
projection 将样式用于投影机
print 将样式用于打印预览和打印页面时
screen 将样式用于计算机显示器屏幕
tty 将样式用于电传打字机之类的等宽设备
tv 将样式用于电视机-->
<!--供style元素的media属性使用的特性 AND（可以是NOT和OR）后面的值
width height 指定浏览器窗口的宽度和高度。单位为px, 代表像素
device-width 指定整个设备（而不仅仅是浏览器窗口）的宽度和高度。单位为px, 代表像素
device-height
resolution 指定设备的像素密度。单位为dpi ( 点瑛寸）或dpcm( 点／厘米）
orientation 指定设备的较长边朝向。支持的值有portrait和landscape。该特性没有限定词
aspect-ratio 指定浏览器窗口或整个设备的像素宽高比。其值表示为像素宽度与像素高度的比值
device-aspect-ratio
color monochrome 指定彩色或黑白设备上每个像素占用的二进制位数
color-index 指定设备所能显示的颜色数目
scan 指定电视的扫描模式。支持的值有progressive和interlace。该特性没有限定词
grid 指定设备的类型。网格型设备使用固定的网格显示内容，例如基于字符的终端和单行显示的寻呼机。支持的值有0和l ( l 代表网格型设备） 。该特性没有限定词-->
</head>
<body>
</body>
</html>2.5 指定外部资源（link元素）
link元素 | |
元素类型 | 元数据 |
允许具有的父元素 | head 、noscript |
局部属性 | href 、rel 、hreflang 、media 、type 、sizes |
内容 | 无 |
标签用法 | 虚元素形式 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 新增了sizes属性。原来的charset 、rev和target属性在HTML5 中已不再使用 |
习惯样式 | 无 |
例子：
<!--
link元素的局部属性
href 指定link元素指向的资源的URL
hreflang 说明所关联资源使用的语言
media 说明所关联的内容用于哪种设备。该属性使用的设备和特性值与《7.2.4 定义css样式（style元素）》中介绍的相同
rel 说明文档与所关联资源的关系类型
sizes 指定图标的大小。本章后面有一个用link元素载人网站标志的例子
type 指定所关联资源的MlME类型，如text/css 、image/x-icon
link元素的rel属性值选编
alternate 链接到文档的替代版本，比如另一种语言的译本
author 链接到文档的作者
help 链接到当前文档的说明文档
icon 指定图标资源，参见下面所示
license 链接到当前文档的相关许可证
pingback 指定一个回探( pingback) 服务器。从其他网站链接到博客的时候它能自动得到通知
prefetch 预先获取一个资源
stylesheet 载入外部样式表
-->
<!DOCTYPE HTML>
<html>
<head>
<!--用link元素载入外部样式表-->
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--用link元素添加网站标志-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!--预先获取关联的资源（只有Firefox 支持link元素的预先获取功能）-->
<link rel="prefetch" href="/page2.html" />
</head>
<body>
</body>
</html>3 使用脚本元素
3.1 script 元素
script元素 | |
元素类型 | 元数据/短语 |
允许具有的父元素 | 可以包含元数据或短语元素的任何元素 |
局部属性 | type 、src 、defer 、async 、charset |
内容 | 脚本语言语句。用于导入外部JavaScript库时元素没有内容 |
标签用法 | 必须使用开始标签和结束标签。不能使用自闭合标签，就算引用外部JavaScript库也是如此 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 在HTML5中type属性可有可无， async属性是新增的， HTML中的属性language在HTML5中已不再使用 |
习惯样式 | 无 |
例子：
<!--
script元素的局部属性
type 表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略
src 指定外部脚本文件的URL, 参见后面的例子
defer 设定脚本的执行方式，参见后面的例子。这两个属性只能与src属性一同使用
async
charset 说明外部脚本文件所用字符编码，该属性只能与src属性一同使用
-->
<!DOCTYPE html>
<html>
<head>
<!--1. 定义文档内嵌脚本-->
<script>
document.write("This is from the script");
</script>
<!--2 载入外部脚本库，用src属性载入外部脚本-->
<script src="simple.js"></script>
<!--3. 推迟脚本的执行，使用带defer属性的script元素
浏览器在遇到带有defer属性的script元素时，会将脚本的加载和执行推迟到HTML文档中所有元素都已得到解析之后-->
<script defer src="simple2.js"></script>
<!--4 异步执行脚本，使用async属性
使用async属性的一个重要后果是页面中的脚本可能不再按定义它们的次序执行。因此如果
脚本使用了其他脚本中定义的函数或值，那就不宜使用async属性-->
<script async src="simple2.js"></script>
</head>
<body>
</body>
</html>3.2 noscript元素
noscript元素 | |
元素类型 | 元数据／短语／流 |
允许具有的父元素 | 任何可以包含元数据元素、短语元素或流元素的元素 |
局部属性 | 无 |
内容 | 短语元索或流元素 |
标签用法 | 开始标签和结束标签都需要 |
是否为HTML5新增 | 否 |
在HTML5中的变化 | 无 |
习惯样式 | 无 |
例子：
<!DOCTYPE html>
<html>
<head>
<!--使用noscript元素，当脚本被禁用时显示-->
<noscript>
<h1>Javascript is required!</h1>
<p>You cannot use this page without Javascript</p>
</noscript>
<!--用noscript元素重定向浏览器，浏览器不支持JavaScript时将其引至另一个URL-->
<noscript>
<meta http-equiv="refresh" content="0; http://www.apress.com" />
</noscript>
</head>
<body>
</body>
</html>
