前端三大语言的作用

HTML: 用来开发前端 页面的结构
CSS: 美化页面
JavaScript: 实现页面交互

A1、HTML5基础

文档基本格式

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>First HTML Program</title>
  5.     <meta charset="utf-8" />
  6.   </head>
  7.   <body>
  8.     Hello HTML
  9.   </body>
  10. </html>

<!DOCTYPE HTML>

文档类型,是html5标准网页声明,全称为Document Type HyperText Mark-up Language，
意思为文档种类为超文本标记性语言或超文本链接标示语言，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。
此声明可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

标签告知浏览器这是一个 HTML 文档。
标签是 HTML 文档中最外层的元素。
标签是所有其他 HTML 元素（除了 <!DOCTYPE> 标签）的容器。

元素是所有头部元素的容器。 元素必须包含文档的标题（title），可以包含脚本、样式、meta 信息 以及其他更多的信息。 以下列出的元素能被用在 元素内部： （在头部中，这个元素是必需的） <style> <base> <link> <meta> <script> <noscript></p> <p><a name="PkwdE"></a></p> <h4 id="d2dg42"><a name="d2dg42" class="reference-link"></a><span class="header-link octicon octicon-link"></span><body></body><br /> <body> 标签定义文档的主体。</h4><body> 元素包含文档的所有内容（比如文本、超链接、图像、表格和列表等等）。 <a name="wyZFF"></a> #### <meta charset="utf-8" /> 元数据（Metadata）是数据的数据信息。<br /><meta> 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。<br />META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。<br />元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。 <a name="CgTMj"></a> #### <title> 标签定义文档的标题，在所有 HTML 文档中是必需的。<br /><title>元素：<br />定义浏览器工具栏中的标题<br />提供页面被添加到收藏夹时的标题<br />显示在搜索引擎结果中的页面标题 <a name="PQ2bV"></a> #### 标签名与标签属性 - 标签名： 用来描述该标签中的内容在页面中的角色.<br />标签分从书写格式上分为单标签和双标签两种 - 双标签 <标签名>xxxxx</标签名> - 单标签 <标签名> - 标签按显示样式分为行标签和块标签两种 - 行标签 每个标签在页面中显示时,不会独占一行. - 块标签 每个标签在页面中显示时,会独占一行<br />两种标签可以通过显示属性进行切换 - 标签属性： 用来对标签的细节进行补充 <a name="y5EBu"></a> #### 语法 1、标签不区分大小写<br />2、允许属性值不使用引号<br />3、允许部分属性值的属性省略 <a name="sVPvL"></a> #### 标签 单标签 <标签名 /><br />双标签 <标签名>内容</标签名><br />注释标签 <!--注释语句--> <a name="ytbm7"></a> #### 标签属性 语法格式<br /><标记签 属性1=”属性值1” 属性2=”属性值2”…>内容</标签名> <code>html <h1 align="center">标题文本</h1></code> 标签嵌套 <code>html <p><strong><em>嵌套内容</strong></em></p> <!--错误嵌套顺序--> <p><strong><em>嵌套内容</em></strong></p> <!--正确嵌套顺序--></code> 标签的嵌套过程中，必须结束最靠近内容的标记，按照由内及外的顺序依次关闭标记。<br />字体标签(了解)<br />font 标签规定文本的字体、字体尺寸、字体颜色。已废弃,在HTML5中不支持 - color 属性 , 用来规定文本的颜色 - size 属性, 用来规定文本的字体大小 - face 属性, 用来规定文本的字体 <a name="q5gZ7"></a> #### 常用标记 | 标签分类 | 标签名 | 含义 | 标签类型 | | —- | —- | —- | —- | | HTML页面结构 | <html> | 超文本标记语言 | | | | <head> | 头部 | | | | <title> | 网页标题 | | | | <boby> | 主体 | | | 常用标签 | <h1>~<h6> | 子标题 | 块标签 | | | <p> | 段落 | 块标签 | | | <font> | 字体 | | | | <a> | 锚（超链接） | | | | <img> | 图像 | 空标签 | | | <br> | 换行 | 空标签 | | | <hr> | 水平线 | 空标签、块标签 | | | <marquee> | 选取框（文字滚动） | | | 格式化标签 | <b> | 粗体 | | | | <big> | 大号字 | | | | <em> | 斜体 | | | | <i> | 斜体 | | | | <small> | 小号字 | | | | <strong> | 加粗 | | | | <sub> | 下标 | | | | <sup> | 上标 | | | | <u> | 下划线 | | | 列表标签 | <ul> | 无序列表 | 块标签 | | | <ol> | 有序列表 | 块标签 | | | <li> | 列表项目 | 块标签 | | | <dl> | 定义列表 | 块标签 | | | <dt> | 定义标题 | 块标签 | | | <dd> | 定义描述 | 块标签 | | 表格相关 | <table> | 表格 | 块标签 | | | <tr> | 表行 | 块标签 | | | <td> | 单元格 | | | | <th> | 表头 | | | | <caption> | 标题 | | | | <thead> | 表头部分 | | | | <tbody> | 主体部分 | | | | <tfoot> | 底部业脚部分 | | | 表单相关 | <form> | 表单 | | | | <input> | 输入框 | 空标签 | | | <select> | 下拉框 | | | | <option> | 下拉列表项 | | | | <textarea> | 文本域 | | | 框架相关 | <frameset> | 框架集 | | | | <frame> | 框架 | 空标签 | | | <iframe> | 内嵌框架 | | | 容器 | <div> | 分隔（容器标签） | 块标签 | | | <span> | 跨度（容器标签） | 行内标签 | <a name="EaKBW"></a> #### 常用属性 | 属性名 | 含义 | 取值 | 应用场景 | | —- | —- | —- | —- | | src | 资源位置 | 资源的路径 | | | border | 边框 | 数字（像素） | | | size | 尺寸 | 数字（像素） | | | width | 宽度 | 数字（像素） | | | height | 高度 | 数字（像素） | | | bgcolor | 背景颜色 | <br /> | | | background | 背景图片 | 图片路径 | | | list-style | 设置列表的所有所有属性 | | 列表 | | list-style-image | 将图像设置为列表项标记 | None<br />url | 列表 | | list-style-type | 设置列表项标记的类型 | Disc（实心圆）<br />Cirle（空心圆）<br />Square（实心方块） | 列表 | | line-height | 行高 | 数字（像素） | 布局多行文本 | | text-aligh | 对齐方式 | Left、right、center | 各种元素对齐 | | letter-spacing | 字符间距 | 数字（像素） | 加大字符间间隔 | | text-decoration | 文本修饰 | Underl<br />ine<br />none | 加下划线<br />中等划线 | | margin-top(right、bottom、left) | 外边距 | 数字（像素） | | | padding-top(right、bottom、left) | 内边距 | 数字（像素） | | | display | 改变块级元素与行内元素的默认显示方式 | block（行变块）<br />inline（块变行）<br />none（该元素不显示在网页中） | | | position | 定位 | static（静态定位）<br />relative（相对定位）<br />absolute（绝对定位）<br />fixed（固定定位） | 用于定位 | | float | 浮动 | none、left、right | | | clear | 处理浮动塌陷 | left（清除左边浮动）<br />right（清除右边浮动）<br />both（清除两边浮动）<br />none（不清除浮动） | | | type | <br /><br />列表类型 | Disc（实心圆）<br />Cirle（空心圆）<br />Square（实心方块） | 列表 | | align | 对齐 | Left、right、center、top、<br />middle、bottom | 段落内容水平对齐文字与图片垂直对齐 | | type | 表单元素类型 | text（文本）<br />checkbox(复选)<br />radio(单选)<br />password(密码)<br />file(文件)<br />submit(提交)<br />reset(重置)<br />button(按钮)<br />image(图片按钮)<br />hidden(隐藏) | 表单元素 | | menthod | 表单数据的提交方式 | get<br />post | | | alt | 改变、替换<br />(图片不显示时提示信息) | | 图片 | | cellpadding | 单元格内边距 | 数字 | 表格 | | cellspacing | 单元格之间距离 | 数字 | 表格 | | href | 超文本引用<br />（跳转到文件位置） | | | | rel | 关系<br />（用于定义链接的文件和HTML文档之间的关系） | stylesheet样式表 | link链接一个文件时 | | target | 目标（网页打开的位置） | _blank(新窗口打开)<br />_self(自身窗口打开)<br />_top(以整个浏览器作业作为窗口显示新页面)<br />_parent(在父窗口中打开新的页面) | | | rowspan | 单元格跨行 | 数字（跨的行数） | 表格 | | readonly | 只读 | | | | value | 输入框的初始值 | | | | maxlength | 最大长度 | | | | scrolldelay | 滚动延时 | | <marquee> | | direction | 方向（滚动方向） | | <marquee> | <a name="ZBTjN"></a> ## A2、文本控制标记 <a name="PMJZk"></a> #### 标题和段落标记 <h1>~<h6><br />语法格式 <code>html <hn align="对齐方式">标题文本</hn></code> <p><br />语法格式 <code>html <p align="对齐方式">段落文本<p></code> <a name="IExZq"></a> #### 水平线标记 <hr/><br />语法格式 <code>html <hr 属性="属性值"/></code> <a name="J4L6k"></a> #### 文本格式化标记 | 标记 | 显示效果 | | —- | —- | | <b></b>和<strong></strong> | 文字以粗体方式显示（b定义文本粗体，strong定义强调文本） | | <i></i>和<em></em> | 文字以斜体方式显示（i定义斜体字，em定义强调文本） | | <s></s>和<del></del> | 文字以加删除线方式显示（HTML5不赞成使用s） | | <u></u>和<ins></ins> | 文字以加下划线方式显示（HTML5不赞成使用u） | <a name="bBeqT"></a> #### 图像标记<img/> 语法格式 <code>html <img src ="图像URL"/></code> 属性 | 属性 | 功能 | | —- | —- | | alt | 图像不能显示时的替换文本 | | title | 鼠标悬停时显示的内容 | | width | 设置图像的宽度 | | height | 设置图像的高度 | | border | 设置图像的边框 | | vspace | 设置图像顶部和底部的空白（垂直边距） | | hspace | 设置图像左侧和右侧的空白（水平边距） | <a name="n0KcW"></a> ## A3、超链接标记 <a name="CXKzw"></a> #### 创建超链接 语法格式 <code>html <a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a></code> 属性 | 属性 | 功能 | | —- | —- | | href | 用于指定链接目标的url地址 | | target | 取值_self和_blank，_self在原窗口打开，_blank在新窗口中打开 | <a name="xRek9"></a> #### 创建锚点链接 语法格式 <code>html <a href="#id名">链接文本</a></code> 使用相应的id名标注跳转目标的位置 <a name="YwOIf"></a> ## B1、结构元素 <a name="Ae5Me"></a> #### header元素 header元素具有引导和导航作用的结构元素，HTML网页中，不限制header元素的个数，可以使用多个header元素，也可以为每一个内容块添加header元素 <code>html <header> <h1>网页主题</h1> ... </header></code> <a name="jeGB4"></a> #### nav元素 用于定义导航链接 <code>html <nav> <ul> <li href="#">首页</li> <li href="#">内容</li> <li href="#">展示</li> </ul> </nav></code> <a name="d6CvG"></a> #### article元素 article元素代表文档、页面或者应用程序中与上下文不相关的独立部分<br />article元素通常使用多个section元素进行划分，一个页面中article元素可以出现多次 <code>html <boby> <article> <header> <h2>第一章</h2> </header> <section> <header> <h2>第1节</h2> </header> </section> <section> <header> <h2>第2节</h2> </header> </section> </article> <article> <header> <h2>第二章</h2> </header> </article> </boby></code> <a name="eb8Rz"></a> #### aside元素 用来定义当前页面或者文章的附属信息部分 <code>html <boby> <article> <header> <h1>标题</h1> </header> <section>文章主要内容</section> <aside>其他相关文章</aside> </article> <aside>右侧菜单</aside> </boby></code> <a name="DWpmc"></a> #### section元素 section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。 <code>html <section> <h1>PRC</h1> <p>The People's Republic of China was born in 1949...</p> </section></code> <a name="y5DzV"></a> #### footer元素 <footer> 标签定义文档或节的页脚。<br />文档中的页脚部分 <code>html <footer> <p>Posted by: W3School</p> <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p> </footer></code> <a name="halKp"></a> ## B2、分组元素 <a name="arPOa"></a> #### figure元素 <figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。<br />figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 <code>html 用作文档中插图的图像： <figure> <p>黄浦江上的的卢浦大桥</p> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure></code> <a name="nUyOb"></a> #### figcaption元素 <figcaption> 标签定义 <a rel="nofollow" href="https://www.w3school.com.cn/tags/tag_figure.asp">figure</a> 元素的标题（caption）。<br />“figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。 <code>html 用作文档中插图的图像，带有一个标题： <figure> <figcaption>黄浦江上的的卢浦大桥</figcaption> <img src="shanghai_lupu_bridge.jpg" width="350" height="234" /> </figure></code> <a name="vutaL"></a> #### hgroup元素 <hgroup> 标签用于对网页或区段（section）的标题进行组合。 <code>html 使用 <hgroup> 标签对网页或区段（section）的标题进行组合： <hgroup> <h1>Welcome to my WWF</h1> <h2>For a living planet</h2> </hgroup> <p>The rest of the content...</p></code> <a name="pmzzH"></a> ## B3、页面交互元素 <a name="tSabH"></a> #### details元素 <details> 标签用于描述文档或文档某个部分的细节。 <code>html <details> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details></code> <a name="ivfOw"></a> #### summary元素 <summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。 <code>html <details> <summary>HTML 5</summary> This document teaches you everything you have to learn about HTML 5. </details></code> <a name="as2Qj"></a> #### progress元素 <progress> 标签标示任务的进度（进程）。 <code>html 正在进行的下载： <progress value="22" max="100"></progress></code> <a name="pkFcp"></a> #### meter元素 <meter> 标签定义已知范围或分数值内的标量测量，<meter> 标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress> 标签。 <code>html 使用 meter 元素来度量给定范围（gauge）内的数据： <meter value="3" min="0" max="10">十分之三</meter> <meter value="0.6">60%</meter></code> <a name="RgSeT"></a> ## B4、文本层次语义元素 <a name="A6jms"></a> #### time元素 <time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的 <code>html 如何定义时间和日期： <p>我们在每天早上 <time>9:00</time> 开始营业。</p> <p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p></code> <a name="XhOFu"></a> #### mark元素 <strong><mark> 标签定义带有记号的文本。在需要突出显示文本时使用 <m> 标签。</strong> <a name="hCBQY"></a> #### cite元素 用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a> 标签中，从而把一个超链接指向该联机版本。 <a name="sCZyh"></a> ## B5、全局属性 <a name="v3jzr"></a> #### draggable属性 draggable 属性规定元素是否可拖动 <code>html 一个可拖动的段落： <p draggable="true">这是一个可拖动的段落。</p></code> <a name="slOWl"></a> #### hidden属性 hidden 属性规定对元素进行隐藏。<br />隐藏的元素不会被显示。<br />如果使用该属性，则会隐藏元素。<br />可以对 hidden 属性进行设置，使用户在满足某些条件时才能看到某个元素（比如选中复选框，等等）。然后，可使用 JavaScript 来删除 hidden 属性，使该元素变得可见。 <code>html <p hidden>这是一段隐藏的段落。</p></code> <a name="Dc3SP"></a> #### spellcheck属性 spellcheck 属性规定是否对元素内容进行拼写检查。<br />可对以下文本进行拼写检查： - 类型为 text 的 input 元素中的值（非密码） - textarea 元素中的值 - 可编辑元素中的值 <code>html 带有编写检查的可编辑段落： <p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p></code> <a name="PvGJj"></a> #### contenteditable属性 contenteditable 属性规定元素内容是否可编辑。<br />如果元素未设置 contenteditable 属性，那么元素会从其父元素继承该属性。 <code>html 一段可编辑的段落： <p contenteditable="true">这是一个可编辑的段落。</p></code> <a name="YeHvV"></a> ## C1、CSS选择器 css 通过选择器,来选取符合的标签进行样式的设置<br />常用选择器有: id选择器, class选择器, 标签选择器, 群组选择器, 派生选择器, :hover <a name="PB44h"></a> #### id 选择器 <code>html <head> <style> #p1{ width:500px; height:500px; } </style> </head> <body> <p id="p1">AAAA</p> </body></code> <a name="pwObQ"></a> #### Class 类选择器 <code>html <head> <style> .p1{ width:500px; height:500px; } </style> </head> <body> <p class="p1">AAAA</p> </body></code> <a name="cHzqd"></a> #### 标签选择器 <code>html <head> <style> p{ width:500px; height:500px; } </style> </head> <body> <p>AAAA</p> </body></code> <a name="Jzd6n"></a> #### 组选择器 ```html <head> </head> <body> <p>AAAA</p> <div> BBB </div> </body> <pre><code><a name="L9Ma8"></a> #### 派生选择器(层级选择器) ```html <head> <style> div p{ width:500px; height:500px; } </style> </head> <body> <div> <p>AABBCC</p> </div> <p>AAAA</p> </body> </code></pre><p><a name="i20lS"></a></p> <h4 id="7i308x"><a name="7i308x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>:hover 伪类选择器</h4><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="uStfC"></a></p> <h4 id="6vglhn"><a name="6vglhn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>择器优先级</h4><p>当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。 <a name="RVWBi"></a></p> <h4 id="653mer"><a name="653mer" class="reference-link"></a><span class="header-link octicon octicon-link"></span>不同级别</h4><p>1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。<br />2、作为style属性写在元素内的样式 <br />3、id选择器 <br />4、类选择器 <br />5、标签选择器 <br />6、通配符选择器<br />7、浏览器自定义或继承<br />总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性<br />同一级别中后写的会覆盖先写的样式。 <a name="zhwYE"></a></p> <h4 id="fwoi5v"><a name="fwoi5v" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常用样式属性</h4><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="XrFvq"></a></p> <h2 id="1g0ycn"><a name="1g0ycn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>D1、div标签</h2><p><a name="d1EjX"></a></p> <h4 id="104d6r"><a name="104d6r" class="reference-link"></a><span class="header-link octicon octicon-link"></span>盒子模型</h4><p>1、将网页上每个HTML元素视为长方形的盒子，是网页设计上的一大创新。<br />CSS中，所有页面元素都包含在一个矩形框内，这个矩形框就称为盒子。盒子描述了元素及属性在页面布局中所占空间大小，因此盒子可以影响其他元素的位置及大小。<br />2、盒子模型是由margin（边界）、border（边框）、padding（空白）和content（内容）几个属性组成。<br />3、 一个盒子的实际高度（宽度）是由content+padding+border组成。<br />可以通过设定width和height来控制content的大小，并且对于同一个盒子，都可以分别设定4条边的border,padding和margin。 <a name="A4BIA"></a></p> <h4 id="1h4d48"><a name="1h4d48" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常用样式</h4><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="PwubT"></a></p> <h2 id="1fb6tu"><a name="1fb6tu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>D2、标签定位显示</h2><p>用不同的定位方式，控制标签具体的显示位置。<br /> position：static | relative | fixed | absolute；<br /> <br /> static 定位是默认值，即没有定位，遵循正常的文档流对象。<br /> （1）absolute绝对定位<br /> <br /> （2）relative相对定位<br /> <br /> （3）fixed绝对定位</p>