语义化，让你的网页更好的被搜索引擎理解。
语义化带来的好处：
1、更容易被搜索引擎收录。
2、更容易让屏幕阅读器读出网页内容。
学习html标签主要注意两个方面的学习：标签的用途（即语义化）、标签在浏览器中的默认样式。
| 标签名 | 标签用途 | 在浏览器中的默认样式 |
|---|---|---|
| <p> | 添加段落 | 段前段后都会有垂直间距空白 |
| <q> | 简短文本引用 | 浏览器会对<q>标签自动添加双引号 |
| <blockquote> | 长文本引用 | 缩进样式 |
| <em> | 表示强调 | 显示为斜体 |
| <strong> | 更强烈的强调 | 加粗显示 |
| <span> | 无语义，设置单独样式用 | 无样式 |
| | 添加空格 | 显示空格 |
| 换行显示 | 相当于Word中的回车 | |
| 添加水平分隔横线 | 上下分隔两段 | |
| <address> | 添加邮件、地址、签名信息 | 显示为斜体 |
| <code> | 添加单行代码 | 缩小英文字体 |
| <pre> | 添加大段代码 | 显示预格式化文本，保留代码中的空格和换行符 |
| <ul><li> | 无序列表 | 每项li前都自带一个圆点 |
| <ol><li> | 有序列表 | 每项li前都自带一个序号，默认从1开始 |
| <div> | 版块容器 | 无样式 |
| <table> | 显示表格 | 默认没有表格线 |
| <caption> | 为表格添加标题和摘要 | 显示在表格上方，显示宽度同表格宽度 |
| <a> | 实现超链接 | 默认蓝色，点击过为紫色 |
| <img> | 为网页添加图片 | 等比例显示图片本身 |
| <form> | 表单标签，与用户交互 | |
| <input> | 文本输入 | |
| <textarea> | 多行文本输入 | |
| <select> | 下拉列表框 | |
| <label> | 和表单控件关联 |
需要注意的地方：
<a>标签target属性指定在哪里打开链接的网页，target="_blank"将在新的浏览器窗口打开。
另外，可使用mailto在网页中链接Email地址：
<a href="mailto:yy@qq.com?cc=xx&bcc=&subject="/>
点击链接会打开电子邮件应用，并自动填写收件人等信息。<input>标签支持各种类型文本输入，还支持单选框、复选框，提交、重置按钮：
<input type="radio/checkbox" value="值" name="名称"/>
<input type="submit/reset" value="提交/重置"/>CSS样式
内联式：写在HTML标签style属性里。
嵌入式：写在<style type="text/css"></style>标签之间，并且一般情况下嵌入式css样式写在<head></head>之间。
外部式：写在单独的外部文件中,使用<link>标签引入。<link>标签位置一般写在<head>标签之内。
3种CSS样式优先级(相同权值下)：内联式 > 嵌入式 > 外部式
但是嵌入式 > 外部式有一个前提：嵌入式css位置一定在外部式的后面。
CSS选择器权值（内联样式没有选择器，比所有选择器优先级更高）：
| 选择器 | 权值 |
|---|---|
| 标签选择器 | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
属性后插有!important的属性拥有最高优先级。
选择器常见辨别：CSS中后代选择器(.first span{})作用于所有子元素，而子选择器(.first>span{})只作用于下一级子元素。
CSS属性继承：
CSS的每一个属性可以指定值为“inherit”，取和父元素相应属性的计算值一样的值。常见继承举例：color、font、line-height会继承，border、margin、padding、position、display...不会继承。
CSS继承样式，继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
CSS格式化排版：
字体：font-family: "Microsoft Yahei"; 等同于 font-family: "微软雅黑", 如果用户本地电脑上没有安装你设置的字体，就会显示浏览器默认的字体。
斜体： font-style: italic;
下划线删除线：text-decoration: underlineline-through;
缩进：text-indent: 2em; // 缩进文字的2倍大小
行高: line-height: 1.5em; // 行间距为1.5倍
文字间隔: word-spacing: 50px;
单词间隔: letter-spacing: 50px;
(块状元素)内部对齐: text-align: center;
CSS盒模型：
前提知识：在css中，html中的标签元素大体被分为三种不同类型：块状元素、内联元素（又叫行内元素）和内联块元素。
常见的块状元素有：<div>、<p>、<h1>...<h6>、<ul>、<ol>、<dl>、 <table>、<address>、<blockquote>、<form>
常见的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常见的内联块元素有：<img>、<input>
| 元素类型 | 在浏览器中的默认样式 |
|---|---|
| 块级元素 | 每个块级元素前后换行，独占一行，默认宽度为父元素的100%。宽度高度，行高，边距值等都可设置。 |
| 内联元素 | 和其他元素都在一行上，宽度高度和垂直边距不可设置。元素的宽度就是它包含的文字或图片的宽度，不可改变。 |
| 内联块元素 | 和其他元素都在一行上。宽度高度，行高，边距值等都可设置。（同时具备内联元素、块状元素的特点） |
CSS布局模型：
| css布局模型 | 布局特点 |
|---|---|
| 流动模型(Flow) | 网页默认布局模式。2个典型特征：1、块状元素在所处包含元素内自上而下垂直延伸分布 2、内联元素在所处包含元素内从左到右水平分布。 |
| 浮动模型(Float) | 块状元素这么霸道独占一行，想让两个块状元素并排显示，怎么办呢？不要着急，设置元素浮动就可以实现这一愿望。 |
| 层模型(Layer) | 层布局模型，就像PS中的图层编辑功能一样，每个图层能够精确定位操作。层模型有三种形式：1、绝对定位(position: absolute) 2、相对定位(position: relative) 3、固定定位(position: fixed) |
Relative与Absolute组合使用：父元素设置relative定位，子元素使用absolute定位，可以让元素实现相对定位，同时脱离文档流，不占位置。
CSS长度单位：
css长度单位总结一下，目前比较常用到px(像素)、em、%百分比，要注意其实这三种单位都是相对单位。
像素： 像素指的是显示器上的小点(比如CSS规范中假设90像素=1英寸)。在目前大多数的设计者都倾向于使用像素作为单位。
em： em表示元素本身font-size属性的计算值。如果元素的font-size为14px，则元素的width: 2em就是28px。注意一个特殊情况，当给元素font-size设置单位为em时，此时计算的标准是以父元素的font-size为基础。
百分比：水平垂直方分别相对于父元素宽高值的百分比。注意一个特殊情况，line-height: 130%，设置行高为字体的130%。
用户的浏览器默认渲染的文字大小是“16px”，换句话说，Web页面中“body”的文字大小在用户浏览器下默认渲染是“16px”。
CSS样式设置水平居中：
1、水平居中元素为文本、图片等行内元素时，通过给父元素设置text-align: center;来实现。
2、水平居中元素为块状元素时，分两种情况：
(1)定宽块状元素：通过设置左右margin值为auto来实现。
(2)不定宽块状元素：
方法一：改变块级元素的display为inline类型，通过给父元素设置text-align: center;来实现。
方法二：给不定宽块状元素添加一个包裹div，包裹div设置样式float: left; position: relative; left: 50%;不定宽块元素设置样式position: relative; left: -50%; （原理：包裹div浮动后左偏移50%后，左边界处在容器的正中间位置，不定宽块宽度等于包裹div宽度，左偏移50%--自身宽度的50%后，相对于容器水平居中）
CSS样式设置垂直居中：
1、父元素高度确定的单行文本垂直居中，通过设置父元素的height和line-height高度一致来实现。
行高(line-height)：指在文本中，行与行之间的基线间距离。line-height与font-size的计算值之差，分为两半，分别加到一个文本行内容的顶部和底部。
基线(base line)：并不是汉字文字的下端沿，而是英文字母“x”的下端沿。2、父元素高度确定的多行文本垂直居中，常用两种方法：
(1)把垂直居中内容放到table表格单元中包裹。
<table><tbody><tr><td style="height: 500px;">
<div><p>垂直居中文本</p></div>
</td></tr></tbody></table>
css中有一个用于垂直居中的属性vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。td标签默认设置了vertical-align为middle。
另外，当设置元素的position:absolute;或float:left/right;属性时，元素的display属性会自动变为display:inline-block;。(2)设置父元素的display:table-cell(设置为表格单元显示），激活vertical-align属性。
<div style="display: table-cell;">
<div><p>一行文本</p><p>两行文本</p></div<
</div>
不兼容IE6、7。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。