本文是对HTML进阶到HTML5的基础内容的总结，内容偏长，请耐心看完，如有不足之处，请指正，希望一起进步。

————————————————————正文开始—————————————

HTML => HTML5

一、HTML基本结构

1. HTML的基本标签

(1)HTML标签

整个网页是从这里开始的，然后到结束。

(2)head标签 *(不可见)

标签	说明
title	定义网页的标题
meta	定义网页的基本信息（供搜索引擎）
style	定义CSS样式
link	链接外部CSS文件或脚本文件
script	定义脚本语言
base	定义页面所有链接的基础定位（用得很少）

注：head标签代表页面的“头”，定义一些特殊内容，这些内容往往都是“不可见内容”（在浏览器不可见）。

(3)body标签 （ 可见 ）

body标签代表页面的“身”，定义网页展示内容，这些内容往往都是“可见内容”（在浏览器可见）。

2. 段落与文字

（ 一 ）、 段落标签

(1)、段落与文字标签

标签	语义	说明
h1~h6	header	标题
p	paragraph	段落
br	break	换行
hr	horizontal rule	水平线
div	division	分割（块元素）
span	span	区域（行内元素）

(2)、文本格式化标签

标签	语义	说明
strong	strong（加强）	加粗
em	emphasized（强调）	斜体
cite	cite（引用）	斜体
sup	superscripted（上标）	上标
sub	subscripted（下标）	下标

（ 二 ）、 网页特殊符号

网页特殊符号只需要记忆一个就行了，就是HTML空格

（三）、 自闭合标签

一般标签：

•  有开始符号和结束符号
•  可以在开始符号和结束符号之间插入其他标签或文字。
• 例如 body 自闭合标签：
• 只有开始符号没有结束符号
• 由于没有结束符号，不能插入其他标签或文字，只能定义自身的属性。
• 例如 br hr

（四）、语义标签*

标签名	英文全称	中文解释
div	division	分割（块元素）
span	span	区域（行内元素）
p	paragraph	段落
ol	ordered list	有序列表
ul	unordered list	无序列表
li	list item	列表项
dl	definition list	定义列表
dt	definition term	定义术语
dd	definition description	定义描述
h1~h6	header1 ~header6	标题1~标题6
Hr	horizontal rule	水平线
a	anchor	锚点，超链接
strong	strong	强调（粗体）
em	emphasized	强调（斜体）
sup	superscripted	上标
sub	subscripted	下标
br	break	换行
fieldset	fieldset	域集
legend	legend	图例
caption	caption	（表格、图像等）标题
thead	table head	表头
tbody	table body	表身
tfoot	table foot	表脚
th	table header	表头单元格
td	td	表身单元格

•  块元素 Div 、行内元素 span 、 label HTML元素根据浏览器表现形式分为两类：①块元素；②行内元素；

Div 、 span 、label	区别
div	块元素u 可以包含任何块元素和行内元素;u 不会与其他元素位于同一行；u 常用于页面中较大块的结构划分，然后配合CSS来操作；u 常见块元素有：h1~h6、p、hr、div等。
span	行内元素u 可以与其他行内元素位于同一行u span 一般用来包含文字等, 它没有结构的意义，纯粹是应用样式。当其他行内元素都不适合的时候，可以用span来配合CSS 操作。但不可以容纳块元素，不然会出现无法预知的效果；u 常见行内元素有：strong、em、span等。
label	div和span是无语义标签，但label 是有语义标签。label 只适用于表单中，用于显示在输入控件旁边的说明性文字。

•  id和class

id和class是HTML元素中两个最基本的公共属性。一般情况下，id和class都用来选择元素，以便进行CSS操作或者JavaScript操作。

id和class	属性
id 属性	id具有唯一性——在一个页面中相同的id只允许出现一次。W3C建议，对于页面关键的结构或者大结构，我们才使用id。所谓的关键结构，指的是诸如LOGO、导航、 主体内容、底部信息栏等结构。对于一些小地方，还是建议使用class属性。我搜索引擎识别一个页面结构，是根据标签的语义以及id属性来识别的。因此 id属性不要轻易使用。此外，id的命名也十分关键，特别是对搜索引擎优化而言。
class属性	cl顾名思义，就是“类”。它釆用的思想跟C、Java等编程语言中的“类”相似。 我们可以为同一个页面的相同元素或者不同元素设置相同的class,然后使得相同class的元素具有相同的CSS样式。如果两个或者两个以上元素定义相同的样式，建议使用用class属性。因为这样可以减少大量的重复代码。， 对于一个元素而言，我们可以定义多个class一般来说定义多个class的目的在于：一般用一个class抽取公   共样式，然后用另外一个class定义单独样式。

总结： 对于页面关键结构，建议使用id；对于小地方，建议使用class。就算我们不需要对关键结构进行CSS操作或者JavaScript操作，也建议加上id.以便搜索引擎识别页面结构。

•  浏览器标题栏小图标*

在浏览网页的时候，我们会发现几乎所有网站的页面在浏览器标题栏前面都会有一个小图标想要实现这个效果，我们只需要在head标签添加一个link标签即可。

语法： <link rel="shortcut icon" type="image/x-icon" href="favicon.icon"/>

说明： rel和type这两个属性的取值是固定形式，无需多讲。href属性取值为小图标的地址, 这个地址是根据小图标在站点文件夹路径而定的，跟图片引用路径是一样的道理。

•  ⻚⾯常⽤元素之a元素详解

developer.mozilla.org/zh-CN/docs/…

作用：

超链接： 

• 从这个⻚⾯跳转到另⼀个⻚⾯的路径

• herf

• target  不设置的话会从当前页面打开  

• arget=“blank”//从一个新的标签页打开 锚点 ：

• ⽤于跳转到⻚⾯的指定位置

• 写锚点的时候必须先写#+属性  #的作用是用作锚点使用的

