第一章 初识HTML5
1、HTML5基础
1.1 HTML5 文档基本格式
<!DOCTYPE html><html> <head> <title>First HTML Program</title> <meta charset="utf-8" /> </head> <body> Hello HTML </body></html>
<!DOCTYPE html>
文档类型，是html5标准网页声明，全程（Document Type HyperText Mark-up Language）意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5。
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
标签告知浏览器这是一个 HTML 文档。
标签是 HTML 文档中最外层的元素。
标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
<head> 元素是所有头部元素的容器。
<head> 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。
以下列出的元素能被用在 <head> 元素内部：
<title> （在头部中，这个元素是必需的）
<style>
<base>
<link>
<meta>
<script>
<noscript>
标签定义文档的主体。
元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
元数据（Metadata）是数据的数据信息。 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
标签定义文档的标题，在所有 HTML 文档中是必需的。<br /><title>元素：<br />定义浏览器工具栏中的标题<br />提供页面被添加到收藏夹时的标题<br />显示在搜索引擎结果中的页面标题
<a name="rfm43"></a></p>
<h3 id="5qgboj"><a name="5qgboj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 标签名与标签属性</h3><p>标签分从书写格式上分为单标签和双标签两种：<br />1、双标签：<标签名></标签名><br />2、单标签：<标签名><br />标签按显示样式分为行标签和块标签两种 ：<br />1、行标签：行标签每个标签在页面中显示时，不会独占一行。<br />2、块标签：块标签每个标签在页面中显示时，会独占一行。<br />两种标签可以通过显示属性进行切换<br />标签属性，用来对标签的细节进行补充。
<a name="pBzvh"></a></p>
<h2 id="2y4zkn"><a name="2y4zkn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、文本控制标记</h2><p><a name="D1N1P"></a></p>
<h4 id="69uc7a"><a name="69uc7a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、标题标签</h4><p>共有6个，显示不同的6中标题</p>
<pre><code class="lang-html"><h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</code></pre>
<p><a name="FjXVc"></a></p>
<h4 id="7aapwu"><a name="7aapwu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、段落标签</h4><p>用来修饰一段文字，段落之间有明显的段间距。</p>
<pre><code class="lang-html"><p>
这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长和共同繁荣”，很有现实意义。从18世纪第一次工业革命的机械化，到19世纪第二次工业革命的电气化，再到20世纪第三次工业革命的信息化，一次次颠覆性的科技革新，带来社会生产力的大解放和生活水平的大跃升，从根本上改变了人类历史的发展轨迹。
</p>
<p>
如今，我们正在经历一场更大范围、更深层次的科技革命和产业变革。大数据、人工智能等前沿技术不断取得突破，新技术、新业态、新产业层出不穷。各国利益和命运紧密相连，深度交融。同时，世界经济新旧动能转换尚未完成，南北失衡等深层次、结构性问题还未消除。地缘政治冲突此起彼伏，保护主义和单边主义愈演愈烈，直接影响到新兴市场国家和发展中国家发展外部环境。
</p>
</code></pre>
<p><a name="INpOs"></a></p>
<h4 id="6a5dlm"><a name="6a5dlm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、水平线标记<hr/></h4><pre><code class="lang-html"><hr 属性=“属性值” />
</code></pre>
<p><hr/>是单标记，在网页中输入一个<hr/>，就添加了一条默认样式的水平线。<br />size属性：控制水平线的粗细。<br />width属性：控制水平线的宽度。<br />align属性能：控制水平分聘线的对齐方式，有居中、左对齐、右对齐三种方式。<br />color属性：控制颜色。
<a name="trjvf"></a></p>
<h4 id="3vfij7"><a name="3vfij7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、换行标记<br/></h4><pre><code class="lang-html"><br/>
</code></pre>
<p>如果希望某段文本强制换行显示，就需要使用换行标记<br/>
<a name="yV3rI"></a></p>
<h4 id="8z62qi"><a name="8z62qi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、字体标签</h4><p>font标签规定文本的字体、字体尺寸、字体颜色。已废弃，在HTML5中不支持。<br />1、color属性，用来规定文本的颜色<br />2、size属性，用来规定文本的字体大小<br />3、face属性，用来规定文本的字体
<a name="EQk7y"></a></p>
<h4 id="eu856u"><a name="eu856u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、文本格式化标记</h4><p><a rel="nofollow" href="https://www.w3school.com.cn/tags/tag_font_style.asp"><b></a></b>：定义粗体文本。<br /><a rel="nofollow" href="https://www.w3school.com.cn/tags/tag_phrase_elements.asp"><em></a></em>：定义着重文字。<br /><a rel="nofollow" href="https://www.w3school.com.cn/tags/tag_font_style.asp"><i></a></i>：定义斜体字。<br /><a rel="nofollow" href="https://www.w3school.com.cn/tags/tag_phrase_elements.asp"><strong></a></strong>：定义加重语气<br /><u></u> 和<ins></ins>文字以加下划线方式显示（HTML5不赞成使用u）
<a name="Bn5ry"></a></p>
<h2 id="1zqz5e"><a name="1zqz5e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、图像标记</h2><p><a name="X4LNE"></a></p>
<h4 id="g1ugy3"><a name="g1ugy3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、图像标记<img/></h4><pre><code class="lang-html"><img src="图片"/>
</code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-align.html">align</a></td>
<td>top<br />bottom<br />middle<br />left<br />right</td>
<td>HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-loading.html">loading</a></td>
<td>eager：立即加载<br />lazy：延迟加载</td>
<td>指定浏览器是应立即加载图像还是延迟加载图像。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-alt.html">alt</a></td>
<td><em>text</em></td>
<td>规定图像的替代文本。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-border.html">border</a></td>
<td><em>pixels</em></td>
<td>HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。</td>
</tr>
<tr>
<td>crossorigin<strong>New</strong></td>
<td>anonymous<br />use-credentials</td>
<td>设置图像的跨域属性</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-height.html">height</a></td>
<td><em>pixels</em></td>
<td>规定图像的高度。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-hspace.html">hspace</a></td>
<td><em>pixels</em></td>
<td>HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-ismap.html">ismap</a></td>
<td>ismap</td>
<td>将图像规定为服务器端图像映射。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-longdesc.html">longdesc</a></td>
<td><em>URL</em></td>
<td>HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-src.html">src</a></td>
<td><em>URL</em></td>
<td>规定显示图像的 URL。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-usemap.html">usemap</a></td>
<td><em>#mapname</em></td>
<td>将图像定义为客户器端图像映射。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-vspace.html">vspace</a></td>
<td><em>pixels</em></td>
<td>HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/tags/att-img-width.html">width</a></td>
<td><em>pixels</em></td>
<td>规定图像的宽度。</td>
</tr>
</tbody>
</table>
<p><a name="AAhIj"></a></p>
<h2 id="7js5gw"><a name="7js5gw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、超链接标记</h2><p><a name="eAabN"></a></p>
<h4 id="1b5ff1"><a name="1b5ff1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、超链接的使用</h4><p>基本语法：<br />< a href=”访问地址”>文字内容</a><br />功能：<br />标签定义超链接，它用于从一个页面连接到另一个页面</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632905061022-bcefbc19-16df-4333-b854-eba4a6bfc451.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u99a1e661&margin=%5Bobject%20Object%5D&originHeight=823&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=ud33779c4-76ae-434c-9fc4-f4e84b55db5" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632905101017-26c64c5e-b6eb-4287-866b-c0222d3077a7.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=264&id=u831a920a&margin=%5Bobject%20Object%5D&name=image.png&originHeight=264&originWidth=662&originalType=binary&ratio=1&size=18579&status=done&style=none&taskId=ue3b0453f-fb74-4fa2-83d7-fe44b19755e&width=662" alt="image.png"></p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>_blank</td>
<td>在新窗口中打开被链接文档。</td>
</tr>
<tr>
<td>_self</td>
<td>默认。在相同的框架中打开被链接文档。</td>
</tr>
<tr>
<td>_parent</td>
<td>在父框架集中打开被链接文档。</td>
</tr>
<tr>
<td>_top</td>
<td>在整个窗口中打开被链接文档。</td>
</tr>
<tr>
<td><em>framename</em></td>
<td>在指定的框架中打开被链接文档。</td>
</tr>
</tbody>
</table>
<p><a name="b2gwd"></a></p>
<h4 id="atxl6d"><a name="atxl6d" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、超链接样式</h4><p>基本语法：<br />a{<br />样式名：值；<br /> }<br />功能：<br />设置超链接点击前，点击后的样式。<br />例</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style type="text/css">
a:link {
color:red;
text-decoration:underline;
}
a:visited {
color:green;
text-decoration:none;
}
a:hover {
color:black;
text-decoration:none;
}
a:active {
color: white;
text-decoration:none;
}
</style>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sina.com.cn" target="_blank">新浪</a>
</body>
</html>
</code></pre>
<p>代码讲解<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632905404837-6430dd90-0a15-4e1b-a8ee-3bb8488adb05.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=780&id=ue3114495&margin=%5Bobject%20Object%5D&name=image.png&originHeight=780&originWidth=521&originalType=binary&ratio=1&size=56070&status=done&style=none&taskId=u62565a6a-67ac-47ec-9fd5-fe96459955f&width=521" alt="image.png">
<a name="FJHqF"></a></p>
<h4 id="ufsi1"><a name="ufsi1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、锚点连接</h4><p>1.设置锚点<br /><a name="one">第一章</a> <br />2.设置启动定位器的开关<br /><a herf="#one">点我跳转第一章 </a>
<a name="ZZJbA"></a></p>
<h1 id="cqryya"><a name="cqryya" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第二章 HTML5页面元素级属性</h1><p><a name="NuYYo"></a></p>
<h2 id="b15wbd"><a name="b15wbd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、列表元素</h2><p><a name="NXFLK"></a></p>
<h3 id="70tfp7"><a name="70tfp7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、ul 元素（无序列表）</h3><pre><code class="lang-html"><ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</code></pre>
<p>例题：</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
ul{
list-style-type:none;
margin:0px auto;
padding:0px;
background-color:#000000;
color:#ffffff;
display:flex;
justify-content:center;
}
li{
width:200px;
line-height:50px;
text-align:center;
background-size:100% 100%;
}
ul li:nth-of-type(6){
background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
}
ul li:not(#first){
background-color:green;
}
</style>
</head>
<body>
<ul>
<li id="first">首页</li>
<li>国内新闻</li>
<li>国际新闻</li>
<li>体育新闻</li>
<li>财经新闻</li>
<li>娱乐新闻</li>
</ul>
</body>
</html>
</code></pre>
<p>样式图<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632906479616-64462c9c-aacc-4724-8be4-8793c1b73597.png#from=url&id=pgYz9&margin=%5Bobject%20Object%5D&originHeight=636&originWidth=1920&originalType=binary&ratio=1&status=done&style=none" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632906075561-69decac3-8728-4c5c-b1e0-838f0f0608bb.png#from=url&id=PsZIA&margin=%5Bobject%20Object%5D&originHeight=223&originWidth=599&originalType=binary&ratio=1&status=done&style=none" alt="">
<a name="vYAeS"></a></p>
<h3 id="awg01c"><a name="awg01c" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /></h3><p><a name="TFENi"></a></p>
<h3 id="6ga84i"><a name="6ga84i" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、ol元素（有序列表）</h3><pre><code class="lang-html"><ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
</code></pre>
<p><a name="bUow5"></a></p>
<h3 id="fohmvj"><a name="fohmvj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、dl元素（定义列表）</h3><p>定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。</p>
<pre><code class="lang-html"><dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
<dd>名词1解释3</dd>
<dt>名词2</dt>
<dd>名词2解释1</dd>
<dd>名词2解释2</dd>
<dd>名词2解释3</dd>
</dl>
</code></pre>
<p><a name="flftd"></a></p>
<h2 id="4qr9gc"><a name="4qr9gc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、结构元素</h2><p><a name="VEbkg"></a></p>
<h3 id="6mqzh0"><a name="6mqzh0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、header元素</h3><p>HTML5中的header元素是一种具有引导和导航作用的结构元素，改元素可以包含所有通常放在页面头部的内容。header元素通常用来防止整个页面或页面内的一个内容区块的标题，也可以包含网站Logo图片，搜索表单或者其他相关内容。</p>
<pre><code class="lang-html"><header>
<h1>网页主题</h1>
……
……
</header>
</code></pre>
<p><a name="OX6BG"></a></p>
<h3 id="cf52dn"><a name="cf52dn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、nav元素</h3><p>nav元素用于定义导航链接，是HTML5新增的元素，改元素可以将具有导航性质的链接归纳在一个区域中，是页面元素的语义更加明确。其中的导航元素可以链接到站点的其他页面，或者当前也的其他部分。</p>
<pre><code class="lang-html"><nav>
<ul>
<li><a href="#">首页</li>
<li><a href="#">公司概括</li>
<li><a href="#">产品展示</li>
<li><a href="#">联系我们</li>
</ul>
</nav>
</code></pre>
<p>在上面这段代码中，通过在nav元素内部嵌套无序列表ul在搭建导航结构。<br />具体来说，nav元素可以用于一下集中场合。<br />1、传统导航栏：目前主流网站上都有不同层级的导航条，其作用是跳转到网站的其他主页面。<br />2、侧边栏导航：目前主流博客网站及电商网站都有侧边栏导航，目的是将当前文章或当前商品页面跳转到其他文章或其他商品页面。<br />3、页内导航：它的作用是在本页面几个主要的组成部分之间进行跳转。<br />4、翻页操作：翻页操作切换的是网页的内容部分，可以通过单击“上一页”或“下一页”切换，也可以通过单击实际的页数跳转到某一页。<br />除了以上几点以外，nav元素也可以用于其他重要的、基本的导航链接组中。
<a name="lUtUB"></a></p>
<h3 id="9f3kz5"><a name="9f3kz5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、article元素</h3><p>article元素代表文档、页面或者应用程序中与上下文不想关的独立部分，改元素经常被用于定义一篇日志、一条新闻或用户评论等。article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次。
<a name="xsWbb"></a></p>
<h3 id="gi36n9"><a name="gi36n9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、aside元素</h3><p>aside元素用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容先关的引用、侧边栏、广告导航条等其他类型的有别于主要内容的部分。<br />aside元素的用法主要分为两种。<br />1、被包含在article元素内作为主要内容的附属信息。<br />2、在article元素之外使用，作为页面或站点全局的附属信息部分。做场用的使用形式是侧边栏，其中的内容可以使友情链接、广告单元等。
<a name="Z4Pq2"></a></p>
<h3 id="3we7ur"><a name="3we7ur" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、section元素</h3><p>section元素用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。在使用section元素时，需要注意以下3点。<br />1、不要将section元素用作设置样式的页面容器，那是div的特性。section元素并非一个普通的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div。<br />2、如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。<br />3、如果标题的内容区块不要使用section元素定义。
<a name="qhoAI"></a></p>
<h3 id="ekdze0"><a name="ekdze0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、footer元素</h3><p>footer元素用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。在HTML5出现之前，一般使用<div id="footer"></div>标记来定义页面底部，而通过HTML5的footer元素可以轻松实现。<br />与header元素相同，一个页面中可以包含多个footer元素。同时，也可以在article元素或者section元素中添加footer元素。
<a name="o2Y9Y"></a></p>
<h1 id="7mk0is"><a name="7mk0is" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第三章 CSS3入门</h1><p><a name="XumkJ"></a></p>
<h2 id="9f1z3o"><a name="9f1z3o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、css介绍</h2><p>层叠样式表（英文全称: Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言，css的作用是用来对页面进行样式的设置，美化页面<br />选择标签：</p>
<pre><code class="lang-html">选择器{
}
// 所有符合选择器的标签都会被选中
</code></pre>
<p>设置格式：</p>
<pre><code class="lang-html">属性名: 属性值;
....
</code></pre>
<p><a name="mvFZB"></a></p>
<h2 id="fpc9qd"><a name="fpc9qd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、css使用方式</h2><p><a name="issPT"></a></p>
<h3 id="d1pwt"><a name="d1pwt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、行内样式</h3><pre><code class="lang-html"><p style="width:500px;height:300px;background-color:red;">
这是一个DIV标签
</p>
</code></pre>
<p><a name="pIgyl"></a></p>
<h3 id="1xlov"><a name="1xlov" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、内部样式</h3><pre><code class="lang-html"><head>
<style>
p{
width:500px;
height:500px;
}
</style>
</head>
</code></pre>
<p><a name="YhWyU"></a></p>
<h3 id="fazvi9"><a name="fazvi9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、外部样式</h3><pre><code class="lang-html"><head>
<link rel="stylesheet" type="text/css" href="theme.css" />
</head>
</code></pre>
<p>Theme.css 是一个样式表文件, 所有的样式可以写在该文件中<br />通过 link 标签引入后,对当前页面进行修饰(实际工作中使用非常多)
<a name="uliSa"></a></p>
<h1 id="5bi5rf"><a name="5bi5rf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第四章 CSS3选择器</h1><p><a name="oUTHi"></a></p>
<h2 id="f08awp"><a name="f08awp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、属性选择器</h2><p>属性选择器早在CSS2中就被引入了，其主要作用就是<strong>对带有指定属性的HTML 元素设置样式</strong>。使用CSS3属性选择器，可以只指定元素的某个属性，或者同时指定元素的某个属性和其对应的属性值。<br />CSS3的属性选择器主要包括以下几种：</p>
<ol>
<li><strong>E[attr]</strong>：只使用属性名，但没有确定任何属性值；</li><li><strong>E[attr=”value”]</strong>：指定属性名，并指定了该属性的属性值；</li><li><strong>E[attr~=”value”]</strong>：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”不能不写；</li><li><strong>E[attr^=”value”]</strong>：指定了属性名，并且有属性值，属性值是以value开头的；</li><li><strong>E[attr$=”value”]</strong>：指定了属性名，并且有属性值，而且属性值是以value结束的；</li><li><strong>E[attr*=”value”]</strong>：指定了属性名，并且有属性值，而且属值中包含了value；</li><li><strong>E[attr|=”value”]</strong>：指定了属性名，并且属性值是value或者以“value-”开头的值（比如说zh-cn）;</li></ol>
<p>为了更好的说明CSS3属性选择器的使用方法，把第一节的demo换成别的结构，如下所示：</p>
<pre><code class="lang-html">.demo {
width: 300px;
border: 1px solid #ccc;
padding: 10px;
}
.demo a {
float: left;
display: block;
height: 20px;
line-height: 20px;
width: 20px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
text-align: center;
background: #f36;
color: green;
margin-right: 5px;
text-decoration: none;
}
</code></pre>
<p>最初效果如下所示：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633337051878-de40d7d3-a4f6-4650-b7da-e023aad6a289.png#clientId=u2d578efd-950d-4&from=paste&id=ub8a06b17&margin=%5Bobject%20Object%5D&originHeight=67&originWidth=401&originalType=url&ratio=1&status=done&style=none&taskId=u0fb50c7d-06f4-41d2-84eb-1f7cb16df54" alt=""><br />下面就开始针对上面列出的每个属性选择器来，具体分析其使用方法。
<a name="hzWA6"></a></p>
<h4 id="9117vx"><a name="9117vx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、E[attr]</h4><p>E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素，而不论这个属性值是什么，你就可以使用这个属性选择器，如：</p>
<pre><code class="lang-html">.demo a[id] {background: blue; color:yellow;font-weight:bold;}
</code></pre>
<p>上面代码所表示的，选择了div.demo下所有带有id属性的a元素，并在这个元素上使用背景色为兰色，前景色为黄色，字体加粗的样式，对照上面的html，我们不难发现，只有第一个和最后一个链接使用了id属性，所以选中了这两个a元素，效果如下所示：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633337313274-0aa78143-eb46-4a95-b9c7-11c09504683a.png#clientId=u2d578efd-950d-4&from=paste&id=u5481080f&margin=%5Bobject%20Object%5D&originHeight=64&originWidth=401&originalType=url&ratio=1&status=done&style=none&taskId=ua3055013-7033-41d7-8bcd-2db219320e2" alt=""><br />上面是单一属性的使用，也可以使用多属性进行选择元素，如E[attr1][attr2], 这样只要是同时具有这两属性的元素都将被选中：</p>
<pre><code class="lang-html">.demo a[href][title] {background: yellow; color:green;}
</code></pre>
<pre><code> <br />表示的是选择div.demo下的同时具有href,title两个属性的a元素，并且应用相对应的样式，如下所示：<br /><br />**IE6不支持这个选择器。**
</code></pre><p><a name="tMw5Y"></a></p>
<h4 id="4aj5n4"><a name="4aj5n4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、Ｅ[attr=”value”]</h4><p>E[attr=”value”]选择器和E[attr]选择器，从字面上就能很清楚的理解出来，E[attr=”value”]是指定了属性值“value”，而E[attr]只是选择了有对应的属性，并没有明确指其对应的属性值”value”，这也是这两种选择器的最大区是之处。从而缩小了选择 围，更能精确选择自己需要的元素，在前面实例基础上我们进行一下简单的修改：</p>
<pre><code class="lang-html">.demo a[id="first"] {background: blue; color:yellow;font-weight:bold;}
</code></pre>
<pre><code> <br />和前面代码相比较，此处在id的属性基础上指定了相应的value值为“first”,这样一来我们选中的是div.demo中的a元素，并且这个元素有一个"id="first""属性值，请看下在的效果图：<br /><br />E[attr="value"]属性选择器也可以多个属性并写，进一步缩小选择范围：
</code></pre><pre><code class="lang-html">.demo a[href="http://www.w3cplus.com"][title] {background: yellow; color:green;}
</code></pre>
<pre><code> <br />效果如下：<br /><br />**对于E[attr="value"]这种属性值选择器有一点需要注意：属性和属性值必须完全匹配，特别是对于属性值是词列表的形式时，如：**
</code></pre><pre><code class="lang-html"><a href="" class="links item" title="open the website">7</a>
</code></pre>
<pre><code> <br />例如上面的代码，如果你写成：<br />.demo a[class="links"]{color:red};/*这是一种写法不能和上面的html所匹配*/ <br />上面的属性选择器并不会和上在的html匹配,因为他们的属性和属性值没有完全匹配，需要改成如下所示的代码，才能正确匹配：<br />.demo a[class="links item"]{color:red};/*这样才是匹配的，记得中间的空格不能少的哟*/ <br />**IE6浏览器不支持这种选择器。**
</code></pre><p><a name="b7rN4"></a></p>
<h4 id="9g5656"><a name="9g5656" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、E[attr~=”value”]</h4><p>如果你想根据属性值中的词列表的某个词来进行选择元素，那么就需要使用这种属性选择器：E[attr~=”value”]，这种属性选择器是属性值是一个或多个词列表，如果是列表时，他们需要用空格隔开，只要属性值中有一个value相匹配就可以选中该元素，而我们前面所讲的E[attr=”value”]是属性值需要完全匹配才会被选中，他们两者区别就是一个有“〜”号，一个没有“〜”号。我们来看一个这方面的实例：</p>
<pre><code class="lang-html">.demo a[title~="website"]{background:orange;color:green;}
</code></pre>
<pre><code> <br />上面代码表示的是，div.demo下的a元素的title属性中，只要其属性值中含有"website"这个词就会被选择，回头看看我们的html，不难发现所有a元素中“2，6，7，8”这四个a元素的title中都含有,所以被选中，请看效果：<br /><br />如果我们在上面的代码中，把那个“〜”号省去，大家看看他们不同之处：
</code></pre><pre><code class="lang-html">.demo a[title="website"]{background:orange;color:green;}
</code></pre>
<pre><code> <br />这样将不会选择中任何元素，因为在所有a元素中无法找到完全匹配的"title='website'",换句话说就没有选中任何元素，效果如下：<br /><br />这个实例再次证明了E[attr="value"]和E[attr~="value"]之间的区别，和其中“〜”所取的作用，总结：**属性选择器中有波浪（〜）时属性值有value时就相匹配，没有波浪（〜）时属性值要完全是value时才匹配。**<br />**IE6不支持E[attr~="value"]属性选择器。**
</code></pre><p><a name="Emnsz"></a></p>
<h4 id="au5ir5"><a name="au5ir5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、E[attr^=”value”]</h4><p>E[attr^=”value”]属性选择器，指的是选择attr属性值以“value”开头的所有元素，换句话说，选择的属性其以对应的属性值是以“value”开始的：</p>
<pre><code class="lang-html">.demo a[href^="http://"]{background:orange;color:green;}
.demo a[href^="mailto:"]{background:green;color:orange;}
</code></pre>
<pre><code> <br />上面代码表示的是选择了以href属性，并且以"http://"和"mailto:"开头的属性值的所有a元素，换过更简单一点的呢？只要a元素中的href属性值是以"http://"或"mailto:"开头的a元素都会以选中，那么下面大家请对照上面的html和下面的效果图，看看是不是那么一回事：<br /><br />**IE6不支持E[attr^="value"]选择器。**
</code></pre><p><a name="T16d3"></a></p>
<h4 id="5cbohv"><a name="5cbohv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、E[attr$=”value”]</h4><p>Ｅ[attr$=”value”]属性选择器刚好与E[attr^=”value”]选择器相反，E[attr$=”value”]表示的是选择attr属性值以”value”结尾的所有元素，换句话说就是选择元素attr属性，并且他的属性值是以value结尾的，这个运用在给你一些特殊的链接加背景图片很方便的，比如说给pdf,png,doc等不同文件加上不同icon，我们就可以使用这个属性来实现，如：</p>
<pre><code class="lang-html">.demo a[href$="png"]{background:orange;color:green;}
</code></pre>
<pre><code> <br />上面代码表示的是，选择div.demo中元素有href属性，并以png值结尾的a元素。（正如上面所说，只不过这里使用的是改变元素的背景色），效果如下：<br /><br />**IE6不支持E[attr$="value"]属性选择器。**
</code></pre><p><a name="s1ziP"></a></p>
<h4 id="fzv1y0"><a name="fzv1y0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、E[attr*=”value”]</h4><p>E[attr*=”value”]属性选择器表示的是选择attr属性值中包含子串”value”的所有元素。也就是说，只要你所选择的属性，其属性值中有这个”value”值都将被选中，如：</p>
<pre><code class="lang-html">.demo a[title*="site"]{background:black;color:white;}
</code></pre>
<pre><code> <br />上面代码表示的是：选择了div.demo中a元素，而a元素的title属性中只要有"site"就符合选择条件。效果如下：<br /><br />**IE6不支持E[attr*="value"]选择器。**
</code></pre><p><a name="xk8DA"></a></p>
<h4 id="ewxg5h"><a name="ewxg5h" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、E[attr|=”value”]</h4><p>E[attr|=”value”]是属性选择器中的最后一种，在说这个选择器使用之前先提醒大家attr后面的是一个竖线“｜”而不是l，小心搞错了。E[attr|=”value”]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素,我们来看个实例：</p>
<pre><code class="lang-html">.demo a[lang|="zh"]{background:gray;color:yellow;}
</code></pre>
<pre><code> <br />上面的代码会选中了div.demo中lang属性等于zh或以zh-开头的所有a元素，大家可以对照前面的html代友，其中"2,3,4,6"被选中，因为他们都有一个lang属性，并且他们的属性值都符合以"zh"或"zh-"开始的元素。具体效果如下：<br /><br />所以这种属性选择器用来匹配以“女value-1”,"value-2"的属性是很方便的，比如页面中有很多图片，图片文件名都是以"figure-1","figure-2"这样的方式来命名的，那么使用这种选择器选中图片就很方便了，大家可以在本地尝试一下，这种属性选择器最常常用的地方是如上面的示例用来匹配语言。<br />**IE6不支持E[attr|="value"]选择器。**<br />七种属性选择器中 **E[attr="value"]和E[attr*="value"]是最实用的，其中E[attr="value"]能帮我们定位不同类型的元素。**
</code></pre><p><a name="gh267"></a></p>
<h2 id="3w7hk4"><a name="3w7hk4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、关系选择器</h2><p>CSS3中的关系选择器主要包括子代选择器和兄弟选择器，其中子代选择器由符号 “>” 连接，兄弟选择器由符号 “+” 和 “~” 连接。
<a name="sewvY"></a></p>
<h3 id="6ozry2"><a name="6ozry2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 子代选择器（>）</h3><p>子代选择器主要用来选择某个元素的第一级子元素，如希望选择只作为 h1 元素子元素的 strong 元素，可以写为：h1 > strong。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338391542-0273eb7f-45b3-4035-89dc-5c9470d4416b.png#clientId=u2d578efd-950d-4&from=paste&id=u31812b5e&margin=%5Bobject%20Object%5D&originHeight=320&originWidth=646&originalType=url&ratio=1&status=done&style=none&taskId=u6015a710-9aa1-4194-8dc0-ed7c85293f7" alt="">
<a name="eOUmC"></a></p>
<h3 id="4t2z3g"><a name="4t2z3g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 兄弟选择器（+、~）</h3><p>兄弟选择器用来选择与某元素位于同一个父元素之中，且位于该元素之后（不会往前选，只会往后选）的兄弟元素。兄弟选择器分为临近兄弟选择器和普通兄弟选择器两种。
<a name="LoYJQ"></a></p>
<h4 id="bnokfz"><a name="bnokfz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.1 临近兄弟选择器</h4><p>该选择器使用加号 “+” 来链接前后两个选择器，选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338547966-83706dd1-b0d0-4f90-a7bc-106c7438d1fe.png#clientId=u2d578efd-950d-4&from=paste&id=ue355ee8f&margin=%5Bobject%20Object%5D&originHeight=379&originWidth=378&originalType=url&ratio=1&status=done&style=none&taskId=u23d3a16b-85e4-4be8-8de7-0311ecbcaee" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338558708-352172df-8e83-4cce-9b29-b36613de78f4.png#clientId=u2d578efd-950d-4&from=paste&id=u96c702bb&margin=%5Bobject%20Object%5D&originHeight=278&originWidth=211&originalType=url&ratio=1&status=done&style=none&taskId=uea24cb7a-5ed0-4121-84e0-f19ecc8af36" alt="">
<a name="ahTMV"></a></p>
<h4 id="2zfacy"><a name="2zfacy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2.2 普通兄弟选择器</h4><p>普通兄弟选择器使用 “~” 来链接前后两个选择器。选择器中的两个元素有同一个父亲，但第二个元素不必紧跟第一个元素（往后选所有的兄弟）。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338602886-e053f906-c982-4bc2-aebc-426208b3d45c.png#clientId=u2d578efd-950d-4&from=paste&id=u6e4a8b8c&margin=%5Bobject%20Object%5D&originHeight=377&originWidth=390&originalType=url&ratio=1&status=done&style=none&taskId=uaa40e397-484e-448e-93a2-d06ee7b77bd" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338619622-d63bfc34-abe7-438d-97d5-c045c03652f9.png#clientId=u2d578efd-950d-4&from=paste&id=u11310b48&margin=%5Bobject%20Object%5D&originHeight=239&originWidth=252&originalType=url&ratio=1&status=done&style=none&taskId=u9cf4f883-183d-4c21-9a34-d3c3faf6d01" alt="">
<a name="WDSuW"></a></p>
<h2 id="50agjf"><a name="50agjf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、结构化伪类选择器</h2><p><a name="Dp8rl"></a></p>
<h3 id="1myxm6"><a name="1myxm6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 :root选择器</h3><p>:root 选择器用于匹配文档根元素，在 HTML 中，根元素始终是 html 元素，也就是说使用 “:root 选择器” 定义样式，对所有页面元素都生效。对于不需要该样式的元素，可以单独设置样式进行覆盖。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338889100-5085c1d2-8521-46d8-885b-d2b63b1145af.png#clientId=u2d578efd-950d-4&from=paste&id=u9bd780c9&margin=%5Bobject%20Object%5D&originHeight=393&originWidth=365&originalType=url&ratio=1&status=done&style=none&taskId=uae0a0677-6f3b-4159-ae9e-56be30a1e3e" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338924248-8f5b6920-7970-4559-bafe-9eeb177655d5.png#clientId=u2d578efd-950d-4&from=paste&id=uda33d8f9&margin=%5Bobject%20Object%5D&originHeight=273&originWidth=202&originalType=url&ratio=1&status=done&style=none&taskId=ud273d49e-ba34-4414-a3a1-0fecd242a14" alt=""><br />给h2进行单独设置：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338970193-1d6e1442-a020-4f15-8925-41402e51d007.png#clientId=u2d578efd-950d-4&from=paste&id=ud40f111b&margin=%5Bobject%20Object%5D&originHeight=400&originWidth=397&originalType=url&ratio=1&status=done&style=none&taskId=ua56901b9-14cb-4bd9-9364-84660c18989" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633338984806-52905d40-82dd-4555-91fb-b3364d725fda.png#clientId=u2d578efd-950d-4&from=paste&id=uc5c451fb&margin=%5Bobject%20Object%5D&originHeight=257&originWidth=191&originalType=url&ratio=1&status=done&style=none&taskId=ufb414f6e-ab3c-431d-9e37-da5331f6fb7" alt="">
<a name="SsmLG"></a></p>
<h3 id="dzq8iu"><a name="dzq8iu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 :not选择器</h3><p>如果对某个结构使用样式，但是想排除这个结构元素下面的子结构元素，让它不使用这个样式，可以使用 :not 选择器。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339064225-8a21361f-b666-4bdb-b2db-eae820489a15.png#clientId=u2d578efd-950d-4&from=paste&id=u4f9bfaae&margin=%5Bobject%20Object%5D&originHeight=423&originWidth=436&originalType=url&ratio=1&status=done&style=none&taskId=uec180931-4296-4a2f-8b51-b93014a05e4" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339076032-a5854b4a-4d1d-444b-b0d1-755df7ee0bc4.png#clientId=u2d578efd-950d-4&from=paste&id=u900363ff&margin=%5Bobject%20Object%5D&originHeight=264&originWidth=205&originalType=url&ratio=1&status=done&style=none&taskId=u176379a6-ed86-44ea-9e17-4ced61fae5e" alt="">
<a name="F5CYm"></a></p>
<h3 id="3s6kkj"><a name="3s6kkj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 :only-child选择器</h3><p>:only-child 选择器用于匹配属于父元素的唯一子元素的元素，也就是说，如果父元素仅有一个子元素，则使用 “:only-child 选择器” 可以选择这个子元素。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339150548-30194df2-1ece-45f9-9d9c-f01a554b2965.png#clientId=u2d578efd-950d-4&from=paste&id=ub3dc253f&margin=%5Bobject%20Object%5D&originHeight=451&originWidth=336&originalType=url&ratio=1&status=done&style=none&taskId=ubcc3b48f-e517-4f74-bd42-74f1d993380" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339165507-ab64ea9c-c67b-4a9b-a745-ab855de117f0.png#clientId=u2d578efd-950d-4&from=paste&id=ucb923e15&margin=%5Bobject%20Object%5D&originHeight=298&originWidth=218&originalType=url&ratio=1&status=done&style=none&taskId=u6184c504-98c2-4afa-836b-e8ee8f87278" alt="">
<a name="qC3v7"></a></p>
<h3 id="51ey9g"><a name="51ey9g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 :first-child 和 :last-child选择器</h3><p>:first-child 选择器和:last-child 选择器分别用于为父元素中的第一个或者最后一个子元素设置样式。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339259952-5b3c0f5d-07dd-4721-8666-a06b9b4e8f89.png#clientId=u2d578efd-950d-4&from=paste&id=ubc25ba44&margin=%5Bobject%20Object%5D&originHeight=425&originWidth=372&originalType=url&ratio=1&status=done&style=none&taskId=u9c04c3a6-3e37-49d4-b27c-745e4592a19" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339272552-c8b7df77-411a-4b3a-af0d-cbc76d8736ba.png#clientId=u2d578efd-950d-4&from=paste&id=u467ca12d&margin=%5Bobject%20Object%5D&originHeight=245&originWidth=298&originalType=url&ratio=1&status=done&style=none&taskId=ue465e11d-c21b-4581-ac72-90d1447a875" alt="">
<a name="FJd3S"></a></p>
<h3 id="fwrm6a"><a name="fwrm6a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 :nth-child(n) 和 :nth-last-child(n)选择器</h3><p>使用 :nth-child(n) 选择器和 :nth-last-child(n) 选择器可以选择某个父元素中第 n 个或倒数第 n 个子元素。<br />选择第 2 个和倒数第 2 个子元素：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339484253-fddee55e-65f7-497a-aa85-f88d9bde55dd.png#clientId=u2d578efd-950d-4&from=paste&id=u63f9a211&margin=%5Bobject%20Object%5D&originHeight=412&originWidth=378&originalType=url&ratio=1&status=done&style=none&taskId=u50b3a215-4d61-4d8e-8b6a-09c58a23bd0" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339500139-47b31a54-f9e8-46e5-b713-6350aa086431.png#clientId=u2d578efd-950d-4&from=paste&id=ucad10947&margin=%5Bobject%20Object%5D&originHeight=222&originWidth=217&originalType=url&ratio=1&status=done&style=none&taskId=ue551a87c-a6b3-4465-88e2-c48ea5664ad" alt=""><br /><strong>选择第 3 个和倒数第 2 个子元素：</strong><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339528173-5b6d4be2-7956-4aa6-b629-032b7588d9e9.png#clientId=u2d578efd-950d-4&from=paste&id=u52a25254&margin=%5Bobject%20Object%5D&originHeight=411&originWidth=399&originalType=url&ratio=1&status=done&style=none&taskId=u91cb98a2-af0a-4ec5-819a-d31cd8f3b9c" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339541088-3d20ec0b-ba33-4125-9dbf-4c283d7965b5.png#clientId=u2d578efd-950d-4&from=paste&id=ucc1732c2&margin=%5Bobject%20Object%5D&originHeight=247&originWidth=292&originalType=url&ratio=1&status=done&style=none&taskId=u1164957a-5d5c-4335-818b-7d8eed4b591" alt="">
<a name="jHz6A"></a></p>
<h3 id="55ww9"><a name="55ww9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.6 :nth-of-type(n) 和 :nth-last-of-type(n)选择器</h3><p>:nth-of-type(n) 选择器和 :nth-last-of-type(n) 选择器用于匹配属于父元素的特定类型的第 n 个子元素和倒数第 n 个子元素。如第2个<p>标签或倒数第二个<p>标签。<br />选择偶数行的 <h2> 标签设置为红色和奇数行的 <p> 标签设置为绿色：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339679162-e0d664f2-6d88-469d-b55f-460a74b9e5a7.png#clientId=u2d578efd-950d-4&from=paste&id=ub8d40953&margin=%5Bobject%20Object%5D&originHeight=498&originWidth=404&originalType=url&ratio=1&status=done&style=none&taskId=uceb16ba5-9d48-438d-b35c-ced031828b7" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339690588-ba4347ac-0cf3-47b5-8cc4-499fb0f5b034.png#clientId=u2d578efd-950d-4&from=paste&id=u06550f20&margin=%5Bobject%20Object%5D&originHeight=351&originWidth=217&originalType=url&ratio=1&status=done&style=none&taskId=u9281ca9e-305e-4eb6-b6f5-947372ee99f" alt=""><br /><strong>在前一个基础上再选择倒数第 2 个子元素：</strong><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339720344-defbf8dd-a930-4a18-bb3a-72944289a689.png#clientId=u2d578efd-950d-4&from=paste&id=u1a3fd340&margin=%5Bobject%20Object%5D&originHeight=510&originWidth=389&originalType=url&ratio=1&status=done&style=none&taskId=u61e55f59-8613-4473-9177-8c611127728" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339743021-257c2bca-0458-4885-9a07-32091a4cb46b.png#clientId=u2d578efd-950d-4&from=paste&id=u8f897c4b&margin=%5Bobject%20Object%5D&originHeight=362&originWidth=247&originalType=url&ratio=1&status=done&style=none&taskId=u6e455bca-6912-4107-a24e-03b2cb14713" alt=""><br /><strong>选择偶数行还可用此方法：</strong><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339770940-d5c23cc1-d376-40f2-82d0-d5620517a322.png#clientId=u2d578efd-950d-4&from=paste&id=ub8d61c32&margin=%5Bobject%20Object%5D&originHeight=421&originWidth=447&originalType=url&ratio=1&status=done&style=none&taskId=u922c468e-e4f0-4097-8867-58737b599fb" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339785040-222d12f5-3e15-4281-bb37-9ec915472bbe.png#clientId=u2d578efd-950d-4&from=paste&id=udb4f3eea&margin=%5Bobject%20Object%5D&originHeight=160&originWidth=155&originalType=url&ratio=1&status=done&style=none&taskId=u699c10c0-e3a0-4703-ad67-eb63d8c620b" alt="">
<a name="EIp6a"></a></p>
<h3 id="2cx6y4"><a name="2cx6y4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.7 :empty选择器</h3><p>:empty 选择器用来选择没有子元素或文本内容为空的所有元素。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339847272-9b3a0585-2b02-4cf5-9d1f-06f2359361d9.png#clientId=u2d578efd-950d-4&from=paste&id=u4884c280&margin=%5Bobject%20Object%5D&originHeight=375&originWidth=469&originalType=url&ratio=1&status=done&style=none&taskId=ue892453c-0de1-4e3b-8e1e-bcfaf79f307" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339860146-cdd11c15-5509-4fa1-bd68-589ab25b8756.png#clientId=u2d578efd-950d-4&from=paste&id=ue48a0bd8&margin=%5Bobject%20Object%5D&originHeight=217&originWidth=249&originalType=url&ratio=1&status=done&style=none&taskId=u4013b12e-a1f6-4169-80a3-e753fa54452" alt="">
<a name="jcP4e"></a></p>
<h3 id="bclfku"><a name="bclfku" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.8 :target选择器</h3><p>:target 选择器用于为页面中的某个 target 元素（该元素的 id 被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并跳转到 target 元素后，:target 选择器所设置的样式才会起作用。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339918976-45825095-5f19-4957-943c-c15ff31597d5.png#clientId=u2d578efd-950d-4&from=paste&id=u84ebcf62&margin=%5Bobject%20Object%5D&originHeight=385&originWidth=550&originalType=url&ratio=1&status=done&style=none&taskId=u47f691e3-ad6e-41a5-a226-9b915b2dfe4" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339941436-cd9d8f30-9d94-41ed-a27d-0595f583b8ac.png#clientId=u2d578efd-950d-4&from=paste&id=u1c6c26cd&margin=%5Bobject%20Object%5D&originHeight=221&originWidth=412&originalType=url&ratio=1&status=done&style=none&taskId=u37a1a576-ff5f-4f59-8023-36e78a59922" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633339955587-eca59c61-0d54-4f56-bcaf-67c6472005ae.png#clientId=u2d578efd-950d-4&from=paste&id=u18245ad6&margin=%5Bobject%20Object%5D&originHeight=215&originWidth=403&originalType=url&ratio=1&status=done&style=none&taskId=u807bb94b-d106-4a40-be61-6784e16ec01" alt="">
<a name="v5JT9"></a></p>
<h2 id="c0bqpt"><a name="c0bqpt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、伪元素选择器</h2><p>所谓伪元素，是针对CSS中已经定义好的伪元素使用的选择器。CSS中常用的伪元素选择器有 before 伪元素选择器和 :after 伪元素选择器。
<a name="xULU2"></a></p>
<h3 id="ay9qv8"><a name="ay9qv8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.1 :before 选择器</h3><p>:before 伪元素选择器用于在被选元素的内容前面插入内容，必须配合 content 属性来指定要插入的具体内容（当前内部前）。基本语法格式如下：</p>
<pre><code class="lang-html"><元素>:before
{
content:文字/url();
}
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340242457-17073da7-1f09-497b-a257-df00361a8614.png#clientId=u2d578efd-950d-4&from=paste&id=u651e96e5&margin=%5Bobject%20Object%5D&originHeight=421&originWidth=528&originalType=url&ratio=1&status=done&style=none&taskId=uec44d475-72d3-495a-b88d-e4bece215d3" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340277967-bceb12d8-921d-4281-b647-5d242d8c265f.png#clientId=u2d578efd-950d-4&from=paste&id=u2c71fd3b&margin=%5Bobject%20Object%5D&originHeight=64&originWidth=151&originalType=url&ratio=1&status=done&style=none&taskId=u07146b3b-c013-4f48-9d34-3c74918610e" alt=""><br /><strong> 在前面加上三个哈字：</strong><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340309274-68818cc9-17e0-4436-9180-0a13eb181b1b.png#clientId=u2d578efd-950d-4&from=paste&id=ue624b023&margin=%5Bobject%20Object%5D&originHeight=417&originWidth=491&originalType=url&ratio=1&status=done&style=none&taskId=uc6ee7f50-b6ac-4788-9ecc-cede7173d8d" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340322084-fba9b041-4647-41b7-a152-63016a3c5038.png#clientId=u2d578efd-950d-4&from=paste&id=u0b1b6c11&margin=%5Bobject%20Object%5D&originHeight=60&originWidth=205&originalType=url&ratio=1&status=done&style=none&taskId=ubb54b8eb-48aa-4a8c-887c-b70b3c02d72" alt="">
<a name="F963A"></a></p>
<h3 id="xfvkt"><a name="xfvkt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.2 :after 选择器</h3><p>:after 伪元素选择器用于在某个元素后边插入一些内容（当前内部后），使用方法与 :before 选择器相同。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340383322-cc7d3fe2-ff41-484f-954a-dfd367adcd75.png#clientId=u2d578efd-950d-4&from=paste&id=u7f3cde53&margin=%5Bobject%20Object%5D&originHeight=419&originWidth=475&originalType=url&ratio=1&status=done&style=none&taskId=u813cfd7c-18fd-4ae4-8e92-27dbd7b52c1" alt=""><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340395297-60cd871a-10dc-4081-8944-e7880d2e8377.png#clientId=u2d578efd-950d-4&from=paste&id=u6e37abde&margin=%5Bobject%20Object%5D&originHeight=57&originWidth=181&originalType=url&ratio=1&status=done&style=none&taskId=u900178a1-ae69-4639-acdf-c6443c2cd07" alt="">
<a name="sJFUp"></a></p>
<h2 id="2zrs"><a name="2zrs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、链接伪类</h2><p>定义超链接时为超链接指定不同的状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。在CSS中，通过链接伪类可以实现不同的链接状态。<br />所谓伪类并不是真正的类，它的名称是由系统定义的，通常由标记名、类名或 id 名加 “:” 构成。<br />超链接标记<a>的伪劣<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633340542362-4225acdf-07de-44ef-814d-ea6a2ba3a44b.png#clientId=u2d578efd-950d-4&from=paste&height=272&id=ub8432960&margin=%5Bobject%20Object%5D&name=image.png&originHeight=272&originWidth=759&originalType=binary&ratio=1&size=31051&status=done&style=none&taskId=uee243027-c7f5-44b6-bf73-fe1767805ea&width=759" alt="image.png">
<a name="lHzqh"></a></p>
<h1 id="8oddez"><a name="8oddez" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第五章 CSS盒子模型</h1><p><a name="OeeWB"></a></p>
<h2 id="3rltkg"><a name="3rltkg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、盒子模型概念</h2><p><a name="NonPd"></a></p>
<h3 id="3t82u"><a name="3t82u" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1 概念</h3><p>（1）、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。css中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。<br />（2）、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。<br />一个盒子的实际高度（宽度）是由content+padding+border+margin组成。<br />可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border，padding，和margin。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632727807668-d23aba07-9510-4679-af80-4f2168512cac.png#clientId=u3b917062-a2b6-4&from=paste&height=446&id=ucd8b2c1d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=446&originWidth=551&originalType=binary&ratio=1&size=61487&status=done&style=none&taskId=u97aa8dbb-a1ed-4735-8136-f15c4af437f&width=551" alt="image.png">
<a name="eM9GE"></a></p>
<h3 id="7rpen2"><a name="7rpen2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 标签宽高</h3><p>width：宽度值；<br />height：高度值；</p>
<pre><code class="lang-html">.div1{
width:900px;
height:50px;
}
</code></pre>
<p><a name="te4hD"></a></p>
<h2 id="dizek1"><a name="dizek1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、盒子模型相关属性</h2><p><a name="auKIl"></a></p>
<h3 id="1dn4ds"><a name="1dn4ds" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 边框属性</h3><p>border：宽度值 边框样式 边框种颜色；</p>
<pre><code class="lang-html"> .div1{
border:1px solid red;
}
</code></pre>
<p><a name="jjLzO"></a></p>
<h3 id="9pytpl"><a name="9pytpl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 标签边距</h3><p>margin：上外延边距 右外延边距 下外延边距 左外延边距；<br />padding：上内延边距 右内延边距 下内延边距 左内延边距；<br /><strong>四种值得情况：</strong><br /><strong>如果规定一种值，比如：div {margin: 50px} - 所有四个外边距都是 50px。</strong><br /><strong>如果规定两种值，比如：div {margin: 50px 10px} - 上外边距和下外-边距是 50px，左外边距和右外边距是 10px。</strong><br /><strong>如果规定三种值，比如：div {margin: 50px 10px 20px}- 上外边距是 50px，左外边距和右外边距是 10px，下外边距是 20px。</strong><br /><strong>如果规定四种值，比如：div {margin: 50px 10px 20px 30px} - 上外边距是 50px，右外边距是 10px，下外边距是 20px，左外边距是 30px。</strong>
<a name="nymIP"></a></p>
<h3 id="af6zy0"><a name="af6zy0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3 常用样式</h3><table>
<thead>
<tr>
<th><strong>单位</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>长度 | 百分比</td>
<td>设置标签宽度</td>
</tr>
<tr>
<td>height</td>
<td>长度 | 百分比</td>
<td>设置标签高度</td>
</tr>
<tr>
<td>max-width</td>
<td>长度 | 百分比</td>
<td>设置标签最大宽度</td>
</tr>
<tr>
<td>max-height</td>
<td>长度 | 百分比</td>
<td>设置标签最大高度</td>
</tr>
<tr>
<td>min-width</td>
<td>长度 | 百分比</td>
<td>设置标签最小宽度</td>
</tr>
<tr>
<td>min-height</td>
<td>长度 | 百分比</td>
<td>设置标签最小高度</td>
</tr>
<tr>
<td>border</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置边框显示效果</td>
</tr>
<tr>
<td>border-width</td>
<td>长度</td>
<td>设置边框粗细</td>
</tr>
<tr>
<td>border-style</td>
<td>none | hidden | solid | dashed | dotten | double…</td>
<td>设置边框样式</td>
</tr>
<tr>
<td>border-color</td>
<td>颜色</td>
<td>设置边框颜色</td>
</tr>
<tr>
<td>border-top</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签顶部边框</td>
</tr>
<tr>
<td>border-left</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签左边边框</td>
</tr>
<tr>
<td>border-right</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签右边边框</td>
</tr>
<tr>
<td>border-bottom</td>
<td>边框粗细 边框样式 边框颜色</td>
<td>设置标签底部边框</td>
</tr>
<tr>
<td>margin</td>
<td>上边距 右边距 下边距 左边距</td>
<td>设置标签四边的外延边距</td>
</tr>
<tr>
<td>margin-left</td>
<td>长度 | 百分比</td>
<td>设置标签左边的外延边距</td>
</tr>
<tr>
<td>margin-right</td>
<td>长度 | 百分比</td>
<td>设置标签右边的外延边距</td>
</tr>
<tr>
<td>margin-top</td>
<td>长度 | 百分比</td>
<td>设置标签顶部的外延边距</td>
</tr>
<tr>
<td>margin-bottom</td>
<td>长度 | 百分比</td>
<td>设置标签底部的外延边距</td>
</tr>
<tr>
<td>padding</td>
<td>上边距 右边距 下边距 左边距</td>
<td>设置标签四边的内部边距</td>
</tr>
<tr>
<td>padding-left</td>
<td>长度 | 百分比</td>
<td>设置标签左边的内部边距</td>
</tr>
<tr>
<td>padding-right</td>
<td>长度 | 百分比</td>
<td>设置标签右边的内部边距</td>
</tr>
<tr>
<td>padding-top</td>
<td>长度 | 百分比</td>
<td>设置标签顶部的内部边距</td>
</tr>
<tr>
<td>padding-bottom</td>
<td>长度 | 百分比</td>
<td>设置标签底部的内部边距</td>
</tr>
</tbody>
</table>
<p><a name="tUFOW"></a></p>
<h3 id="12z7i3"><a name="12z7i3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.4 box-shadow属性</h3><p>语法格式：<br />box-shadow: <em>h-shadow</em> <em>v-shadow</em> <em>blur</em> <em>spread</em> <em>color</em> inset;</p>
<pre><code class="lang-html">div{
box-shadow: 10px 10px 5px #888888;
}
</code></pre>
<p><strong>注释：</strong>box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>测试</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>h-shadow</em></td>
<td>必需。水平阴影的位置。允许负值。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow">测试</a></td>
</tr>
<tr>
<td><em>v-shadow</em></td>
<td>必需。垂直阴影的位置。允许负值。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow">测试</a></td>
</tr>
<tr>
<td><em>blur</em></td>
<td>可选。模糊距离。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow&p=3">测试</a></td>
</tr>
<tr>
<td><em>spread</em></td>
<td>可选。阴影的尺寸。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow&p=7">测试</a></td>
</tr>
<tr>
<td><em>color</em></td>
<td>可选。阴影的颜色。请参阅 CSS 颜色值。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow&p=10">测试</a></td>
</tr>
<tr>
<td>inset</td>
<td>可选。将外部阴影 (outset) 改为内部阴影。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_box-shadow&p=15">测试</a></td>
</tr>
</tbody>
</table>
<p><a name="S2dET"></a></p>
<h3 id="gex9hc"><a name="gex9hc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.5 box-sizing属性</h3><p>box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。<br />例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 “border-box”。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。<br />语法：<br />box-sizing: content-box|border-box|inherit;</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>content-box</td>
<td>这是由 CSS2.1 规定的宽度高度行为。<br />宽度和高度分别应用到元素的内容框。<br />在宽度和高度之外绘制元素的内边距和边框。</td>
</tr>
<tr>
<td>border-box</td>
<td>为元素设定的宽度和高度决定了元素的边框盒。<br />就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。<br />通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应从父元素继承 box-sizing 属性的值。</td>
</tr>
</tbody>
</table>
<p><a name="DbIRb"></a></p>
<h2 id="6msnvh"><a name="6msnvh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、背景属性</h2><p><a name="uDm1c"></a></p>
<h3 id="88y7hx"><a name="88y7hx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 设置背景颜色</h3><pre><code class="lang-html">div{
background-color:red; /*设置div背景颜色为红色*/
}
</code></pre>
<p><a name="Sq3EB"></a></p>
<h3 id="5xza9o"><a name="5xza9o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 设置背景图像</h3><p>背景不仅可以设置为某种颜色，还可以将图像作为元素的背景。在css中通过background-image属性设置背景图像。</p>
<pre><code class="lang-html">body{
background-color:red; /*设置网页的背景颜色*/
background-image:url(图片的路径) /*设置网页的背景图像*/
}
</code></pre>
<p><a name="VbwUL"></a></p>
<h3 id="7y1h06"><a name="7y1h06" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 背景与图片不透明的设置</h3><p><a name="gJaDO"></a></p>
<h4 id="6eaeql"><a name="6eaeql" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3.1 RGBA模式</h4><p>RGBA是css3新增的颜色模式，它是RGB颜色模式的延伸，改模式是在红、绿、蓝三原色的基础上添加了不透明的度参数。<br />格式：<br />rgba( r，g，b，alpha );<br />在上面的语法格式中，前三个参数与RGB中的参数含义相同，alpha参数是一个介于0.0（完全透明）和1.0（完全不透明）之间的数字。<br />例：<br />使用RGBA模式为p元素指定透明度为0.5，颜色为红色的背景，</p>
<pre><code class="lang-html">p{
background-color:rgba( 255,0,0,0.5);
}
</code></pre>
<p><a name="eiT58"></a></p>
<h4 id="72vzsf"><a name="72vzsf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3.2 opacity属性</h4><p>使用opacity属性能够使任何元素呈现出透明效果。<br />格式：<br />opacity：opacityValue；<br />opacity属性用于定义元素的不透明，参数opacityValue表示不透明度的值，它是一个介于0~1的浮点数值。其中，0表示完全透明，1表示完全不透明，而0.5则表示变透明。</p>
<pre><code class="lang-html">img{
opacity:0.5 /*设置图片半透明状态*/
}
</code></pre>
<p><a name="KjW7z"></a></p>
<h3 id="gj8emg"><a name="gj8emg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 设置背景图像平铺</h3><p>语法格式：<br />background-repeat:值<br />可以取值为：1、repeat：沿水平和竖直两个方向平铺（默认值）。<br />2、no-repeat：不平铺（图像位于元素的左上角，只显示一个）。<br />3、repeat-x：只沿水平方向平铺。<br />4、repeat-y：只沿竖直方向平铺。
<a name="kuKCS"></a></p>
<h3 id="eoc2k9"><a name="eoc2k9" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 设置背景图像的位置</h3><p>在css中，background-position属性的值通常设置为两个，中间用空格隔开，用于定义背景图像在元素的水平和垂直方向的坐标，如：“background-position：right top”，即背景图像位于元素的左上角。<br />background-position属性的取值有多种：<br />1、使不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标，如background-position：20px 20px；。<br />2、使用预定义的关键字：指定背景图像在元素中的对齐方式。<br />（1）、水平方向值：left、center、right<br />（2）、垂直方向值：top、center、bottom<br />两个关键字的顺序任意，若只有一个值则另一个默认为center，例如：center相当于 center center（居中显示） top 相当于 center top （水平居中、上对齐）。<br />3、使用百分比：按背景图像和元素的指定点对齐。<br />（1）、0% 0%：表示图像左上角与元素的左上角对齐。<br />（2）、50% 50%：表示图像50% 50%中心点与元素50% 50%的中心点对齐。<br />（3）、20% 30%：表示图像20% 30%的点与元素20% 30%的点对齐。<br />（4）、100% 100%：表示图像右下角与与元素的右下角对齐，而不是图像充满元素。<br />如果只有一个百分数，将作为水平值，垂直值则默认为50%。</p>
<pre><code class="lang-html">body{
background-image:url(image/win.jpg); /*设置网页的背景图像*/
background-repeat:no-repeat; /*设置背景图像不平铺*/
background-position:50% 50% /*用像素值控制背景图像的位置*/
}
</code></pre>
<p><a name="kdTtI"></a></p>
<h3 id="bkt1ot"><a name="bkt1ot" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.6 设置背景图像固定</h3><p>如果希望背景图像固定在屏幕的某一位置，不随着滚动条移动，可以使用background-attachment属性来设置。<br />background-attachment属性有两个属性值，分别代表不同的含义。<br />1、scroll：图像随页面元素一起滚动（默认值）。<br />2、fixed：图像固定在屏幕上，不随页面元素滚动。</p>
<pre><code class="lang-html">body{
background-image:url(image/win.jpg); /*设置网页的背景图像*/
background-repeat:no-repeat; /*设置背景图像不平铺*/
background-position:50% 50% /*用像素值控制背景图像的位置*/
background-attachment:fixed; /*设置背景图像的位置固定*/
}
</code></pre>
<p><a name="Df0FO"></a></p>
<h3 id="cuj57g"><a name="cuj57g" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.7 设置背景图像的大小</h3><p>语法：<br />background-size：属性值1 属性值2<br />background-size: <em>length</em>|<em>percentage</em>|cover|contain;<br />在上面的语法格式中，background-size属性可以设置一个或两个值定义鳖精图像的宽高，其中属性值1位必选属性值，属性值2位可选属性值。属性值可以使像素值、百分比、“cover”或“contain”关键字。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>测试</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>length</em></td>
<td>设置背景图像的高度和宽度。<br />第一个值设置宽度，第二个值设置高度。<br />如果只设置一个值，则第二个值会被设置为 “auto”。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-size">测试</a></td>
</tr>
<tr>
<td><em>percentage</em></td>
<td>以父元素的百分比来设置背景图像的宽度和高度。<br />第一个值设置宽度，第二个值设置高度。<br />如果只设置一个值，则第二个值会被设置为 “auto”。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=5">测试</a></td>
</tr>
<tr>
<td>cover</td>
<td>把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。<br />背景图像的某些部分也许无法显示在背景定位区域中。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=7">测试</a></td>
</tr>
<tr>
<td>contain</td>
<td>把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-size&p=8">测试</a></td>
</tr>
</tbody>
</table>
<pre><code class="lang-html">div{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
</code></pre>
<p><a name="lpaaj"></a></p>
<h3 id="czgagh"><a name="czgagh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.8 设置背景的显示区域</h3><p>background-origin 属性规定 background-position 属性相对于什么位置来定位。<br /><strong>注释：</strong>如果背景图像的 background-attachment 属性为 “fixed”，则该属性没有效果。<br />语法：<br />background-origin: padding-box|border-box|content-box;</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
<th>测试</th>
</tr>
</thead>
<tbody>
<tr>
<td>padding-box</td>
<td>背景图像相对于内边距框来定位。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-origin">测试</a></td>
</tr>
<tr>
<td>border-box</td>
<td>背景图像相对于边框盒来定位。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-origin&p=2">测试</a></td>
</tr>
<tr>
<td>content-box</td>
<td>背景图像相对于内容框来定位。</td>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tiy/c.asp?f=css_background-origin&p=3">测试</a></td>
</tr>
</tbody>
</table>
<pre><code class="lang-html">div{
background-image:url('smiley.gif');
background-repeat:no-repeat;
background-position:left;
background-origin:content-box; /*背景图像相对文本的内容定位*/
}
</code></pre>
<p><a name="xtzun"></a></p>
<h3 id="ftca82"><a name="ftca82" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.9 设置背景图像的裁剪区域</h3><p>语法格式：<br />background-clip：属性值；<br />属性值：<br />1、border-box：默认值，从边框区域向外裁剪背景。<br />2、padding-box：从内边距区域外裁剪背景。<br />3、content-box：从内容区域向外裁剪背景。
<a name="rCqtf"></a></p>
<h2 id="paqn"><a name="paqn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、css3渐变属性</h2><p><a name="j8hQ7"></a></p>
<h3 id="xa8gu"><a name="xa8gu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.1 线性渐变</h3><p>在线性渐变过程中，起始颜色会沿着一条直线按顺序过度到结束颜色。<br />语法格式：<br />background-image：linear-gradient（渐变角度，颜色值1，颜色值2，……，颜色值n）；<br />渐变角度：<br />渐变角度值水平线和渐变线之间的夹角，可以是以deg为单位的角度数值或“to”加“left”“right”“top”和“bottom”等关键词。在使用角度设定渐变起点的时候，0deg对应“to top”，90deg对应“to right”，180deg对应“to bottom”，270deg对应“to left”，整个过程就是以bottom为起点顺时针旋转。<br />如图：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633395759933-f1ded8e4-981c-48f4-8522-db7ea7fcda22.png#clientId=u7aca6224-b34f-4&from=paste&height=421&id=u8f6021ca&margin=%5Bobject%20Object%5D&name=image.png&originHeight=421&originWidth=479&originalType=binary&ratio=1&size=256425&status=done&style=none&taskId=u5f9b7b54-193f-46e6-aaa7-f607dade6ef&width=479" alt="image.png"></p>
<pre><code class="lang-html">div{
background-image:linear-gradient(30deg.#0f0,#00F); /*div定义了一个渐变角度为30deg、绿色（#0f0）到蓝色（#00F）的线性渐变*/
}
</code></pre>
<p><a name="lCxMc"></a></p>
<h3 id="bnxgdc"><a name="bnxgdc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.2 径向渐变</h3><p><a name="U1o6S"></a></p>
<h3 id="9ze522"><a name="9ze522" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.3 重复渐变</h3><p><a name="U4aRu"></a></p>
<h1 id="6h0q1i"><a name="6h0q1i" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第六章 浮动与定位</h1><p><a name="dMAdp"></a></p>
<h2 id="c0ru7o"><a name="c0ru7o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、元素的浮动</h2><p><a name="z9g6t"></a></p>
<h3 id="41bcok"><a name="41bcok" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1 元素的浮动属性float</h3><p>语法格式：<br />选择器{ float：属性值 ；}<br />float的常用属性值：<br />left：元素向左浮动<br />right：元素向右浮动<br />none：元素不浮动（默认值）</p>
<pre><code class="lang-html">.box{
float:left; /*定义box左浮动*/
}
</code></pre>
<p><a name="I2Fbg"></a></p>
<h3 id="g0mmr2"><a name="g0mmr2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 清除浮动</h3><p>语法格式：<br />选择器{ clear：属性值； }<br />clear的常用属性值<br />left：不允许左侧有浮动元素（清除左侧浮动的影响）<br />right：不允许右侧有浮动（清除右侧浮动的影响）<br />both：同时清除左右两侧浮动的影响</p>
<pre><code class="lang-html">.box{
clear:left; /*清除左浮动*/
}
</code></pre>
<p><a name="QKPrj"></a></p>
<h2 id="2o90qi"><a name="2o90qi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、overflow属性</h2><p>当盒子内的元素超出盒子自身的大小是，内容就会溢出，若果想要规范溢出内容的显示方式，就需要使用overflow属性。<br />语法格式：<br />选择器{ overflow：属性值；}<br />overflow的常用属性值：</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>visible</td>
<td>默认值。内容不会被修剪，会呈现在元素框之外。</td>
</tr>
<tr>
<td>hidden</td>
<td>内容会被修剪，并且其余内容是不可见的。</td>
</tr>
<tr>
<td>scroll</td>
<td>内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>auto</td>
<td>如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。</td>
</tr>
<tr>
<td>inherit</td>
<td>规定应该从父元素继承 overflow 属性的值。</td>
</tr>
</tbody>
</table>
<pre><code class="lang-html">div{
overflow:visible; /*溢出内容呈现在元素框之外*/
overflow:hiddem; /*溢出内容被修剪，且不可见*/
}
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633398145195-938a0682-f591-4085-b7cc-d1333234c071.png#clientId=u7aca6224-b34f-4&from=paste&height=552&id=u36add00f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=552&originWidth=1280&originalType=binary&ratio=1&size=1129936&status=done&style=none&taskId=ub24cf1e6-cde9-4b35-b1d5-7382a1e25eb&width=1280" alt="image.png">
<a name="hTViT"></a></p>
<h2 id="6bqa64"><a name="6bqa64" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、元素的定位</h2><p>用不同的定位方式，控制标签具体的显示位置。<br />position：static | relative | fixed | absolute;<br />static定位是默认值，即没有定位，遵循正常的文档流对象。
<a name="scp8D"></a></p>
<h3 id="a8ncdg"><a name="a8ncdg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 absolute绝对定位</h3><p>基本语法：position：absolute；<br />功能：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于HTML。<br />例：</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
/* 正文内容 */
.mainDiv{
width:900px;
height:500px;
background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
background-size:cover;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- 正文内容 -->
<div class="mainDiv">
<img src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
</div>
</body>
</html>
</code></pre>
<p>效果图：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818423901-4a5f682d-9171-44a8-863a-d6d770bcdb20.png#clientId=u5cd2306a-b293-4&from=paste&id=u924175fa&margin=%5Bobject%20Object%5D&originHeight=963&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u5d8c465c-aa8d-4759-9404-ee8603d3396" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818479706-d09a89fe-90ab-443d-99db-34daaf7d7c1a.png#clientId=u5cd2306a-b293-4&from=paste&height=527&id=u49e3289d&margin=%5Bobject%20Object%5D&name=image.png&originHeight=527&originWidth=671&originalType=binary&ratio=1&size=44293&status=done&style=none&taskId=ube6514de-24c4-4874-8eec-14ac3f35ef9&width=671" alt="image.png">
<a name="qYHSv"></a></p>
<h3 id="2h7wy6"><a name="2h7wy6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 relative相对定位</h3><p>基本语法：position：relative；<br />功能：相对定位元素的定位是相对其正常位置。<br />例题：</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
/* 正文内容 */
.mainDiv{
width:900px;
height:500px;
background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
background-size:cover;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
.img1{
position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<!-- 正文内容 -->
<div class="mainDiv">
<img class="img1" src="http://www.yyfun001.com/res/htmlclassics/full/images/infinity.png" />
</div>
</body>
</html>
</code></pre>
<p>效果图：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818578569-bc58f240-1525-4f09-90f4-65e174e72971.png#clientId=u5cd2306a-b293-4&from=paste&id=u537faf89&margin=%5Bobject%20Object%5D&originHeight=938&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u06d34d52-eec4-4bcb-87b6-35487cd191e" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818603404-122085e2-ba03-41ca-92c0-391f48300638.png#clientId=u5cd2306a-b293-4&from=paste&height=312&id=u1ad1f3e9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=312&originWidth=455&originalType=binary&ratio=1&size=17225&status=done&style=none&taskId=ue813512a-cd86-45c5-a28c-1c31ba2b3f7&width=455" alt="image.png">
<a name="brt9i"></a></p>
<h3 id="2gh5yp"><a name="2gh5yp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 固定定位</h3><p>基本语法：position：fixed；<br />功能：元素的位置相对于浏览器窗口是固定位置。<br />例题：</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
/* 右侧的浮动按扭 */
.btn_list{
position:fixed;
right:50px;
top:40%;
transform:translatey(-50%);
}
.btn_list div{
width:20px;
height:20px;
margin-top:10px;
border-radius:50px;
background-color:#3D3D3D;
cursor:pointer;
}
#cur{
background-color:#10508D;
}
/* 返回顶部 */
.backtop{
position:fixed;
right:40px;
bottom:50px;
width:50px;
}
</style>
</head>
<body>
<!-- 右侧浮动按扭 -->
<div class="btn_list">
<div id="cur"></div>
<div></div>
<div></div>
<div></div>
</div>
<!-- 返回顶部 -->
<img class="backtop" src="http://www.yyfun001.com/res/htmlclassics/images/backtop.jpg" />
</body>
</html>
</code></pre>
<p>效果图<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818694256-6c2289e2-545f-4362-9b82-a9bea8419a2f.png#clientId=u5cd2306a-b293-4&from=paste&id=u81b1a258&margin=%5Bobject%20Object%5D&originHeight=964&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u9646db0b-47d2-4f4d-b8b4-c547ae2766e" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632818719071-ab5d09b2-c0ca-42a4-ae57-d02f34df8ffd.png#clientId=u5cd2306a-b293-4&from=paste&height=717&id=u7be8785f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=717&originWidth=566&originalType=binary&ratio=1&size=48764&status=done&style=none&taskId=u7ebe1065-120f-4f00-a272-d7a16e2401a&width=566" alt="image.png">
<a name="bYEZS"></a></p>
<h3 id="f3zu66"><a name="f3zu66" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 标签定位常用样式</h3><table>
<thead>
<tr>
<th><strong>单位</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>position</td>
<td>static | absolute | relative | fixed</td>
<td>设置标签定位方式</td>
</tr>
<tr>
<td>left</td>
<td>auto | 长度</td>
<td>设置标签左边距</td>
</tr>
<tr>
<td>right</td>
<td>auto | 长度</td>
<td>设置标签右边距</td>
</tr>
<tr>
<td>top</td>
<td>auto | 长度</td>
<td>设置标签上边距</td>
</tr>
<tr>
<td>bottom</td>
<td>auto | 长度</td>
<td>设置标签下边距</td>
</tr>
<tr>
<td>z-index</td>
<td>auto | 数字</td>
<td>设置标签层叠顺序</td>
</tr>
</tbody>
</table>
<p><a name="HwyFV"></a></p>
<h3 id="7ruw2r"><a name="7ruw2r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 z-index层叠等级属性</h3><p>当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。<br />在css中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居中。<br />注意：z-index属性仅对定位元素生效。
<a name="ed2ia"></a></p>
<h2 id="dy4q2c"><a name="dy4q2c" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、元素的类型与转换</h2><p><a name="iidte"></a></p>
<h3 id="fh2wqh"><a name="fh2wqh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.1 css块区介绍</h3><p> HTML中所有标签，可以划分为：块级元素、非块级元素。
<a name="U1vZ8"></a></p>
<h3 id="6fie1h"><a name="6fie1h" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.2 块级元素</h3><p>1、默认，从新的一行开始。<br />2、高度、宽度都是可控的。<br />3、宽度没有设置时，默认为100%。<br />常见块级元素：div、p、h、ul、ol、dl、table……
<a name="vyAEo"></a></p>
<h3 id="5fs3pr"><a name="5fs3pr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.3 非块级元素</h3><p>1、默认，不会从新的一行开始<br />2、高度、宽度以及内边距都是不可控的<br />3、宽高就是内容的高度，不可以改变的<br />常见非块级元素：span、b、i、u、a……<br />基本语法：</p>
<pre><code class="lang-html">display:none | block | inline | list-item | inline-block;
</code></pre>
<p>属性：</p>
<table>
<thead>
<tr>
<th><strong>值</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>此元素不会被显示。</td>
</tr>
<tr>
<td>block</td>
<td>此元素将显示为块级元素，此元素前后会带有换行符。</td>
</tr>
<tr>
<td>inline</td>
<td>默认。此元素会被显示为内联元素，元素前后没有换行符。</td>
</tr>
<tr>
<td>inline-block</td>
<td>行内块元素。</td>
</tr>
<tr>
<td>list-item</td>
<td>此元素会作为列表显示。</td>
</tr>
</tbody>
</table>
<p>display：block（将非块级元素转换成块元素，占用一行）<br />display：inline-block（将非块级元素转换成块元素，不占用一行）<br />display：none（将页面上的元素影藏，消失在页面上）<br />功能：将元素显示为块级元素或内联元素。<br />例：</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<title>CSS区块</title>
<meta charset="utf-8" />
<style type="text/css">
.div1{
width:900px;
height:50px;
line-height:50px;
border:1px solid red;
margin:0px auto;
padding-left:50px;
}
.span1{
display:block;
width:900px;
height:200px;
border:1px solid blue;
padding-left:50px;
margin:0px auto;
}
</style>
</head>
<body>
<div class="div1">导航菜单</div>
<span class="span1">正文内容1</span>
<span>正文内容2</span><span>正文内容3</span><span>正文内容4</span>
</body>
</html>
</code></pre>
<p>效果显示<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632819751230-713b2a8f-3712-4690-8f43-e0e6ab623ee0.png#clientId=u5cd2306a-b293-4&from=paste&id=ue760ba17&margin=%5Bobject%20Object%5D&originHeight=852&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u746c691b-7e04-48e2-b832-8dbb3f15c74" alt=""><br /> 代码讲解<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632819775431-8e53579c-c130-4de7-a508-100e9def089c.png#clientId=u5cd2306a-b293-4&from=paste&height=348&id=ua04d4482&margin=%5Bobject%20Object%5D&name=image.png&originHeight=348&originWidth=510&originalType=binary&ratio=1&size=21558&status=done&style=none&taskId=u78b0dddc-6781-4043-9b07-8d5616adbe8&width=510" alt="image.png">
<a name="n2HQ6"></a></p>
<h1 id="1m6r0s"><a name="1m6r0s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第七章 表单的应用</h1><p><a name="HIqss"></a></p>
<h2 id="8outrt"><a name="8outrt" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、认识表单</h2><p><a name="FiWBR"></a></p>
<h3 id="du6c5q"><a name="du6c5q" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1 表单的构成</h3><p>在网页中，一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域三个部分构成。<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633399254035-aa5f6a16-6d96-45d1-a55e-e0d9d2f259bd.png#clientId=u7aca6224-b34f-4&from=paste&height=494&id=u7d8c18d8&margin=%5Bobject%20Object%5D&name=image.png&originHeight=494&originWidth=1280&originalType=binary&ratio=1&size=954673&status=done&style=none&taskId=u92ebdaf6-29b3-47f0-aef8-be0af44973a&width=1280" alt="image.png"><br />1、表单控件：包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、搜索框等。<br />2、提示信息：一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。<br />3、表单域：相当于一个容器，用来容纳所有的表单空间和提示信息，可以通过它定义、处理表单数据所用程序的URL地址及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传动到后台服务器。
<a name="cYPOX"></a></p>
<h3 id="cjk2s7"><a name="cjk2s7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 创建表单</h3><p>基本元素：<br /><form action="url地址" method=" 提交方式" name="表单名称"><br />各种表单控件<br /></form><br />功能：<br /><form>标签用于为用户输入创建HTML表单。表单能够包含input元素，比如文字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="http://www.baidu.com" method="get">
姓名：<input type="text" value="小李" /><br />
密码：<input type="password" value="123123" /><br />
</form>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907131114-5756343d-3f8e-438f-95fe-5eae19d2f913.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=uf4daa5a7&margin=%5Bobject%20Object%5D&originHeight=367&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u5ab1c1bd-2117-4a8f-96d0-4b5e7a9adb7" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907149267-06b63370-411c-46f2-8c7f-c461e4507b28.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=459&id=u5fe75fe4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=459&originWidth=644&originalType=binary&ratio=1&size=35842&status=done&style=none&taskId=ufefaf8d3-43cb-451d-96a1-baa41627dec&width=644" alt="image.png">
<a name="nro56"></a></p>
<h2 id="1n8ouw"><a name="1n8ouw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、input元素及属性</h2><table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_accept.asp">accept</a></td>
<td><em>mime_type</em></td>
<td>规定通过文件上传来提交的文件的类型。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_align.asp">align</a></td>
<td><br />- left<br />- right<br />- top<br />- middle<br />- bottom<br /></td>
<td>不赞成使用。规定图像输入的对齐方式。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_alt.asp">alt</a></td>
<td>text</td>
<td>定义图像输入的替代文本。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_autocomplete.asp">autocomplete</a></td>
<td><br />- on<br />- off<br /></td>
<td>规定是否使用输入字段的自动完成功能。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_autofocus.asp">autofocus</a></td>
<td>autofocus</td>
<td>规定输入字段在页面加载时是否获得焦点。<br />（不适用于 type=”hidden”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_checked.asp">checked</a></td>
<td>checked</td>
<td>规定此 input 元素首次加载时应当被选中。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_disabled.asp">disabled</a></td>
<td>disabled</td>
<td>当 input 元素加载时禁用此元素。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_form.asp">form</a></td>
<td><em>formname</em></td>
<td>规定输入字段所属的一个或多个表单。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_formaction.asp">formaction</a></td>
<td><em>URL</em></td>
<td>覆盖表单的 action 属性。<br />（适用于 type=”submit” 和 type=”image”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_formenctype.asp">formenctype</a></td>
<td>见注释</td>
<td>覆盖表单的 enctype 属性。<br />（适用于 type=”submit” 和 type=”image”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_formmethod.asp">formmethod</a></td>
<td><br />- get<br />- post<br /></td>
<td>覆盖表单的 method 属性。<br />（适用于 type=”submit” 和 type=”image”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_formnovalidate.asp">formnovalidate</a></td>
<td>formnovalidate</td>
<td>覆盖表单的 novalidate 属性。<br />如果使用该属性，则提交表单时不进行验证。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_formtarget.asp">formtarget</a></td>
<td><br />- <em>blank<br />- _self<br />- _parent<br />- _top<br />- _framename</em><br /></td>
<td>覆盖表单的 target 属性。<br />（适用于 type=”submit” 和 type=”image”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_height.asp">height</a></td>
<td><br />- <em>pixels</em><br />- <em>%</em><br /></td>
<td>定义 input 字段的高度。（适用于 type=”image”）</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_list.asp">list</a></td>
<td><em>datalist-id</em></td>
<td>引用包含输入字段的预定义选项的 datalist 。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_max.asp">max</a></td>
<td><br />- <em>number</em><br />- <em>date</em><br /></td>
<td>规定输入字段的最大值。<br />请与 “min” 属性配合使用，来创建合法值的范围。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_maxlength.asp">maxlength</a></td>
<td>number</td>
<td>规定输入字段中的字符的最大长度。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_min.asp">min</a></td>
<td><br />- <em>number</em><br />- <em>date</em><br /></td>
<td>规定输入字段的最小值。<br />请与 “max” 属性配合使用，来创建合法值的范围。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_multiple.asp">multiple</a></td>
<td>multiple</td>
<td>如果使用该属性，则允许一个以上的值。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_name.asp">name</a></td>
<td>field_name</td>
<td>定义 input 元素的名称。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_pattern.asp">pattern</a></td>
<td><em>regexp_pattern</em></td>
<td>规定输入字段的值的模式或格式。<br />例如 pattern=”[0-9]” 表示输入值必须是 0 与 9 之间的数字。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_placeholder.asp">placeholder</a></td>
<td><em>text</em></td>
<td>规定帮助用户填写输入字段的提示。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_readonly.asp">readonly</a></td>
<td>readonly</td>
<td>规定输入字段为只读。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_required.asp">required</a></td>
<td>required</td>
<td>指示输入字段的值是必需的。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_size.asp">size</a></td>
<td>number_of_char</td>
<td>定义输入字段的宽度。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_src.asp">src</a></td>
<td>URL</td>
<td>定义以提交按钮形式显示的图像的 URL。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_step.asp">step</a></td>
<td><em>number</em></td>
<td>规定输入字的的合法数字间隔。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_type.asp">type</a></td>
<td><br />- button<br />- checkbox<br />- file<br />- hidden<br />- image<br />- password<br />- radio<br />- reset<br />- submit<br />- text<br /></td>
<td>规定 input 元素的类型。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_value.asp">value</a></td>
<td><em>value</em></td>
<td>规定 input 元素的值。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_input_width.asp">width</a></td>
<td><br />- <em>pixels</em><br />- <em>%</em><br /></td>
<td>定义 input 字段的宽度。（适用于 type=”image”）</td>
</tr>
</tbody>
</table>
<p><a name="aCRPf"></a></p>
<h3 id="ooda1"><a name="ooda1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 <input>标签</h3><p>基本语法：<br /><input type=”text” value=”” /><br />功能：<br />定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
姓名：<input type="text" value="小李" />
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907339050-ca3f4a0a-5623-4b33-9620-bee0b92a3398.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u00b5c00b&margin=%5Bobject%20Object%5D&originHeight=527&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=ub48b00cc-5472-4508-9742-c2867b3c6fc" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907364513-dbeadf9f-370a-4587-93eb-604e4554ba04.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=410&id=u01b65708&margin=%5Bobject%20Object%5D&name=image.png&originHeight=410&originWidth=559&originalType=binary&ratio=1&size=28565&status=done&style=none&taskId=ue95145a8-f47f-4df7-bf4d-ad043c7f63c&width=559" alt="image.png">
<a name="ytqk2"></a></p>
<h4 id="5k64s1"><a name="5k64s1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.1 输入类型：password</h4><p>基本语法：<br /><input type=”password” name=”mima” /><br />功能：<br />定义密码字段。该字段中的字符被掩码。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
密码：<input type="password" value="123456" />
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907428051-59af04ed-97d0-498d-bcbd-3f984664243f.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u13dae63e&margin=%5Bobject%20Object%5D&originHeight=543&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u41133780-9f5a-47a7-b06b-2c5919cb84c" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907449310-0f796448-5bbd-47e6-8a97-706d62c8c4ba.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=400&id=u78e2f280&margin=%5Bobject%20Object%5D&name=image.png&originHeight=400&originWidth=582&originalType=binary&ratio=1&size=28678&status=done&style=none&taskId=u597655d5-195d-437b-97cd-61e5c02faaf&width=582" alt="image.png">
<a name="X6JaG"></a></p>
<h4 id="7lnqjv"><a name="7lnqjv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.2 单选按钮radio</h4><p>基本语法：<br /><input type=”radio” name=”sex’ value=”男” />男<br /><input type=”radio” name=”sex’ value=”女” />女<br />功能：<br />定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。<br />注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
性 别：
<input type="radio" name="sex" checked="checked" />男
<input type="radio" name="sex" />女
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907520308-f84aefbe-25a6-4fde-a73d-693a9f456277.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=ub355a22a&margin=%5Bobject%20Object%5D&originHeight=530&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u1fcb80a9-3899-4bb2-b287-be794b0f803" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907538285-d75366ea-3ec9-48e1-b947-46a8b8aafd67.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=347&id=uec66caa4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=347&originWidth=652&originalType=binary&ratio=1&size=33943&status=done&style=none&taskId=u4e2c9b41-9725-4d3d-b186-72f853230f7&width=652" alt="image.png">
<a name="qjCS5"></a></p>
<h4 id="2ldeof"><a name="2ldeof" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.3 复选框checkbox</h4><p>基本语法：<br /><input type=”checkbox” name=”” /><br />功能：<br />定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
爱好：
<input type="checkbox" name="hobbey" checked="checked" />足球
<input type="checkbox" name="hobbey" />篮球
<input type="checkbox" name="hobbey" />羽毛球
<input type="checkbox" name="hobbey" checked="checked" />乒乓球
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907610158-b3bfd24e-8c48-4494-8bcb-bd1cb48a7022.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u41374dd6&margin=%5Bobject%20Object%5D&originHeight=478&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=ue0b0ddc0-5239-4afc-9bcd-57265162c79" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907630531-543596a9-157d-4a39-bfaa-618aefc25b60.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=406&id=ueb3624de&margin=%5Bobject%20Object%5D&name=image.png&originHeight=406&originWidth=656&originalType=binary&ratio=1&size=43526&status=done&style=none&taskId=u8d666b3b-8591-4af4-ba4f-7b919775be6&width=656" alt="image.png">
<a name="qoNF4"></a></p>
<h4 id="3f5q6z"><a name="3f5q6z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.4 点击按钮button</h4><p>基本语法：<br /><input type=”button” /><br />功能：<br />定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
点击按钮：
<input type="button" value="按钮" />
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907690026-27469b12-4564-499f-9eda-a1147acde051.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=uee38a5d9&margin=%5Bobject%20Object%5D&originHeight=515&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u805ac51d-e138-479f-bc4b-121270affcc" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907707091-13e38a46-50f9-44fe-ba9c-6399e6654da1.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=200&id=u6f7fcd17&margin=%5Bobject%20Object%5D&name=image.png&originHeight=200&originWidth=525&originalType=binary&ratio=1&size=10444&status=done&style=none&taskId=uc8799784-a605-4f20-8647-489906b464c&width=525" alt="image.png">
<a name="dIQQR"></a></p>
<h4 id="bzls7s"><a name="bzls7s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.5 重置按钮reset</h4><p>基本语法：<br /><input type=”reset” /><br />功能：<br />定义重置按钮。重置按钮会清除表单中的所有数据。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="" method="get">
姓名：<input type="text" value="小李" /><br />
点击按钮：<input type="reset" />
</form>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907768880-b3929bab-c72f-4695-9f5b-c4c65142b1cf.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u75e6bdfb&margin=%5Bobject%20Object%5D&originHeight=512&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u568da970-1450-4b6d-96e3-9ece77326e8" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907786988-86a0b4ea-ede5-4ba5-987b-f2e383d1fd2b.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=219&id=u7ad9c732&margin=%5Bobject%20Object%5D&name=image.png&originHeight=219&originWidth=671&originalType=binary&ratio=1&size=18688&status=done&style=none&taskId=u6d931d77-7b96-41f9-8908-f06987e2932&width=671" alt="image.png">
<a name="Id0R3"></a></p>
<h4 id="1l6zhl"><a name="1l6zhl" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.6 提交按钮subimit</h4><p>基本语法：<br /><input tyep=”submit” /><br />功能：<br />定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<form action="" method="get">
姓名：<input type="text" value="小李" /><br />
点击按钮：<input type="submit" />
</form>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907853603-3c0387c6-f4aa-4394-85b2-62430c2f27f7.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u49c717b6&margin=%5Bobject%20Object%5D&originHeight=523&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=u3df2eaeb-8ff7-4020-9290-efef9eeb3c4" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907879498-7c165ea9-8431-4fab-98f7-9db86f1e3b6f.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=276&id=u8c224b0c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=276&originWidth=661&originalType=binary&ratio=1&size=20810&status=done&style=none&taskId=u3e1e905e-b691-4ff6-a03b-bf38a44f131&width=661" alt="image.png">
<a name="VECFx"></a></p>
<h4 id="8llc6a"><a name="8llc6a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1.7 文件上传file</h4><p>基本语法：<br /> <input type=”file” name=”shangchuan” /><br />功能：<br />用于文件上传</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
头像：<input type="file" name="shangchuan" />
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907936471-a71d51b8-5e51-449f-86e0-aa74a561a506.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=u702a7da5&margin=%5Bobject%20Object%5D&originHeight=511&originWidth=1919&originalType=url&ratio=1&status=done&style=none&taskId=u4ec47bd3-aca1-4c86-ae40-5e760419349" alt=""><br />代码讲解：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632907955188-985f4066-2ea2-42ab-9da7-af4b9bbcd17a.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=229&id=u5d2c3e8f&margin=%5Bobject%20Object%5D&name=image.png&originHeight=229&originWidth=552&originalType=binary&ratio=1&size=15123&status=done&style=none&taskId=u661c805d-87a9-4dc9-9153-f3b86623a06&width=552" alt="image.png">
<a name="IOtnt"></a></p>
<h2 id="aaaxf5"><a name="aaaxf5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、其他表单元素</h2><p><a name="Qb75F"></a></p>
<h3 id="a8xrcu"><a name="a8xrcu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 textarea元素</h3><p>基本语法：<br /><textarea cols="每行中的字符数" rows="显示的行数"><br />文本内容<br /></textarea><br />在上面的语法格式中，cols和rows为<textarea>标记的必须属性，其中cols用来定义多行文本输入框每行中的字符数，rows用来定义多行文本输入框显示的行数，它们的取值均为正整数。<br /><textarea>元素除了cols和rows属性外，还拥有几个可选属性，分别为disabled、name和readonly。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_autofocus.asp">autofocus</a></td>
<td>autofocus</td>
<td>规定在页面加载后文本区域自动获得焦点。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_cols.asp">cols</a></td>
<td><em>number</em></td>
<td>规定文本区内的可见宽度。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_disabled.asp">disabled</a></td>
<td>disabled</td>
<td>规定禁用该文本区。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_form.asp">form</a></td>
<td><em>form_id</em></td>
<td>规定文本区域所属的一个或多个表单。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_maxlength.asp">maxlength</a></td>
<td><em>number</em></td>
<td>规定文本区域的最大字符数。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_name.asp">name</a></td>
<td><em>name_of_textarea</em></td>
<td>规定文本区的名称。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_placeholder.asp">placeholder</a></td>
<td><em>text</em></td>
<td>规定描述文本区域预期值的简短提示。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_readonly.asp">readonly</a></td>
<td>readonly</td>
<td>规定文本区为只读。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_required.asp">required</a></td>
<td>required</td>
<td>规定文本区域是必填的。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_rows.asp">rows</a></td>
<td><em>number</em></td>
<td>规定文本区内的可见行数。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_textarea_wrap.asp">wrap</a></td>
<td><br />- hard<br />- soft<br /></td>
<td>规定当在表单中提交时，文本区域中的文本如何换行。。</td>
</tr>
</tbody>
</table>
<p><a name="cDiKA"></a></p>
<h3 id="dz4256"><a name="dz4256" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 select元素</h3><p>基本语法：<br /><select><br /><option>选项1</option><br /><option>选项2</option><br /><option>选项3</option><br /></select><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633401234432-26d375d7-76d1-4961-952d-b62abc7231ad.png#clientId=u7aca6224-b34f-4&from=paste&height=346&id=u3dc1c3e4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=346&originWidth=1164&originalType=binary&ratio=1&size=430491&status=done&style=none&taskId=u2c878b83-37b1-4c9a-8f2b-74a26741883&width=1164" alt="image.png"><br />功能：<br />元素用来创建下拉列表。<br />元素中的 <option> 标签定义了列表中的可用选项。</p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
年龄：
<select name="age">
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected="selected">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632908167704-d1b2a122-55f9-459e-94ca-fde6c0883626.png#clientId=ud9b9aa96-b3b2-4&from=paste&id=ue828fb2c&margin=%5Bobject%20Object%5D&originHeight=513&originWidth=1920&originalType=url&ratio=1&status=done&style=none&taskId=ud1331772-6c97-48e3-b5b9-b4a58497ebe" alt=""><br />代码讲解<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632908189784-8a9ddbba-ed92-4c9e-bb33-9b4b387239ca.png#clientId=ud9b9aa96-b3b2-4&from=paste&height=373&id=u1f15929c&margin=%5Bobject%20Object%5D&name=image.png&originHeight=373&originWidth=583&originalType=binary&ratio=1&size=27165&status=done&style=none&taskId=ud30d3336-21b2-44ff-b825-b00213f15f0&width=583" alt="image.png">
<a name="D5ols"></a></p>
<h3 id="fc0776"><a name="fc0776" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 datalist元素</h3><p><datalist> 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。<br />datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。<br />请使用 input 元素的 list 属性来绑定 datalist。</p>
<pre><code class="lang-html"><input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
</code></pre>
<p><a name="Dv3o7"></a></p>
<h3 id="8ha4ai"><a name="8ha4ai" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 keygen元素</h3><p><keygen> 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。</p>
<pre><code class="lang-html"><form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
</code></pre>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_autofocus.asp">autofocus</a></td>
<td>autofocus</td>
<td>使 keygen 字段在页面加载时获得焦点。</td>
</tr>
<tr>
<td>challenge</td>
<td>challenge</td>
<td>如果使用，则将 keygen 的值设置为在提交时询问。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_disabled.asp">disabled</a></td>
<td>disabled</td>
<td>禁用 keytag 字段。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_form.asp">form</a></td>
<td><em>formname</em></td>
<td>定义该 keygen 字段所属的一个或多个表单。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_keytype.asp">keytype</a></td>
<td>rsa</td>
<td>定义 keytype。rsa 生成 RSA 密钥。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_keygen_name.asp">name</a></td>
<td><em>fieldname</em></td>
<td>定义 keygen 元素的唯一名称。<br />name 属性用于在提交表单时搜集字段的值。</td>
</tr>
</tbody>
</table>
<p><a name="r5au7"></a></p>
<h3 id="4em5rj"><a name="4em5rj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 output元素</h3><p>output元素用于不同类型的输出，可以在浏览器中显示计算结果或脚本输出。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_for.asp">for</a></td>
<td><em>element_id</em></td>
<td>定义输出域相关的一个或多个元素。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_form.asp">form</a></td>
<td><em>form_id</em></td>
<td>定义输入字段所属的一个或多个表单。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_output_name.asp">name</a></td>
<td><em>name</em></td>
<td>定义对象的唯一名称。（表单提交时使用）</td>
</tr>
</tbody>
</table>
<p><a name="vAvHD"></a></p>
<h2 id="qg1an"><a name="qg1an" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、CSS控制表单样式</h2><p>例：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633401872273-00911099-bb1a-4c52-900a-b2701a8b8d42.png#clientId=u7aca6224-b34f-4&from=paste&height=941&id=ub48500f7&margin=%5Bobject%20Object%5D&name=image.png&originHeight=941&originWidth=647&originalType=binary&ratio=1&size=943030&status=done&style=none&taskId=ud28f9727-476a-4c59-9854-c5668b8fb98&width=647" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633401980996-a1a9e8ef-0b82-4ce7-be45-02ff4721d8e6.png#clientId=u7aca6224-b34f-4&from=paste&height=941&id=u076f06d2&margin=%5Bobject%20Object%5D&name=image.png&originHeight=941&originWidth=641&originalType=binary&ratio=1&size=860703&status=done&style=none&taskId=u00132fc8-5656-448d-986c-15fa4d6dd52&width=641" alt="image.png"><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633402085828-690f79ba-f3dc-4107-bece-299bc4fd3ba2.png#clientId=u7aca6224-b34f-4&from=paste&height=941&id=ua1c227e5&margin=%5Bobject%20Object%5D&name=image.png&originHeight=941&originWidth=725&originalType=binary&ratio=1&size=973793&status=done&style=none&taskId=u8b7cdfdb-107f-4cb0-8381-41351b04c2e&width=725" alt="image.png">
<a name="Zn1NQ"></a></p>
<h1 id="8h4bv8"><a name="8h4bv8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第八章 多媒体技术</h1><p><a name="Y2v08"></a></p>
<h2 id="6ey9jo"><a name="6ey9jo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、嵌入视频和音频</h2><p><a name="zOD8Q"></a></p>
<h3 id="byv1yk"><a name="byv1yk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1 在HTML5中嵌入视频（video）</h3><p>语法格式：<br /><video src="视频文件路径" controls="controls"></video><br />在上面的语法格式中，src属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，这两个属性是video元素的基本属性。并且<video>和</video>之间还可以插入文字，用于在不支持video元素的浏览器中显示。</p>
<pre><code class="lang-html">!DOCTYPE html>
<html>
<head>
<title>复仇者联盟</title>
<meta charset="utf-8" />
<style type="text/css">
video{
width:1000px;
height:420px;
margin:100px auto 0;
display:block;
}
</style>
</head>
<body>
<video src="http://www.yyfun001.com/res/htmlclassics/full/video/avenger.mp4"
controls="controls"
poster="http://www.yyfun001.com/res/htmlclassics/full/images/video_bg.png">
</video>
</body>
</html>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1632906753209-66e6179d-5443-4d93-920b-e16f2efb37a9.png#from=url&id=jE9FF&margin=%5Bobject%20Object%5D&originHeight=970&originWidth=1920&originalType=binary&ratio=1&status=done&style=none" alt=""><br />在video元素中还可以添加其他属性，来进一步优化视频的播放效果。</p>
<table>
<thead>
<tr>
<th>属性</th>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_autoplay.asp">autoplay</a></td>
<td>autoplay</td>
<td>如果出现该属性，则视频在就绪后马上播放。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_controls.asp">controls</a></td>
<td>controls</td>
<td>如果出现该属性，则向用户显示控件，比如播放按钮。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_height.asp">height</a></td>
<td><em>pixels</em></td>
<td>设置视频播放器的高度。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_loop.asp">loop</a></td>
<td>loop</td>
<td>如果出现该属性，则当媒介文件完成播放后再次开始播放。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_muted.asp">muted</a></td>
<td>muted</td>
<td>规定视频的音频输出应该被静音。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_poster.asp">poster</a></td>
<td><em>URL</em></td>
<td>规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_preload.asp">preload</a></td>
<td>preload</td>
<td>如果出现该属性，则视频在页面加载时进行加载，并预备播放。<br />如果使用 “autoplay”，则忽略该属性。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_src.asp">src</a></td>
<td><em>url</em></td>
<td>要播放的视频的 URL。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/tags/att_video_width.asp">width</a></td>
<td><em>pixels</em></td>
<td>设置视频播放器的宽度。</td>
</tr>
</tbody>
</table>
<p><a name="vMSfd"></a></p>
<h3 id="7cr4uy"><a name="7cr4uy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 在HTML5中嵌入音频（audio）</h3><p>在HTML5中，audio标签用于定义播放音频文件的标准，它支持三种音频格式，分别为Ogg、MP3和wav。<br />语法格式：<br /><audio src="音频文件路劲" controls="controls"></audio><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633403162042-53948b79-b57b-4cac-a96c-173dc48e7e2e.png#clientId=u7aca6224-b34f-4&from=paste&height=857&id=u344d2293&margin=%5Bobject%20Object%5D&name=image.png&originHeight=857&originWidth=769&originalType=binary&ratio=1&size=795117&status=done&style=none&taskId=uf34d3106-e23c-43a3-8cf3-043897ae221&width=769" alt="image.png">
<a name="gZRK7"></a></p>
<h2 id="g9sgz3"><a name="g9sgz3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、视频和音频的方法和事件</h2><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633403371985-078b364b-89a6-4122-9188-8bbde39e0572.png#clientId=u7aca6224-b34f-4&from=paste&height=941&id=u195e71c9&margin=%5Bobject%20Object%5D&name=image.png&originHeight=941&originWidth=607&originalType=binary&ratio=1&size=924767&status=done&style=none&taskId=u2d8f0dca-b8be-4e0c-b33d-f32898b9588&width=607" alt="image.png"><br />video和audio常用的方法和事件，在使用video和audio元素读取或播放媒体文件时，会触发一系列的事件，但这些事件需要JavaScript脚本来捕获，才可以进行相应的处理。因此需要JavaScript的辅助。
<a name="L595I"></a></p>
<h1 id="37byy4"><a name="37byy4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>第九章 CSS3高级应用</h1><p><a name="JF5VT"></a></p>
<h2 id="a14xmw"><a name="a14xmw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、过渡</h2><p><a name="YPYeO"></a></p>
<h3 id="4sspuz"><a name="4sspuz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.1 transition-property属性</h3><p>语法格式：<br />transition-property : none | all | property ;</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>none</td>
<td>没有属性会获得过渡效果。</td>
</tr>
<tr>
<td>all</td>
<td>所有属性都将获得过渡效果。</td>
</tr>
<tr>
<td><em>property</em></td>
<td>定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。</td>
</tr>
</tbody>
</table>
<pre><code class="lang-html">div{
width:400px;
height:500px;
background-color:red;
}
div:hover{
background-color:blue;
transition-property:background-color;
}
/*设置鼠标移动到div上时，背景颜色由红色慢慢变为蓝色*/
</code></pre>
<p><a name="YARVE"></a></p>
<h3 id="13jg5f"><a name="13jg5f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.2 transition-duration属性</h3><p>transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）。<br />语法格式：<br />transition-duration : time ;</p>
<pre><code class="lang-html">div{
width:400px;
height:500px;
background-color:red;
}
div:hover{
background-color:blue;
transition-property:background-color;
transition-duration:5s;
}
/*设置鼠标移动到div上时，背景颜色由红色慢慢变为蓝色，过程花费5秒的时间*/
</code></pre>
<p><a name="HCCX7"></a></p>
<h3 id="24jlhm"><a name="24jlhm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.3 transition-timing-function属性</h3><p>改属性规定过渡效果的速度曲线，默认值为ease。<br />语法格式：<br /> transition-timing-function:linear;</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>linear</td>
<td>规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。</td>
</tr>
<tr>
<td>ease</td>
<td>规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。</td>
</tr>
<tr>
<td>ease-in</td>
<td>规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。</td>
</tr>
<tr>
<td>ease-out</td>
<td>规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。</td>
</tr>
<tr>
<td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td>在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。</td>
</tr>
</tbody>
</table>
<pre><code class="lang-html">div{
width:500px;
height:500px;
background-color:red;
border:5px solid yellow;
border-radius:0px;
}
div:hover{
border-radius:105px;
transition-property:border-radius;
transition-duration:5s;
transition-timing-function:ease-in-out;
}
/*当鼠标指针移动到div上时，过渡的动作将会被触发，正方形将会慢速开始变化，然后逐渐加速，随后慢速变为正圆形*/
</code></pre>
<p><a name="OJV4d"></a></p>
<h3 id="7w12l1"><a name="7w12l1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.4 transition-delay属性</h3><p>transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）。<br />语法格式：<br />transition-delay：time；</p>
<pre><code class="lang-html">transition-delay：5s； /*过渡动作五秒后开始触发*/
</code></pre>
<p><a name="ryHSZ"></a></p>
<h3 id="28theq"><a name="28theq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.5 transition属性</h3><p>transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。<br />语法格式：<br />transition：transition-property transition-duration transition-timing-function transition-delay<br />使用transition属性设置多个过渡效果时，它的各个参数必须按照顺序进行定义，不能颠倒。</p>
<pre><code class="lang-html">transition：border-radius 5s ease-in-out 2s；
</code></pre>
<p>注意：无论是单个属性还是简写属性，使用时都可以实现多个过渡效果。如果使用transition简写属性设置多个过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。
<a name="sMSPC"></a></p>
<h2 id="103ys7"><a name="103ys7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、变形</h2><p><a name="IbOSD"></a></p>
<h3 id="5y5x97"><a name="5y5x97" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、认识transform</h3><p>语法格式：<br />transform：none | transform-functions；<br />在上面的语法格式中，transform属性的默认值为none，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。<br />transform-functions函数包括matrix( )、translate( )、scale（）、rotate（）、skew（）等。<br />matrix（）：定义矩形变换，即基于X和Y坐标重新定位元素的位置。<br />translate（）：移动元素对象，即基于X和Y坐标重新定位元素。<br />scale（）：缩放元素对象，可以使任意元素对象尺寸发生变化，取值包括正数、负数和小数。<br />rotate（）：旋转元素对象，取值为一个度数值。<br />skew（）：倾斜元素对象，取值为一个度数值。
<a name="qKqnn"></a></p>
<h3 id="8zjrp"><a name="8zjrp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、2D转换</h3><p><a name="y9bcp"></a></p>
<h4 id="3zzhj1"><a name="3zzhj1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.1 旋转rotate</h4><p>rotate(<angle>) ：通过指定的角度参数对原元素指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#RotationDefined">2D rotation</a>（2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415440723-6098db5d-65e2-4448-9ee1-3b72e9f0892a.png#clientId=u495273f8-7b9f-4&from=paste&id=u2d2bd3bb&margin=%5Bobject%20Object%5D&name=image.png&originHeight=165&originWidth=245&originalType=url&ratio=1&size=10752&status=done&style=none&taskId=u12050375-d7fa-4cd0-9c1f-94d4903d02e" alt="image.png">
<a name="aODuU"></a></p>
<h4 id="fyhnmk"><a name="fyhnmk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.2 平移translate</h4><p>平移translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动）。<br />如transform:translate(100px,20px):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415440784-72d23b69-0093-43e0-917a-e4ce4729024a.png#clientId=u495273f8-7b9f-4&from=paste&id=u2f37fe71&margin=%5Bobject%20Object%5D&name=image.png&originHeight=160&originWidth=240&originalType=url&ratio=1&size=5825&status=done&style=none&taskId=ua7f3f6aa-a05b-44f4-8655-b547422cb89" alt="image.png"><br />2、translateX(<translation-value>) ： 通过给定一个X方向上的数目指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>。只向x轴进行移动元素，同样其基点是元素中心点，也可以根据transform-origin改变基点位置。<br />如：transform:translateX(100px):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415440776-61c81d72-bb75-4ff1-a41b-5d6d81706785.png#clientId=u495273f8-7b9f-4&from=paste&id=u08989611&margin=%5Bobject%20Object%5D&name=image.png&originHeight=124&originWidth=237&originalType=url&ratio=1&size=4338&status=done&style=none&taskId=u974fbf0e-a3db-4611-a6ac-9e96bb81f2a" alt="image.png"><br />3、translateY(<translation-value>) ：通过给定Y方向的数目指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#TranslationDefined">translation</a>。只向Y轴进行移动，基点在元素心点，可以通过transform-origin改变基点位置。<br />如：transform:translateY(20px):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415440781-2650e504-e829-460c-bba7-0cdc4eb6b4ec.png#clientId=u495273f8-7b9f-4&from=paste&id=u31ede6c1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=220&originalType=url&ratio=1&size=4144&status=done&style=none&taskId=uc667cfca-c638-47d1-bd6a-344e8bbedde" alt="image.png">
<a name="Jtckk"></a></p>
<h4 id="cgpiu0"><a name="cgpiu0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.3 缩放scale</h4><p>缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。<br />1、scale(<number>[, <number>])：提供执行[sx,sy]缩放矢量的两个参数指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#ScalingDefined">2D scale</a>（2D缩放）。<br />如果第二个参数未提供，则取与第一个参数一样的值。<br />scale(X,Y)是用于对元素进行缩放，X表示水平方向缩放的倍数，Y表示垂直方向的缩放倍数，而Y是一个可选参数，如果没有设置Y值，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。<br />如：transform:scale(2,1.5):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415440783-4b6176b4-5285-4004-bfc8-bdb6e327ff7b.png#clientId=u495273f8-7b9f-4&from=paste&id=uafe42504&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=220&originalType=url&ratio=1&size=8026&status=done&style=none&taskId=ua6a3aa08-c116-45a4-8774-c44e756a216" alt="image.png"><br />2、scaleX(<number>) ：scaleX表示元素只在X轴(水平方向)缩放元素，他的默认值是(1,1)，其基点一样是在元素的中心位置，我们同样是通过transform-origin来改变元素的基点。<br />如：transform:scaleX(2):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415441630-77a7f855-9aba-4dc7-8c5f-4db6f442950e.png#clientId=u495273f8-7b9f-4&from=paste&id=u0330a731&margin=%5Bobject%20Object%5D&name=image.png&originHeight=107&originWidth=182&originalType=url&ratio=1&size=2779&status=done&style=none&taskId=u9c2fbe3e-95e7-49c3-9fba-73edc4c32cc" alt="image.png"><br />3、scaleY(<number>) ：scaleY表示元素只在Y轴（垂直方向）缩放元素，其基点同样是在元素中心位置，可以通过transform-origin来改变元素的基点。<br />如transform:scaleY(2):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415441629-5ba284f4-36e6-40c2-82aa-ca73198a8aa6.png#clientId=u495273f8-7b9f-4&from=paste&id=u5a913dcb&margin=%5Bobject%20Object%5D&name=image.png&originHeight=115&originWidth=204&originalType=url&ratio=1&size=3304&status=done&style=none&taskId=u7781c6f5-dca5-4724-8c93-ab3110ed48e" alt="image.png">
<a name="pIEIu"></a></p>
<h4 id="8ripru"><a name="8ripru" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.4 倾斜skew</h4><p>倾斜skew和translate、scale一样同样具有三种情况：<br />skew（x，y）：使元素在水平和垂直方向同时倾斜（X轴和Y轴同时按一定的角度值进行倾斜变形）。<br />skewX（x）)：仅使元素在水平方向倾斜变形（X轴倾斜变形）。<br />skewY（y）：)仅使元素在垂直方向倾斜变形（Y轴倾斜变形）。<br />1、skew(x，y) ：X轴Y轴上的<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew transformation</a>（斜切变换），第一个参数对应X轴，第二个参数对应Y轴。如果第二个参数未提供，则值为0，也就是Y轴方向上无倾斜。skew是用来对元素进行倾斜变行其中第二个参数是可选参数，如果没有设置第二个参数，那么Y轴为0deg。同样是以元素中心为基点，我们也可以通过transform-origin来改变元素的基点位置。<br />如：transform:skew(30deg,10deg):<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415441637-2ce98aab-85e3-499f-9d42-633d289ae35b.png#clientId=u495273f8-7b9f-4&from=paste&id=ub9c230c4&margin=%5Bobject%20Object%5D&name=image.png&originHeight=140&originWidth=225&originalType=url&ratio=1&size=10460&status=done&style=none&taskId=u30265c54-843c-4659-9ea4-84855a653f3" alt="image.png"><br />2、skewX( 数值 ) ： 按给定的角度沿X轴指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#SkewXDefined">skew transformation</a>（斜切变换）。skewX是使元素以其中心为基点，并在水平方向（X轴）进行倾斜变行，同样可以通过transform-origin来改变元素的基点。<br />如：transform:skewX(30deg)；<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415441913-75026e11-fa39-4bc8-9aae-456f816d7051.png#clientId=u495273f8-7b9f-4&from=paste&id=u69424c74&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=230&originalType=url&ratio=1&size=7147&status=done&style=none&taskId=u8119dc45-0dff-4bcc-ac16-70d00671f36" alt="image.png"><br />3、skewY( 数值 ) ： 按给定的角度沿Y轴指定一个<a rel="nofollow" href="http://www.w3.org/TR/SVG/coords.html#SkewYDefined">skew transformation</a>（斜切变换）。skewY是用来设置元素以其中心为基点并按给定的角度在垂直方向（Y轴）倾斜变形。同样我们可以通过transform-origin来改变元素的基点。<br />如：transform:skewY（10deg）；<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551925/1633415442453-6ad247e5-1407-4ac3-8076-f3cfc64903dc.png#clientId=u495273f8-7b9f-4&from=paste&id=u38f968f1&margin=%5Bobject%20Object%5D&name=image.png&originHeight=130&originWidth=230&originalType=url&ratio=1&size=5772&status=done&style=none&taskId=uf553b4bb-9efc-40ce-a814-59f4f3a6827" alt="image.png">
<a name="nfTyM"></a></p>
<h4 id="6fvwfa"><a name="6fvwfa" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.5 更改变换的中心点</h4><p>通过transform属性可以实现元素的平移、缩放、倾斜及旋转效果，这些变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。<br />语法格式：<br />transform-origin：x-axis y-axis z-axis；<br />在上述语法中，transform-origin属性包含三个参数，其默认值分别为50% 50% 0。</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>x-axis</td>
<td>定义视图被置于 X 轴的何处。可能的值：<br />- left<br />- center<br />- right<br />- <em>length</em><br />- <em>%</em><br /></td>
</tr>
<tr>
<td>y-axis</td>
<td>定义视图被置于 Y 轴的何处。可能的值：<br />- top<br />- center<br />- bottom<br />- <em>length</em><br />- <em>%</em><br /></td>
</tr>
<tr>
<td>z-axis</td>
<td>定义视图被置于 Z 轴的何处。可能的值：<br />- <em>length</em><br /></td>
</tr>
</tbody>
</table>
<p><a name="ygiu3"></a></p>
<h3 id="6pcwpr"><a name="6pcwpr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、3D转换</h3><p><a name="Dcg0o"></a></p>
<h4 id="ck5snh"><a name="ck5snh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 rotateX() 方法</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/gif/22551925/1633416897079-11cbdebc-b1ea-4277-a51a-9e325800e851.gif#clientId=u495273f8-7b9f-4&from=paste&id=u41b2bb36&margin=%5Bobject%20Object%5D&originHeight=79&originWidth=104&originalType=url&ratio=1&status=done&style=none&taskId=uaab33fb6-a7af-44ba-a93a-b9f5698aec4" alt=""><br />rotateX()方法，围绕其在一个给定度数X轴旋转的元素。</p>
<pre><code class="lang-html">div{
transform: rotateX(120deg);
}
</code></pre>
<p><a name="Ixjuj"></a></p>
<h4 id="6kafmi"><a name="6kafmi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 rotateY() 方法</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/gif/22551925/1633416897768-90e7fa02-fe24-4d8c-a938-29b8f75a6fa2.gif#clientId=u495273f8-7b9f-4&from=paste&id=uca767d46&margin=%5Bobject%20Object%5D&originHeight=79&originWidth=104&originalType=url&ratio=1&status=done&style=none&taskId=u501b58e8-6303-4f89-8596-198b1e5ca7b" alt=""><br />rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。</p>
<pre><code class="lang-html">div{
transform: rotateY(130deg);
}
</code></pre>
<p><a name="PAlQX"></a></p>
<h4 id="8x77ti"><a name="8x77ti" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 rotate3d(x,y,z,angle)方法</h4><pre><code class="lang-html">rotate3d(x,y,z,angle
</code></pre>
<p>x：代表横向坐标位移向量的长度。<br />y：代表纵向坐标位移向量的长度。<br />z：代表Z轴位移向量的长度。此值不能是一个百分比值，否则将会视为无效值。<br />angle：角度值，主要用来指定元素3D空间旋转的角度，如果其值为正，元素顺时针旋转，反之元素逆时针旋转。
<a name="LC8Dz"></a></p>
<h4 id="4bftlg"><a name="4bftlg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 转换的属性</h4><table>
<thead>
<tr>
<th>属性</th>
<th>描述</th>
<th>CSS</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-transform.html">transform</a></td>
<td>向元素应用 2D 或 3D 转换。</td>
<td>3</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-transform-origin.html">transform-origin</a></td>
<td>允许你改变被转换元素的位置。</td>
<td>3</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-transform-style.html">transform-style</a></td>
<td>规定被嵌套元素如何在 3D 空间中显示。</td>
<td>3</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-perspective.html">perspective</a></td>
<td>规定 3D 元素的透视效果。</td>
<td>3</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-perspective-origin.html">perspective-origin</a></td>
<td>规定 3D 元素的底部位置。</td>
<td>3</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.runoob.com/cssref/css3-pr-backface-visibility.html">backface-visibility</a></td>
<td>定义元素在不面对屏幕时是否可见。</td>
<td>3</td>
</tr>
</tbody>
</table>
<p><a name="phgul"></a></p>
<h4 id="5845ro"><a name="5845ro" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 3D转换的方法</h4><table>
<thead>
<tr>
<th>函数</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>matrix3d(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<br /><em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td>定义 3D 转换，使用 16 个值的 4x4 矩阵。</td>
</tr>
<tr>
<td>translate3d(<em>x</em>,<em>y</em>,<em>z</em>)</td>
<td>定义 3D 转化。</td>
</tr>
<tr>
<td>translateX(<em>x</em>)</td>
<td>定义 3D 转化，仅使用用于 X 轴的值。</td>
</tr>
<tr>
<td>translateY(<em>y</em>)</td>
<td>定义 3D 转化，仅使用用于 Y 轴的值。</td>
</tr>
<tr>
<td>translateZ(<em>z</em>)</td>
<td>定义 3D 转化，仅使用用于 Z 轴的值。</td>
</tr>
<tr>
<td>scale3d(<em>x</em>,<em>y</em>,<em>z</em>)</td>
<td>定义 3D 缩放转换。</td>
</tr>
<tr>
<td>scaleX(<em>x</em>)</td>
<td>定义 3D 缩放转换，通过给定一个 X 轴的值。</td>
</tr>
<tr>
<td>scaleY(<em>y</em>)</td>
<td>定义 3D 缩放转换，通过给定一个 Y 轴的值。</td>
</tr>
<tr>
<td>scaleZ(<em>z</em>)</td>
<td>定义 3D 缩放转换，通过给定一个 Z 轴的值。</td>
</tr>
<tr>
<td>rotate3d(<em>x</em>,<em>y</em>,<em>z</em>,<em>angle</em>)</td>
<td>定义 3D 旋转。</td>
</tr>
<tr>
<td>rotateX(<em>angle</em>)</td>
<td>定义沿 X 轴的 3D 旋转。</td>
</tr>
<tr>
<td>rotateY(<em>angle</em>)</td>
<td>定义沿 Y 轴的 3D 旋转。</td>
</tr>
<tr>
<td>rotateZ(<em>angle</em>)</td>
<td>定义沿 Z 轴的 3D 旋转。</td>
</tr>
<tr>
<td>perspective(<em>n</em>)</td>
<td>定义 3D 转换元素的透视视图。</td>
</tr>
</tbody>
</table>
<p><a name="p1Xvu"></a></p>
<h2 id="brfnu4"><a name="brfnu4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、动画</h2><p><a name="KIGmY"></a></p>
<h3 id="37193a"><a name="37193a" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.1 @keyframes</h3><p>语法格式：</p>
<pre><code class="lang-html">@keyframes animationname{
keyframes-selector{
css-styles;
}
}
</code></pre>
<p>animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。<br />keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画结束。<br />css-style：定义执行到当前关键帧时对应的动画状态，有css样式属性进行定义，多个属性之间用分号分隔，不能为空。</p>
<pre><code class="lang-html">@keyframes appear{
0%{
opacity:0; /*动画开始时的状态，完全透明*/
}
100%{
opacity:1;/*动画结束时的状态，完全不透明*/
}
}
</code></pre>
<p><a name="GnBqQ"></a></p>
<h3 id="c92qet"><a name="c92qet" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.2 animation-name属性</h3><p>animation-name 属性为 @keyframes 动画规定名称。<br /><strong>注释：</strong>请始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。<br />语法格式：<br />animation-name: <em>keyframename</em>|none;</p>
<pre><code class="lang-html">div{
animation:mymove 5s infinite;
}
</code></pre>
<p><a name="uAld5"></a></p>
<h3 id="1cc56h"><a name="1cc56h" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.3 animation-duration属性</h3><p>animation-duration 属性定义动画完成一个周期所需要的时间，以秒或毫秒计。<br />语法格式：<br />animation-duration: <em>time</em>;</p>
<pre><code class="lang-html">div{
animation-duration:2s;
}
</code></pre>
<p><a name="CJr7q"></a></p>
<h3 id="8o9u9j"><a name="8o9u9j" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.4 animation-timing-function属性</h3><p>animation-timing-function 规定动画的速度曲线。<br />速度曲线定义动画从一套 CSS 样式变为另一套所用的时间。<br />速度曲线用于使变化更为平滑。<br />语法格式：<br />animation-timing-function: <em>value</em>;</p>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>linear</td>
<td>动画从头到尾的速度是相同的。</td>
</tr>
<tr>
<td>ease</td>
<td>默认。动画以低速开始，然后加快，在结束前变慢。</td>
</tr>
<tr>
<td>ease-in</td>
<td>动画以低速开始。</td>
</tr>
<tr>
<td>ease-out</td>
<td>动画以低速结束。</td>
</tr>
<tr>
<td>ease-in-out</td>
<td>动画以低速开始和结束。</td>
</tr>
<tr>
<td>cubic-bezier(<em>n</em>,<em>n</em>,<em>n</em>,<em>n</em>)</td>
<td>在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。</td>
</tr>
</tbody>
</table>
<p><a name="brYqs"></a></p>
<h3 id="5rezi2"><a name="5rezi2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.5 animation-delay属性</h3><p>animation-delay 属性定义动画何时开始。<br />animation-delay 值以秒或毫秒计。<br /><strong>提示：</strong>允许负值，-2s 使动画马上开始，但跳过 2 秒进入动画。<br />语法格式：<br />animation-delay: <em>time</em>;</p>
<pre><code class="lang-html">div{
animation-delay:2s;
}
</code></pre>
<p><a name="x3ijT"></a></p>
<h3 id="2rrqfi"><a name="2rrqfi" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.6 animation-iteration-count属性</h3><p>animation-iteration-count 属性定义动画的播放次数。<br />语法格式：<br />animation-iteration-count: <em>n</em>|infinite;</p>
<pre><code class="lang-html">div{
animation-iteration-count:3;
}
</code></pre>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><em>n</em></td>
<td>定义动画播放次数的数值。</td>
</tr>
<tr>
<td>infinite</td>
<td>规定动画应该无限次播放。</td>
</tr>
</tbody>
</table>
<p><a name="wuTSk"></a></p>
<h3 id="evp7s4"><a name="evp7s4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.7 animation-direction属性</h3><p>animation-direction 属性定义是否应该轮流反向播放动画。<br />如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。<br /><strong>注释：</strong>如果把动画设置为只播放一次，则该属性没有效果。<br />语法格式：<br />animation-direction: normal|alternate;</p>
<pre><code class="lang-html">div{
animation-direction:alternate;
}
</code></pre>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>normal</td>
<td>默认值。动画应该正常播放。</td>
</tr>
<tr>
<td>alternate</td>
<td>动画应该轮流反向播放。</td>
</tr>
</tbody>
</table>
<p><a name="Vg557"></a></p>
<h3 id="79xfnd"><a name="79xfnd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3.8 animation属性</h3><p>与transition属性一样，animation属性也是一个简写属性，用于在一个属性中设置 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、六个动画属性。</p>
<pre><code class="lang-html">animation：nimation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction；
</code></pre>
<p>简写：</p>
<pre><code class="lang-html">div {
animation: example 5s linear 2s infinite alternate;
}
</code></pre>
<table>
<thead>
<tr>
<th>值</th>
<th>描述</th>
</tr>
</thead>
<tbody>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-name.asp">animation-name</a></td>
<td>规定需要绑定到选择器的 keyframe 名称。。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-duration.asp">animation-duration</a></td>
<td>规定完成动画所花费的时间，以秒或毫秒计。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-timing-function.asp">animation-timing-function</a></td>
<td>规定动画的速度曲线。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-delay.asp">animation-delay</a></td>
<td>规定在动画开始之前的延迟。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-iteration-count.asp">animation-iteration-count</a></td>
<td>规定动画应该播放的次数。</td>
</tr>
<tr>
<td><a rel="nofollow" href="https://www.w3school.com.cn/cssref/pr_animation-direction.asp">animation-direction</a></td>
<td>规定是否应该轮流反向播放动画。</td>
</tr>
</tbody>
</table>
