2.1 网页文档结构
1、文档基本结构
一个HTML文件最基本的文档结构，是由文档里的<html>、<head>、<title>、<body>等标签按照特定的顺序构成的。如：
<html>
<head>
<title>网页都应有标题</title>
</head>
<body>
网页的主体内容写在这里，将会在浏览器中显示。
</body>
</html>
2、语法规范
HTML自首次发布至今，经历过几次修改，在这个过程当中产生了两个具有代表性的版本，它们分别是HTML4.01和XHTML1.0。这两个版本的语法规范是不一样的，为了保证浏览器能够使用正确的语法规范解析HTML文档，需要在HTML文档中通过<!DOCTYPE>指明当前文档所采用的版本规范，如下图所示。
以上的写法不需要记忆，可借助开发工具实现，我们只要能明白其不同的写法所表达的含义就行。
综合上述两点，一个完整的HTML结构如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>HTML网页基本结构</title>
</head>
<body>
这是包含<!DOCTYPE >定义的完整HTML网页基本结构。
</body>
</html>
3、DOM模型
DOM模型即文档对象模型（Document Object Model）。它就是将一个HTML文档看成一棵由标签组成的如下图所示的树形结构。图中的每个结点都可以看作一个对象，它们的层次关系表示标签在网页中的嵌套关系，同一层结点的左右次序表示这些标签对象出现的先后顺序。
该模型在我们访问网页当中的标签元素时十分有用。
2.2 标签基础
2.2.1 标签语法
HTML提供了一套标签来描述网页内容，如head表示网页头部、body表示网页主体等。
HTML标签由一个独立单词或单词缩写构成，并且这些单词或单词缩写被要求放在"<>"中，比如<head>、<p>等，同时标签分为双标签和单标签。
1、双标签
双标签要有一个开始标签和一个结束标签，两个标签之间是要显示到浏览器中的内容，并且开始标签和结束标签要成对使用，标签里加"/"表示结束。
例如：
<p>
双标签表示一个段落，是<strong>paragragh</strong>缩写。
</p>
2、单标签
单标签没有结束标签，在标签结束位置中添加"/"表示自闭合。如果不规范的话，也可以不加"/"，但建议规范使用。
例如：<br/>（换行标签）、<hr/>（绘制横线的标签）、<img src="" alt=""/>（显示图片标签）、<input type="" />（输入标签，根据不同的type属性值，会得到不同的输入元素。比如，文本输入框、按钮等。）等。
3、属性
属性是标签的重要组成部分。通过属性可以对标签进行一些特殊的设置或对标签进行一些额外的补充，属性分为有值属性和无值属性，有值属性的属性值使用双引号包裹。
例如：
<img src="mypic.png" width="200px" height="200px" alt="我是图片">
<input type="text" disabled/>
写在标签内的部分都是属性，其中，src、width、height、alt、type等都是有值属性，disable是无值属性。
2.2.2 基本标签
1、元数据
元数据是指页面的相关信息，比如作者、关键字、描述等，通过<meta>标签进行设置。元数据不会显示在客户端，但是会被浏览器解析。<meta>标签只能位于文档头部（<head></head>之间），元数据总是以“名称/值”对的形式出现。例如：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="keywords" content="html,css,javascript,php">
<title>大鸟教程</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
<body>
学习元数据的使用
</body>
</html>
其中，<meta>标签的name属性记录的"名称/值"中的"名称"，如name="keywrods"，用户可以自定义描述网页信息的名称。
content属性记录"名称/值"中的"值"，如content="html,css,javascript"。定义与http-equiv或name属性相关的元信息。
http-equiv属性也是记录的"名称/值"中的"名称"，把content属性关联到HTTP头部。
2、表格
建立表格主要用到四个标签：<table>，<tr>，<th>，<td>。
<table>和</table>是表格标签，用来定义一个表格元素；
<tr>和</tr>为行标签，用来定义表格的一行；
<th>和</th>为单元格标签，用来定义表格的首行单元格，其中的文字以黑体显示，该行是可选的；
<td>和</td>为单元格标签，用于定义表格的单元格。它们必须放在<tr>和</tr>标签内。一行中有多少个单元格就有多少对<td>和</td>标签。
创建表格的语法格式为：
<table>
<tr>
<td>(<th>)首行首列单元格内容</td>>(/<th>)
……
<td>(<th>)首行第n列单元格内容</td>>(</th>)
</tr>
……
<tr>
<td>第m行首列单元格内容</td>
……
<td>第m行第n列单元格内容</td>
</tr>
</table>
3、表单
利用表单收集用户填写的数据，可以将这些数据提交至服务端永久性的存储，也可以做为查询条件获取服务端的数据，比如注册、登录等。HTML提供了<form>、<input>、<select>、<textarea>等相关表单标签。
表单由两部分组成，一是描述表单元素(控件)的HTML代码；二是客户端的脚本，如javascript程序。
语法格式:
<form name="form_name" method="method" action="url">
……
</form>
其中，name：定义表单的名称；
method：定义表单内容从浏览器传送到服务器的方式，通常有get和post两种传送方式。get采用非加密的明文形式，随URL链接向后端服务器传递信息，传送的内容一般较少，在浏览器的地址栏可观察得到。post则以加密对象的形式向后端服务器传递信息，在浏览器的地址栏观察不到，这样更加安全。
action：指定服务器端表单处理程序的位置，是表单与服务器联系的纽带。
4、列表
列表可以直观的展示数据之间的层级关系，HTML提供了有序列表、无序列表、自定义列表三种形式。
1）有序列表
与有序列表的相关标签有<ol>、<li>。创建有序列表的案例及效果如下图所示。
2）无序列表
与无序列表的相关标签有<ul>、<li>。创建无序列表的案例及效果如下图所示。
3）自定义列表
与自定义列表的相关标签有<dl>、<dt>、<dd>。创建自定义列表的案例及效果如下图所示。
5、图片
在页面上展示图片，可以让网页内容变得丰富多彩，HTML提供了<img>标签来展现图片。例如：
<img src="mypic.jpg" alt="实例图片">
6、链接
网站是由一个个网页链接起来的资源集合。通过链接可以将各个独立的网页关联起来，HTML提供了<a>标签来链接网页。例如：
<a href="http://www.sina.com" >新浪主页</a>
7、段落
一般来说，一篇文章是由若干段落组成的，HTML提供了<p>标签将文章内容划分为段落。例如：
<p>你可以在这里写上一首优美的诗。</p>
8、标题
HTML中提供了6级标题标签，分别是<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。不同级别的标题均显示为粗体，但字号大小不一样，上述6级标题的字号大小依次递减。标题的定义举例如下：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
9、实体
在HTML中，某些字符是预留的。例如，在HTML中不能直接使用小于号（<）和大于号（>）让它们显示在网页中，这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符，必须在HTML源代码中使用字符实体（character entities）。字符实体简单地理解为它们是一些特殊HTML字符。
字符实体有两种表示方式，它们都包括三个部分。其中，第一个部分与最后一个部分是相同的，只有第二个部分的表达方式不同。
第一种表示方式是由一个和号 (&)，一个实体名称，以及一个分号 (;)构成。
第二种表示方式是由一个和号 (&)，一个 # 和一个实体编号，以及一个分号 (;)构成。
常见符号实体如下：
2071
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
