What is HTML?
Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
HTML website: https://www.w3.org/TR/html/
What is CSS?
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.
Separation of formatting and content also makes it feasible to present the same markup page in different styles for different rendering methods, such as on-screen, in print, by voice (via speech-based browser or screen reader), and on Braille-based tactile devices. CSS also has rules for alternate formatting if the content is accessed on a mobile device.
CSS website: https://www.w3.org/Style/CSS/
学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
1.HTML介绍
1.1认识html文件基本结构
一个HTML文件是有自己固定的结构的。
1 |
|
代码讲解：
<html></html>称为根标签，所有的网页标签都在<html></html>中。<head>标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签，头部标签在下一小节中会有详细介绍。- 在
<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
1.2认识head标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。
下面这些标签可用在 head 部分：
1 | <head> |
<title>标签：在<title>和</title>标签之间的文字内容是网页的标题信息，它会出现在浏览器的标题栏中。网页的title标签用于告诉用户和搜索引擎这个网页的主要内容是什么，搜索引擎可以通过网页标题，迅速的判断出网页的主题。每个网页的内容都是不同的，每个网页都应该有一个独一无二的title。
1.3了解HTML的代码注释
什么是代码注释？代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
语法：
1 | <!--注释文字 --> |
2.认识标签
2.1标签的用途
标签的用途：我们学习网页制作时，常常会听到一个词，语义化。那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使用标题标签。文章中内容的段落就得放在段落标签中，在文章中有想强调的文本，就可以使用 em 标签表示强调等等。
讲了这么多语义化，但是语义化可以给我们带来什么样的好处呢？
- 更容易被搜索引擎收录。
- 更容易让屏幕阅读器读出网页内容。
2.2HTML标签
<body>标签
在网页上要展示出来的页面内容一定要放在 body 标签中。<p>标签
把文章的段落放到 p 标签中。
语法：
1 | <p>段落文本</p> |
<hx>标签
标题标签一共有6个，h1、h2、h3、h4、h5、h6分别为一级标题、二级标题、三级标题、四级标题、五级标题、六级标题。并且依据重要性递减。h1是最高的等级。
语法：
1 | <hx>标题文本</hx> (x为1-6) |
文章的标题前面已经说过了，可以使用标题标签，另外网页上的各个栏目的标题也可使用它们。
注意：因为h1标签在网页中比较重要，所以一般h1标签被用在网站名称上。腾讯网站就是这样做的。
<strong>和<em>标签
<em>表示强调，<strong>表示更强烈的强调。并且在浏览器中<em>默认用斜体表示，<strong>用粗体表示。
语法：
1 | <em>需要强调的文本</em> |
1 | <strong>需要强调的文本</strong> |
<span>标签
我们对<em>、<strong>、<span>这三个标签进行一下总结：
(1) <em>和<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。
(2) <span>标签是没有语义的，它的作用就是为了设置单独的样式用的。
语法：
1 | <span>文本</span> |
<q>标签
短文本引用标签
语法：
1 | <q>引用文本</q> |
注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
<blockquote>标签
长文本引用标签
语法:
1 | <blockquote>引用文本</blockquote> |
注意浏览器对<blockquote>标签的解析是缩进样式。
<br>标签
那就可以用到<br />标签了，在需要加回车换行的地方加入<br />，<br />标签作用相当于word文档中的回车。
语法：
xhtml1.0写法：
1 | <br /> |
html4.01写法：
1 | <br> |
大家注意，现在一般使用 xhtml1.0 的版本的写法（其它标签也是），这种版本比较规范。
与以前我们学过的标签不一样，<br />标签是一个空标签，没有HTML内容的标签就是空标签，空标签只需要写一个开始标签，这样的标签有<br />、<hr />和<img />。
总结：在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。
空格标签
语法：
1 | |
在html代码中输入空格是不起作用的。
<hr>标签
在信息展示时，有时会需要加一些用于分隔的横线，这样会使文章看起来整齐些。
语法：
html4.01版本
1 | <hr> |
xhtml1.0版本
1 | <hr /> |
注意：
(1) <hr />标签和<br />标签一样也是一个空标签，所以只有一个开始标签，没有结束标签。
(2) <hr />标签的在浏览器中的默认样式线条比较粗，颜色为灰色，可能有些人觉得这种样式不美观，没有关系，这些外在样式在我们以后学习了css样式表之后，都可以对其修改。
(3) 大家注意，现在一般使用 xhtml1.0 的版本（其它标签也是），这种版本比较规范。
<address>标签
一般网页中会有一些网站的联系地址信息需要在网页中展示出来，这些联系地址信息如公司的地址就可以<address>标签。也可以定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。
语法：
1 | <address>联系地址信息</address> |
<code>标签
在介绍语言技术的网站中，避免不了在网页中显示一些计算机专业的编程代码，当代码为一行代码时，你就可以使用<code>标签了，如下面例子：
1 | <code>var i=i+300;</code> |
注意：在文章中一般如果要插入多行代码时不能使用<code>标签了。
语法：
1 | <code>代码语言</code> |
注：如果是多行代码，可以使用<pre>标签。
<pre>标签
加入大段代码
语法：
1 | <pre>语言代码段</pre> |
<pre>标签的主要作用:预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。
注意：<pre>标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
<ul>和<ol>标签
ul-li是没有前后顺序的信息列表, ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。
语法：
1 | <ul> |
<div>标签
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
语法：
1 | <div>…</div> |
确定逻辑部分：
什么是逻辑部分？它是页面上相互关联的一组元素。如网页中的独立的栏目版块，就是一个典型的逻辑部分。
为了使逻辑更加清晰，我们可以为这一个独立的逻辑部分设置一个名称，用id属性来为
语法：
1 | <div id="版块名称">…</div> |
<table>标签
创建表格的四个元素：
table、tbody、tr、th、td
(1) <table>…</table>：整个表格以<table>标记开始、</table>标记结束。
(2) <tbody>…</tbody>：如果不加<thead><tbody><tfooter>, table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
(3) <tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
(4) <td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
(5) <th>…</th>：表格的头部的一个单元格，表格表头。
(6) 表格中列的个数，取决于一行中数据单元格的个数。
总结：
(1) table表格在没有添加css样式之前，在浏览器中显示是没有表格线的。
(2) 表头，也就是th标签中的文本默认为粗体并且居中显示。
<caption>标签
表格还是需要添加一些标签进行优化，可以添加标题和摘要。
摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
语法：
1 | <table summary="表格简介文本"> |
标题
用以描述表格内容，标题的显示位置：表格上方。
语法：
1 | <table> |
<a>标签
使用<a>标签可实现超链接，它在网页制作中可以说是无处不在，只要有链接的地方，就会有这个标签。
语法：
1 | <a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> |
title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。这个属性在实际网页开发中作用很大，主要方便搜索引擎了解链接地址的内容（语义化更友好）。
<a>标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
1 | <a href="目标网址" target="_blank">click here!</a> |
<mailto>标签
标签还有一个作用是可以链接Email地址，使用mailto能让访问者便捷向网站管理者发送电子邮件。我们还可以利用mailto做许多其它事情。
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
<img>标签
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用<img>标签来插入图片。
语法：
1 | <img src="图片地址" alt="下载失败时的替换文本" title = "提示文本"> |
讲解：
(1) src：标识图像的位置；
(2) alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
(3) title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
(4) 图像可以是GIF，PNG，JPEG格式的图像文件。
<form>表单标签
表单标签
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
1 | <form method="传送方式" action="服务器文件"> |
讲解：
(1) <form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
(2) action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
(3) method ：数据传送的方式（get/post）。
1 | <form method="post" action="save.php"> |
注意:
(1) 所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间（否则用户输入的信息可提交不到服务器上哦！）。
(2) method : post/get 的区别这一部分内容属于后端程序员考虑的问题。
文本输入框、密码输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可以转化为密码输入框。
语法：
1 | <form> |
(1) type：
当type=”text”时，输入框为文本输入框;
当type=”password”时, 输入框为密码输入框。
(2) name：为文本框命名，以备后台程序ASP 、PHP使用。
(3) value：为文本输入框设置默认值。(一般起到提示作用)
举例：
1 | <form> |
文本域，支持多行文本输入
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
1 | <textarea rows="行数" cols="列数">文本</textarea> |
(1) <textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束。
(2) cols ：多行输入域的列数。
(3) rows ：多行输入域的行数。
(4) 在<textarea></textarea>标签之间可以输入默认值。
举例：
1 | <form method="post" action="save.php"> |
使用单选框、复选框，让用户选择
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
1 | <input type="radio/checkbox" value="值" name="名称" checked="checked"/> |
(1) type:
当 type=”radio” 时，控件为单选框
当 type=”checkbox” 时，控件为复选框
(2) value：提交数据到服务器的值（后台程序PHP使用）
(3) name：为控件命名，以备后台程序 ASP、PHP 使用
(4) checked：当设置 checked=”checked” 时，该选项被默认选中
使用下拉列表框，节省空间
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选。
举例：
1 | <form action="save.php" method="post" > |
讲解：
(1) value：
(2) selected=”selected”：
设置selected=”selected”属性，则该选项就被默认选中。
使用下拉列表框进行多选
下拉列表也可以进行多选操作，在<select>标签中设置multiple=”multiple”属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
举例：
1 | <form action="save.php" method="post" > |
使用提交按钮，提交数据
在表单中有两种按钮可以使用，分别为：提交按钮、重置。这一小节讲解提交按钮：当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
1 | <input type="submit" value="提交"> |
讲解：
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
使用重置按钮，重置表单信息
当用户需要重置表单信息到初始时的状态时，比如用户输入“用户名”后，发现书写有误，可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为”reset”就可以。
语法：
1 | <input type="reset" value="重置"> |
讲解：
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在label标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
1 | <label for="控件id名称"> |
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
3.CSS
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
如下列代码：
1 | p{ |
使用CSS样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体、字号或者颜色等。
3.1CSS代码语法
css 样式由选择符和声明组成，而声明又由属性和值组成，如下图所示：
选择符：又称选择器，指明网页中要应用样式规则的元素，如本例中是网页中所有的段（p）的文字将变成蓝色，而其他的元素（如ol）不会受到影响。
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
1 | p{font-size:12px;color:red;} |
注意：
(1) 最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
(2) 为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：
1 | p{ |
3.2CSS注释代码
就像在Html的注释一样，在CSS中也有注释语句：用/*注释语句*/来标明。
3.3CSS样式
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
3.3.1内联式css样式，直接写在现有的HTML标签中
内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：
1 | <p style="color:red">这里文字是红色。</p> |
注意要写在元素的开始标签里，下面这种写法是错误的：
1 | <p>这里文字是红色。</p style="color:red"> |
并且css样式代码要写在style=””双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。如下代码：
1 | <p style="color:red;font-size:12px">这里文字是红色。</p> |
3.3.2嵌入式css样式，写在当前的文件中
嵌入式css样式，就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色：
1 | <style type="text/css"> |
嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
3.3.3外部式css样式，写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内（不是在<style>标签内）使用<link>标签将css样式文件链接到HTML文件内，如下面代码：
1 | <link href="base.css" rel="stylesheet" type="text/css" /> |
注意：
(1) css样式文件名称以有意义的英文字母命名，如 main.css。
(2) rel=”stylesheet” type=”text/css” 是固定写法不可修改。
(3) <link>标签位置一般写在<head>标签之内。
3.3.4三种方法的优先级
内联式 > 嵌入式 > 外部式
但是嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，<link href="style.css" ...>代码在<style type="text/css">...</style>代码的前面（实际开发中也是这么写的）。感兴趣的小伙伴可以试一下，把它们调换顺序，再看他们的优先级是否变化。
其实总结来说，就是–就近原则（离被设置元素越近优先级别越高）。
3.4CSS选择器
每一条css样式声明（定义）由两部分组成，形式如下：
1 | 选择器{ |
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
3.4.1类选择器
类选择器在css样式编码中是最常用到的。
语法：
1 | .类选器名称{css样式代码;} |
注意：
(1) 英文圆点开头
(2) 其中类选器名称可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合适的标签把要修饰的内容标记起来，如下：
1 | <span>胆小如鼠</span> |
第二步：使用class=”类选择器名称”为标签设置一个类，如下：
1 | <span class="stress">胆小如鼠</span> |
第三步：设置类选器css样式，如下：
1 | .stress{color:red;}/*类前面要加入一个英文圆点*/ |
3.4.2ID选择器
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id=”ID名称”，而不是class=”类名称”。
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
3.4.3类和ID选择器的区别
学习了类选择器和ID选择器，我们会发现他们之间有很多的相似处，是不是两者可以通用呢？我们不要着急先来总结一下他们的相同点和不同点：
相同点：可以应用于任何元素
不同点：
(1) ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
下面代码是正确的：
1 | <p>三年级时，我还是一个<span class="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span class="stress">勇气</span>来回答老师提出的问题。</p> |
而下面代码是错误的：
1 | `<p>三年级时，我还是一个<span id="stress">胆小如鼠</span>的小女孩，上课从来不敢回答老师提出的问题，生怕回答错了老师会批评我。就一直没有这个<span id="stress">勇气</span>来回答老师提出的问题。</p> |
(2) 可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
下面的代码是正确的:
1 | .stress{ |
上面代码的作用是为“三年级”三个文字设置文本颜色为红色并且字号为25px。
下面的代码是不正确的:
1 | #stressid{ |
上面代码不可以实现为“三年级”三个文字设置文本颜色为红色并且字号为25px的作用。
3.4.4子选择器
还有一个比较有用的选择器子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。如右侧代码编辑器中的代码：
1 | .food>li{border:1px solid red;} |
这行代码会使class名为food下的子元素li（水果、蔬菜）加入红色实线边框。
3.4.5包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码：
1 | .first span{color:red;} |
这行代码会使第一段文字内容中的“胆小如鼠”字体颜色变为红色。
请注意这个选择器与子选择器的区别，子选择器（child selector）仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素。后代选择器通过空格来进行选择，而子选择器是通过“>”进行选择。
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
3.4.6通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素，如下使用下面代码使用html中任意标签元素字体颜色全部设置为红色：
1 | * {color:red;} |
3.4.7伪类选择符
更有趣的是伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：
1 | a:hover{color:red;} |
上面一行代码就是为 a 标签鼠标滑过的状态设置字体颜色变红。这样就会使第一段文字内容中的“胆小如鼠”文字加入鼠标滑过字体颜色变为红色特效。
关于伪选择符：
关于伪类选择符，到目前为止，可以兼容所有浏览器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器，本教程只是讲了这一种最常用的）。其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
3.4.8分组选择符
当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，），如下代码为右侧代码编辑器中的h1、span标签同时设置字体颜色为红色：
1 | h1,span{color:red;} |
它相当于下面两行代码：
1 | h1{color:red;} |
3.5CSS的继承、层叠和特殊性
3.5.1继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
1 | p{color:red;} |
可见右侧结果窗口中p中的文本与span中的文本都设置为了红色。但注意有一些css样式是不具有继承性的。如border:1px solid red;
1 | p{border:1px solid red;} |
在上面例子中它代码的作用只是给p标签设置了边框为1像素、红色、实心边框线，而对于子元素span是没用起到作用的。
3.5.2层叠
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:
1 | p{color:red;} |
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）
3.5.3特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
1 | p{color:red;} |
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
1 | p{color:red;} /*权值为1*/ |
注意：还有一个权值比较特殊–继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
3.5.4重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
1 | p{color:red!important;} |
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
3.6CSS格式化排版
3.6.1文字排版
字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。
1 | body{font-family:"宋体";} |
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
1 | body{font-family:"Microsoft Yahei";} |
或
1 | body{font-family:"微软雅黑";} |
注意：第一种方法比第二种方法兼容性更好一些。
因为这种字体即美观又可以在客户端安全的显示出来（用户本地一般都是默认安装的）。
字号、颜色
可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：
1 | body{font-size:12px;color:#666} |
粗体
我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
1 | p span{font-weight:bold;} |
在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。
斜体
以下代码可以实现文字以斜体样式在浏览器中显示：
1 | p a{font-style:italic;} |
下划线
有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：
1 | p a{text-decoration:underline;} |
删除线
可以使用下面代码来实现：
1 | .oldPrice{text-decoration:line-through;} |
3.6.2段落排版
缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
1 | p{text-indent:2em;} |
注意：2em的意思就是文字的2倍大小。
行间距（行高）
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
1 | p{line-height:1.5em;} |
中文字间距、字母间距
中文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing 来实现，如下面代码：
1 | h1{ |
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用 word-spacing 来实现。如下代码：
1 | h1{ |
对齐
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)
1 | h1{ |
同样可以设置居左：
1 | h1{ |
还可以设置居右：
1 | h1{ |
3.7CSS盒模型
3.7.1元素分类
在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。
(1) 常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
什么是块级元素？在html中<div>、 <p>、<h1>、<form>、<ul> 和 <li>就是块级元素。设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。
1 | a{display:block;} |
块级元素特点：
每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
元素的高度、宽度、行高以及顶和底边距都可设置。
元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
(2) 常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码display:inline将元素设置为内联元素。如下代码就是将块状元素div转换为内联元素，从而使 div 元素具有内联元素特点。
1 | div{ |
内联元素特点：
和其他元素都在一行上；
元素的高度、宽度及顶部和底部边距不可设置；
元素的宽度就是它包含的文字或图片的宽度，不可改变。
(3) 常用的内联块状元素有：
<img>、<input>
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。(css2.1新增)，<img>、<input>标签就是这种内联块状标签。
inline-block 元素特点：
和其他元素都在一行上；
元素的高度、宽度、行高以及顶和底边距都可设置。
3.7.2盒模型
边框
盒子模型的边框就是围绕着内容及补白的线，这条线你可以设置它的粗细、样式和颜色(边框三个属性)。
如下面代码为 div 来设置边框粗细为 2px、样式为实心的、颜色为红色的边框：
1 | div{ |
上面是 border 代码的缩写形式，可以分开写：
1 | div{ |
注意：
- border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
- border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
- border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
现在有一个问题，如果有想为 p 标签单独设置下边框，而其它三边都不设置边框样式怎么办呢？css 样式中允许只为一个方向的边框设置样式：
1 | div{border-bottom:1px solid red;} |
同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
1 | border-top:1px solid red; |
宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
元素的高度也是同理。
比如：
css代码：
1 | div{ |
html代码：
1 | <body> |
元素的实际长度为：10px+1px+20px+200px+20px+1px+10px=262px。在chrome浏览器下可查看元素盒模型，如下图：
填充
元素内容与边框之间是可以设置距离的，称之为“填充”。填充也可分为上、右、下、左(顺时针)。如下代码：
1 | div{padding:20px 10px 15px 30px;} |
顺序一定不要搞混。可以分开写上面代码：
1 | div{ |
如果上、右、下、左的填充都为10px;可以这么写
1 | div{padding:10px;} |
如果上下填充一样为10px，左右一样为20px，可以这么写：
1 | div{padding:10px 20px;} |
边界
元素与其它元素之间的距离可以使用边界（margin）来设置。边界也是可分为上、右、下、左。如下代码：
1 | div{margin:20px 10px 15px 30px;} |
也可以分开写：
1 | div{ |
如果上右下左的边界都为10px;可以这么写：
1 | div{ margin:10px;} |
如果上下边界一样为10px，左右一样为20px，可以这么写：
1 | div{ margin:10px 20px;} |
总结一下：padding和margin的区别，padding在边框里，margin在边框外。
3.8CSS布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念。 但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
- 流动模型（Flow）
- 浮动模型 (Float)
- 层模型（Layer）
3.8.1流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
流动布局模型具有2个比较典型的特征：
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。如右侧代码编辑器中三个块状元素标签(div，h1，p)宽度显示为100%。
在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
3.8.2浮动模型
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。如下代码可以实现两个 div 元素一行显示。
1 | div{ |
3.8.3层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
- 绝对定位(position: absolute)
- 相对定位(position: relative)
- 固定定位(position: fixed)
3.8.3.1绝对定位
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
如下面代码可以实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
1 | div{ |
3.8.3.2相对定位
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px，向右移动100px;
1 | #div1{ |
3.8.3.3固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
1 | #div1{ |
3.8.4Relative与Absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
- 参照定位的元素必须是相对定位元素的前辈元素：
1 | <div id="box1"><!--参照定位的元素--> |
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
- 参照定位的元素必须加入position:relative;
1 | #box1{ |
- 定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
1 | #box2{ |
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
3.9CSS代码缩写
3.9.1盒模型代码简写
还记得在讲盒模型时外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
1 | margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/ |
通常有下面三种缩写方法:
- 如果top、right、bottom、left的值相同，如下面代码：
1 | margin:10px 10px 10px 10px; |
可缩写为：
1 | margin:10px; |
- 如果top和bottom值相同、left和 right的值相同，如下面代码：
1 | margin:10px 20px 10px 20px; |
可缩写为：
1 | margin:10px 20px; |
- 如果left和right的值相同，如下面代码：
1 | margin:10px 20px 30px 20px; |
可缩写为：
1 | margin:10px 20px 30px; |
注意：padding、border的缩写方法和margin是一致的。
3.9.2颜色值缩写
关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
例子1：
1 | p{color:#000000;} |
可以缩写为：
1 | p{color: #000;} |
例子2：
1 | p{color: #336699;} |
可以缩写为：
1 | p{color: #369;} |
3.9.3字体缩写
网页中的字体css样式代码也有他自己的缩写方式，下面是给网页设置字体的代码：
1 | body{ |
这么多行的代码其实可以缩写为一句：
1 | body{ |
注意：
使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
1 | body{ |
只是有字号、行间距、中文字体、英文字体设置。
3.10单位和值
颜色值
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
- 英文命令颜色
前面几个小节中经常用到的就是这种设置方法：
1 | p{color:red;} |
- RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
1 | p{color:rgb(133,45,200);} |
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
1 | p{color:rgb(20%,33%,25%);} |
- 十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
1 | p{color:#00ffff;} |
配色表：
长度值
长度单位总结一下，目前比较常用到px（像素）、em、% 百分比，要注意其实这三种单位都是相对单位。
- 像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
- em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
1 | p{font-size:12px;text-indent:2em;} |
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
1 | <p>以这个<span>例子</span>为例。</p> |
css:
1 | p{font-size:14px} |
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
- 百分比
1 | p{font-size:12px;line-height:130%} |
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
3.11小技巧
3.11.1水平居中设置-行内元素
我们在实际工作中常会遇到需要设置水平居中的场景，比如为了美观，文章的标题一般都是水平居中显示的。
这里我们又得分两种情况：行内元素 还是 块状元素 ，块状元素里面又分为定宽块状元素，以及不定宽块状元素。今天我们先来了解一下行内元素怎么进行水平居中？
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
1 | <body> |
css代码：
1 | <style> |
3.11.2水平居中设置-定宽块状元素
当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
这一小节我们先来讲一讲定宽块状元素。(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。我们来看个例子就是设置 div 这个块状元素水平居中：
html代码：
1 | <body> |
css代码：
1 | <style> |
也可以写成：
1 | margin-left:auto; |
注意：元素的“上下 margin” 是可以随意设置的。
3.11.3水平居中总结-不定宽块状元素方法
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
- 加入 table 标签
- 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
- 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的
这一小节我们来讲一下第一种方法：
为什么选择方法一加入table标签? 是利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
举例如下：
html代码：
1 | <div> |
css代码：
1 | <style> |
第二种方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：
html代码：
1 | <body> |
css代码：
1 | <style> |
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
方法三：通过给父元素设置 float，然后给父元素设置
position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。
代码如下：
1 | <body> |
css代码：
1 | <style> |
3.11.4垂直居中-父元素高度确定的单行文本
我们在实际工作中也会遇到需要设置垂直居中的场景，比如好多报纸的文章标题在左右一侧时，常常会设置为垂直居中，为了用户体验性好。
这里我们又得分两种情况：父元素高度确定的单行文本，以及父元素高度确定的多行文本。
本节我们先来看第一种父元素高度确定的单行文本, 怎么设置它为垂直居中呢？
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
line-height 与 font-size 的计算值之差，在 CSS 中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
如下代码：
1 | <div class="container"> |
css代码：
1 | <style> |
3.11.5垂直居中-父元素高度确定的多行文本
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
1 | <body> |
css代码：
1 | table td{height:500px;background:#ccc} |
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
方法二: 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
1 | <div class="container"> |
css代码：
1 | <style> |
这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。
3.11.6隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
position : absolute
float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
1 | <div class="container"> |
css代码
1 | <style> |
