页面基本结构
<!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 文档。
标签是 HTML 文档中最外层的元素。
标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。
<head></head>
元素是所有头部元素的容器。
元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。
以下列出的元素能被用在 元素内部：
（在头部中，这个元素是必需的）<br /> <style><br /> <base><br /> <link><br /> <meta><br /> <script><br /> <noscript>
<a name="qySnw"></a></p>
<h2 id="fhoknz"><a name="fhoknz" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><body></body></code></h2><p><body> 标签定义文档的主体。<br /><body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。
<a name="En4tE"></a></p>
<h2 id="bj3wn"><a name="bj3wn" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><meta charset="utf-8" /></code></h2><p>元数据（Metadata）是数据的数据信息。<br /><meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。<br />META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。<br />元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
<a name="oYqiX"></a></p>
<h2 id="242xfa"><a name="242xfa" class="reference-link"></a><span class="header-link octicon octicon-link"></span><code><title>First HTML Program</title></code></h2><p><title> 标签定义文档的标题，在所有 HTML 文档中是必需的。<br /><title>元素：<br />定义浏览器工具栏中的标题<br />提供页面被添加到收藏夹时的标题<br />显示在搜索引擎结果中的页面标题
<a name="ub2jI"></a></p>
<h1 id="5if8db"><a name="5if8db" class="reference-link"></a><span class="header-link octicon octicon-link"></span>添加文字</h1><p><a name="wu9SJ"></a></p>
<h2 id="ftdlgj"><a name="ftdlgj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标题标签</h2><pre><code> 共有6个,显示为6级不同的标题<br /> <h1>这是标题 1</h1> <br /> <h2>这是标题 2</h2> <br /> <h3>这是标题 3</h3> <br /> <h4>这是标题 4</h4> <br /> <h5>这是标题 5</h5> <br /> <h6>这是标题 6</h6>
</code></pre><p><a name="Ed0c1"></a></p>
<h2 id="3gemix"><a name="3gemix" class="reference-link"></a><span class="header-link octicon octicon-link"></span>段落标签</h2><p>用来修饰一段文字,段落之间有明显的段间距<br /><p></p>
<a name="sz1Rq"></a></p>
<h2 id="1y52w"><a name="1y52w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>字体标签</h2><p>font 标签规定文本的字体、字体尺寸、字体颜色。已废弃,在HTML5中不支持</p>
<ul>
<li>color 属性 , 用来规定文本的颜色 </li><li>size 属性, 用来规定文本的字体大小</li><li>face 属性, 用来规定文本的字体
<a name="I15R5"></a><h1 id="35kj1s"><a name="35kj1s" class="reference-link"></a><span class="header-link octicon octicon-link"></span>添加CSS样式</h1><a name="IQPaN"></a><h2 id="4fja93"><a name="4fja93" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1.CSS介绍</h2>层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML或XML等文件样式的计算机语言<br />CSS 的作用是用来对页面进行样式的设置,美化页面
<a name="Z4ysq"></a><h3 id="1mipm4"><a name="1mipm4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>选择标签</h3>```html
选择器{</li></ul>
<p>}
// 所有符合选择器的标签都会被选中</p>
<pre><code>设置格式
```html
属性名: 属性值;
....
</code></pre><p><a name="bexRf"></a></p>
<h2 id="7ls9tj"><a name="7ls9tj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2 .CSS使用方式</h2><p><a name="zT00M"></a></p>
<h3 id="8h9grj"><a name="8h9grj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>行内样式</h3><pre><code class="lang-html"><p style="width:500px;height:300px;background-color:red;">
这是一个DIV标签
</p>
</code></pre>
<p><a name="xzDQK"></a></p>
<h3 id="bzc586"><a name="bzc586" class="reference-link"></a><span class="header-link octicon octicon-link"></span>内部样式</h3><pre><code class="lang-html"><head>
<style>
p{
width:500px;
height:500px;
}
</style>
</head>
</code></pre>
<p><a name="z2lcI"></a></p>
<h3 id="9oulha"><a name="9oulha" class="reference-link"></a><span class="header-link octicon octicon-link"></span>外部样式</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="o9uGC"></a></p>
<h2 id="459nf5"><a name="459nf5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. CSS选择器</h2><p>css 通过选择器,来选取符合的标签进行样式的设置<br />常用选择器有: id选择器, class选择器, 标签选择器, 群组选择器, 派生选择器, :hover
<a name="ZC6iA"></a></p>
<h3 id="2fdbcc"><a name="2fdbcc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>id 选择器</h3><pre><code class="lang-html"><head>
<style>
#p1{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p id="p1">AAAA</p>
</body>
</code></pre>
<p><a name="Td7WC"></a></p>
<h3 id="bsuxe1"><a name="bsuxe1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>Class 类选择器</h3><pre><code class="lang-html"><head>
<style>
.p1{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p class="p1">AAAA</p>
</body>
</code></pre>
<p><a name="hdXnF"></a></p>
<h3 id="752atq"><a name="752atq" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标签选择器</h3><pre><code class="lang-html"><head>
<style>
p{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p>AAAA</p>
</body>
</code></pre>
<p><a name="F254l"></a></p>
<h3 id="5h7o65"><a name="5h7o65" class="reference-link"></a><span class="header-link octicon octicon-link"></span>组选择器</h3><pre><code class="lang-html"><head>
<style>
p, div{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p>AAAA</p>
<div> BBB </div>
</body>
</code></pre>
<p><a name="wZarG"></a></p>
<h3 id="7ee3k3"><a name="7ee3k3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>派生选择器(层级选择器)</h3><pre><code class="lang-html"><head>
<style>
div p{
width:500px;
height:500px;
}
</style>
</head>
<body>
<div>
<p>AABBCC</p>
</div>
<p>AAAA</p>
</body>
</code></pre>
<p>:hover 伪类选择器</p>
<pre><code class="lang-html"><head>
<style>
p:hover{
width:500px;
height:500px;
}
</style>
</head>
<body>
<p>AAAA</p>
</body>
</code></pre>
<p><a name="wp98M"></a></p>
<h2 id="e3dsqp"><a name="e3dsqp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4. 选择器优先级</h2><p>当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。<br /><strong>不同级别</strong><br />1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。<br />2、作为style属性写在元素内的样式 <br />3、id选择器 <br />4、类选择器 <br />5、标签选择器 <br />6、通配符选择器<br />7、浏览器自定义或继承<br /><strong>总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性</strong><br />同一级别中后写的会覆盖先写的样式。
<a name="msHNu"></a></p>
<h2 id="416x5p"><a name="416x5p" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5. 常用样式属性</h2><p>常用文本样式</p>
<table>
<thead>
<tr>
<th><strong>样式</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>font-size</td>
<td>数字</td>
<td>设置字体大小</td>
</tr>
<tr>
<td>font-weight</td>
<td>normal | bold | bolder | lighter</td>
<td>设置文字是否加粗</td>
</tr>
<tr>
<td>font-style</td>
<td>normal | italic | oblique</td>
<td>设置文字是否为斜体</td>
</tr>
<tr>
<td>font-family</td>
<td>字体名称</td>
<td>设置文字显示的字体名称</td>
</tr>
<tr>
<td>text-align</td>
<td>left | center | right | justify</td>
<td>水平对齐方式</td>
</tr>
<tr>
<td>vertical-align</td>
<td>top | middle | bottom | sub | super | baseline</td>
<td>垂直对齐方式</td>
</tr>
<tr>
<td>text-indent</td>
<td>长度</td>
<td>设置文本缩进</td>
</tr>
<tr>
<td>line-height</td>
<td>normal | 长度</td>
<td>设置行高</td>
</tr>
<tr>
<td>text-decoration</td>
<td>none | blink | underline | line-through | overline</td>
<td>设置文本装饰</td>
</tr>
</tbody>
</table>
<p><a name="dEJyH"></a></p>
<h1 id="6gv45r"><a name="6gv45r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>div标签</h1><p><a name="kOhYg"></a></p>
<h2 id="98pw6c"><a name="98pw6c" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. 盒子模型</h2><p>1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。<br />CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。<br /><strong>2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。</strong><br />3、 一个盒子的实际高度（宽度）是由content+padding+border组成。<br />可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。
<a name="ocA0R"></a></p>
<h2 id="2bmaii"><a name="2bmaii" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. 常用样式</h2><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="yQlEP"></a></p>
<h1 id="3826od"><a name="3826od" class="reference-link"></a><span class="header-link octicon octicon-link"></span>添加图片</h1><p><a name="QRHem"></a></p>
<h2 id="4gwyqz"><a name="4gwyqz" class="reference-link"></a><span class="header-link octicon octicon-link"></span>图片标签</h2><pre><code class="lang-html"><img src="" />
</code></pre>
<p><a name="NhqEG"></a></p>
<h2 id="fclz2f"><a name="fclz2f" class="reference-link"></a><span class="header-link octicon octicon-link"></span>背景图片</h2><pre><code class="lang-html"><style>
div{
background:url("");
}
</style>
</code></pre>
<p><a name="wyoxm"></a></p>
<h1 id="ccunv7"><a name="ccunv7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标签定位显示</h1><p>用不同的定位方式，控制标签具体的显示位置。</p>
<pre><code class="lang-html">position：static | relative | fixed | absolute；
static 定位是默认值，即没有定位，遵循正常的文档流对象。
</code></pre>
<p><a name="SBMRx"></a></p>
<h2 id="36avvr"><a name="36avvr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（1）absolute绝对定位</h2><p> <strong>基本语法</strong></p>
<pre><code class="lang-html">position: absolute;
</code></pre>
<p><strong>功能</strong><br />绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。
<a name="BBJDU"></a></p>
<h2 id="94act1"><a name="94act1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（2）relative相对定位</h2><pre><code class="lang-html">position: relative;
</code></pre>
<p><strong>功能</strong><br />相对定位元素的定位是相对其正常位置。
<a name="dlIP8"></a></p>
<h2 id="15w84e"><a name="15w84e" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（3）fixed绝对定位</h2><pre><code class="lang-html">position: fixed;
</code></pre>
<p><strong>功能</strong><br />元素的位置相对于浏览器窗口是固定位置。
<a name="JarZB"></a></p>
<h2 id="4cs4cv"><a name="4cs4cv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标签定位常用样式</h2><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="bc2Zs"></a></p>
<h1 id="8q76q9"><a name="8q76q9" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br /> 响应式布局</h1><p><a name="IS6yN"></a></p>
<h2 id="cwnwuy"><a name="cwnwuy" class="reference-link"></a><span class="header-link octicon octicon-link"></span>网页布局介绍</h2><p>网页布局，指的是网页中标签的排列方式。<br />标签正文型布局：<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633312496766-57b7e191-4650-4349-ad2f-674b168e86e6.png#clientId=u5101361c-66ab-4&from=paste&id=ub794496a&margin=%5Bobject%20Object%5D&originHeight=264&originWidth=304&originalType=url&ratio=1&status=done&style=none&taskId=u25b13ce2-dc7c-4aa6-b181-97e239d1610" alt=""></p>
<p>左右框架型布局：</p>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633312496801-eeeb2ce9-6477-4334-8fa3-9bdc6da110ce.png#clientId=u5101361c-66ab-4&from=paste&id=u9942a2cf&margin=%5Bobject%20Object%5D&originHeight=307&originWidth=304&originalType=url&ratio=1&status=done&style=none&taskId=u5201d54a-7db0-4d92-8d80-5fd4ff2b3ca" alt=""></p>
<p>T字型布局：</p>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633312496775-1675d92a-40f3-4895-bbfc-fbcb36a34811.png#clientId=u5101361c-66ab-4&from=paste&id=ue3523e15&margin=%5Bobject%20Object%5D&originHeight=380&originWidth=304&originalType=url&ratio=1&status=done&style=none&taskId=u90682fc0-5ebb-4e9c-99d0-6d9547cb93c" alt=""></p>
<p>国字型布局：</p>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633312496988-1d15946c-d1f1-4cbd-ad53-23ca901fafd0.png#clientId=u5101361c-66ab-4&from=paste&id=u83b1c8d5&margin=%5Bobject%20Object%5D&originHeight=337&originWidth=304&originalType=url&ratio=1&status=done&style=none&taskId=uecbb248f-0494-425c-868d-53c8406d6e5" alt=""><br />布局常用样式</p>
<table>
<thead>
<tr>
<th><strong>单位</strong></th>
<th><strong>值</strong></th>
<th><strong>作用</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>float</td>
<td>none | left | right</td>
<td>设置标签浮动</td>
</tr>
<tr>
<td>clear</td>
<td>none | left | right | both</td>
<td>清除浮动</td>
</tr>
<tr>
<td>display</td>
<td>none | block | inline | list-item | inline-block…</td>
<td>设置标签显示方式</td>
</tr>
<tr>
<td>overflow</td>
<td>visible | auto | hidden | scroll</td>
<td>设置内容超出标签时的处理方式</td>
</tr>
<tr>
<td>overflow-x</td>
<td>visible | auto | hidden | scroll</td>
<td>设置内容超出标签宽度时的处理方式</td>
</tr>
<tr>
<td>overflow-y</td>
<td>visible | auto | hidden | scroll</td>
<td>设置内容超出标签高度时的处理方式</td>
</tr>
<tr>
<td>visibility</td>
<td>inherit | visible | hidden | collapse</td>
<td>设置标签是否可见</td>
</tr>
</tbody>
</table>
<p><a name="C2Kci"></a></p>
<h2 id="5yjj15"><a name="5yjj15" class="reference-link"></a><span class="header-link octicon octicon-link"></span>display样式</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html">display：none | block | inline | list-item | inline-block；
</code></pre>
<p><strong>功能</strong><br />将元素显示为块级元素或内联元素。<br /><strong>属性</strong></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><a name="sNzmP"></a></p>
<h3 id="eb41r2"><a name="eb41r2" class="reference-link"></a><span class="header-link octicon octicon-link"></span>CSS区块介绍</h3><p>HTML中所有标签，可以划分为：块级元素、非块级元素。<br /><strong>块级元素</strong><br />1、默认，从新的一行开始<br />2、高度、宽度都是可控的<br />3、宽度没有设置时，默认为100%<br />常见块级元素：<strong>div、p、h、ul、ol、dl、table…</strong><br /><strong>非块级元素</strong><br />1、默认，不会从新的一行开始<br />2、高度、宽度以及内边距都是不可控的<br />3、宽高就是内容的高度，不可以改变<br />常见非块级元素：<strong>span、b、i、u、a…</strong>
<a name="OXxMf"></a></p>
<h2 id="2tqylk"><a name="2tqylk" class="reference-link"></a><span class="header-link octicon octicon-link"></span>弹性布局</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html">display: flex;
</code></pre>
<p><strong>功能</strong><br />弹性盒子是 CSS3 的一种新的布局模式。<br />CSS3 弹性盒，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。<br />弹性盒子由弹性容器和弹性子元素组成。<br />弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。<br />弹性盒子中常用到的属性:</p>
<table>
<thead>
<tr>
<th><strong>属性</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>display</td>
<td>指定 HTML 元素盒子类型。</td>
</tr>
<tr>
<td>flex-direction</td>
<td>指定了弹性容器中子元素的排列方式</td>
</tr>
<tr>
<td>justify-content</td>
<td>设置弹性盒子元素在主轴（横轴）方向上的对齐方式。</td>
</tr>
<tr>
<td>align-items</td>
<td>设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。</td>
</tr>
<tr>
<td>flex-wrap</td>
<td>设置弹性盒子的子元素超出父容器时是否换行。</td>
</tr>
<tr>
<td>align-content</td>
<td>修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐</td>
</tr>
<tr>
<td>flex-flow</td>
<td>flex-direction 和 flex-wrap 的简写</td>
</tr>
<tr>
<td>order</td>
<td>设置弹性盒子的子元素排列顺序。</td>
</tr>
<tr>
<td>align-self</td>
<td>在弹性子元素上使用。覆盖容器的 align-items 属性。</td>
</tr>
<tr>
<td>flex</td>
<td>设置弹性盒子的子元素如何分配空间。</td>
</tr>
</tbody>
</table>
<p><a name="OGOx1"></a></p>
<h2 id="9u12is"><a name="9u12is" class="reference-link"></a><span class="header-link octicon octicon-link"></span>响应式布局</h2><p><strong>功能</strong><br />@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。<br /><strong>第一步：设置viewport</strong><br />在head标签中添加<meta name="viewport" content="……"><br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633314317742-30449358-ecc6-448d-a629-b62efa9b2ff7.png#clientId=u5101361c-66ab-4&from=paste&id=uf32f9b8b&margin=%5Bobject%20Object%5D&originHeight=270&originWidth=558&originalType=url&ratio=1&status=done&style=none&taskId=u49358d85-00dc-417b-b574-7f182c1e371" alt=""><br /><strong>第二步：媒体查询</strong></p>
<pre><code class="lang-html">@media mediatype and|not|only (media feature) {
CSS-Code;
}
</code></pre>
<p>媒体类型<br /><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633314364422-8666d770-7047-473e-9473-848ab950ea55.png#clientId=u5101361c-66ab-4&from=paste&id=ue6128b8c&margin=%5Bobject%20Object%5D&originHeight=144&originWidth=558&originalType=url&ratio=1&status=done&style=none&taskId=u30b9b2dd-d073-4c58-b8f6-d19803642b5" alt=""><br />not: not是用来排除掉某些特定的设备的。<br />only: 用来定某种特别的媒体类型。<br /><strong>例子</strong></p>
<pre><code class="lang-html">1、在可视窗口尺寸大于800 像素时修改背景颜色
@media screen and (min-width: 800px) {
body {
background-color: lightgreen;
}
}
@media screen and (min-width: 800px)
background-color: lightgreen;
可视窗口尺寸大于800 像素时修改body的背景颜色为lightgreen
</code></pre>
<p>常用媒体功能</p>
<table>
<thead>
<tr>
<th><strong>值</strong></th>
<th><strong>描述</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>height</td>
<td>定义输出设备中的页面可见区域高度。</td>
</tr>
<tr>
<td>max-height</td>
<td>定义输出设备中的页面最大可见区域高度。</td>
</tr>
<tr>
<td>max-width</td>
<td>定义输出设备中的页面最大可见区域宽度。</td>
</tr>
<tr>
<td>min-height</td>
<td>定义输出设备中的页面最小可见区域高度。</td>
</tr>
<tr>
<td>min-width</td>
<td>定义输出设备中的页面最小可见区域宽度。</td>
</tr>
<tr>
<td>width</td>
<td>定义输出设备中的页面可见区域宽度。</td>
</tr>
</tbody>
</table>
<p><a name="Vms0K"></a></p>
<h1 id="cdhll7"><a name="cdhll7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超衔接</h1><p><a name="i2XQT"></a></p>
<h2 id="g3pky1"><a name="g3pky1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超衔接的使用</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><a href=”访问地址”>文字内容</a>
</code></pre>
<p><strong>功能</strong><br />标签定义超链接。它用于从一个页面连接到另一个页面。<br /><strong>代码讲解</strong><br /><strong>1、href 属性 </strong> <br />链接的目标url地址。<br />目标url地址：可以是绝对路径。也可以是相对路径。<br /><strong>2、target 属性 </strong> <br />在何处打开目标 URL。仅在 href 属性存在时使用。值为：_blank、_self、_parent、_top<br><a name="ZUIWh"></a></p>
<h2 id="ehu5of"><a name="ehu5of" class="reference-link"></a><span class="header-link octicon octicon-link"></span>超衔接的样式</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html">a{
样式名:值;
}
</code></pre>
<p><strong>功能</strong><br />设置超链接点击前、点击后的样式。<br /><strong>例子</strong></p>
<pre><code class="lang-html"><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>
</code></pre>
<p><a name="NQdxo"></a></p>
<h1 id="adj3dm"><a name="adj3dm" class="reference-link"></a><span class="header-link octicon octicon-link"></span>ul列表</h1><p><a name="sTBNo"></a></p>
<h2 id="c67cyn"><a name="c67cyn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表的使用</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><ul>
<li></li>
</ul>
</code></pre>
<p><strong>功能</strong><br /><ul> 标签定义无序列表。<br />将 <ul> 标签与<li>标签一起使用，创建无序列表。
<a name="ax2za"></a></p>
<h2 id="2lpj23"><a name="2lpj23" class="reference-link"></a><span class="header-link octicon octicon-link"></span>列表样式</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html">ul{
样式名:值;
}
li{
样式名:值;
}
</code></pre>
<p><strong>功能</strong><br />设置列表样式。<br /><strong>例子</strong></p>
<pre><code class="lang-html"><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){ /*选择ul下第6个li元素*/
background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/136.jpg");
}
ul li:not(#first){ /*选择ul下除id为first的li标签以外的元素*/
background-color:green;
}
</style>
</code></pre>
<p><a name="Bo3e9"></a></p>
<h1 id="96mztr"><a name="96mztr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>添加视频</h1><p><a name="SmXmB"></a></p>
<h2 id="gbrzj8"><a name="gbrzj8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>video标签</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><video src=””></video>
功能
</code></pre>
<p><strong>功能</strong><br /><video> 标签定义视频。<br /><strong>例子</strong></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><strong>controls 属性 </strong> <br />向用户显示控件，比如播放按钮。<br /><strong>poster </strong> <br />设置视频预览图。
<a name="TdW29"></a></p>
<h1 id="gayxmc"><a name="gayxmc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单</h1><p><a name="YcVdI"></a></p>
<h2 id="40eatw"><a name="40eatw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>创建表单</h2><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><form action="" method=""></form>
</code></pre>
<p><strong>功能</strong><br /><form> 标签用于为用户输入创建 HTML 表单。表单能够包含 input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单用于向服务器传输数据。<br /><strong>例子</strong></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><strong>1、添加一个表单 </strong> <br />使用<form action=”url 地址” method=”” ></form> 添加一个表单，表单用于向服务器传输数据。<br /><strong>2、action 属性 </strong> <br />规定当提交表单时向何处发送表单数据。<br />URL可以使绝对路径，也可以是相对路径<br />绝对 URL - 指向其他站点<br />相对 URL - 指向站点内的文件<br /><strong>3、method 属性 </strong> <br />规定用于发送 表番 的 HTTP 方法。<br />有两种：post、get。
<a name="a7G69"></a></p>
<h2 id="cste7p"><a name="cste7p" class="reference-link"></a><span class="header-link octicon octicon-link"></span><br />表单元素</h2><p><a name="AqkCQ"></a></p>
<h3 id="f7x4q4"><a name="f7x4q4" class="reference-link"></a><span class="header-link octicon octicon-link"></span><input>标签</h3><p><a name="FQ4w9"></a></p>
<h4 id="3st86t"><a name="3st86t" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（1）输入类型：text</h4><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”text” value=”” />
</code></pre>
<p><strong>功能</strong><br />定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。<br /><strong>例子</strong></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><strong>1、添加一个文本输入框</strong><br /><input type=”text” value=”小李” name=”xingming” /><br /><strong>2、type 属性</strong><br />type 属性规定 input 元素的类型<br /><strong>3、value 属性</strong><br />规定 input 元素中的默认值。<br /><strong> 4、name 属性</strong><br />规定 input 元素的名称，<br />用于对提交到服务器后的表单数据进行标识
<a name="lFHos"></a></p>
<h4 id="62cjtd"><a name="62cjtd" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（2）输入类型：password</h4><p><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”password” name=”mima” />
</code></pre>
<p><strong>功能</strong><br />定义密码字段。该字段中的字符被掩码。<br /><strong>例子</strong></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><a name="e3byL"></a></p>
<h4 id="2xismn"><a name="2xismn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（3）单选按钮 radio</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633315837400-68d43795-e8f8-4fb5-b8d4-455f6681569c.png#clientId=u5101361c-66ab-4&from=paste&id=u0b7204fc&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u92bdaaec-1030-4d02-8fa3-3d643f4eef1" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”radio” name=”sex’ value=”男” />男
<input type=”radio” name=”sex’ value=”女” />女
</code></pre>
<p><strong>功能</strong><br />定义单选按钮。单选按钮允许用户选取给定数目的选择中的一个选项。<br />注：单选按钮 radio，必须有name 属性并且 name 必须保持一致。<br /><strong>例子</strong></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><a name="h8lPj"></a></p>
<h4 id="5z1e34"><a name="5z1e34" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（4）复选框 checkbox</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633315970659-16f41532-f9ac-43db-ab51-025d0db7f38d.png#clientId=u5101361c-66ab-4&from=paste&id=u924eafdb&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=uc6524980-0453-41da-8e23-1086cb817c6" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”checkbox” name=”” />
</code></pre>
<p><strong>功能</strong><br />定义复选框。复选框允许用户在一定数目的选择中选取一个或多个选项。<br /><strong>例子</strong></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><a name="KNcHI"></a></p>
<h4 id="835ust"><a name="835ust" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（5）点击按钮button</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316043325-266310ff-d9b9-4c1b-9c8d-af701b7d6fca.png#clientId=u5101361c-66ab-4&from=paste&id=u3786f995&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u6942f426-c267-4f20-985f-ff55ca12767" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”button” />
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316043348-7a1bf67b-ba74-430b-8ba4-e87471c0dfb2.png#clientId=u5101361c-66ab-4&from=paste&id=u32581e82&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=uea58fb3d-43e8-43b6-906b-0e2ebd7d672" alt=""><strong>功能</strong><br />定义可点击的按钮，但没有任何行为。button 类型常用于在用户点击。<br /><strong>例子</strong></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><a name="vwRwg"></a></p>
<h4 id="3c2hw1"><a name="3c2hw1" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（6）重置按钮 reset</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316100377-d73ba65f-ae10-4e79-85fd-4d7badddbca2.png#clientId=u5101361c-66ab-4&from=paste&id=u90f2e604&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=ue59ad045-c507-4b33-83b3-b2f6205f72a" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”reset” />
</code></pre>
<p><strong>功能</strong><br />定义重置按钮。重置按钮会清除表单中的所有数据。<br /><strong>例子</strong></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><a name="ckFKU"></a></p>
<h4 id="45z5k0"><a name="45z5k0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（7）提交按钮 submit</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316164609-3aeef917-5011-4740-8167-4e5223b5556e.png#clientId=u5101361c-66ab-4&from=paste&id=ua4d5cdc7&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u8da939cc-f8de-4722-8df8-3b252325032" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input tyep=”submit” />
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316164630-aa25b2ea-8047-4606-bb20-b4522dd5a9ea.png#clientId=u5101361c-66ab-4&from=paste&id=u93bc1839&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u9beb4eca-51b4-4cd7-99e8-411d485057a" alt=""><strong>功能</strong><br />定义提交按钮。提交按钮用于向服务器发送表单数据。数据会发送到表单的 action 属性中指定的页面。<br /><strong>例子</strong></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><a name="ctj0h"></a></p>
<h4 id="f97vyo"><a name="f97vyo" class="reference-link"></a><span class="header-link octicon octicon-link"></span>（8）文件上传 file</h4><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316239616-cfe3aacc-06ae-4cca-934b-c02c03207772.png#clientId=u5101361c-66ab-4&from=paste&id=udeb5667f&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u683ce8a0-9040-4c8c-af48-183c4873e2f" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><input type=”file” name=”shangchuan” />
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316239671-6f4beed6-dc5d-409a-9d40-d904f036a4d6.png#clientId=u5101361c-66ab-4&from=paste&id=u6d148433&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u6c9a60bc-88b3-48bb-b6bd-ad0dc5a86df" alt=""><strong>功能</strong><br />用于文件上传。<br /><strong>例子</strong></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><a name="LzSHn"></a></p>
<h3 id="cyivr4"><a name="cyivr4" class="reference-link"></a><span class="header-link octicon octicon-link"></span><select> 标签</h3><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316293343-19af7f65-0bea-4741-903d-f1da6a7b77c5.png#clientId=u5101361c-66ab-4&from=paste&id=u20ebd4e4&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=ud95646c9-323a-4bfb-be16-95f93d86280" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><select>
<option></option>
</select>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316293344-0e380440-c74b-4b3c-b4d5-df4fafea9384.png#clientId=u5101361c-66ab-4&from=paste&id=ud179c503&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=ue0397c31-f302-4d4a-953c-fed4ae83fc9" alt=""><strong>功能</strong><br />元素用来创建下拉列表。<br />元素中的 <option> 标签定义了列表中的可用选项。<br /><strong>例子</strong></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><a name="PHhiB"></a></p>
<h3 id="81afpd"><a name="81afpd" class="reference-link"></a><span class="header-link octicon octicon-link"></span><button> 标签</h3><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316356666-9a50b367-29f2-4e13-91f0-c050fd8f632e.png#clientId=u5101361c-66ab-4&from=paste&id=u9a5360a7&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u9e18c6d4-b6ec-4051-8072-de232d33d33" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><button name="btn" type="button">按扭</button>
</code></pre>
<p><strong>功能</strong><br /><button>标签定义按扭。
<a name="wztTt"></a></p>
<h3 id="ecm99k"><a name="ecm99k" class="reference-link"></a><span class="header-link octicon octicon-link"></span><textarea> 标签</h3><p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316397366-2c95f89a-c443-46e6-b698-d9e2d1b016c7.png#clientId=u5101361c-66ab-4&from=paste&id=u1f9ccd3c&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u1aa8adb8-ab95-4801-bc60-367a7845f59" alt=""><strong>基本语法</strong></p>
<pre><code class="lang-html"><textarea rows="" cols="" ></textarea>
</code></pre>
<p><img src="https://cdn.nlark.com/yuque/0/2021/png/22551820/1633316397217-cf96ab9c-f200-4024-aee3-efa8a79c620d.png#clientId=u5101361c-66ab-4&from=paste&id=ubba34355&margin=%5Bobject%20Object%5D&originHeight=15&originWidth=19&originalType=url&ratio=1&status=done&style=none&taskId=u7302999d-f0db-404b-b060-a4db394cdb6" alt=""><strong>功能</strong><br />定义多行的文本输入控件。<br />文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体。<br /><strong>例子</strong></p>
<pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<textarea cols="40" rows="10">这是textarea</textarea>
</body>
</html>
</code></pre>
<p><strong>1、添加一个文本输入框</strong><br />使用<textarea></textarea> 标签添加文本输入框。<br /><strong>2、cols 属性</strong><br />规定文本区域内可见的宽度。<br /><strong>3、rows 属性</strong><br />规定文本区域内可见的行数。
<a name="eJCIO"></a></p>
<h2 id="786n"><a name="786n" class="reference-link"></a><span class="header-link octicon octicon-link"></span>表单元素样式</h2><pre><code class="lang-html"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
body{
text-align:center;
}
.txt1{
width:1000px;
height:30px;
font-size:20px;
color:yellow;
text-align:right;
padding-right:20px;
border:1px solid orange;
border-radius:8px;
background-color:lightgreen;
}
</style>
</head>
<body>
<input type="text" name="userName" class="txt1" />
</body>
</html>
</code></pre>
<p><strong>讲解：</strong><br /><strong>width:1000px; </strong> 设置input文本输入框的宽度为1000像素<br /><strong>height:30px; </strong> 设置input文本输入框的高度为30像素<br /><strong>font-size:20px;</strong> 设置input文本输入框的文字大小为20像素<br /><strong>color:yellow</strong>; 设置input文本输入框的字体颜色为黄色<br /><strong>text-align:right; </strong> 设置input文本输入框的文本距中显示<br /><strong>padding-right:20px;</strong> 设置input文本输入框的右内边距为20像素<br /><strong> border:1px solid orange;</strong> 设置input文本输入框的边框为1像素的桔色实线<br /><strong>border-radius:8px;</strong> 设置input文本输入框的圆角为8像素<br /><strong>background-color:lightgreen;</strong> 设置input文本输入框的背景色为绿色</p>