• 可设置属性：herf  id

•  ⻚⾯常⽤元素之img元素详解

常⽤属性：

•  src 图⽚路径
•  alt 图⽚加载失败或加载时显示的⽂字
•  title 悬浮在图⽚上⾯显示的⽂字
• 点击图⽚跳转 通过嵌套a标签

根据语义来选择标签而不是根据样式来选择

3.列表

li可以包住其他标签，但是不能用其他标签来包住li标签

• 三种列表 标签 | 语义 | 说明 | | --------------------- | --------------- | ---- | | ol | ordered list | 有序列表 | | Ul * | unordered list | 无序列表 | | dl | definition list | 定义列表|
• 有序列表type属性 type属性 | 列表项的序号列表 | | ------------------------- | ---------------- | | 1 | 数字1、2、3…… | | a | 小写英文字母a、b、c…… | | A | 大写英文字母A、B、C…… | | i | 小写罗马数字i、ii、iii…… | | I | 大写罗马数字I、II、III……|

注：学习了CSS入门教程之后，有序列表列表项符号由list-style-type属性定义，到时候应该摒弃type属性。

(1)  、有序列表

<ol>

    <li>有序列表项</li>

    <li>有序列表项</li>

    <li>有序列表项</li>

</ol>

(2)  、无序列表****

<ul  type="列表项符号">

    <li>无序列表项</li>

    <li>无序列表项</li>

    <li>无序列表项</li>

</ul>

(3)  、定义列表****

<dl>

    <dt>定义名词</dt>

    <dd>定义描述</dd>

    ……

</dl>

4. 表格

表格的基本结构： 由⼀⾏或者多⾏的单元格数据组成

在HTML中怎么表示：

• table 表示表格元素
• tr 表示⼀⾏⾏的数据
• th表示数据中的表头部分
• td表示的正常的数据

table元素⾥常⽤的属性： 

•  border (边框)
•  cellspacing(单元格间距)
•  cellpadding(单元格间距)
•  colspan(⽤于合并列)
•  rowspan(⽤于合并⾏)

(一)、表格语义记忆

通过语义化记忆表格标签：

• 表格基本属性 标签 | 语义 | 说明 | | ------------- | ---------------------- | --- | | table | table（表格） | 表格 | | tr | table row（表格行） | 行 | | td | table data cell（表格单元格） | 单元格|

• 表格结构属性 标签 | 语义 | 说明 | | -------------- | ------------ | ----- | | thead | table head | 表头 | | tbody | table body | 表身 | | tfoot | table foot | 表脚 | | th | table header | 表头单元格|

(二)  、表格基本结构

<table>、<tr>和<td>是HTML表格最基本的3个标签，其他标题标签<caption>、表头单元格<th>可以没有，但是这3者必须要有。

语法：

<table>
   <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

说明：

•  <table>和</table>标记着表格的开始和结束
•  <tr>和</tr>标记着行的开始和结束，在表格中包含几组<tr> </tr>就表示该表格为几行
• <td>和</td>标记着单元格的开始和结束

(三)、表格完整结构

表格完整结构应该包括表格标题（caption）、表头（thead）、表身（tbody）和表脚（tfoot）4部分。 语法：

<table>
    <caption>表格标题</caption>
    <!--表头-->
    <thead>
        <tr>
            <th>表头单元格1</th>
    <th>表头单元格2</th>
        </tr>
    </thead>
    <!--表身-->
    <tbody>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tbody>
    <!--表脚-->
    <tfoot>
        <tr>
            <td>标准单元格1</td>
            <td>标准单元格2</td>
        </tr>
    </tfoot>
</table>

注：<thead>、<tbody>和<tfoot>这三个标签分别表示表头、表身、表脚。th表示表头单元格，th表示表身单元格。每一对“<tr></tr>”表示一行。

(四)、合并行和合并列

合并行使用td标签的rowspan属性， 而合并列则用到td标签的colspan属性。

(1)、合并行

语法：

<td rowspan="跨度的行数">

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>合并行rowspan</title>
</head>
<body>
    <table>
        <!--第1行-->
        <tr>
            <td>姓名:</td>
            <td>小明</td>
        </tr>
        <!--第2行-->
        <tr>
            <td rowspan="2">喜欢水果:</td>
            <td>苹果</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>香蕉</td>
        </tr>
    </table>
</body>
</html>

(2)、合并列

语法：

<td colspan="跨度的列数">

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>合并列colspan</title>
</head>
<body>
    <table>
        <!--第1行-->
        <tr>
            <td colspan="2">绿叶学习网精品教程</td>
        </tr>
        <!--第2行-->
        <tr>
            <td>HTML教程</td>
            <td>CSS教程</td>
        </tr>
        <!--第3行-->
        <tr>
            <td>jQuery教程</td>
            <td>SEO教程</td>
        </tr>
    </table>
</body>
</html>

5. 图像****

(一)、图像标签****

在HTML中，图像标签为。是一个自闭合标签。img标签只需要掌握3个属性就可以了：src、alt、title。

语法：

<img src="图片地址" alt="图片描述（给搜索引擎看）" title="图片描述（给用户看）">

• 常用属性 属性 | 说明 | | ------------------------ | ------------- | | src | 图像的文件地址 | | alt | 图片显示不出来时的提示文字 | | title | 鼠标移到图片上的提示文字|

注：src和alt这两个属性是img标签必不可少的属性。其他属性我们一般用不到

(二)、相对路径和绝对路径

根据资源的类型判断，⼀般站外资源⽤绝对路径，站内资源⽤相对路径

•  绝对路径：

## 书写格式 ### 协议名://主机名:端⼝名/路径

（* 中⽂会被编码成Unicode格式）
 协议名 http https file
 主机名 域名 IP地址
 端⼝ http会省略80 https会省略443

• 相对路径： ./代表当前⽬录 ../代表的上⼀级⽬录

