1、页面基本结构
<!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="RlsY0"></a></p>
<h1 id="7dr8pr"><a name="7dr8pr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、标签名与标签属性</h1><p>标签分从书写格式上分为单标签和双标签两种：<br />1、双标签：<标签名></标签名><br />2、单标签：<标签名><br />标签按显示样式分为行标签和块标签两种 ：<br />1、行标签：行标签每个标签在页面中显示时，不会独占一行。<br />2、块标签：块标签每个标签在页面中显示时，会独占一行。<br />两种标签可以通过显示属性进行切换<br />标签属性，用来对标签的细节进行补充。
<a name="P5KwU"></a></p>
<h1 id="962fng"><a name="962fng" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、添加文字</h1><p><a name="FlFHg"></a></p>
<h2 id="7fzy5o"><a name="7fzy5o" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、标题标签</h2><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="MO48q"></a></p>
<h2 id="4uaddv"><a name="4uaddv" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、段落标签</h2><p>用来修饰一段文字，段落之间有明显的段间距。</p>
<pre><code class="lang-html"><p>
这次会晤的主题是“金砖国家在非洲：在第四次工业革命中共谋包容增长和共同繁荣”，很有现实意义。从18世纪第一次工业革命的机械化，到19世纪第二次工业革命的电气化，再到20世纪第三次工业革命的信息化，一次次颠覆性的科技革新，带来社会生产力的大解放和生活水平的大跃升，从根本上改变了人类历史的发展轨迹。
</p>
<p>
如今，我们正在经历一场更大范围、更深层次的科技革命和产业变革。大数据、人工智能等前沿技术不断取得突破，新技术、新业态、新产业层出不穷。各国利益和命运紧密相连，深度交融。同时，世界经济新旧动能转换尚未完成，南北失衡等深层次、结构性问题还未消除。地缘政治冲突此起彼伏，保护主义和单边主义愈演愈烈，直接影响到新兴市场国家和发展中国家发展外部环境。
</p>
</code></pre>
<p><a name="YHyQo"></a></p>
<h2 id="8x0e6l"><a name="8x0e6l" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、字体标签</h2><p>font标签规定文本的字体、字体尺寸、字体颜色。已废弃，在HTML5中不支持。<br />1、color属性，用来规定文本的颜色<br />2、size属性，用来规定文本的字体大小<br />3、face属性，用来规定文本的字体
<a name="xUMlK"></a></p>
<h1 id="6tuq5w"><a name="6tuq5w" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、添加css样式</h1><p><a name="XumkJ"></a></p>
<h2 id="evhfn5"><a name="evhfn5" 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="9v3leh"><a name="9v3leh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、css使用方式</h2><p><a name="issPT"></a></p>
<h3 id="b4s17h"><a name="b4s17h" 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="54viar"><a name="54viar" 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="bt0peq"><a name="bt0peq" 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="zzKYU"></a></p>
<h2 id="6jlwrj"><a name="6jlwrj" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、css选择器</h2><p>css通过选择器，来选取符合的标签进行样式的设置，常用选择器有：id选择题，class选择器，标签选择器，群组选择器，派生选择器，：hover。
<a name="eyhvW"></a></p>
<h3 id="9fd3w2"><a name="9fd3w2" 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="boWEv"></a></p>
<h3 id="n1s4w"><a name="n1s4w" 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="iEvkG"></a></p>
<h3 id="31dj1h"><a name="31dj1h" 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="xa71f"></a></p>
<h3 id="fvfoff"><a name="fvfoff" 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="x0hwR"></a></p>
<h3 id="bjbp94"><a name="bjbp94" 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><a name="qZVOu"></a></p>
<h3 id="67t46b"><a name="67t46b" class="reference-link"></a><span class="header-link octicon octicon-link"></span>：hover</h3><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="ezGB7"></a></p>
<h2 id="cvv6c7"><a name="cvv6c7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4.选择器优先级</h2><p>当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。<br />不同级别：<br />1、在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。<br />2、作为style属性写在元素内的样式 <br />3、id选择器 <br />4、类选择器 <br />5、标签选择器 <br />6、通配符选择器<br />7、浏览器自定义或继承<br />总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性<br />同一级别中后写的会覆盖先写的样式。
<a name="Z3oj9"></a></p>
<h2 id="blicg0"><a name="blicg0" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、常用样式属性</h2><p><a name="IwvF8"></a></p>
<h3 id="95h1dc"><a name="95h1dc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>常用文本样式</h3><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></td>
<td></td>
<td></td>
</tr>
<tr>
<td></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="vzQHN"></a></p>
<h1 id="7j8jdw"><a name="7j8jdw" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、div标签</h1><p>div 标签一般配合CSS 样式,用来对页面进行布局
<a name="aiZFv"></a></p>
<h2 id="5cvlw4"><a name="5cvlw4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、盒子模型</h2><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="Dkz1n"></a></p>
<h2 id="bva81g"><a name="bva81g" 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="UYbaE"></a></p>
<h1 id="d1xr68"><a name="d1xr68" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、添加图片</h1><p><a name="h49Ma"></a></p>
<h2 id="f7py0x"><a name="f7py0x" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、图片标签</h2><pre><code class="lang-html"><img src="" />
</code></pre>
<p><a name="h7vaR"></a></p>
<h2 id="bxwiqx"><a name="bxwiqx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、背景图片</h2><pre><code class="lang-html"><style>
div{
background:url("");
}
</style>
</code></pre>
<p><a name="cemj1"></a></p>
<h1 id="cmbdl7"><a name="cmbdl7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>标签定位显示</h1><p>用不同的定位方式，控制标签具体的显示位置。</p>
<pre><code class="lang-html">osition：static | relative | fixed | absolute；
static 定位是默认值，即没有定位，遵循正常的文档流对象。
</code></pre>
<pre><code class="lang-html">（1）absolute绝对定位
（2）relative相对定位
（3）fixed绝对定位
</code></pre>
<p><a name="HfPYX"></a></p>
<h1 id="6994ag"><a name="6994ag" class="reference-link"></a><span class="header-link octicon octicon-link"></span>任务单</h1><p><a name="yRFVR"></a></p>
<h2 id="cp1frp"><a name="cp1frp" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1、简单描述HTML4和HTML5的区别？</h2><p>1.语法的简化，新推出的html5相比html4是比较火的，html5的推出对语法进行了简化，例如头部的doctype，我们只要写<!doctype html>就可以了。<br />2.html5新增了<canvas>标签，<canvas>标签来代替flash，很多时候，如果我们在网页中放入很多的flash，是很不友好的，现在只要使用<canvas>标签就可以产生交互，并且可以实现很多flash的功能。<br />3.html5新增了很多标签，例如<header>和<footer>标签，有利于网页中的结构，<menu>和<figure>标签可以创建传统的菜单，<audio>和<video>标签用来播放音频。<br />4.html5同时也删除了b标签和font标签，如果想要效果的话，可以使用css带代替这两个标签。
<a name="FfZtW"></a></p>
<h2 id="exebbu"><a name="exebbu" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2、请说明常用的支持中文的字符集编码都有哪些，以及他们的特点是什么？</h2><p>HTML5 中默认的字符编码是 UTF-8。这并非总是如此。早期网络的字符编码是 ASCII 码。后来，从 HTML 2.0 到 HTML 4.01，ISO-8859-1 被认定为标准。随着 XML 和 HTML5 的出现，UTF-8 也终于到来了，解决了大量的字符编码问题。
<a name="FwJ1T"></a></p>
<h2 id="ep2lx6"><a name="ep2lx6" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3、请写出HTML常用文本标签？（至少写出8个）</h2><p><h1>…</h1> 标题字大小（h1~h6）<br /><b>…</b> 粗体字<br /><strong>…</strong> 粗体字(强调) <br /><i>…</i> 斜体字 <br /><em>…</em> 斜体字(强调)<br /><center>…</center> 居中文本<br /><ul>…</ul> 无序列表 <br /><ol>…</ol> 有序列表<br /><li>…</li> 列表项目<br /><a href=”…”>…</a> 超链接<br /><font> 定义文本字体尺寸、颜色、大小<br /><br> 换行<br /><p> 段落
<a name="RtxZ1"></a></p>
<h2 id="c01zhh"><a name="c01zhh" class="reference-link"></a><span class="header-link octicon octicon-link"></span>4、简单描述css2与css3的区别？</h2><p>简单来说就是css2有的属性css3都有，但是css3有的属性css2不一定有。 CSS3是最新的版本，效果上CSS2是比不了的，css3可以说是css2的进阶，因为css3是在css2的基础上增加了一些新的属性。<br />比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多，这个是CSS2上没有的效果，现在新版本的浏览器基本都支持CSS3，比如IE9、FF4+、chrome11+，但是要用CSS3开发网站的话，要考虑的是还在用低版本浏览器的用户。<br />1、css3是css2的升级版本，在css2的基础上增加了一些新的属性；简单来说就是css2有的属性css3都有，但是css3有的属性css2不一定有。<br />2、CSS2推荐的是一套内容和表现效果分离的方式，CSS3语言开发是朝着模块化发展的。
<a name="lmmxj"></a></p>
<h2 id="2e7mp7"><a name="2e7mp7" class="reference-link"></a><span class="header-link octicon octicon-link"></span>5、标签添加css方式（css放置位置）是哪几种？</h2><p>行内样式，内部样式，外部样式
<a name="vovq4"></a></p>
<h2 id="e5hej3"><a name="e5hej3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>6、请写出css常用选择器？（至少写出8个）</h2><p>① 标签选择器<br />写法： HTML标签名{}<br />作用：选中页面中所有与选择器同名的HTML标签。</p>
<pre><code> ① 标签选择器
写法： HTML标签名{}
作用：选中页面中所有与选择器同名的HTML标签。
li{
/*color: red;*/
}
②类选择器（class选择器）
* 写法： .class名{}
* 调用： 在需要应用这套样式的标签上，使用class="class名"调用选择器。
* 优先级： class选择器>标签选择器
*/
.ji{
/*color: blue;*/
}
③ID选择器：
* 写法： #ID名{}
* 调用： 在需要应用这套样式的标签上，使用id="ID名"调用选择器。
* 优先级： ID选择器>class选择器
*/
#two{
/*color: yellow;*/
}
/* 【class选择器和ID选择的区别】
* 1. 写法不同：class选择器用.声明，ID选择器用#声明；
* 2. 优先级不同：ID选择器>class选择器
* 3. 调用次数不同： class选择器可以调用多次； ID选择器只能调用一次(同一页面，不能出现同名ID)。
*/
④通用选择器
* 写法： *{}
* 作用： 作用于页面中所有的HTML标签；
* 优先级： 最低！低于标签选择器。
*/
*{
/*background-color: yellow;*/
/*color: pink;*/
}
⑤并集选择器
* 写法： 选择器1,选择器2,……选择器n{} 多个选择器之间逗号分隔。
* 生效规则： 多个选择器取并集，只要标签满足其中任何一个选择器，样式即可生效
*
* (其实相当于多个选择器拆开写)
*/
li,.ji{
/*color: red;*/
}
⑥ 交集选择器
* 写法： 选择器1选择器2……选择器n{} 多个选择器之间紧挨着，没有分隔
* 生效规则： 多个选择器取交集，必须满足所有选择器的要求，样式才能生效。
*/
li.ji{
/*color: red;*/
}
⑦ 后代选择器
* 写法： 选择器1 选择器2 …… 选择器n{}
* 生效规则： 只要满足后一个选择器是前一个选择器的后代，样式即可生效（后代包括子代、孙代。。。）
*/
div .ji{
/*color: red;*/
}
⑧ 子代选择器
* 写法： 选择器1>选择器2>……>选择器n{}
* 生效规则： 必须满足后一个选择器是前一个选择器的直接子代，样式才能生效。（两个选择之间不能有任何其他标签）
*/
div>ul>.ji{
color: red;
}
</code></pre><p><a name="HVcOF"></a></p>
<h2 id="5tdaki"><a name="5tdaki" class="reference-link"></a><span class="header-link octicon octicon-link"></span>7、请写出css选择器优先级的排列顺序？</h2><p>：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
<a name="wY11a"></a></p>
<h2 id="fm2tz4"><a name="fm2tz4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>8、请写出css常用文本样式？（至少写出8个）</h2><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></td>
<td></td>
<td></td>
</tr>
<tr>
<td></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="Ryc0p"></a></p>
<h2 id="bheuul"><a name="bheuul" class="reference-link"></a><span class="header-link octicon octicon-link"></span>9、简单描述盒子模型概念？</h2><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="G8wSI"></a></p>
<h2 id="c5u621"><a name="c5u621" class="reference-link"></a><span class="header-link octicon octicon-link"></span>10、请写出盒子模型相关样式？（至少写出5个）</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="IJlXF"></a></p>
<h2 id="2sxwma"><a name="2sxwma" class="reference-link"></a><span class="header-link octicon octicon-link"></span>11、请写出如下功能的样式代码</h2><p>设置div标签左上角为圆角显示样式，圆角值为10像素</p>
<pre><code class="lang-html">border-top-left-radius：10px;
</code></pre>
<p><a name="xsoWm"></a></p>
<h2 id="4gq3mx"><a name="4gq3mx" class="reference-link"></a><span class="header-link octicon octicon-link"></span>12、请写出设置标签背景颜色、背景图片等相关样式？</h2><pre><code class="lang-html">//背景颜色
background-color:#CECDCD;
//背景图片
background-image:url("http://www.yyfun001.com/res/htmlclassics/full/images/page2_bg.png");
background-repeat:no-repeat;
background-size:cover;
</code></pre>
<p><a name="Wem0s"></a></p>
<h2 id="1j2zts"><a name="1j2zts" class="reference-link"></a><span class="header-link octicon octicon-link"></span>13、请写出如下功能的样式代码</h2><p>将鼠标指针设置“小手”的显示样式</p>
<pre><code class="lang-html">cursor:pointer
</code></pre>
<p><a name="Tr8i9"></a></p>
<h2 id="4skv7v"><a name="4skv7v" class="reference-link"></a><span class="header-link octicon octicon-link"></span>14、请写出如下功能的样式代码</h2><p>控制div标签，在整个页面中，实现水平居中显示</p>
<pre><code class="lang-html">div{
text-align:center;
}
</code></pre>
<p><a name="Gimkx"></a></p>
<h2 id="czhjvs"><a name="czhjvs" class="reference-link"></a><span class="header-link octicon octicon-link"></span>15、请说明css中标签定位都有哪些方式，以及他们的特点是什么？</h2><p>（1）absolute绝对定位
<br />绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。<br />（2）relative相对定位
<br />相对定位元素的定位是相对其正常位置。<br />（3）fixed绝对定位<br />元素的位置相对于浏览器窗口是固定位置。
<a name="aTczK"></a></p>
<h2 id="b34tc"><a name="b34tc" class="reference-link"></a><span class="header-link octicon octicon-link"></span>16、请写出如下功能的样式代码</h2><p>控制某一标签，向左向上偏移50%的距离</p>
