HTML5-526互联

一、初识HTML5

1、HTML

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

HTML 4.01的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。

概念1：超文本

所谓的超文本，有两层含义：

（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。

（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。

概念2：标记语言

HTML不是一种编程语言，是一种描述性的标记语言。这主要有两层含义：

（1）标记语言是一套标记标签。比如：标签<a>表示超链接、标签<img>表示图片、标签<h1>表示一级标题等等，它们都是属于 HTML 标签。

说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。

（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。

2、HTML的专有名词

网页：由各种标记组成的一个页面就叫网页。
网站：在因特网上根据一定的规则，使用 HTML 等语言制作的用于展示特定内容相关的网页集合。
主页（首页）：一个网站的起始页面或者导航页面。
标记：比如<p>称为开始标记，</p>称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
元素：比如<p>内容</p>称为元素.
属性：给每一个标签所做的辅助信息。
XHTML：符合XML语法标准的HTML。
DHTML：动态的。javascript + css + html合起来的页面就是一个 DHTML。
HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。

3、HTML文档的后缀名

.html
.htm

以上两种后缀名没有区别，都可以使用。

4、常用浏览器

微软IE和Edge、火狐（Firefox）、谷歌（Chrome）、苹果Safari和欧朋Opera，平时称为五大浏览器。

浏览器内核（渲染引擎）

负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

5、HTML5

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

6、HTML5 是如何起步的？

HTML5 是 W3C 与 WHATWG 合作的结果，WHATWG指Web Hypertext Application Technology Working Group（网页超文本应用技术工作小组）。

WHATWG致力于web表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

7、W3C

聊到网页我们就不得不提起一个组织：W3C。

W3C：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。

W3C组织就类似于现实世界中的联合国。W3C就是网页世界的老大，规则都是由其来定的。所以我们在写网页的时候就需要遵守他的规则。

为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。

规则并不是用于约束小白的，而是用于约束高手的，因为高手会的太多，掌握太多他人所不会的。为了方便管理，所以需要规则加以约束。

8、Web标准

Web标准：制作网页要遵循的规范。

Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。

Web标准包括三个方面：

结构标准（HTML）：用于对网页元素进行整理和分类。
表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
行为标准（JavaScript）：用于定义网页的交互和行为。

根据上面的Web标准，可以将 Web前端分为三层：

HTML（HyperText Markup Language）：超文本标记语言。从语义的角度描述页面的结构。相当于人的身体组织结构。
CSS（Cascading Style Sheets）：层叠样式表。从审美的角度美化页面的样式。相当于人的衣服和打扮。
JS：JavaScript。从交互的角度描述页面的行为。相当于人的动作，让人有生命力。

9、第一个HTML5文档

下面是我们写的第一个简单的HTML5文档。

我们新建一个文本文件，将扩展名改为.html，主文件自己定义，我们这里定义为：第一个网页.html

右键使用记事本或其他文本编辑工具（我使用的是Sublime Text）打开，输入以下文件内容如下：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="utf-8" />
　　<title>第一个HTML5文档</title>
</head> 
<body>
　　道虽迩，不行不至。事虽小，不为不成。——《荀子·修身》
</body> 
</html>

注意：对于中文网页需要使用 <meta charset="utf-8"> 声明编码，否则会出现乱码。

现在直接双击这个文件就可以用浏览器打开了。

微软IE浏览器

谷歌Chrome浏览器

二、HTML结构

观察HTML文档的层级结构，我们发现是这样一种结构：

1、文档声明<!DOCTYPE>

任何一个标准的HTML页面，第一行一定是一个以<!DOCTYPE ……>开头的语句。

这一行，就是文档声明，即 DocType Declaration，简称DTD。

DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

<!DOCTYPE> 声明必须位于HTML5文档中的第一行，使用非常简单：

<!DOCTYPE html>

在HTML4.01中写作：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

可以看出，HTML5对于文档声明做了极大的简化。

2、根标签<html>

<html>标签可告知浏览器其自身是一个 HTML 文档。

<html>与</html>标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。

文档的头部由 <head> 标签定义，而主体由 <body> 标签定义。

我们可以给<html>标签指定lang属性，来设置语言。

<html lang="zh-CN">
  <head>
    <title>标题</title>
  </head>
  <body>
  </body>
</html>

lang属性用于指定页面语言，最常见的语言类型有两种：

en：定义页面语言为英语。
zh-CN：定义页面语言为中文。

注意：即使 html 元素是文档的根元素，它也不包含 DOCTYPE 元素。DOCTYPE 元素必须位于 html 元素之前。

HTML 标签是由尖括号包围的关键词，例如 <html>。

HTML 标签通常是成对出现的，例如 <html> 和 </html> ，我们称为双标签。

双标签对中的第一个标签是开始标签，第二个标签是结束标签。

有些特殊的标签必须是单个标签（极少情况），例如 <br />，我们称为单标签。

标签的关系

双标签关系可以分为两类：包含关系和并列关系

包含标签：

<head>
    <title>  </title>
</head>

并列关系：

<head>
</head>
<body>
</body>

3、头标签<head>

html5 的比较完整的骨架：

<!DOCTYPE html>
<html>
  <head>
    <!-- <meta>标签 提供有关页面的基本信息 -->
    <!-- 字符集用meta标签中的`charset`定义，charset就是character set（即“字符集”），即网页的编码方式。 -->
    <meta charset="UTF-8" />
    <!-- http-equiv类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确和精确地显示网页内容。 -->
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <!-- Author标注作者  -->
    <meta name="Author" content="lihuawei" />
    <!-- Keywords是定义关键字，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。 -->
    <meta name="Keywords" content="网页,HTML" />
    <!-- 只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。 -->
    <meta name="Description" content="这是我们的第一个网页" />
    <!-- `width=device-width` ：表示视口宽度等于屏幕宽度。viewport 这个知识点，初学者还比较难理解，在学WEB移动端的时候会用到 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 用于设置网页标题 -->
    <title>Document</title>
  </head>
  <!-- <body>标签 用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。 -->
  <body>
    我们的第一个网页
  </body>