(三)、图片格式

虽然图片格式这一节知识比较多，大部分我们只需要了解就可以了，我们只需要掌握.jpg、.png和.gif三种图片格式的区别即可。

1. JPG可以很好处理大面积色调的图像，如相片、网页一般的图片。
2. PNG格式图片体积小，而且无损压缩，能保证网页的打开速度。最重要的是PNG格式图片支持透明信息。PNG格式图片可以称为“网页设计专用格式”。
3. GIF格式图片图像效果很差，但是可以制作动画

6. 链接

超链接使用a标签，语法如下：

<a href="链接地址" target="目标窗口的打开方式">

target属性	说明
target属性值	说明
_self  *	默认方式，即在当前窗口打开链接
_blank  *	在一个全新的空白窗口中打开链接
_top	在顶层框架中打开链接
_parent	在当前框架的上一层里打开链接

注：我们只是需要掌握_self和_blank这两个属性就可以了，其他的用不到 超链接根据链接对象的不同分为：

（1）外部链接

（2）内部链接：①内部页面链接；②锚点链接；

锚点链接，就是点击某一个超链接，它就会跳到当前页面的某一部分。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>锚点链接</title>
</head>
<body>
    <div>
        <a href="#music">推荐音乐</a><br />
        <a href="#movie">推荐电影</a><br />
        <a href="#article">推荐文章</a><br />
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="music">
        <h3>推荐音乐</h3>
        <ul>
            <li>林俊杰-被风吹过的下图</li>
            <li>曲婉婷-在我的歌声里</li>
            <li>许嵩-灰色头像</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="movie">
        <h3>推荐电影</h3>
        <ul>
            <li>蜘蛛侠系列</li>
            <li>钢铁侠系统</li>
            <li>复仇者联盟</li>
        </ul>
    </div>
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    ……<br />
    <div id="article">
        <h3>推荐文章</h3>
        <ul>
            <li>朱自清-荷塘月色</li>
            <li>余光中-乡愁</li>
            <li>鲁迅-阿Q正传</li>
        </ul>
    </div>
</body>
</html>

7. 表单

HTML中的表单核⼼元素：

input (核⼼元素)

label (提⾼交互体验的)

select(下拉框)

textarea(⽂本域)

button(按钮)

Form

表单标签共有4个：<input>、<textarea>、<select>和<option>。

其中<select>和<option>是配合使用的。 我们通过一张表单来把所有input标签囊括：

(一)、input标签表单

大部分表单都是用input标签完成的。

语法：

<input type="表单类型"/>

说明：

表1中的表单都是使用input标签，所不同的就是type属性值不同。

(二)、textarea标签表单****

(1)、多行文本框

语法：

<textarea rows="行数" cols="列数">多行文本框内容</textarea>

表现形式如下：

(2)、3种文本框对比

单行文本框和密码文本框使用标签，而多行文本框使用标签。

• 单行文本框

语法：<input type="text" value="默认文字" size="文本框长度" maxlength="最多输入字符数"/>

• 密码文本框

语法：<input type="password">

• 多行文本框

语法：<textarea rows="行数" cols="列数">多行文本框内容</textarea>

(三)、select和option

下拉列表由<select>标签和<option>标签配合使用。

<select multiple="mutiple" size="可见列表项的数目">

    <option value="选项值" selected="selected">选项显示的内容</option>

    ……

    <option value="选项值">选项显示的内容</option>

</select>

8. 多媒体

(一)、插入音频、视频和flash****

在网页中插入音频、视频和flash都是使用embed标签。

语法：

<embed src="多媒体文件地址" width="播放界面的宽度" height="播放界面的高度"></embed>

说明：

多媒体文件地址可以是相对地址，也可以是绝对地址。

width和height使用px作为单位。

(二)、插入背景音乐

为某个网页设置背景音乐，使用的是bgsound标签。不过bgsound标签只适用于IE浏览器，在Firefox等浏览器中未必适用。

设置网页背景音乐时常用的方法除了使用bgsound标签，还有使用embed标签和object标签。

语法： <bgsound src="背景音乐的地址"/> 说明：

loop="2"表示重复2次，loop="infinite"表示无限次循环播放，也可以使用loop="-1"表示无限次循环播放。

9. 浮动框架iframe

(一)、浮动框架iframe简介

由于HTML5已经舍弃了frameset标签（框架集标签），所以在这一章，我们不讲解框架集frameset，只讲解一个标签：iframe标签（浮动框架标签）。

浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。

<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。

语法：

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

说明：

src属性是iframe的必须属性，它定义浮动框架页面的源文件地址。

在普通框架结构中，由于框架就是整个浏览器的窗口，因此不需要设置其大小。但是在浮动框架中，框架是插入到普通HTML页面中，所以可以调整框架的大小。浮动框架的宽度和高度都是以像素为单位。width和height这2个都是可选属性。

举例：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="main">
        <h3>绿叶学习网</h3>
        <iframe src="http://www.baidu.com" width="400px" height="300px"></iframe>
    </div>
</body>
</html>

iframe标签

分析：

在这段代码中，设置了iframe的src属性值为“www.baidu.com” （百度首页地址），宽width为400px，高height为300px。

大家在浏览器查看到该页面嵌入了一个子页面，而这个子页面就是百度的首页

(二)、设置浮动框架是否显示滚动条scrolling****

对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。

语法：

<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>

说明： scrolling属性取值如下：

scrolling属性值	说明
auto	默认值，整个表格在浏览器页面中左对齐
yes	总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no	在任何情况下都不显示滚动条

预览效果：

iframe标签

分析：

浮动框架iframe的滚动条都消失了。大家可以在“在线测试工具”中修改一下scrolling属性值，看看不同属性值下有什么不同的效果。

浮动框架，说白了就是在一个页面嵌入一个或多个子页面。

进阶内容

