HTML5 文档结构
HTML5 文档结构同样是由头部和主体两部分组成，只是 新增了一些结构元素，如header、nav、article、section、 aside、footer 六个结构元素，这些元素都是块级元素。
语法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5文档结构</title>
</head>
<body>
<header>
<nav></nav>
</header>
<article>
<section></section>
</article>
<aside></aside>
<footer></footer>
</body>
</html>HTML5 新增结构元素
1．header 标记
header 标记定义文档和区域的页眉，通常是一些引导和 导航信息。它不局限于写在网页头部，也可以写在网页内容里 面。通常标记至少包含（但不局限于）一个标题标 记（h1～h6），也可以包括hgroup（标题组合）标记、表格 标识、搜索表单、导航等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5文档结构</title>
</head>
<body>
<header>
<hgroup>
<h1>HTML5是下一代HTML。</h1>
<h3>什么是HTML5？</h3>
<h5>HTML5将成为HTML，XHTML以及HTML DOM的新标准。</h5>
</hgroup>
</header>
</body>
</html>
2．nav 标记
nav 标记代表页面的一个部分，是一个可以作为页面导航的链 接组。建议不要在footer元素中使用nav 元素，否则易造成页面显 示不正确。配置相应的CSS 代码可以实现水平导航。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5文档结构</title>
</head>
<body>
<header>
<hgroup>
<nav>
<ul>
<li><a href="#">HTML 参考手册</a></li>
<li><a href="#">HTML 实例</a></li>
<li><a href="#">HTML 测验</a></li>
</ul>
</nav>
</header>
</body>
</html>
3.article标记
article代表一个独立的、完整的相关内容块，可独立于页面其 它内容使用。例如论坛帖子、博客文章、新闻故事、评论等。
一般来说，article会有标题部分，通常包含在header内，有时 也会包含footer。article标记可以嵌套，内层的article对外层的 article标记有隶属关系。例如1篇博客的文章可以用article显示， 然后后续的一些评论可以用article的形式嵌入其中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<article>
<header>
<hgroup>
<h1>HTML 5结构元素简介</h1>
</hgroup>
<time datetime="2024-05-30">2024-05-30</time>
</header>
<p>可以的</p>
</article>
</body>
</html>
4．section 标记
section 标记定义文档中的节，用于对网站或应用程序中 页面上的内容进行分块，它表示一个与主内容相关的独立区域 ，例如章节、页眉、页脚或文档中的其他部分。会在文档流中 开始一个新的节。
“article”元素强调整体性与独立性，通常用于标记可以 独立存在的完整内容块，如一篇文章或论坛帖子;
“section”元素强调对内容进行分块和分组，通常用于标 记页面上的某个特定区域或章节
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5结构元素artical和section标记的应用</title>
</head>
<body>
<section>
<h1>section标记</h1>
<p>用来定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部
分。</p>
</section>
<article>
<h1>article标记</h1>
<p>article标记标识了Web页面中的主要内容。以博客为例，每篇帖子都构成一个重要
内容。</p>
</article>
</body>
</html> 
5．aside 标记
aside（侧栏，也称为旁注）标记用来说明其所包含的内 容与页面主要内容相关，但不是该页面的一部分，类似于使用 括号对正文进行注释。括号中的内容提供关于该元素的一些附 加信息，例如广告、成组的链接、侧栏等。
<!-- edu_13_2_5.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5结构元素aside和artical标记的应用</title>
</head>
<body>
<header>我的博客</header>
<section>
<article>
<p>这是页面上重要的内容部分。也许是博客文章。带aside元素。</p>
<aside
style="float: right; width: 100px; height: 100px; background: #eeffcc"
>
<p>这是第一篇博客文章。</p>
</aside>
</article>
<article>
<p>这是页面上重要的内容部分。也许是博客文章。不带aside元素</p>
</article>
</section>
</body>
</html>
6．footer 标记
footer 标记定义section 或文档的页脚，包含了与页面 、文章或部分内容有关的信息，例如文章的作者或者日期。作 为页面的页脚时，一般包含了版权、相关文件和链接。它与页 眉header 标记用法相同，在一个页面中可以多次使用，若在 一个区段的最后使用footer标记，那么它就相当于该区段的页 脚。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5结构元素footer和section标记的应用</title>
</head>
<body>
<footer>
<div style="text-align: center">
<section>
<a href="http://www.caict.ac.cn/" target="_blank">CAICT中国信通院</a>
<a href="//www.w3.org/" target="_blank">W3C</a>
<a href="//www.dcloud.io/" target="_blank">DCloud</a>
</section>
<span style="padding: 2px 5px">京ICP备12046007号-5</span>
<span style="padding: 2px 5px">HTML5中国产业联盟版权所有</span>
</div>
</footer>
</body>
</html>
HTML5除了新增的结构元素header、nav、article、aside、 section、footer外，还增加了新的内联元素(time、meter及 progress等)、新的内嵌元素(video和audio)、新的交互元素（ details、datagrid和command等）及其它页面元素。
hgroup 标记
标题组合hgroup 标记是对网页或区段section 的标题元素（ h1～h6）进行组合。例如，在某一区段中需要连续设置多个标题标 记，可以使用hgroup 标记来组合。
基础语法：
<hgroup>
<h1>标题1</h1>
<h2>标题2</h2>
……
</hgroup>
<!-- edu_13_3_1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5页面元素hgroup标记的应用</title>
</head>
<body>
<hgroup>
<h1>JSDoc+规范</h1>
<h2 style="color: red">介绍</h2>
</hgroup>
<p style="text-indent: 2em">
编写JSDoc是为了增强代码的可读性，以及方便导出 API文档。它的规范可参考JSDoc
3对于代码规范要求高的工程师和JS框架的开发者，熟 悉JSDoc是必须的技能。
</p>
</body>
</html>
figure 标记与figcaption 标记
figure标记用于对元素进行组合，常用于图像与图像描述组合 。figcaption（图题）标记用于定义figure元素的标题（caption） ，可以给一组图像标记定义标题，但figcaption 标记不是必需的。 如果包含了figcaption元素，那么它必须放置在figure元素的第一个 或最后一个子元素的位置上。
基础语法：
<figure>
<p>图像文件说明内容。</p>
<img src="" width="" alt="" title="" />
<figcaption>为图添加标题)</figcaption>
</figure>
mark 标记与time 标记
记号mark 标记用来定义带有记号的文本。在需要突出显示文 本时可以使用mark 标记。此标记对关键字做高亮处理（黄底色标注 ），突出显示，标注重点，在搜索方面可以应用。
时间time 标记用来定义公历的时间（24 小时制）或日期，时 间和时区偏移是可选的。该标记能够以机器可读的方式对日期和时 间进行编码。该标记不会在任何浏览器中呈现任何特殊效果。
1．基本语法
<mark>重点标注的内容</mark> <time>9:00</time>
<!-- 定义时间 -->
<time datetime="2017-05-01" pubdate="pubdate">国际劳动节</time>
time标记的pubdate属性：指示该标记中的日期/时间是文档的发布日期，取值一般为 “pubdate”。
time标记的datetime属性：规定相应的时间或日期，不定义该属性时，由元素的内容给 定日期/时间
details 标记与summary 标记
细节details标记是一个开关式、交互式控件，用来定义用户可 见的或者隐藏的需求补充细节，任何形式的内容都能被放在该标记 中。该元素的内容对用户是不可见的，除非设置了open属性。
摘要summary 标记配合使用可以为details定义标题， summary元素应该是details元素的第一个子元素。标题是可见的 ，用户单击标题时，会显示出details。只有Chrome、Safari 6 以 上支持summary标记。
基本语法：
<details open>
<summary>details的标题</summary>
<!-- details的详细内容 -->
</details>
progress 标记与meter 标记
进度Progress标记用来定义运行中的任务进度（进程）。 该标记有两个属性：max表示规定需要完成的值；value规定 进程的当前值。
度量meter 标记定义已知范围或分数值内的标量测量，也 被称为gauge(尺度)。如磁盘用量、CPU使用率等等。meter 标记属性如表所示。
progress 和meter 标记的应用
<head>
<meta charset="UTF-8">
<title>HTML5页面元素progress和meter标记的应用</title>
</head>
<body>
<p><strong>文件下载进度：</strong>
<progress value="22" max="100">设置属性</progress></p>
<p><strong>空进度条：</strong><progress>未设置属性</progress></p>
<p><strong>服务器CPU使用情况：</strong>
<meter value="0.3" high="0.9" low="0.1" optimum="0.5">3/10</meter></p>
<p><strong>内存使用情况：</strong><meter value="0.6" max="1" min="0"
optimum=".75" >60%</meter></p>
<p><mark>注释：</mark>IE9以及更早的版本不支持progress、meter 标记。</p>
</body>
</html> 
input 标记与datalist 标记
input 标记用于搜集用户信息。详细介绍请参见第12 章， 此处仅介绍通过input 标记的list 属性与datalist 标记的id 属 性进行关联，即将此两个属性的值设置为相同的值，通过 datalist 标记列出所有合法的输入值列表。
选项列表datalist 标记用来定义input 标记可能的选项列表 。一般与input 标记配合使用，主要用来定义input 可能的值 ，提供“自动完成”的功能，方便用户输入。datalist 标记及 其选项不会被显示出来，只有当用户鼠标盘旋在input 标记域 时，才能看到“▼” ，然后单击“▼”弹出一个下拉列表，提 供用户选择作为用户的输入数据。
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5页面元素input和datalist标记的应用</title>
</head>
<body>
<input list="courese" placeholder="请选择课程" />
<datalist id="courese">
<option value="HTML5移动应用开发"></option>
<option value=".NET应用开发"></option>
<option value="JavaEE应用开发"></option>
<option value="PHP+MySQL应用开发"></option>
</datalist>
<p>
<mark>注释：</mark>除了IE9和更早版本的IE浏览器以及Safari不支持
datalist标记，其余均支持。
</p>
</body>
</html>
HTML5 表单
表单是HTML 中获取用户输入的手段，HTML5 对表单 系统做了彻底的改造，以适应当前的应用。
在HTML5 中增加了从用户收集特定类型数据的新方法和 在浏览器中检查数据的能力，但在使用有些新增特性前最好先 检查一下浏览器的支持情况。
HTML5给form表单标记新增了一些属性，这些属性是autocomplete、 novalidate。
autocomplete属性
autocomplete：on|off。属性规定form标记或类型为text、search、url 、tel、email、password、date pickers、range、color的input标记是否 具有自动完成的功能。当表单元素设置了自动完成功能后，会记录用户输入 过的内容，双击表单元素会显示历史输入。
novalidate属性
novalidate：true|false。属性规定在提交表单时不验证form或类型为 text、search、url、tel、email、password、date pickers、range、 color的input标记。
案例：
<!-- edu_17_4_1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5表单form的autocomplete和novalidate属性的应用</title>
<script type="text/javascript" src="html5shiv.min.js"></script>
</head>
<body>
<form action="" method="get" novalidate="novalidate" autocomplete="on">
<fieldset>
<legend align="center">个人基本信息</legend>
姓名:<input type="text" name="name" /><br />
邮箱: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" value="提交" />
</fieldset>
</form>
<p>请填写并提交此表单，然后重载页面，来查看自动完成功能是如何工作的。</p>
<p>请注意，表单的自动完成功能是打开的，而e-mail 域是关闭的。</p>
</body>
</html>
HTML5给input 标记新增的属性
- height 和width 属性。height 和width 属性规定只适用于image 类型的input 标记的图像高度和宽度。
- form 属性。form 属性规定输入域所属的一个或多个表单。form 属性必须引用所属表单的id。
- list 属性。list属性规定输入域的datalist。datalist标记是输入域 的选项列表。当用户将鼠标盘旋在该域上时，并获得焦点后，单击 该域会弹出下拉列表选项，简短的提示在用户输入值前会显示在输 入域上，方便用户快速选择输入。该属性支持类型为text、search 、url、tel、email、password的input标记。
- placeholder 属性。提供一种提示，描述输入域所期待的值。
- autofocus属性。autofocus属性规定在页面加载时，该域自动地 获得焦点。该属性适用于所有input标记的类型。
案例：
<!-- edu_13_4_2.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5的input标记新增部分属性的应用</title>
</head>
<body>
<fieldset style="text-align: center; border: 1px solid red">
<legend align="center">用户登录</legend>
<form name="myform" action="" method="get">
姓名:
<input
type="text"
name="name"
placeholder="请输入姓名"
autofocus="autofocus"
/>
班级：<input
type="text"
name="class"
placeholder="请输入班级"
list="class_list"
/>
<datalist id="class_list">
<option value="15计算机1班"></option>
<option value="15软件工程"></option>
<option value="15信息管理与信息系统"></option>
<option value="15电子信息工程"></option>
</datalist>
<input type="image" src="eg_submit.jpg" width="35" height="35" />
</form>
<p>下面的输入域在 form 元素之外，但仍然是表单的一部分。</p>
密码：<input type="password" name="user_key" form="myform" />
</fieldset>
</body>
</html>
HTML5 新增的表单属性
- required 属性。required 属性规定必须在提交之前填写输入域（ 不能为空）。required 属性适用于类型为text、search、url、tel 、email、password、date pickers、number、checkbox、 radio、file 的input 标记。属性设置方法为 required= “required”或直接使用该属性required。
- min、max 和step 属性。min、max 和step 属性用于为包含数字 或日期的input 类型规定限定（约束）。其中max属性规定输入域 所允许的最大值。min 属性规定输入域所允许的最小值。step 属 性为输入域规定合法的数字间隔，例如step= “5” ，则合法的数 是 -5、0、5、10 等。该组属性适用类型为 date pickers、 number、range 的input 标记。
- multiple 属性。规定输入域中可选择多个值。适用于类型为email 、file 的input 标记。
- form overrides 表单重写属性，允许重写form 元素的某些属性设 定。这些重写属性分别是重写表单的action 属性formaction、重 写表单的enctype 属性formenctype、重写表单的method 属性 formmethod、重写表单的novalidate 属性formnovalidate、重 写表单的target 属性formtarget。表单重写属性适用于类型为 submit 和image 的input 标记。
- pattern属性（一般为正则表达式）。规定用于验证input域的模式 。适用于text、search、 url、tel、email、password等类型的 input标记。
HTML5 新增output、keygen、datalist 等表单元素
1．output 标记
output 标记定义不同类型的输出。该标记有for、form、 name 三个属性。for 属性用于定义输出域相关的一个或多个元素， 其值为每一元素的id，多个id 之间用空格分隔。form 属性用于定义 输入字段所属的一个或多个表单。name 属性用于定义对象的唯一 名称（表单提交时使用）。
<!-- edu_13_4_4.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>HTML5的input标记新增部分属性的应用</title>
<script type="text/javascript" src="html5shiv.js"></script>
</head>
<body>
<form oninput="sum.value=parseInt(num1.value)+parseInt(num2.value)">
0<input type="range" id="num1" value="50" min="0" max="100" />100 +<input
type="number"
id="num2"
value="50"
/>
=<output name="sum" for="num1 num2"></output>
</form>
<p><strong>注意:</strong>IE浏览器不支持output标记。</p>
</body>
</html>
2．keygen 标记
keygen 标记用来提供一种验证用户的可靠方法。keygen 元素是 密钥对生成器（key-pairgenerator）。当提交表单时，会生成两 个键：一个是私钥（private key），一个公钥（public key）。
私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证 用户的客户端证书（clientcertificate）。目前，浏览器对此元素 的糟糕的支持度不足以使其成为一种有用的安全标准。
3．datalist 标记
datalist 标记规定了input 标记可能的选项列表。datalist 标记被 用来为input 标记提供“自动完成”的特性。使用input 标记的list 属性来绑定datalist 元素（list 属性=datalist 的id 属性值）。
HTML5 新增的input 类型
HTML5 增加很多新的表单输入类型，分别为color、date pickers（日期选择器，包括date、month、week、datetime、 time、datetime-local）、email、number、range、search、 tel、url。目前所有的主流浏览器一般都支持新的input 类型，即使 不被支持，仍可以显示为常规的文本域。
Input 类型——Date Pickers（日期选择器）
HTML5 提供多个可供选取日期和时间的新输入类型：
（1）date——选取日、月、年。
（2）month——选取月、年。
（3）week——选取周和年。
（4）time——选取时间（小时和分钟）。
（5）datetime——选取时间、日、月、年（UTC 时间）。
（6）datetime-local——选取时间、日、月、年（本地时间）。
<!-- edu_13_4_6.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表单新增input类型的应用</title>
</head>
<body>
<fieldset>
<legend align="center">新生报到须知</legend>
开学日期：<input type="date" /><br />
开学起始周: <input type="week" name="user_date" /><br />
开始起始月: <input type="month" name="user_date" /><br />
交费时间: <input type="time" name="user_date" /><br />
日期与时间: <input type="datetime" name="user_date" /><br />
本地日期与时间: <input type="datetime-local" name="user_date" /><br />
<input type="submit" value="提交" />
<input type="reset" />
</fieldset>
</body>
</html>
input 类型：color
<!-- 从取色器拾取颜色 -->
<input type="color" name="favcolor">
input 类型：tel。
定义输入电话号码字段
<input type="tel" name="usrtel">
input 类型：email
email 类型用于包含e-mail 地址的输入域 。在提交表单时，会自动验证email 域的值是否合法有效。
<!-- 自动验证邮箱格式 -->
<input type="email" name="useremail">
input 类型：number
number 类型用于包含数值的输入域。 此类型的input 标记常用属性如表所示。
<input type="number" name="mynumber" min="0" max="100">
HTML5 新增的input 类型
input 类型：range
range 类型用于包含一定范围内数字 值的输入域。range 类型显示为滑动条。
<input type="range" name="money" min="1" max="1000" step="5">
input 类型：search
search 类型用于搜索域，例如站点 搜索或Google 搜索。
<input type="search" name="websidesearch">
input 类型：url
url 类型用于包含URL 地址的输入域。在 提交表单时，会自动验证url 域的值。
<input type="url" name="homepage">
案例：
<!-- edu_13_4_7.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表单新增input类型的应用</title>
</head>
<body>
<fieldset style="width: 500px; height: 200px; padding: 20px 50px">
<legend align="center">新增其它input类型</legend>
<form method="post" action="">
设置颜色：<input type="text" name="color1" id="color1" readonly />
<input
type="color"
name="color2"
oninput="color1.value=color2.value"
/><br />
输入邮箱: <input type="email" name="useremail" /><br />
站内搜索: <input type="search" name="insidesearch" /><br />
电话号码: <input type="tel" name="usrtel" /><br />
个人主页：<input type="url" name="homepage" /><br />
年龄：<input
type="range"
name="age"
min="1"
max="120"
oninput="age_num.value=age.value"
/><output name="age_num" for="age"></output><br />
期望薪酬：<input
type="number"
name="quantity"
min="2500"
max="10000"
step="100"
value="2500"
/><br /><input type="submit" value="提交" />
<input type="reset" />
</form>
</fieldset>
</body>
</html>
HTML5 视频与音频
video 标记及属性
HTML5 规定了一种通过video 元素来包含视频的标准方法。
Video 标记支持三种视频格式，分别为MP4、WebM、Ogg。 Video标记提供了播放、暂停和音量控件来控制视频。
1．基本语法
<video src="movie.ogg" width="320" height="240" controls="controls">
您的浏览器不支持 video标记。
</video>
2．属性说明
width 和height 属性：控制视频的尺寸。使用时需要设置视频的高度 和宽度，便于视频播放。如果不设置宽度和高度，页面就会根据原始视频 的大小而改变。
src 属性：规定要播放的视频的url。
preload：设置该属性，则视频在页面加载时进行加载，并预备播放。 用法<video preload="auto|metadata|none">,auto（一旦页面 加载，则开始加载音频/视频）、metadata（当页面加载后仅加载音频/视 频的元数据）、none（页面加载后不应加载音频/视频）
loop：设置该属性，则当媒体文件完成播放后再次开始播放。
poster 属性：用于在视频下载时显示的图像（海报图片），或者在 用户点击播放按钮前显示的图像。如果未设置该属性，则使用视频 的第一帧来代替。赋值方法：poster= “url” 。
controls属性：设置该属性，则页面上会显示播放控件。浏览器控 件应该包括播放、暂停、定位、音量、全屏切换、字幕(如果可用)、 音轨(如果可用)。
注意：如果浏览器不支持<video >标记，就在<video >与</video>标记之间插入相关提示信息。
video 标记支持多个source 标记。可以使用source 标记为 video 标记和audio 标记提供多个不同的音频、视频文件，以 解决浏览器支持。如果浏览器支持将使用第一个可识别的格式
<!--edu_13_5_1.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>视频标记的应用</title>
</head>
<body>
<fieldset style="text-align: center; float: left">
<legend>src属性提供视频文件</legend>
<video
src="“movie.ogg”"
poster="“url”"
loop
autoplay
width="“320”"
height="“240”"
controls="“controls“"
>
您的浏览器不支持 video标记。
</video>
</fieldset>
<fieldset style="text-align: center; float: left">
<legend>source标记提供不同的视频文件</legend>
<video width="320" height="240" controls="controls">
<source src="movie.ogg" type="video/ogg" />
<source src="movie.mp4" type="video/mp4" />
您的浏览器不支持 video标记。
</video>
</fieldset>
</body>
</html>
audio 标记及属性
HTML5 使用audio 标记能够播放声音文件或者音频流。同样可以使 用source 标记给audio 标记提供不同格式的音频文件，浏览器将使用第一 个支持的音频文件。
<fieldset style="text-align: center; float: left">
<legend>src属性提供音频文件</legend>
<audio src="horse.ogg" controls="controls">
您的浏览器不支持 audio标记（元素）。
</audio>
</fieldset>
<fieldset style="text-align: center; float: left">
<legend>source标记提供不同的音频文件</legend>
<audio controls="controls">
<source src="horse.ogg" type="audio/ogg" />
<source src="horse.mp3" type="audio/mpeg" />
您的浏览器不支持 audio标记（元素）。
</audio>
</fieldset>
CSS3 基础应用
CSS3 新特性
- 为了满足Web UI 的开发需求，它提供了一系列强大的功能 ，如许多新的CSS 属性（文字、布局、颜色等）、各种CSS 特效、CSS 动画、元素的变换等。
- CSS3 被细分为许多“模块” 。CSS2 中已经拆分成小块， 又新增加了一些最重要的CSS3模块，分别为选择器、盒模型 、背景和边框、文字特效、2D/3D 转换、动画、多列布局、 用户界面。许多新的CSS3 属性已在目前主流的浏览器中得 到应用。
CSS3 浏览器兼容性
1．常用的浏览器属性前缀
为了让CSS样式能够满足不同浏览器版本的需要，需要在样式属性前面 增加一些区分不同浏览器的前缀。
-webkit-：适用于webkit 核心浏览器，包含Safari、Chrome 等。
-moz-：适用于Firefox 浏览器等。
-ms-：适用于IE 浏览器。
-o-：适用于Opera 浏览器。
在实际开发过程中，为了满足不同浏览器对CSS3新特性的支持，需要如下 声明：
Div{-moz-animation: myfirst 5s; /* Firefox */
-webkit-animation: myfirst 5s; /* Safari 和 Chrome */
-o-animation: myfirst 5s; /* Opera */
-ms-animation: myfirst 5s; /* IE */
animation: myfirst 5s; /* 标准属性写在最后， */
}
2．CSS3 前缀解决方案
为了简化开发过程和相关的代码冗余问题，在页面中引入了prefix-free 这个类库，可以自动帮助在CSS 中添加相关的浏览器 特有的前缀属性。
-prefix-free 是一个JavaScript 工具库，用户再也不需要编写 带有浏览器前缀的CSS代码，在需要的时候，-prefix-free 会自动 帮助添加当前浏览器需要的前缀。引用方式如下：
3．CSS 样式重置方案
由于不同的浏览器定义的HTML元素的默认样式不尽相同, 导致页面在不同的浏览器中显示会有一定的差异，为了保护所 有 浏 览 器 默 认 样 式 而 不 是 完 全 去 掉 它 们 ， 推 荐 使 用 Normalize.css来统一不同浏览器下的样式。
用户可以从Github 下载Normalize.css，然后引用到页面 中就可以。也可以在Normalize.css 源码的基础上重新编写， 在必要的时候用自己写的CSS 覆盖默认值。
CSS3 边框
1.border-radius圆角边框
<!-- edu_13_6_1.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3边框的应用</title>
<style type="text/css">
div {
float: left;
width: 120px;
height: 120px;
margin: 50px 80px;
background: #dadada;
border: 6px solid #00cc66;
padding: 10px;
}
#div1 {
border-radius: 25px;
}
#div2 {
border-radius: 25px 50px;
}
#div3 {
border-radius: 80px 100px 60px 120px/50px 60px 70px 70px;
}
</style>
</head>
<body>
<h3>CSS3圆角边框</h3>
<hr />
<div id="div1" class="">
<p>半径均相同</p>
</div>
<div id="div2" class="">
<p>左、右对角的半径相同</p>
</div>
<div id="div3" class="">
<p>每个角水平与垂直半径不同</p>
</div>
</body>
</html>
2．box-shadow 边框阴影
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3边框的应用</title>
<style type="text/css">
div {
float: left;
width: 120px;
height: 120px;
margin: 50px 80px;
background: #dadada;
border: 6px solid #00cc66;
padding: 10px;
}
#div1 {
border-radius: 25px;
box-shadow: 0 0 30px 20px #6699ff inset;
}
#div2 {
border-radius: 25px 50px;
boxshadow: 0px 0px 45px 10px #9999ff;
}
#div3 {
border-radius: 80px 100px 60px 120px/50px 60px 70px 70px;
box-shadow: 20px 20px 35px 15px #99ff33;
}
</style>
</head>
<body>
<h3>CSS3圆角边框、阴影</h3>
<hr />
<div id="div1" class=""><p>半径均相 同,内部阴影</p></div>
<div id="div2" class=""><p>左、右对 角的半径相同，外部阴影</p></div>
<div id="div3" class="">
<p>每个角水 平与垂直半径不同，带水平、垂直偏移的外部阴 影</p>
</div>
</body>
</html>
3．border-image 边框图像
- border-image-source 属性：使用绝对或相对url 地址指定边框图像的路径。如果只设置border-imagesource属性而其他属性使用缺省值，则图片按照边框宽 度缩放至合适尺寸后安放在边框四角。
border-image-source: url("border.png");
- border-image-slice 属性：设置边框素材的切割尺 寸。依次是上横切割线，右竖切割线，下横切割线，左 竖切割线。数值分别代表从上、右、下、左边缘向素材 中心延伸的像素/百分比数
border-image-slice: number |% |fill; border-image-slice: 10 10 30 10;
- border-image-width 属性：设置边框图像宽度
- border-image-outset 属性：设置border-image 超出边框的量
border-image-outset: length | number | percentage | auto; /* 1～4个值 */
- border-image-repeat 属性（边框图像重复）。该属性用于设置 边框图像的重复方式。
border-image-repeat: stretch | round | repeat
该属性值有三种取值，分别为stretch（拉伸）、round（环绕）、repeat （复制）。
默认值为stretch。stretch 表示拉伸图像来填充区域；repeat 表示用平铺方式来填充边框背景图，当图片碰到边界时，如果超过则被截 断；round 表示用平铺方式来填充边框背景图，图片会根据边框的尺寸动 态调整图片的大小直至正好可以铺满整个边框。
CSS3 转换transform 属性
1．CSS3 2D 转换
实现CSS3 2D 转换的常用方法有translate()、rotate()、scale()、 skew()、matrix()。
位移translate(x,y)
translate(x,y)方法的作用是将元素从当前位置根据给定的x 轴坐 标和y 轴坐标进行移动。translate()方法还提供根据单一轴移动的方 法，分别是translateX()和translateY()。
旋转rotate(deg)
可以对元素旋转给定的角度，正值为顺时 针，负值为逆时针。
缩放scale(x, y)
scale(x,y)方法的作用是缩放指定的元素，参数x 表示元素宽度的缩放倍数，参数 y 表示元素高度的缩放倍数。scale 方法也可以接受负值，当参数x 为负值时，元素 内容会横向倒置；当参数y 为负值时，元素内容会纵向倒置。
transform:scale(x,y);
倾斜skew(deg, deg)
skew(x,y)是将元素沿X轴和Y轴方向同时倾斜给定的角度，参数x、y分别表示沿 x轴、y轴倾斜的角度。x为正值时，X轴不动(宽度不变)，Y轴逆时针倾斜一定角度 ；x为负值时，X轴不动，Y轴顺时针倾斜一定角度。 y为正值时，Y轴不动(高度不 变)，X轴顺时针倾斜一定角度；y为负值时，Y轴不动，X轴逆时针倾斜一定角度。
transform-origin：指定元素变形的中心点
默认中心点是元素的正中心，即X、Y轴的50% 50% 处。在没有重 置transform-origin改变元素原点位置的情况下，CSS变形进行的旋 转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。
综合转换matrix(n,n,n,n,n,n)
matrix()方法是一个综合性的方法，它综合了上述的移动、旋转 、缩放等功能。matrix()方法有六个参数，包含旋转、缩放、移动 （平移）和倾斜功能。语法如下，参数的作用如下： transform:matrix(scaleX, skewX, skewY, scaleY, translateX, translateY);/*语法*/
transform:matrix(a,b,c,d,e,f)一共有六个参数，它对应了一个 3*3的矩阵，书写方向是竖向的
2， CSS3 3D 转换
CSS3 可以使用3D 转换来对元素进行格式化。常用的3D 转换 方法有rotateX()、rotateY()。
- 旋转rotateX()方法。 通过rotateX()方法，元素围绕其X 轴以给定的度数进行旋转。
- 旋转rotateY()方法。 通过rotateY()方法，元素围绕其Y 轴以给定的度数进行旋转。
<!-- edu_13_6_6.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 3D转换</title>
<script type="text/javascript" src="html5shiv.js"></script>
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<style type="text/css">
div {
width: 150px;
height: 80px;
background: #dadada;
border: 1px solid #00cc66;
}
#div1 {
transform: rotateX(120deg);
}
#div2 {
transform: rotateY(120deg);
margin: 10px auto;
}
td {
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<table border="1px" align="center" width="450px" height="200px">
<caption>
<h3>CSS3 3D转换</h3>
</caption>
<tr>
<td>
<div id="" class="">
<p>这是原div</p>
</div>
<div id="div1" class="">
<p>沿X轴旋转这个div</p>
</div>
</td>
<td>
<div id="" class="">
<p>这是原div</p>
</div>
<div id="div2" class="">
<p>沿Y轴旋转这个div</p>
</div>
</td>
</tr>
</table>
</body>
</html>
CSS3 过渡transition 属性
transition 属性是一个复合属性，它有四个过渡属性。语法如下：
transition: property duration timing-function delay; 例： transition: width 2s; /* 宽度上过渡2s */
Transition-timing-Function的值及描述表
transition子属性设置语法
<!-- edu_13_6_7.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CSS3 过渡</title>
<script type="text/javascript" src="html5shiv.js"></script>
<link rel="stylesheet" href="css/normalize.css" type="text/css" />
<script type="text/javascript" src="js/prefixfree.min.js"></script>
<style>
div {
width: 100px;
height: 50px;
background: #009999;
color: white;
font-weight: bold;
transition: width 2s, height 2s, transform 2s; /* 3个属性过渡 */
}
#div1 {
transition-timing-function: linear;
}
#div2 {
transition-timing-function: ease;
}
#div3 {
transition-timing-function: ease-in;
}
#div4 {
transition-timing-function: ease-out;
}
#div5 {
transition-timing-function: ease-in-out;
}
div:hover {
width: 200px;
height: 100px;
transform: rotate(60deg);
/* 盘旋时过渡+旋转 */
}
</style>
</head>
<body>
<h3>CSS3 过渡transition与transform综合应用</h3>
<hr color="red" />
<div id="div1" style="top: 100px">linear</div>
<div id="div2" style="top: 150px">ease</div>
<div id="div3" style="top: 200px">ease-in</div>
<div id="div4" style="top: 250px">ease-out</div>
<div id="div5" style="top: 300px">ease-inout</div>
<p>
请把鼠标指针移动到红色的div元素上，就可以看到<mark> 过渡和转换</mark
>的效果。
</p>
</body>
</html>
CSS3 动画animation
CSS3 动画是指元素从一种样式逐渐变化为另一种样式的 效果。通过CSS3的@keyframes（关键帧）规则，可以创建 动画，从而取代动画图片、Flash 动画以及JavaScript编写的 动画。在@keyframes 中规定某项CSS 样式，就能创建由当 前样式逐渐改为新样式的动画效果。
1．CSS3 动画animation 基本语法
CSS3 动画属性及描述表
CSS3 多列属性
使用CSS3 多列属性可以创建多个列来对文本进行布局，如同编辑报纸和杂志一样。常 用的CSS3 多列属性主要有column-count、column-gap、column-rule 等。
CSS3 文本效果
1．文本阴影text-shadow 属性
基本语法
text-shadow: h-shadow v-shadow blur color; //语法 text-shadow:2px 2px 8px #FF0000;//示例
语法说明
text-shadow 属性向文本添加一个或多个阴影。其中h-shadow 定义阴 影在水平方向（即X轴）上的偏移量，允许负值，必需；v-shadow 定义阴 影在垂直方向（即Y轴）上的偏移量，允许负值，必需；
blur 可选。阴影向外模糊时的范围。值越大，阴影的边缘就越模糊。
color 可选。阴影的颜色。如果没有指定颜色值，通常会使用当前文本 的颜色
2．空白处理white-space属性
基本语法：white-space: normal| nowrap | pre | pre-wrap| pre-line | inherit ;
语法说明
- normal：默认。空白会被浏览器忽略，自适应容器的边界换行。
- nowrap：文本不会换行，在同一行上显示，直到遇到<br>标记为止。
- pre：浏览器会保留空白不换行。与标记功能类似。
- pre-wrap：保留空白符序列，并自适应容器的边界进行换行。
- pre-line：空白序列将折叠为单个空白，并自适应容器的边界进行换行
- inherit：规定应该从父元素继承white-space属性的值。
3．控制换行word-wrap 属性
基本语法:word-wrap: normal|break-word;
语法说明
word-wrap 自动换行属性允许强制文本进行换行，会对 单词进行拆分。
该属性有两个值：normal、break-word 。其中normal 表示只在允许的断字点换行（浏览器保持默 认处理）；break-word 表示在长单词或 URL 地址内部进 行换行。
4．文本溢出text-overflow 属性
基本语法:text-overflow: clip|ellipsis|string;
语法说明
text-overflow: 属性规定当文本溢出包含元素时发生的事情 。该属性有三个属性值，分别为clip、ellipsis、string。
其中clip 表示修剪文本；ellipsis 表示显示省略符号来代表被修剪的文本； string 表示使用给定的字符串来代表被修剪的文本，
但必须与 overflow和white-space属性配合使用，在选择器中需要同时设 置两个属性，其值分别为hidden和nowrap。
HTML5 页面结构