</html>

头标签内部的常见标签有：

<title>：指定整个网页的标题，在浏览器最上方显示。
<base>：为页面上的所有链接规定默认地址或默认目标。
<meta>：提供有关页面的基本信息。
<style>：用于为HTML文档定义样式。
<link>：定义文档与外部资源的关系。

一个HTML文档只能含有一对<head>标记，绝大多数文档头部包含的数据都不会真正作为内容显示在页面中。

1.<meta>标签：

meta表示“元”。“元”配置，就是表示基本的配置项目。

常见的几种<meta>标签如下：

（1）字符集 charset：

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

字符集用meta标签中的charset定义，charset就是character set（即“字符集”），即网页的编码方式。

字符集（Character set）是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。

上面这行代码非常关键，是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。

utf-8是目前最常用的字符集编码方式，是针对Unicode的一种可变长度字符编码，它可以用来表示Unicode标准中的任何字符，是优先采用的编码。

常用的字符集编码方式还有gbk和gb2312等。

（2）视口 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

width=device-width ：表示视口宽度等于屏幕宽度。

viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。

（3）关键词 Keywords：

<meta name="Keywords" content="新闻,邮箱,游戏,培训,体育,娱乐,亚运,论坛,短信" />

这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。

（4）页面描述 Description：

只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做SEO（search engine optimization，搜索引擎优化）。

<meta name="Description" content="做一名优秀的人民教师。" />

（5）刷新 Refresh：

3秒之后，自动刷新/跳转到百度页面。

<meta http-equiv="Refresh" content="3;http://www.baidu.com">

2.<style>标签

内嵌样式标签

语法格式：

<style 属性="属性值">样式内容</style>