一、 HTML、XHTML和HTML5

（一）HTML 和 XHTML

HTML,全称HyperText Mark-up Language (超文本标记语言)，是构成网页文档的 主要语言。我们常说的HTML指的是HTML 4.01。

XHTML,全称 Extensible HyperText Mark-up Language (扩展的超文本标记语言), 它是XML风格的HTML 4.01,我们可以称之为更严格、更纯净的HTML 4.01。

HTML语法书写比较松散，利于开发者编写。但是对于机器，如电脑、手机等来说，语法越松散，处理起来越困难。因此为了让机器更好地处理HTML,我们才在HTML基础上引入了 XHTML

XHTML相对于HTML来说，在语法上更加严格。XHTML和HTML主要区别如下。

1、XHTML标签必须闭合。

在XHTML中，所有标签必须闭合，例如“<p></p>" “<div></div>”等。此外，空标 签也需要闭合，例如<br>要写成<br/>。

错误写法：<p>欢迎来到绿叶学习网

正确写法：<p>欢迎来到绿叶学习网</p>

2、XHTML标签以及属性必须小写。

在XHTML中，所有标签以及标签属性必须小写，不能大小写混合，也不能全部都是大 写。不过标签的属性值可以大写。

错误写法：<Body><DIV></DlV></Body> 正确写法：<body><div></div></body>

3、XHTML标签属性必须用引号。

在XHTML中，标签属性值必须用引号括起来，单引号、双引号都可以。

错误写法：<input id=txt type=text/>

正确写法：<input id="txt" type="text"/>

4、XHTML标签用jd属性代替name属性。

在XHTML中，除了表单元素之外的所有元素，都应该用id而不是name。

错误写法：<div name="wrapper"></div>

正确写法：<div id="wrapper"></div>

下面是一个完整的XHTML文档。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>“<span style="font-weight:bold;color:Red;">视觉化思考</span>”能以独特而有效的方式，让你的心有更大的空间来解决问题。</p>
</body>
</html>

HTML指的是HTML 4.01, XHTML是HTML的过渡版本，XHTML是XML风格的HTML 4.01。而HTML 5指的是下一代的HTML,也就是HTML 4.01的升级版。

HTML 5 除了新增部分标签之外，还增加了一组技术，包括canvas、SVG、WebSocket.本地存储等。这些新增的技术都是使用JavaScript来操作。也就是说，HTML 5使得HTML从一门“标记语言” 转变为一门“编程语言”。

二、 什么是HTML5 ？HTML4与HTML5有什么区别？

什么是HTML5 ？

HTML5 是HTML的最新版本，它是W3C与WHATWG合作的结果。HTML5继承了原先HTML的部分特征， 添加了许多新的语法特征，⽐如语义特性、本地存储特性、设备兼容特性、连接特性、⽹⻚多媒体特性等。

1. HTML4与 HTML5有什么区别？****

1) HTML4中元素不能把⽂档结构表示清楚，在 HTML5中增加了与结构相关的元素，使得⽂档结 构更加清晰，结构更加语义化。  

2) HTML4在Web应⽤程序的功能受到限制，⽐如：不允许同时上传多个⽂件，HTML5提供了 web应⽤程序使⽤的API****

3) DOCTYPE声明变化：

HTML4中需要指明是HTML的哪个版本，HTML5不需要，只需要< !DOCTYPE html>即可。

(1) HTML4 Strict

严格定义类型：该 DTD 不允许使⽤展示性的和弃⽤的元素（⽐如 font）和框架集 （Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

(2) HTML4 Transitional

过渡定义类型：该 DTD 允许使⽤展示性的和弃⽤的元素（⽐如 font）。不允许框架集 （Framesets）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

(3) HTML4 Frameset

框架定义类型：该 DTD 等同于 HTML Transitional，但允许框架集内容。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

指定字符编码变化：

HTML4：< meta http-equiv="content-type" content="text/html;charset=UTF-8">

HMLT5: < meta charset="UTF-8">

4) 新增的元素和废除的元素 

• 新增结构元素：section、header、footer等
• 新增其他元素：video、audio、canvas等
• 新增input元素的类型：email、url、number、range等
• 废除的元素：basefont、font、center、big等
• 不再使⽤frame框架：如frameset、frame等
• 新增⼀些元素的属性，如contentEditable、designMode、hideen、tabindex等 在HTML 5中，可以省略属性值的属性如表所示 省略形式 | 等价于 | | --------------------------------------- | ------------------------------------------------ | | checked | checked=nchecked" | | readonly |— | readonly="readonly" | | defer | defer="defer" | | ismap | ismap="ismap" | | nohref | nohref="nohref" | | noshade | noshade="noshade" | | nowrap | nowrap="nowrap" | | selected | selected="selected" | | disabled | ciisabled="disableci" | | multiple | multiple="multiple" | | noresize | noresize="disabled"|

1. HTML 5有以下几个特点

1) 文档类型说明

页面的文档类型被极大地简化了。

XHTML文档声明如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtdn>

HTML5文档声明如下：

<!DOCTYPE html>

2) 标签不再区分大小写

<div>绿叶学习网</DIV>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议所有标签以及属性都采用小写方式。

3) 允许属性值不加引号

<div id=wrapper style=co1or: red> 绿叶学习网 </div>

上面这种写法也是完全符合HTML5规范的。但是在实际开发中，建议标签所有属性值 都加引号，单引号或双引号都可以。

4) 允许部分属性的属性值省略

在HTML5中，部分具有特殊性属性的属性值是可以省略的。例如，下面代码是完全符 合HTML 5规范的：

<input type=ntext" readonly/>

<input type="checkbox" checked/>

上面的代码等价于

<input type="textM readonly="readonly"/>

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

5) 语义化

•  标题语义化

（1）一个页面只能有一个h1标签。

（2）hl ~ h6之间不要断层。

