第一章 创建HTML文档
1.1 HTML文档的基本结构
一个HTML文档是由一系列HTML元素和标签组成的。元素是HTML文档的重要组成部分，例如html（html文档开始标签）、title（文档标题）、和img（图像）等。元素名不区分大小写。HTML用标签来规定元素的属性及它在文档中的位置。
HTML标签分为单独标签和成对标签：
1单独出现的标签，其作用是在相应的位置插入元素，语法格式：
<元素名称/>
2成对出现的标签，大部分标签都是成对出现的，由开始标签（<元素名称>）和结束标签（</元素名称>）组成，语法格式：
<元素名称>要控制的元素</元素名称>
每个HTML标签中，还可以设置一些属性，用以控制HTML标签所建立的元素。这些标签都位于开始标签内。语法格式：
<元素名称 属性1="值1" 属性2="值2">要控制的元素</元素名称>
说明：每个HTML文档必须由DOCTYPE、html、head、body这4类元素组成
1.2 HTML文档类型
HTML版本繁多。浏览器需要通过DOCTYPE声明来识别HTML版本。
DOCTYPE由一个单独出现的标签组成。HTML文档应以DOCTYPE开始。
在HTML4和XHTML1.0时代，有好几种可供选择的DOCTYPE，每一种都会指明使用的HTML是严格型还是过渡型。
相比传统的HTML和XHTML文档中的DOCTYPE。HTML5则更为简单，所有浏览器都通用，不需要担心兼容性问题，只需记住这个即可：
<!DOCTYPE html>
<!DOCTYPE html>中的html，是告诉浏览器处理的是HTML文档。
注意：<!DOCTYPE html>必须在文档的第一行，前面不能有空格和空行。否则，可能会导致HTML代码在浏览器中无法被正确的解析处理。
1.3 利用HTML元素定义中文网页
DOCTYPE定义完之后，紧接着是定义html元素。html是HTML文档的根元素，所有的HTML元素都要放在<html>标签内。
<!DOCTYPE html>
<html lang="zh">
HTML code...
</html>
lang属性只有在HTML5中才需要指定。该属性定义了创建文档内容的人类语言类型，zh表示中文的意思。
1.4 利用title定义网页的标题
<html>标签中的HTML代码主要分成两个部分。第一部分是文档头，包含在<head>标签内，第二部分是文档正文，包含在<body>标签内。
<head>标签，通常包含文档标题、提供文档本身的信息，以及加入一些外部资源（例如：加载CSS样式表）。
除了标题和图片，<head>标签内的其他信息通常是不可见的。代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
</body>
</html>
head元素包含了meta和title两个元素，每个HTML文档头部都应该包含这两个元素。
- <meta charset="UTF-8">，charset设置文档的字符编码格式，此例中设置为UTF-8。如果不声明字符编码格式，网页可能会以乱码的方式呈现。
- <title>我是标题</title>，用来设置文档的标题。
<head>标签用于定义文档的头部，它是所有头部元素的容器，<head>中的元素可是引用脚本、指示样式表、提供元信息等。
注意：每个HTML文档都应该有且只有一对<title>标签，在这个标签对之间的文字在浏览器用户眼里应该具有实际意义，使用户能够根据文字区分不同的浏览器窗口或浏览器的各个标签页
1.5 利用meta元素定义页面元信息
<mata>标签位于文档的头部，定义了与文档相关联的元信息，这些元信息总是以“名称/值"得形式被成对进行定义的。
<meta>标签的name属性提供了“名称/值"对中的名称，content属性提供了“名称/值"对中的值。content属性始终要和name属性或http-equiv属性一起使用。<meta>属性如下表所示。
| 属性名 | 值 | 属性作用 |
| name | author | 把content属性关联到一个名称 |
| description | ||
| keywords | ||
| generator | ||
| revised | ||
| others | ||
| http-equiv | content-type | 把content属性关联到HTTP头部 |
| expires | ||
| refresh | ||
| set-cookie | ||
| scheme | text | 定义用于翻译content属性值的格式，用于指定要用来翻译属性值得方案。 |
一个页面可以定义多个meta标签，每个标签分别通过对应的name与content属性定义键值对，以定义不同的元信息。
关于meta的详细信息 参见第二章
1.6 利用head元素定义文档头部
我们可以把HTML文档分为文档头部和文档主体两个重要部分。其中，文档头部用head元素进行定义。head元素可以设定文档标题、提供元信息、指定样式表、引用脚本等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我是标题</title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<!--这里是文档的内容-->
</body>
</html>
1.7 利用body元素定义文档主体
body元素定义定义文档主体，即用户可以在页面上直接看到的内容，基本包含文档呈现的所有内容，例如文本，超链接，图像，表格等。
1.8 利用base元素定义基底网址
URL（Uniform Resource Locator，统一资源定位符），通常称为网页地址。它包含关于文件存储位置和浏览器应该如何处理它的信息。互联网上的每一个文件都有唯一的URL。
URL路径分为绝对路径和相对路径。
- 绝对路径：显示文件的完整路径，包括模式、服务器名称、完整路径和文件名本身。
- 相对路径：相对于当前HTML文档所在目录或站点根目录的路径。
HTML文档通过基底网址，把当前HTML文档中的相对路径转换绝对路径。通常，通过基底网址base元素设置HTML文档的绝对路径，该元素只能出现在head元素中。
例如：在HTML文档<head>中设置base基底网址：
<base href="http://www.baidu.com">
在<body>中设定一个相对URL：
<a href="about.html">关于我们</a>
这个<a href="about.html">关于我们</a>的相对URL将转变成绝对URL：
http://www.baidu.com/about.html
1.9 定义网页在不同显示媒体下的样式
HTML为网页构建基本结构，定义网页的内容。CSS（Cascading Style Sheet，层叠样式表）则定义网页的外观，为文档元素设置可视化的样式，如尺寸、颜色、背景、边框等。
style元素用于包含文档的内嵌式样式表。语法格式：
<style type="text/css">
style code...
</style>
style元素有两个常用的属性，type和media。
- type属性指定样式类型，浏览器支持的样式机制只有CSS一种，所以这个属性的值总是text/css。
- mdeia属性指定样式适应的媒体，表明文档在什么情况下使用该元素定义的样式
media的值见下表：
| 值 | 描述 |
| screen | 计算机屏幕（默认值）。 |
| tty | 电传打字机以及使用等宽字符网格的类似媒介。 |
| tv | 电视类型设备（低分辨率、有限的屏幕翻滚能力）。 |
| projection | 放映机。 |
| handheld | 手持设备（小屏幕、有限的带宽）。 |
| | 打印预览模式 / 打印页。 |
| braille | 盲人用点字法反馈设备。 |
| aural | 语音合成器。 |
| all | 适合所有设备。 |
注意：样式信息还可通过<link>标签定义外部样式表来指定。通常情况下，都是通过<link>标签来引入的。
1.10 指定外部资源的link元素
HTML文档指定外部样式表时常常使用<link>标签。<link>标签用于定义文档与外部资源的关系，最常见的用途就是链接样式表，例如：
<link rel="stylesheet" type="text/css" href="../css/index.css"/>
<link>元素只存在<head>标签内部。
link可选的属性如下表：
| 属性 | 值 | 描述 |
| charset | char_encoding | 规定被链接文档的字符编码方式。 HTML5中不支持 |
| href | URL | 规定被链接文档的位置 |
| hreflang | language_code | 被链接文档中文本的语言 |
| media | media_query | 被链接文档将被显示在什么设备上。（和上表中的media一样） |
| rel | alternate author help icon licence next pingback prefetch prev search sidebar stylesheet tag | 当前文档与被链接文档之间的关系 |
| rev | reversed relationship | HTML5中不支持 |
| size | heightxwidth any | 规定被链接资源的尺寸。仅适用于 rel="icon"。 |
| target | _blank _self _top _parent frame_name | HTML5中不支持 |
| type | MIME_type | 规定被链接文档的 MIME 类型。 |
1.11 添加网站logo
使用<link>标签为网站添加logo：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
注意：图标必须是ico格式的图片，JPEG、PNG等其他格式的图片不能生效
1.12 预先获取资源Link Prefetch
预先获取资源也就是预加载，这是浏览器提供的一个技巧，目的是让浏览器在空余时间下载或预读取一些文档资源，用户可以在后续操作中访问这些资源。浏览器在加载完当前页面后，会在后台静悄悄的加载指定的文档，并把它们存储再缓存里。
预加载我们依然是使用<link>标签来实现，将link的rel属性设置为prefetch。
<!--预加载整个页面-->
<link rel="prefetch" href="http://www.baidu.com" />
<!--预加载一个图片-->
<link rel="prefetch" href="http://www.baidu.com/images/i.png" />
注意：预加载（Link Prefetch）不能跨域工作，包括跨域Cookies。并且预加载有可能导致网站访问量统计不准确，因为有些预加载到浏览器的页面用户可能并未真正访问。
1.13 利用script元素定义客户端脚本
通过script元素既可以创建脚本语句，也可以通过其src属性指向外部脚本文件。
script元素有3个常用属性，分别是type、src、charset。
- type属性指定外部脚本的MIME类型，对于JavaScript，其MIME类型是text/javascript。
- src属性用于指定外部脚本文件的URL。
- charset属性用于规定外部文件中使用的字符编码。如果外部文件中的字符编码与主文件中的编码方式不同，就要用到charset属性。
script元素既可以放在head中，也可以body中。如果放在head中，则意味着必须等到JavaScript代码下载，解析和执行完成以后，才能开始呈现页面的内容。这对于有大量JavaScript代码的网页来说，无疑会导致浏览器呈现内容时出现明显的延迟，为了避免这个问题，一般会把全部的JavaScript代码放到body元素中，放到所以内容的最后。
1.14 添加注释
HTML注释标签语法如下：
<!--这里是注释内容，可以是单行注释，多行注释。注释不会在浏览器中显示-->
除了普通HTML注释之外，还有条件注释。IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。
<!--[if IE]>这里是只有IE可读的IE条件注释 <![endif]-->
通过“比较操作符"可以更灵活的对IE版本进行控制，用法是在IE前面加上“比较操作符"。合法的操作符如下：
- lte：Less than or equal to的简写，小于或等于。
- lt：Less than的简写，小于。
- gte：Greater than or equal to的简写，大于或等于。
- gt：Greater than的简写，大于。
- ！：不等于。
<!--[if !IE]> 如果不是IE <![endif]-->
<!--[if lte IE 7]> 如果版本小于IE 7 <![endif]-->
<!--[if gt IE 7]> 如果版本大于IE 7 <![endif]-->
该方法感觉并不实用，实际实用总是出现问题
重要提示 自IE10起，标准模式不再支持条件注释。而是采用特征检测给浏览器不支持的功能来提供备用策略。
1.15 载入外部脚本库
使用script元素的src属性可以加载外部脚本。
<script type="text/javascript" src="index.js"></script>
注意：无论引用几个外部JavaScript文件，浏览器会按照<script>的先后顺序依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析
1.16 延迟脚本执行
为了防止JavaScript脚本阻止浏览器进程，我们往往需要等整个页面加载完成后再加载JavaScript脚本。常用的方法是将<script>标签放置到body内所有节点之后。
延迟JavaScript脚本执行，可以使用setTimeout这个函数。该方法用于在指定的毫秒数后调用函数或计算表达式。
setTimeout("alert('5秒')",5000);
注意：setTimeout()只执行一次。如果要多次掉用，请使用setInterval()。
1.17 异步执行脚本
1.18 利用noscript元素实现脚本的替代内容
noscript元素用来定义在脚本未被执行时的替代内容（文本）。如果浏览器支持脚本，则noscript元素中的文本将不会被显示。
<noscript> 该浏览器不支持脚本 </noscript>
1.19 HTML属性
HTML属性一般都出现在HTML标签中，HTML属性是HTML标签的一部分。属性值一定要在双引号中，标签可以有多个属性，属性由属性名和属性值成对出现。
HTML属性语法如下：
<标签名 属性1="值1" 属性2="值2"></标签名>
1.20 为元素指定类或ID名称
一个HTML文档由若干个标签组成，这些标签可以通过类或ID进行定义，以便区分。便于设置样式表以及JavaScript脚本调用。
<p class="myclass">定义类</p>
<p id="myid">定义ID</p>
1.21 为元素添加title属性
title属性通常用在图像、超链接或者按钮上以增加可描述性的文字，提供额外的信息。
title属性可以用在除了base、basefont、head、html、meta、param、script、title之外的所有标签中。
title属性并不是必须的，只是为标签增加额外的描述性文字。当为HTML标签添加title属性时，多数浏览器会将title属性的值作为悬浮的提示信息出现。鼠标移动到目标元素上，即可以显示悬浮的提示文字。
一些可以发音的浏览器可以说出title的属性值。在没有其他影响的情况下，建议使用title属性。
282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