这里最常用的属性是type，相应的属性值是text/css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>style标记的使用</title>
        <style type="text/css">
            h2 {
                color: red;
            }

            p {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h2>设置h2标题为红色字体</h2>
        <p>设置p段落为蓝色字体</p>
    </body>
</html>

3.<link>标签

引用外部文件标记

语法格式：

<link 属性="属性值" />

例如，

<link rel="stylesheet" type="text/css" href="style.css" />

上述代码，标识引用当前HTML5页面所在文件夹中的“style.css”样式表文件。

4、主体标签<body>

<body>标签定义了 HTML 文档的主体。

这个元素拥有一个开始标签 <body> 以及一个结束标签 </body>。

<body> 标签的属性有：

bgcolor：设置整个网页的背景颜色。
background：设置整个网页的背景图片。
text：设置网页中的文本颜色。
leftmargin：网页的左边距。IE浏览器默认是8个像素。
topmargin：网页的上边距。
rightmargin：网页的右边距。
bottommargin：网页的下边距。

<body> 标签另外还有一些属性，这里用个例子来解释：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>第一个HTML5文档</title>
</head> 
<body link="red" alink="blue" vlink="green">
    <a href="#">点我点我</a>
    <br>
    哈哈
</body> 
</html>

上方代码中，当我们对“点我点我”这几个字使用超链接时，

link属性：表示默认显示的颜色
alink属性：表示鼠标点击但是还没有松开时的颜色
vlink属性：表示点击完成之后显示的颜色

一个HTML文档只能含有一对<body>标记，且<body>标记必须在<html>标记内，位于<head>头部标记之后，与<head>标记是并列关系。

三、HTML规范

1、所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例： <h1><font></font></h1>

2、标记不区分大小写。

3、所有的属性值必须加引号。 <font color="red"></font>

　　HTML5允许属性值不使用单引号，但是我们建议大家必须加引号。

4、所有的属性必须有值。 <hr noshade="noshade"> 、 <input type="radio" checked="checked" />

　　HTML5允许部分属性值省略，但是我们建议大家初学阶段都写出来。　　

<input type="checkbox" checked />
<input type="text" readonly/>

5、HTML对换行不敏感，对tab不敏感

HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。

也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。

6、空白折叠现象

HTML中所有的文字之间，如果有空格、换行、tab都将被折叠为一个空格显示。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>第一个HTML5文档</title>
</head> 
<body link="red" alink="blue" vlink="green">
    <a href="#">点我点我</a>
    <br>
    哈哈
            我喜
            欢编

                            程
</body> 
</html>

效果：

7、所有的标签都必须闭合。

双标签：<span></span>
单标签：<br> 建议写成 <br /> <hr> 建议转成 <hr />，还有<img src=“URL” />

标签不闭合的结果是灾难性的。

由于<title>标签没有封闭，导致了“第一个HTML5文档”后面的所有内容都被误认为是标题。

四、标记的属性

属性是 HTML 标记提供的附加信息。

1、HTML 属性

HTML 标记可以设置属性
属性可以在标记中添加附加信息
属性一般描述于开始标签
属性总是以键/值对的形式出现，比如：name="value"。

例如，HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：

<a href="http://www.baidu.com">这是一个链接</a>

2、使用引号引用属性值

属性值应该始终被包括在引号内。

双引号是最常用的，不过使用单引号也没有问题。

注意: 在某些个别的情况下，如果属性值本身就含有双引号，那么您必须使用单引号，例如：name='李华伟的"博客园"文章'

3、推荐使用小写属性

属性和属性值对大小写不敏感。

不过，万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。

而新版本的 HTML 要求使用小写属性。

4、HTML 属性参考手册

查看完整的HTML属性列表: HTML 参考手册。

下面列出了适用于大多数 HTML 标记的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

更多标准属性说明： HTML 标准属性参考手册.

五、HTML文本控制标记

1、标题<h1>...<h6>

标题使用<h1>至<h6>标记进行定义。<h1>定义最大的标题，<h6>定义最小的标题。具有align属性，属性值可以是：left、center、right。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    <h1>这是一个H1标题</h1>
    <h2>这是一个H2标题</h2>
    <h3>这是一个H3标题</h3>
    <h4>这是一个H4标题</h4>
    <h5>这是一个H5标题</h5>
    <h6>这是一个H6标题</h6>
</body>
</html>

效果：

注意：浏览器会自动地在标题的前后添加空行。

标题很重要

请确保将【 HTML 标题】标记只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。

搜索引擎使用标题为我们的网页的结构和内容编制索引。

因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。

应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

如果想让标题文字右对齐或者居中对齐，就需要使用align属性设置对齐方式。其取值如下：

left：设置标题文字左对齐（默认）。
center：设置标题文字居中对齐。
right：设置标题文字右对齐。

2、段落<p>

段落，是英语“paragraph”的缩写。

可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。

就如同我们平常写文章一样，整个网页也可以分为若干个段落。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>这是一段。</p>
    <p>这是另一段。</p>
    <p>又来一段。</p>
</body>
</html>

效果：

注意：浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

属性：

align="属性值"：对齐方式。属性值包括left、center、right。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>这是一段。</p>
    <p align="center">这是另一段。</p>
    <p align="right">又来一段。</p>
</body>
</html>

效果：

一定不要忘记结束标签

虽然即使忘了使用结束标签，大多数浏览器也会正确地将 HTML 显示出来：

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>这是一段。
    <p>这是另一段。
    <p>又来一段。
</body>
</html>

上面的例子在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生意想不到的结果和错误。

HTML标签是分等级的，HTML将所有的标签分为两种：

文本级标签：p、span、a、b、i、u、em。文本级标签里只能放文字、图片、表单元素。（a标签里不能放a和input）
容器级标签：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。

我们要牢牢记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。

错误写法：例如，尝试把 h 放到 p 里。代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落</title>
</head>
<body>
    <p>
        我是一个小段落
        <h1>我是一级标题</h1>
    </p>
</body>
</html>

效果：

上图显示，浏览器不允许你这么做，我们使用Chrome的F12开发者工具发现，浏览器自己把p封闭掉了，不让你去包裹h1。

注意：Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。开发者工具功能的快捷键是F12。

3、水平线<hr />

水平，是英语“horizontal”的缩写。

水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
    <p>宝剑锋从磨砺出，梅花香自苦寒来</p>
    <hr />
    <p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html>

效果：

属性介绍：

align="属性值"：设定线条置放位置。属性值可选择：left、right、center。
size="2"：设定线条粗细。以像素为单位，内定为2。
width="500"或width="70%"：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
color="#0000FF"：设置线条颜色。
noshade：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
    <p>宝剑锋从磨砺出，梅花香自苦寒来</p>
    <hr size="5" width="500" color="#FF0000" />
    <p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html>

效果：

4、换行<br />

如果您希望某段文本在不产生一个新段落的情况下进行强制换行（新行），就需要使用换行标签 <br> 。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>水平线</title>
</head>
<body>
    <p>宝剑锋从磨砺出<br />梅花香自苦寒来</p>
    <hr/>
    <p>要想拥有珍贵品质或美好才华等是需要不断的努力、修炼、克服一定的困难才能达到的。</p>
</body>
</html>

效果：

5、区块<span>和<div>

<div>和<span>是非常重要的标记，div的语义是division“分割、分区”；span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局，多数情况都要配合CSS样式来使用。

<div>和<span>的介绍：

<div>标签：可以把标签中的内容分割为独立的区块，必须单独占据一行。可以容纳段落、标题、表格、图像等各种网页元素。还可以嵌套<div>。
<span>标签：是来修饰文字的，不换行。也叫内联标签。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>div和span</title>
</head>
<body>
    <div>div标记1</div>
    <div>div标记2</div>
    <span>span标记1</span>
    <span>span标记2</span>
</body>
</html>

效果：

div标签的属性：

align="属性值"：设置块的位置。属性值可选择：left、right、center。

div和span的区别：

<span>和<div>唯一的区别在于：<span>是不换行的，而<div>是换行的。

如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS可以来实现各种样式。

div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。

div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。

span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。

就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。

span代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>div和span</title>
</head>
<body>
    <p>
        简介简介简介简介简介简介简介简介
        <span>
            <a href="">详细信息</a>
            <a href="">购买</a>
        </span>
    </p>
</body>
</html>

效果：

div代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>div和span</title>
    <style type="text/css">
        .header {background-color:yellow;color:blue;}
        .nav {color:red;}
        .content {background-color:blue;color:green;}
        .footer {font-weight:bold;font-family: 仿宋;}
    </style>
</head>
<body>
    <div class="header">
        <div class="logo">LOGO</div>
        <div class="nav">导航</div>
    </div>
    <div class="content">
        <div class="guanggao">广告</div>
        <div class="zhengwen">具体内容</div>
    </div>
    <div class="footer">页脚</div>
</body>
</html>

效果演示：

我们亲切地称这种模式叫做“div+css”：

div标记负责布局、结构、分块
css负责样式

6、内容居中<center>

此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>内容居中</title>
</head>
<body>
    <center>
        <p>宝剑锋从磨砺出</p>
        <p>梅花香自苦寒来</p>
    </center>
</body>
</html>

效果：

注意：在HTML5里面，<center>标签不建议使用，建议使用css布局来实现。

7、预定义（预格式化）<pre>

被包围在 <pre> 标记中的文本通常会保留空格和换行符。原封不动地输出结果（告诉浏览器不要忽略空格和空行）。

说明：真正排网页过程中，<pre>标签几乎用不着。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>预定义</title>
</head>
<body>
    <p>不断努力</p>
    <pre>
        宝剑锋从磨砺出

        
                    梅花香自苦寒来
    </pre>
</body>
</html>

效果：

六、文本格式化

1、字体标签<font>

属性：

color="red"或color="#ff00cc"：设置字体颜色。设置方式：单词 \ #ff00cc
size：设置字体大小。取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
face="微软雅黑"：设置字体类型。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
</head>
<body>
    <font face="微软雅黑" color="#FF0000" size="10">字体标记</font>
</body>
</html>

效果：

2、其他文本格式化标记

标签	描述
<b>	bold，定义粗体文本
<em>	定义以斜体字突出显示
<i>	italic，定义斜体字
<small>	定义小号字
<strong>	定义以粗体字突出显示
<sub>	定义下标字
<sup>	定义上标字
<ins>	定义插入字，下划线
<del>	定义删除字，删除线

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
</head>
<body>
    <b>这个文本是加粗的</b>
    <br />
    <strong>这个文本是加粗的</strong>
    <br />
    <big>这个文本字体放大</big>
    <br />
    <em>这个文本是斜体的</em>
    <br />
    <i>这个文本是斜体的</i>
    <br />
    <small>这个文本是缩小的</small>
    <br />
    这个文本包含
    <sub>下标</sub>
    <br />
    这个文本包含
    <sup>上标</sup>
    <br />
    <ins>这个文本是插入的</ins>
    <br />
    <del>这个文本是删除的</del>
</body>
</html>

效果：

七、字符实体

HTML 中的预留字符必须被替换为字符实体。

一些在键盘上找不到的字符也可以使用字符实体来替换。

1、HTML 实体

在 HTML 中，某些字符是预留的。如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）。

例如，在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

字符实体类似这样：

&entity_name;

或

&#entity_number;

例如，需要显示小于号，我们必须这样写：< 或 < 或 <

提示：使用实体名而不是数字的好处是，名称易于记忆。不过坏处是，浏览器也许并不支持所有实体名称（对实体数字的支持却很好）。

2、不间断空格（Non-breaking Space）

HTML 中的常用字符实体是不间断空格( )。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。

如需在页面中增加空格的数量，您需要使用   字符实体。

3、结合音标符

发音符号是加到字母上的一个"glyph(字形)"。

一些变音符号, 如尖音符 ( ̀) 和抑音符 ( ́) 。

变音符号可以出现字母的上面和下面，或者字母里面，或者两个字母间。

变音符号可以与字母、数字字符的组合来使用。

以下是一些实例：

音标符	字符	组合	输出结果
̀	a	à	à
́	a	á	á
̂	a	â	â
̃	a	ã	ã
̀	O	Ò	Ò
́	O	Ó	Ó
̂	O	Ô	Ô
̃	O	Õ	Õ

4、HTML字符实体

注意：实体名称对大小写敏感！

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	'	'
￠	分	¢	¢
£	镑	£	£
¥	人民币/日元	¥	¥
€	欧元	€	€
§	小节	§	§
©	版权	©	©
®	注册商标	®	®
™	商标	™	™
×	乘号	×	×
÷	除号	÷	÷

虽然 html 不区分大小写，但实体字符对大小写敏感。

重点记住：空格、大于号、小于号 这三个，其余的使用很少，如果需要回头查阅即可。

想查看完整的HTML实体：请点击 HTML 实体参考手册。

八、超链接

HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到超链接。点击超链接可以从一个页面跳转到另一个页面。

1、HTML 超链接（链接）

HTML使用标签 <a>来设置超文本链接。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。

可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当把鼠标指针移动到网页中的某个超链接上时，箭头会变为一只小手。

在标签<a> 中使用了href属性来描述超链接的地址。

a是英语anchor“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。

href（hypertext reference）：超文本地址。读作“喝瑞夫”，不要读作“喝夫”。

默认情况下，超链接将以以下形式出现在浏览器中：

一个未访问过的超链接显示为蓝色字体并带有下划线。
访问过的超链接显示为紫色并带有下划线。
点击超链接时，链接显示为红色并带有下划线。

注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。

2、超链接语法

链接的 HTML 代码很简单：

<a href="url">链接文本</a>

href 属性：描述了链接的目标。.

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字体</title>
</head>
<body>
    <a href="http://www.baidu.com/">访问百度</a>
</body>
</html>

效果：

注意： "链接文本" 不必一定是文本。图片或其他 HTML 元素都可以成为链接。

3、超链接的形式

超链接有三种形式：

（1）外部链接：

链接到外部文件。

代码：

<a href="hello.html">点击进入另外一个文件</a>

我们也可以直接点击链接，访问一个网址。

代码：

<a href="http://www.baidu.com/" target="_blank">访问百度</a>

（2）锚链接

给超链接起一个名字，作用是在本页面或者其他页面的的不同位置进行跳转。

比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。

首先我们要创建一个锚点，也就是说，使用name属性或者id属性给那个特定的位置起个名字。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
    <a name="top">顶部</a>
    <pre>
        














    </pre>
    <a href="#top">回到顶部</a>
</body>
</html>

效果：

顶部这个锚的名字叫做top。然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。

注意底部超链接的#号不要忘记了，表示跳到名为top的特定位置，这是规定。

如果少了#号，点击之后，就会跳到top这个文件或者top这个文件夹中去。

如果我们将底部超链接的href写成：

<a href="hello.html#top">回到顶部</a>

那就表示，点击之后，跳转到hello.html页面的top锚点中去。

注意：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。

（3）邮件链接

代码：

<a href="mailto:li_huawei@163.com">点击进入我的邮箱</a>

效果：

点击之后，Windows10会让你选择”邮件“，作用不大。

4、超链接的属性

（1）href：目标URL

（2）id：主要用于设置一个锚点的名称。

name：主要用于设置一个锚点的名称。

（3）target：告诉浏览器用什么方式来打开目标页面。target属性有以下几个值：

_self：在同一个网页中显示（默认值）
_blank：在新的窗口中打开。
_parent：在父窗口中显示
_top：在顶级窗口中显示

blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，无需解释。

也就是说，如果不写target=”_blank”那么就是在相同的标签页打开，如果写了target=”_blank”，就是在新的空白标签页中打开。

（4）title：悬停文本。

代码：

<a href="mailto:li_huawei@163.com" title="可以给我发邮件哦">点击进入我的邮箱</a>

效果：

5、注意事项

<a href="https://www.runoob.com/html/" >学习</a>

请始终将正斜杠添加到子文件夹。假如这样书写链接：href="https://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。

这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href="https://www.runoob.com/html/"。

九、图片

img：英文全称 image（图片、图像），代表的是一张图片。

如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：

<img src="图片的URL" />

能插入的图片类型

能够插入的图片类型是：jpg（jpeg）、gif、png、bmp等。
不能往网页中插入的图片格式是：psd、ai等。

HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。

1、img标签的src属性

src属性：指图片的路径。英文名称 source。

在写图片的路径时，有两种写法：相对路径、绝对路径

（1）图片的相对路径

相对当前页面所在的路径。两个标记 . 和 .. 分表代表当前目录和上一层目录。

例1：

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src="./2.jpg">

<!-- 上一级目录中的图片 -->
<img src="../2.jpg">

<!-- 上一级的上一级目录中的图片 -->
<img src="../../2.jpg">

相对路径不会出现这种情况：

aaa/../bbb/1.jpg

../要么不写，要么就写在开头。

例2：

<img src="images/code.jpg">

上方代码的意思是说，当前html页面有一个并列的文件夹images，在文件夹images中存放了一张图片code.jpg。

效果：

【测试题】现有如下文件层级图：

问题：如果想在index.html中插入1.png，那么对应的img语句应该怎么写？

分析：

现在document是最大的文件夹，里面有两个文件夹work和photo。

work中又有一个文件夹叫做myweb，myweb文件夹里面有index.html。所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。

通过document文件夹当做一个中转站，进入photo文件夹，就看到了1.png。

答案：

<img src="../../photo/1.png" />

（2）图片的绝对路径

绝对路径包括以下两种：

1）以盘符开始的绝对路径。

<img src="D:\workspace\web\images\code.jpg" />

2）网络路径。

<img src="http://www.baidu.com/img/bd_logo1.png" />

注意：如果代表的是windows文件路径，则使用斜杆/ 和反斜杠\ 是一样的；如果代表的是网络文件路径，则必须使用斜杆/。

（3）相对路径和绝对路径的总结

相对路径的好处：

站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。

总结一下：

无论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：

相对路径从自己出发，找到别人。

绝对路径，就是http://或者https://开头的路径。

2、img标签的其他属性

（1）width、height 属性

width：图像的宽度。

height：图像的高度。

width和height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。

重要提示：如果要想保证图片等比例缩放，请只设置width和height中其中一个。

（2）alt 属性

alt：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。

代码：

<img src="http://www.baidu.com/img/123.png" alt="百度LOGO" />

效果：

如上图所示：当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容。

（3）title 属性

title：提示性文本。鼠标悬停时出现的文本。

title 属性不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或 figcaption 元素。

<figure>
    <figcaption>百度</figcaption>
    <img src="http://www.baidu.com/img/bd_logo.png" />        
</figure>

<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。

<figcaption> 标签为 <figure> 元素定义标题。

<figcaption> 元素应该被置于 <figure> 元素的第一个或最后一个子元素的位置。

title属性的值一般作为提示条（tooltip）呈现给用户，在光标于图片上停下后显示出来。

尽管这确实能给用户提供更多的信息，但我们不该假定用户真的能看到，用户有可能只有键盘或触摸屏，没有鼠标这类设备。

如果要把特别重要的信息提供给用户，可以选择上面提供的方法将其内联显示，而不是使用 title。

代码：

<img src="http://www.baidu.com/img/bd_logo.png" title="百度网站"/>

效果：

（4）align 属性

图片的align属性表示图片和周围文字的相对位置。

属性取值可以是：bottom（默认）、center、top、left、right。

如果想实现图文混排的效果，请使用align属性，取值为left或right。

我们来分别看一下这align属性的这几个属性值的区别。

1）align=""（为空）或者不添加align属性（默认情况），图片和文字底端对齐。

代码：

上海<img src="bridge.jpg" align="" />大桥

效果：

2）align="center"：图片和文字水平方向上居中对齐。

程序：

上海<img src="bridge.jpg" align="center" />大桥

效果：

3）align="top"：图片与文字顶端对齐。

代码：

上海<img src="bridge.jpg" align="top" />大桥

效果：

4）align="left"：图片在文字的左边。

代码：

上海<img src="bridge.jpg" align="left" />大桥

效果：

5）align="right"：图片在文字的右边。

代码：

上海<img src="bridge.jpg" align="right" />大桥

效果：

（5）border属性

给图片加边框，单位是像素，边框的颜色默认黑色。

该属性已废弃，替换为 border这个CSS属性。

十、列表

列表标签分为三种，无序列表、有序列表和定义列表。

1、无序列表<ul>

无序列表的各个列表项之间没有顺序级别之分，通常是并列的。

无序列表中的每一项是<li>

英文单词解释如下：

ul：unordered list，“无序列表”的意思。

li：list item，“列表项”的意思。

代码：

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

在上述的代码中，<ul></ul>标记用于定义无序列表范围，<li></li>标记嵌套在<ul></ul>标记中，用于描述具体的列表项，每对<ul></ul>中至少应包含一对<li></li>标记。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <font size="5">课程<font><br/>
    <ul>
        <li>web前端</li>
        <li type="disc">JAVA</li>
        <li type="square">PHP</li>
        <li type="circle">.NET</li>
    </ul>
</body>
</html>

效果：

在上述的代码中，<li></li>标记的type属性用来指定列表项目符号，type常用的属性值有3种：实心圆disc、实心方框square和空心圆circle，它们的显示效果分别是●、■和○，type属性的默认值是disc。

另外，还可以通过给<ul></ul>标签直接指定type属性，使其内部的所有项目符号统一。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <font size="5">课程<font><br/>
    <ul type="square">
        <li>web前端</li>
        <li>JAVA</li>
        <li>PHP</li>
        <li>.NET</li>
    </ul>
</body>
</html>

效果：

列表还可以嵌套使用：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <ul>
        <li>咖啡</li>
        <li>茶
            <ul>
                <li>红茶</li>
                <li>绿茶
                    <ul>
                        <li>中国茶</li>
                        <li>非洲茶</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>牛奶</li>
    </ul>
</body>
</html>

效果：

2、有序列表<ol>

有序列表（ordered list）中的项目是有一定顺序的。

使用<ol></ol>标记，<li></li>标记嵌套在<ol></ol>标记中。属性也有type（项目编号）：设置排序的方式，1（默认）、a、A、i、I。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <font size="5">课程<font><br/>
    <ol>
        <li>web前端</li>
        <li>JAVA</li>
        <li>PHP</li>
        <li>.NET</li>
    </ol>
</body>
</html>

效果：

罗马序号：

<ol type="i">
    <li>web前端</li>
    <li>JAVA</li>
    <li>PHP</li>
    <li>.NET</li>
</ol>

效果：

start属性

<ol>标签还有个属性start可以指定起始的序号。

代码：

<ol type="A" start="4">
    <li>web前端</li>
    <li>JAVA</li>
    <li>PHP</li>
    <li>.NET</li>
</ol>

效果：

有序列表也可以嵌套使用，默认各级序号都是1。

3、定义列表<dl>

带有项目和描述的描述列表。

<dl> 标签定义了定义列表（definition list），表示列表范围

<dl> 标签与 <dt>和 <dd>一起使用：

<dt></dt>：definition title 列表的标题，表示上层内容，这个标签是必须的。

<dd></dd>：definition description 列表的列表项，表示下层内容，如果不需要它，可以不加。

注意：<dt>、<dd>只能在<dl>里面；<dl>里面只能有<dt>、<dd>。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
    <dl>
        <dt>山东商务职业学院</dt>
        <dd>信息工程学院</dd>
        <dd>艺术设计学院</dd>
        <dd>会计金融学院</dd>
        <dd>经济管理学院</dd>
    </dl>
</body>
</html>

效果：

定义列表<dl>的应用：

（1）条目清晰

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>第一条</dt>
        <dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
        <dd>我会让你明白，我从不说空话</dd>
        <dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>

        <dt>第二条</dt>
        <dd>良辰最喜欢对那些自认能力出众的人出手</dd>
        <dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
        <dd>你只要记住，我叫叶良辰</dd>
        <dd>不介意陪你玩玩</dd>
        <dd>良辰必有重谢</dd>
    </dl>
</body>
</html>

效果：

上图可以看出，定义列表表达的语义是两层：

是一个列表，列出了几个<dt>项目
每一个项目，都有自己的描述项<dd>。

备注：<dd>是描述<dt>的。

（2）可以一个<dl>包含很多<dt>，然后一个<dt>配很多<dd>：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>北京</dt>
        <dd>国家首都，政治文化中心</dd>
        <dd>上班很费时，天天挤地铁</dd>
        <dt>上海</dt>
        <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
        <dt>广州</dt>
        <dd>中国南大门，有珠江、小蛮腰</dd>
    </dl>
</body>
</html>

效果：

（3）可以多个<dl>，让每一个<dl>里面只有一个<dt>和多个<dd>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>定义列表</title>
</head>
<body>
    <dl>
        <dt>北京</dt>
        <dd>国家首都，政治文化中心</dd>
        <dd>上班很费时，天天挤地铁</dd>
    </dl>
    <dl>
        <dt>上海</dt>
        <dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
    </dl>
    <dl>
        <dt>广州</dt>
        <dd>中国南大门，有珠江、小蛮腰</dd>
    </dl>
</body>
</html>

效果：

（4）类似京东网站

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>京东购物</title>
</head>
<body>
    <dl>
        <dt>购物指南</dt>
        <dd>
            <a href="#">购物流程</a><br />
            <a href="#">会员介绍</a><br />
            <a href="#">生活旅行/团购</a><br />
            <a href="#">常见问题</a><br />
            <a href="#">大家电</a><br />
            <a href="#">联系客服</a><br />
        </dd>
    </dl>
    <dl>
        <dt>配送方式</dt>
        <dd>
            <a href="#">上门自提</a><br />
            <a href="#">211限时达</a><br />
            <a href="#">配送服务查询</a><br />
            <a href="#">配送费收取标准</a><br />
            <a href="#">海外配送</a><br />
        </dd>
    </dl>
</body>
</html>

效果：

十一、结构标签

1、<header>、<footer>标签

<header>和<footer>标签用户描述网页结构中的页眉部分（顶部）和页脚部分（底部）。

<header>标签通常用来存放整个页面或者页面内的一个区块的标题，也可以包含网站Logo图像、搜索表单或者其他头部信息内容。

<footer>标签通常用来存放分页部分等尾部信息内容。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>HTML5结构标签</title>
    </head>
    <body>
        <div>
            <header style="background: red;">页眉：页面的头部</header>
            <footer style="background: blue;">页脚：页面的尾部</footer>
        </div>
    </body>
</html>

注意：<header>标签不是<head>标签。

在HTML5中，并不限制<header>和<footer>标签的个数，一个网页中可以有多个<header>和<footer>标签，也可以为每一个内容块添加<header>和<footer>标签。

2、<hgroup>、<nav>标签

<hgroup>标签用于标题组合，即一个标题和一个子标题，或者标语的组合。

<nav>标签用于页面的导航结构部分。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>HTML5结构标签</title>
    </head>
    <body>
        <div>
            <header style="background: red;">
                页眉：页面的头部
                <hgroup>
                    <h1>主标题</h1>
                    <h2>副标题</h2>
                </hgroup>
                <nav>
                    <ul>
                        <li>导航1</li>
                        <li>导航2</li>
                        <li>导航3</li>
                    </ul>
                </nav>
            </header>
            <footer style="background: blue;">页脚：页面的尾部</footer>
        </div>
    </body>
</html>

3、<article>、<aside>标签

4、<section>、<figure>标签

十二、表格

表格标记用<table>表示。一个表格<table>是由每行<tr>组成的，每行是由每个单元格<td>组成的。

tr：table row，指表格中的行。

td：table data，指表格数据，即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="0">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>88</td>
            <td>76</td>
            <td>91</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>95</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

效果：

上图中的表格好像没看到边框呀，接下来看看<table>标签的属性。

1、border属性

<table>标记的border属性是为单元格设置边框的，并用边框围绕表格。

如果将border设置为1，单位是像素，表示该表格边框的宽度是1像素。

但是如果border属性值设置为5，那么只有围绕表格的边框尺寸发生变化，表格内部的边框还是1像素宽。

如果将border属性设置为0或者删除border属性，表格将没有边框。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="5">
        <tr>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>88</td>
            <td>76</td>
            <td>91</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>95</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

效果：

2、<table>其他属性

bordercolor：表格的边框颜色，"red"、"#00ffff"。
width：宽度。像素为单位，"400"。
height：高度。像素为单位，"200"。
style="border-collapse:collapse;"：单元格的线和表格的边框线合并（表格的两边框合并为一条）
align：表格的水平对齐方式。属性值可以填：left right center。注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签<td>进行设置）
bgcolor：表格的背景颜色，"red"、"#00ffff"。
background：背景图片，"image\bg.jpg"。背景图片的优先级大于背景颜色。
bordercolorlight：表格的上、左边框，以及单元格的右、下边框的颜色。
bordercolordark：表格的右、下边框，以及单元格的上、左的边框的颜色。这两个属性的目的是为了设置3D的效果。
dir：公有属性，单元格内容的排列方式(direction)。可以取值：ltr：从左到右（left to right，默认），rtl：从右到左（right to left）。既然说dir是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
cellpadding：内边距，单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性dir="rtl"，那就指的是内容到右边那条线的距离。
cellspacing：外边距，单元格和单元格之间的距离，像素为单位。默认情况下的值为0。

3、<tr>的属性

dir：公有属性，设置这一行单元格内容的排列方式。可以取值：

ltr：从左到右（left to right，默认）
rtl：从右到左（right to left）

bgcolor：设置这一行的单元格的背景色。注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。

height：一行的高度。

align：一行的内容水平对齐方式，取值：left、center、right。

valign：一行的内容垂直对齐方式，取值：top、middle、bottom。

4、<td>标签中的对齐方式

align：内容的水平对齐方式。属性值可以填：left、center、right。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。

valign：内容的垂直对齐方式。属性值可以填：top、middle、bottom。

width：单元格的宽度，绝对值或者相对值(%)。

height：单元格的高度。

bgcolor：设置这个单元格的背景色。

background：设置这个单元格的背景图片。

5、<th>标记

单元格<td>我们还可以使用<th>来表示，这样可以同时达到加粗和居中的效果，相当于<td> + <b>。

6、<td>的colspan和rowspan属性

<td>标记还有两个非常重要的属性：colspan（跨列）和rowspan（跨行）

（1）colspan（跨列）

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
        <tr align="center">
            <td colspan="4">成绩表</td>
        </tr>
        <tr align="center">
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td>张三</td>
            <td>88</td>
            <td>76</td>
            <td>91</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>95</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

效果：

（2）rowspan（跨行）

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
        <tr align="center">
            <td colspan="5">成绩表</td>
        </tr>
        <tr align="center">
            <td>班级</td>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td rowspan="2">一班</td>
            <td>张三</td>
            <td>88</td>
            <td>76</td>
            <td>91</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>95</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

效果：

7、<caption>标记

这是表格的标记，表示表格的标题。使用时和<tr>标记并列。

属性：align，表示标题相对于表格的位置。

属性取值可以是：left、center、right、top、bottom 。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>
    <table border="5" bordercolor="red" cellspacing="0" width="400" height="200">
        <caption>成绩表</caption>
        </tr>
        <tr align="center">
            <td>班级</td>
            <td>姓名</td>
            <td>语文</td>
            <td>数学</td>
            <td>英语</td>
        </tr>
        <tr align="center">
            <td rowspan="2">一班</td>
            <td>张三</td>
            <td>88</td>
            <td>76</td>
            <td>91</td>
        </tr>
        <tr align="center">
            <td>李四</td>
            <td>95</td>
            <td>80</td>
            <td>90</td>
        </tr>
    </table>
</body>
</html>

效果：

十三、表单

表单标记用<form>表示，用于与服务器的交互。表单就是用于收集用户信息的，就是让用户填写的、选择的。语法如下：

<form>
    ...
    <input />标记
    ....
</form>

属性：

name：表单的名称，用于JavaScript来操作或控制表单时使用。
id：表单的名称，用于JavaScript来操作或控制表单时使用。
action：指定表单数据的处理程序，表单将提交到哪里，如：action=“XXXServlet”或“xxx.jsp”。
method：表单数据的提交方式，一般取值：get(默认)和post。

注意：表单和表格嵌套时，是在<form>标记中套<table>标记。

get提交和post提交的区别：

GET方式：将表单数据，以键值对“name=value”形式追加到action指定的处理程序的后面，两者间用“?”隔开，每一个“name=value”间用“&”号隔开。

特点：只适合提交少量信息，并且不太安全（不要提交敏感数据）、提交的数据类型只限于ASCII字符。

POST方式：将表单数据隐藏发送（通过请求正文）到action指定的处理程序。表面上，POST发送的数据不可见。action指定的处理程序可以获取到表单数据。

特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的（Word、Excel、rar、img）。

1、<input>输入标记（文本框）

用于接收用户输入。多数情况下被用到的表单标签是输入标签（<input>）。

输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下：

<input type="text" />

属性：

type="属性值"：文本类型。属性值可以是：
- text（默认）：文本域。
- password：密码字段，密码字段字符不会明文显示，而是以星号或圆点替代。
- radio：单选按钮，name（名字）属性相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字” ）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了，所以叫做radio。
- checkbox：多选按钮，name 属性值相同的按钮作为一组进行选择。用户需要从若干给定的选择中选取一个或若干选项。
- hidden：隐藏框，在表单中包含不希望用户看见的信息。
- button：普通按钮，结合JavaScript代码进行使用，触发JavaScript代码。
- submit：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面或者程序中去。
- reset：重置按钮，清空当前表单的内容，并设置为最初的默认值。
- image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
- file：文件选择框。提示：如果要限制上传文件的类型，需要配合JavaScript来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
value="内容"：文本框里的默认内容（已经被填好了的）。
size="50"：表示文本框内可以显示五十个字符。一个英文或一个中文都算一个字符。注意size属性值的单位不是像素，是个数。
readonly：设置文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
disabled：文本框只读，禁用不能编辑，光标点不进去。属性值可以不写。
checked：将单选按钮或多选按钮默认处于选中状态。当<input>标签设置为type="radio"或者type=checkbox时，可以用这个属性。属性值也是checked，可以省略。

程序：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        姓名：<input value="呵呵" />张三<br />
        昵称：<input value="哈哈" readonly="" /><br />
        名字：<input type="text" value="name" disabled="" /><br />
        密码：<input type="password" value="pwd" size="50" /><br />
        性别：<input type="radio" name="gender" id="radio1" value="male" checked="" />男
             <input type="radio" name="gender" id="radio2" value="female" />女<br />
        爱好：<input type="checkbox" name="love" value="eat" />吃饭
             <input type="checkbox" name="love" value="sleep" />睡觉
             <input type="checkbox" name="love" value="bat" />打豆豆<br />
        <input type="button" value="普通按钮" /><br />
        <input type="submit"  value="提交按钮" /><br />
        <input type="reset" value="重置按钮" /><br />
        <input type="image" value="图片按钮1" /><br />
        <input type="image" src="bd_logo.png" width="200" value="图片按钮2" /><br />
        <input type="file" value="文件选择框" /><br />
    </form>
</body>
</html>

效果：

2、<select>下拉列表标记

<select>标记里面的每一项用<option>表示。select意思是“选择”，option意思是“选项”。

select标记和ul、ol、dl一样，都是组标记。

属性：

属性	值	描述
autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的宽度。
disabled	disabled	规定禁用文本区域。
formNew	form_id	定义文本区域所属的一个或多个表单。
maxlengthNew	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
requiredNew	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

常用的属性：

multiple：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 multiple=""，也可以写成multiple="multiple"。
size="3"：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。

<option>标记的属性：

selected：预选中。没有属性值。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        <select>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option selected="">研究生</option>
        </select>
        <br /><br />
        <select size="3">
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>大学</option>
            <option>研究生</option>
        </select>
        <br /><br />
        <select multiple="">
            <option>小学</option>
            <option>初中</option>
            <option selected="">高中</option>
            <option selected="">大学</option>
            <option>研究生</option>
        </select>
        <br /><br />
    </form>
</body>
</html>

效果：

3、<textarea>标记：多行文本输入框

属性：

属性	值	描述
autofocusNew	autofocus	规定当页面加载时，文本区域自动获得焦点。
cols	number	规定文本区域内可见的宽度。
disabled	disabled	规定禁用文本区域。
formNew	form_id	定义文本区域所属的一个或多个表单。
maxlengthNew	number	规定文本区域允许的最大字符数。
name	text	规定文本区域的名称。
placeholderNew	text	规定一个简短的提示，描述文本区域期望的输入值。
readonly	readonly	规定文本区域为只读。
requiredNew	required	规定文本区域是必需的/必填的。
rows	number	规定文本区域内可见的行数。
wrapNew	hard soft	规定当提交表单时，文本区域中的文本应该怎样换行。

常用的属性：

rows="4"：指定文本区域的行数。
cols="20"：指定文本区域的列数。
readonly：只读。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        <textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
    </form>
</body>
</html>

效果：

4、<fieldset>分组标记

比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用<fieldset>分组标记。

<fieldset> 标记可以将表单内的相关元素分组。<fieldset> 标记会在相关表单元素周围绘制边框。

<legend> 标记为 <fieldset> 元素定义标题。

程序：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>账号信息</legend>
            姓名：<input value="呵呵" />张三<br />
            密码：<input type="password" value="pwd" size="50"/><br />
        </fieldset>
        <fieldset>
            <legend>其他信息</legend>
            性别：<input type="radio" name="gender" id="male" value="male" checked="" />男
                  <input type="radio" name="gender" id="female" value="female" />女
                  <br />
            爱好：<input type="checkbox" name="love" value="eat" />吃饭
                  <input type="checkbox" name="love" value="sleep" />睡觉
                  <input type="checkbox" name="love" value="bat" />打豆豆
        </fieldset>
    </form>
</body>
</html>

效果：

5、<lable>定义标注标记

<label> 标记是为 input 元素定义标注的标记。

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。

就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

<input type="radio" name="gender" value="male" />男
<input type="radio" name="gender" value="female" />女

对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，但点击“男”、“女”这两个文字时是无法选中的；于是，<label>标记派上了用场。

本质上来讲，“男”、“女”这两个文字和<input>标签时没有关系的，而<label>标记就是解决这个问题的。我们可以通过<label>把<input>和汉字包裹起来作为整体。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

程序：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <form>
        <fieldset>
            <legend>账号信息</legend>
            姓名：<input value="呵呵" />张三<br />
            密码：<input type="password" value="pwd" size="50"/><br />
        </fieldset>
        <fieldset>
            <legend>其他信息</legend>
            性别：<input type="radio" name="gender" id="male" value="male" />
                 <label for="male">男</label>
                 <input type="radio" name="gender" id="female" value="female" />
                 <label for="female">女</label>
                 <br />
            爱好：<input type="checkbox" name="love" value="eat" />吃饭
                 <input type="checkbox" name="love" value="sleep" />睡觉
                 <input type="checkbox" name="love" value="bat" />打豆豆
        </fieldset>
    </form>
</body>
</html>

加上<label>标记后，我们点击“男”或“女”这两个文字，也可以选中radio了。