（3）不要用h1 ~ h6来定义样式。

（4）不要用div来代替h1 ~ h6.

•  图片语义化

（1） alt属性和title属性。

（2） figure 元素和 figcaption 元素。

(1) alt属性和title属性

img标签有两个重要属性：alt和title。

alt属性用于图片描述，这个描述文字是给捜索引擎看的。并且当图片无法显示时，页面 会显示alt中的文字。

title属性也用于图片描述，不过这个描述文字是给用户看的。并且当鼠标指针移到图片 上时，会显示title中的内容。

语法：

<img src="" alt="图片描述(给搜索引擎看)" title="图片描述(给用户看)">

说明：搜索引擎跟人不一样，它看不出一张图片描绘的是什么东西，它只会査看HTML代码， 通过img标签的alt属性或者页面上下文来判断图片的内容。因此，对于img标签，我们一定要添加alt属性，以便搜索引擎识别图片的内容。alt属性在搜索引擎优化中也很重要，并且会被赋予一定的权重。请一定要注意；alt属性是img标签必需属性，一定要添加；title属性是img标签可选属性，可加可不加。建议大家在实际开发中，对于img标签，要记得在alt属性中添加必要的描述信息。

(2) figure 元素和 figcaption 元素****

“图片+图注”的效果，我们可以使用如下代码来实现。

<div class="img-list">
    <img src="" alt=""/>
    <span>HTML入门教程 </span>
<div>

•  表格语义化

在实际开发中，我们不建议使用表格布局，应该使用浮动布局或者定位布局。虽然表格拿来做布局的方式被抛弃了，但是这并没有说明表格就一无是处了。

问大家一个问题：如图所示的这种表格数据的展示，应该怎么实现呢？不少得了 “table恐惧症”的小伙伴可能会想到使用div来模拟表格。事实上，对于这种表格数据形式, 最好的选择还是table。

font-weight属性值	说明
normal	默认值,正常体
lighter	较细
bold	较粗
bolder	很粗（效果跟bold差不多

在表格中，我们比较常用的标签是table, tr和td这3个。不过为了加强表格的语义化，W3C还增加了 5个标签：th、caption、thead、tbody和tfoot。th表示“表头单元格”； caption表示“表格标题”。thead、tbody和tfoot这3个标签把表格从语义上分为三部分: 表头、表身和表脚。有了这几个标签，表格语义更加良好，结构更加清晰。表格标签如表2-1所示。

标签	说明
table	表格
caption	标题
thead	表头（语义划分）
tbody	表身（语义划分）
tfoot	表尾（语义划分）
tr	行
th	表头单元格
td	表格单元格

• 表单语义化

表单跟表格，这是两个完全不一样的概念，对于表单语义化，我们从2个方面来探究一下。

（1）label 标签。

（2）fieldset 标签和 legend 标签。

(1) label 标签

W3C规范定义，label标签用于显示在输入控件旁边的说明性文字。也就是将某个表单元素和某段说明文字关联起来。

语法：

<label for=""> 说明性文字 </label>

说明：

label标签for属性值为所关联的表单元素的id

例如<input id="name" type="text"/>, 则其所关联的label标签应该为<label for="name"></lable>

label标签的for属性有两个作用。

①语义上绑定了 label元素和表单元素。

②增强了鼠标可用性。也就是说我们点击label中的文本时，其所关联的表单元素也会获得焦点。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div>
        <input id="Radio1" type="radio"/>单选框
        <input id="Checkbox1" type="checkbox" />复选框
    </div>
    <hr />
    <div>
        <input id="rdo" name="rdo" type="radio"/><label for="rdo">单选框</label>
        <input id="cbk" name="cbk" type="checkbox" /><label for="cbk">复选框</label>
    </div>
</body>
</html>

分析：

从这个例子可以看到，在第一组表单中，我们只能点击单选框才能选中单选框，点击它旁边的说明文字是不能选中的。在第二组表单中，我们可以点击单选框来选中单选框，并且点击它旁边的说明文字同样也可以选中单选框。而对于复选框来说，也是一样的效果。

其实，这就是label标签for属性的作用。for属性使得鼠标单击的范围扩大到label元素上，极大地提高了用户单击的可操作性。事实上，label标签有两种关联方式，我们拿复选框来说，下面两行代码是等价的。

<input id="cbk" type="checkbox" /><label for="cbk"> 复选框 </label>

<label>复选框<input id="cbk" type="checkbox"/></label>

对于图中的效果，我们使用label标签来增强语义化，修改后的代码如下：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="index.aspx" method="post">
        <div>登录绿叶学习网</div>
        <p>
            <label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
        </p>
        <label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
        </p>
        <input type="checkbox" id= "remember-me" name="remember-me"/> <label for="remember-me"> 记住我 </label>
        <input type="submit" value="登录"/>
    </form>
</body>
</html>

(2) fieldset 标签和 legend 标签。

语法：

<fieldset>

<legend> 表单组标题 </legend>

</fieldset>

说明：

使用fieldset和legend标签有两个作用。

（1）增强表单的语义。

（2）可以定义fieldset元素的disabled属性来禁用整个组中的表单元素。

对于图中的效果，我们使用fieldset和legend这两个标签来增强语义化，修改后的代码如下。

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <form action="index.aspx" method="post">
        <fieldset>
            <legend>登录绿叶学习网</legend>
            <p>
                <label for="name"> 账号：</1abel><input type="text" id="name" name="name" />
            </p>
            <label for="pwd"> 密码：</label><input type="password" id="pwd" name="pwd" />
            </p>
            <input type="checkbox" id="remember-me" name="remember-me" /> <label for="remember-me"> 记住我 </label>
            <input type="submit" value="登录" />
        </fieldset>
    </form>
</body>
</html>

v 其他语义化

1. 换行符 <br/>

很多新手会使用＜br/＞标签来换行，或者使用多个＜br/＞标签来实现元素之间的上下间距。 举例：

<div>
<span> 标题 </span><br/><br/>
<span>第 1 部分内容 </span><br/>
<span>第 2 部分内容 </span><br/>
<span>第 3 部分内容 </span>
</div>

上面两个例子使用＜br/＞标签的方式是错误的，这也是＜br/＞标签很常见的错误用法。 事实上，＜br/＞标签有自己特定的语义，不能随便用来实现换行效果。W3C标准规定，＜br/＞ 标签仅仅用于段落中的换行，不能用于其他情况。也就是说，＜br/＞标签只适合用于p标签内 部的换行，不能用于其他标签。

2. 无序列表ul 在实际开发中，对于列表型的数据，为了实现良好的语义，我们还是建议使用无序列表或者有序列表，不建议使用div等来实现

对于如图所示效果，不少新手很可能会写出如下代码来实现。

<div>
<div><span>l</span>HTML 教程 </div>
<div><span>2</span>CSS 教程 </div>
<div><span>3</span>JavaScript 教程 </div>
</div>

这种方式缺乏语义化，并且不利于维护。正确的做法是：

<ul>
<li><span>l</span>HTML 教程 </li>
<li><span>2</span>CSS 教程 </li>
<li><Sp^n>3</span>JavaScript 教程 </li>
</ul>

有人问，每一个列表项前都有数字，不应该使用有序列表来实现吗？为什么这里使用无序 列表来实现呢？假如使用有序列表，我们是做不到这种外观效果的。因为有序列表前的数字外观是固定的。在实际开发中，大多数情况下都是使用无序列表，极少情况下会使用有序列表。

3.　strong标签和em标签

strong用于实现加粗文本，em用于实现斜体文本。基于结构和样式分离的原则，标签仅仅是为了实现简单的加粗或者 斜体效果，我们一般不会用这两个。实际上，W3C对这两个标 签赋予“强调”的语义，在strong或者em标签内部的文本被 强调为重要文本。并且搜索引擎对这两个标签也赋予一定的权 重。如果在一个页面中，为了SEO而想要突出某些关键字，可以使用strong和em这两个标签。一般情况下，我们都是去掉strong和em的默认样式，然后使用CSS重新定义新的样式, 但这并不影响这两个标签的语义。也就是说，样式只会改变标签的外观，但不会改变标签的语义。

4. 　del标签和ins标签

在HTM L中，del和ins这两个标签是配合使用的。del表示“delete”，用于定义被删 除的文本。ins表示“insert”，用于定义被更新的文本。一般情况下，我们会使用CSS来重 新定义del和ins标签的样式。

举例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <p>新鲜的新西兰奇异果</p>
    <p><del>原价:￥6.50/kg</del></p>
    <p><ins>现在仅售：￥4.00/kg</ins></p>
</body>
</html>

5.　img标签

想要在页面显示一张图片，我们有两种方式：

img标签	背景图片
如果图片作为HTML的一部分，并且想要被捜索引擎识别，则应该使用img标签，例如常见的各种图片列表。	如果图片仅仅是起到修饰作用，并且不想被搜索引擎识别，则应该使用背景图片。是通过CSS来实现。

举个例子，图左这个页面中的图标图片就应该使用背景图片实现，因为这些图标并不 需要被搜索引擎识别，也不作为HTML的一部分。而图右页面中应该使用img标签来实现，因为这是页面HTML结构的一部分，并且希望被搜索引擎识别。

6.　语义化验证

判断一个页面是否语义良好一个很简单的办法就是：去掉CSS样式，然后看页面是否还具有很好的可读性。

我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标 签对字体加粗、ul标签有缩进效果等等。在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。 判断一个页面是否语义良好一个很简单的办法就是：去掉CSS样式，然后看页面是否还具有很好的可读性。

我们都知道，很多HTML标签都有一定的默认样式，例如p标签有上下边距、strong标 签对字体加粗、ul标签有缩进效果等等。在前面我们接触过，我们可以使用一个标签来代替另外一个标签，并且使用CSS修饰来实现相同的效果。也就是说，不同的HTML标签可以通过不同的CSS来实现相同的效果。但是“一个语义良好的页面”跟“一个语义不好的页面”在去除样式之后的表现却是截然不同的。

图一 语义不好的页面
图二 语义好的页面

从上面两张图我们可以看出：一个语义良好的页面在“CSS裸奔”之后，可读性也是非常高的。想要查看一个页面在“CSS裸奔”下的效果，我们可以使用Firefox浏览器的一款网页调试插件"Web Developer"来测试。在 Web Developer ZL具栏找到“CSS” —► "Disable Styles" —'"Disable All Styles" 并且选中，就可以查看页面去掉样式后的效果，如图2-21所示。Web Developer插件的安装 和使用，请自行搜索，很简单。

3. HTML5舍弃的标签

在HTML5中，除了新增标签之外，也有不少标签被舍弃了，如表1和表2所示。为了实现页面的语义化，我们在实际开发中不应该再去使用这些标签。因此了解哪些标签已经 被舍弃是非常有必要的。

对于这些被舍弃的标签，总体可以分为两大类。

（1）仅仅为了定义样式，没有任何语义，因此被舍弃。

（2）很少使用或者已经被新标签代替，因此被舍弃。

表一 HTML舍弃的标签样式（仅仅是为了定义样式）

标 签	说 明
basefont	定义页面文本的默认字体、颜色或尺寸
big	定义大字号文本
center	定义文本居中
font	定义文本的字体样式
strike	定义删除线文本
s	定义删除线文本
u	定义下划线文本

表 2 HTML5舍弃的标签(很少使用或者已被新标签代替)

标 签	说 明
dir	定义目录列表，应该用ul代替
acronym	定义首字母缩写，应该用abbr代替
applet	定义嵌入的applet,应该用object代替
isindex	定义与文档相关的可搜索索引
frame	定义frameset中的一个特定的框架
frameset	定义一个框架集
noframes	为那些不支持框架的浏览器显示文本

对于HTML语义化，我们需要注意以下两点。

1.我们应该果断舍弃那些仅仅为了定义样式而存在的HTML标签。如果仅仅是为了改 变样式，我们应该使用CSS来实现，不要使用HTML标签。

2.在不同的页面部分，我们优先使用正确的语义化标签。如果没有语义标签可用，才去考虑div和span等无语义标签。

4. HTML5 拓展了哪些内容

①　语义化标签

②　本地存储

③　兼容特性

④　2D、3D

⑤　动画、过渡

⑥　CSS3 特性

⑦　性能与集成

1) HTML5常⽤的语义化和结构元素

l 结构元素

header标签： 通常被放置在⻚⾯或者⻚⾯中某个区块元素的顶部,⽤来介绍内容或者当做导航链接栏， 在⼀个⽂档中，您可以定义多个< header>元素。

nav标签： 通常表示⻚⾯的导航。

main标签： ⽂档主要内容 标签：使⽤在相对⽐较独⽴、完整的内容模块，⼀般使⽤在博客、论坛帖⼦、新闻报道、 ⽤户评论。

section标签： ⼀般⽤来做内容的分组，⽐如⽂章的章节。

aside标签： 包含的内容不是⻚⾯的主要内容、具有独⽴性，是对⻚⾯的补充。 < aside>标签⼀般使⽤在⻚⾯、⽂章的侧边栏、⼴告、友情链接等区域。

footer标签：⼀般放在⻚⾯或⻚⾯中某个区块的底部，包含版权信息、联系⽅式等。

其他元素 ：

ruby标签： 定义ruby注释(中⽂或字符)

将< ruby>标签与< rt>和< rp>标签⼀起使⽤。

< rp>标签可选，该标签定义的是当浏览器不⽀持"ruby元素"时显示的内容

progress标签： 定义进度条

mark标签： ⽤来标记⽂本

Embed ： ⽤来嵌⼊指定的内容，⽐如插件

2) HTML5图形绘画标签 canvas

• canvas定义

canvas标签⽤来定义图形，是⼀个图形容器，常常⽤来进⾏绘图操作，要与js搭配使⽤。 

•  创建⼀个画布容器

  width，height定义画布容器⼤⼩

• canvas本身没有绘图能⼒，绘图操作要在js⾥进⾏

1. 通过js获取canvas元素对象

<canvas id="myCanvas" width="500" height="400" style="border:1px solid #000"></canvas>

2. 创建context对象，context对象拥有多种绘制⽅法，⼀般通过调⽤获取的canvas元素对象下 的⽅法getContext来创建

var canvas = document.getElementById("myCanvas")

3) 实例线条

三角形

//开始⼀条路径
ctx.beginPath();
//将画笔移动到指定起始坐标点上
ctx.moveTo(100, 100);
//添加⼀个点，创建从上⼀个点到该点的线条
ctx.lineTo(300, 100);
ctx.lineTo(100, 200);
//创建起始坐标点到最终坐标点的路径
ctx.closePath();
//执⾏绘制
ctx.stroke();

1. 实例矩形 rect(x,y,width,height)

•  x，y分别为矩形左上⻆横纵坐标点
• width，height为矩形的宽⾼

//开始⼀条路径
ctx.beginPath();
//创建矩形
ctx.rect(100,100,200,200);
//填充颜⾊
ctx.fillStyle="red";
ctx.fill();
//执⾏绘制
ctx.stroke();

2. 实例圆形

arc(x,y,r,sAngle,eAngle,counterclockwise)⽅法创建弧/曲线

• x，y分别为圆的中⼼的横纵坐标
• r为圆的半径
• sAngle 起始⻆，以弧度计。(弧的圆形的三点钟位置是0度)
• eAngle 结束⻆，以弧度计。
• counterclockwise 可选。规定顺时针还是逆时针绘图。false为顺时针，true为逆时针

//开始⼀条路径
ctx.beginPath();
//创建圆形
ctx.arc(100, 100, 50, 0, 2 * Math.PI);
//执⾏绘制
ctx.stroke();

4) HTML5⽮量图形 SVG

1.什么是SVG？

•  SVG指可伸缩⽮量图形
• SVG⽤于定义⽤于⽹络的基于⽮量的图形
•  SVG是⼀种基于XML语法的图像格式
•  SVG图像在放⼤的情况下图形不会失真

2.SVG的优点

• SVG是可伸缩的
• ⽂件体积较⼩
• 可⽆限放⼤且不会失真

svg代码直接插⼊⽹⻚，示例如下：

<svg xmlns="http://www.w3.org/2000/svg">

<circle id="mycircle" cx="400" cy="300" r=50/>

</svg>

SVG 代码也可以写在⼀个独⽴⽂件中，然后⽤ <img> 、 <object> 、 <embed> 、 <iframe> 等标签插

<img src="circle.svg">

CSS 也可以使⽤ SVG ⽂件

.logo {

background: url(icon.svg);

}

5) HTML5 多 媒体播放常⽤标签

•  video标签-视频播放 1.video标签目前支持三种格式：

2. 语法格式：

<video src="./media/video.mp4" controls="controls"></video>

示例如下：

<video width="500" height="400" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不⽀持 HTML5 video 标签。
</video>

3.video标签可选属性：

属性	值	描述
autoplay	autoplay	⾃动播放，视频就绪后⻢上播放，谷歌浏览器需要添加muted来解决自动化播放的问题****
controls	controls	显示控件
width	Pixels(像素)	视频播放器的宽度
height	Pixels(像素)	视频播放器的宽度
loop	loop	循环播放
muted	muted	视频静⾳
poster	imgurl	视频下载时显示的封⾯图，⽤户点击播放时隐藏
src	url	视频的路径
none		⻚⾯加载后不加载⾳频/视频
preload	auto ⻚⾯加载，开始加载⾳频/视频metadata ⻚⾯加载后仅加载⾳频/视频的元数据none ⻚⾯加载后不加载⾳频/	规定是否预加载视频(如果有了autoplay可忽略这个属性）

video元素⽀持多个< source >元素，< source >元素可以链接不同的视频⽂件，浏览器会使 ⽤第⼀个可识别的格式

4.代码演示

<body>

  <!-- <video src="./media/video.mp4" controls="controls"></video> -->
  <!-- 谷歌浏览器禁用了自动播放功能，如果想自动播放，需要添加 muted 属性 -->
  <video controls="controls" autoplay muted loop poster="./media/pig.jpg">
    <source src="./media/video.mp4" type="video/mp4">
    <source src="./media/video.ogg" type="video/ogg">
  </video>
</body>

•  audio标签-音频播放 1.audio 标签说明

可以在不使用标签的情况下，也能够原生的支持音频格式文件的播放，

但是：播放格式是有限的

2.audio 支持的音频格式

3.audio 的参数

4.audio 代码演示

<body>

  <!-- 注意：在 chrome 浏览器中已经禁用了 autoplay 属性 -->

  <!-- <audio src="./media/snow.mp3" controls autoplay></audio> -->

  <!--
    因为不同浏览器支持不同的格式，所以我们采取的方案是这个音频准备多个文件
   -->
  <audio controls>
    <source src="./media/snow.mp3" type="audio/mpeg" />
  </audio>
</body>

多媒体标签总结

• 音频标签与视频标签使用基本一致
• 多媒体标签在不同浏览器下情况不同，存在兼容性问题
• 谷歌浏览器把音频和视频标签的自动播放都禁止了
• 谷歌浏览器中视频添加 muted 标签可以自己播放
• 注意：重点记住使用方法以及自动播放即可，其他属性可以在使用时查找对应的手册

6) HTML5新增 input 输入 类型

属性值	说明
type=“email”	限制用户输⼊格式为email模式，⾃动验证输⼊值是否为email
type=“url”	限制用户输⼊值为url格式
type=“date”	限制用户输入⽇期类型
type=“time”	限制用户输入必须为时间类型
type=“mouth”	限制用户输入必须为月类型
type=“week”	限制用户输入必须为周类型
type=“number”	限制用户输入必须为数字类型max规定允许的最⼤值min规定允许的最⼩值step规定每⼀段数字间隔
type=“tel”	限制用户输入必须为手机号码
type=“search”	搜索框
type=“color”	选色器
Type=“range”	包含⼀定范围内数字值的输⼊域max规定允许的最⼤值min规定语序的最⼩值step规定每⼀段数字间隔

7) HTML5常⽤的表单属性

属性	值	说明
autocomplete	off/on	该属性规定form或input域是否有⾃动完成功能，当⽤户在输⼊域输⼊时提示之前输⼊的内容选项。注意：该属性适⽤于form标签，以及以下input标签:text，search，url，tel，email，password，datepickers，range以及color
autofocus	autofocus	该属性规定在⻚⾯加载时，该input框⾃动获得焦点
width和height属性	Pixels(像素)	该属性只适⽤于image类型的input标签。
multiple	multiple	规定input元素可选择多个值注意：该属性适⽤于email和fifile类型，提交多个邮箱时⽤逗号，隔开。
pattern		使⽤⼀个正则表达式⽤于验证input框的值注意：该属性适⽤于以下类型的input标签：text，search，url，tel，email和password。
placeholder	提示文本（占位符）	该属性给输⼊框提供输⼊提示注意：该属性适⽤于以下类型的input标签：text，search，url，tel，email以及password。
required	required	表示该输⼊框必须填写，不能为空注意：该属性适⽤于以下类型的input标签：text，search，url，tel，email，password，datepickers，number，checkbox，radio以及fifile。

8) HTML5必备知识点 Web本地储存

1.什么是HTML5web存储？

HTML5web存储可以在本地储存⽤户的浏览数据。web存储相对cookie更加的安全与快速， 它的数据不会保存在服务器上。他也可以存储⼤量的数据，⽽不影响⽹站的性能。

2.客户端储存数据之localStorage

⽤于⻓久保存⽹站的数据，保存的数据没有过期时间，可⼿动删除

3.常⽤API如下：

• 保存数据：localStorage.setItem(key,value);
• 读取数据：localStorage.getItem(key);
• 删除单个数据：localStorage.removeItem(key);
• 删除所有数据：localStorage.clear();
• 得到某个索引的key：localStorage.key(index);

提示：键/值对通常以字符串储存 

4. 客户端储存数据之sessionStorage

sessionStorage储存的数据在⽤户关闭浏览器窗⼝后，数据会被删除

API ：如localStorage相同

5. cookie，localStorage以及sessionStorage的区别

• 共同点：都是保存在浏览器端，且是同源共享的。

• 区别：

cookie数据会在浏览器和服务器之间进⾏传递，每次http请求都会携带cookie，⽽ sessionStorage和localStorage仅在客户端保存，不参与服务器通信。

存储⼤⼩限制也不同，cookie数据不能超过4k，sessionStorage和localStorage的⼤⼩⼀般是5M。 数据的周期时间不同，cookie数据在设置的过期时间内⼀直有效，sessionStorage数据 会在当前浏览器窗⼝时清除，localStorage数据则始终存在，即使关闭浏览器或窗⼝， 直到⼿动清除数据。 cookie相⽐其他两个安全性不⾼，容易被拦截获取。

—————————————————————————————————————————————————————————————————————————————————————————— 到这里HTML就结束了，下一篇就是三剑客中CSS了 可能会有点杂，是因为收集了不同的资料整理的，见谅。 有什么问题可以私信我，我们一起交流。