<em> 和 <strong>都表示强调，<em> 会变成斜体，<strong>会加粗，推荐用<strong>
<span>，没有语义，只是为了单独添加样式，不用作强调，不能被屏幕阅读器读出来
<q></q>标签，表示引用别人的话（简短文本），默认会加上双引号，但这个标签的重点是语义：引用别人的话
<blockquote>标签，引用大段的文本，注意与<q>标签的区别，一个是简短文本，另一个是大段文本。同时，浏览器会将<blockquote>缩进，并且不会为之加上`""双引号
<br />标签，是一个空标签，用来给内容折行，为什么不用回车和空格呢？因为HTML中是会忽略回车和空格的，同时注意<br />是比<br> 更规范的写法
作用：空格，因为HTML中输入空格和回车都是没有作用的。
<hr />标签，用来加上分割横线，是一个空标签，<hr />是更规范的写法
<code> 标签，表示单行代码，<pre> 标签，表示可以用来表示多行代码，但是 <pre> 标签不只是为显示计算机的源代码时用的，在你需要在网页中预显示格式时都可以使用它，只是<pre>标签的一个常见应用就是用来展示计算机的源代码。
<ul><li></li><li></li></ul> 标签，没有先后顺序的信息列表，ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点
<ol><li></li></ol> 标签，有序列表，网页中显示的默认样式一般为：每项 <li> 前都自带一个序号，序号默认从1开始
<div></div>标签，独立的逻辑部分，相当于一个容器
<body>标签，页面内容都放在里面
<p>标签，用来表示文章的段落，标签的默认样式，段前段后都会有空白
<strong></strong> 和 <em></em> 都表示强调，<strong></strong>语气更强烈点，<em>默认是斜体，<strong>默认是粗体，<strong></strong>更推荐
<a></a>标签，实现，超链接，<a herf = "目标网址" title = "鼠标滑过显示的文本">链接显示的文本，title属性的作用，鼠标滑过链接文字时会显示这个属性的文本内容。主要方便搜索引擎了解链接地址的内容（语义化更友好)
浏览器默认是在当前窗口打开链接的，而target = ""，设置链接打开方式，<a href="目标网址" target="_blank">click here!</a>就是在新标签打开
mailto属性是，用来链接email地址。<a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感。&body=你好，对此评论有些想法。">对此影评有何感想，发送邮件给我。
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">标签，用来插入图片
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。
css 样式由选择符和声明组成，而声明又由(属性和值)组成
- 选择符：又称选择器，指明网页中要应用样式规则的元素
- 声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔
注意：
1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内
CSS 注释语句：/*注释*/
三种样式：
内联式
内联式把css代码直接写在现有的HTML标签中，如下面代码：
<p style="color:red">这里文字是红色。</p>,注意要写在元素的开始标签里，写在style=""双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开
嵌入式
写在
<style type="text/css"></style>标签之间
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在
<head>内（不是在<style>标签内）使用标签将css样式文件链接到HTML文件内,<link href="base.css" rel="stylesheet" type="text/css" />
注意：1、css样式文件名称以有意义的英文字母命名，如 main.css。
标签之内。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、标签位置一般写在
三种样式的优先级：内联式 > 嵌入式 > 外部式
前提是：嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面。
总的前提：内联式、嵌入式、外部式样式表中css样式是在的相同权值的情况下
选择器：每一条css样式声明（定义）由两部分组成，形式如下：
选择器{ 样式; }
在{ }之前的部分就是“选择器”，“选择器”指明了{ }中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
类选择器：.类选器名称{css样式代码;}
注意：
- 英文圆点开头
- 其中类选器名称可以任意起名（但不要起中文）
ID选择器 与 类选择器的一些重要的区别：
子选择器，即大于符号(>),用于选择指定标签元素的第一代子元素。
包含(后代)选择器，即加入空格,用于选择指定标签元素下的后辈元素。
总结：作用于元素的第一代后代，空格作用于元素的所有后代。
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
伪类选择符，为什么叫做伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色：a:hover{color:red;}
注意：
现在比较常用的还是 a:hover 的组合
分组选择符（，）,当你想为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
CSS样式的权值：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
CSS样式的层叠：层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
CSS样式的重要性：有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
p{color:red!important;}
p{color:green;}
<p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>注意：!important要写在分号的前面
优先级：
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
字体：font-family: "Microsoft Yahei"
字号、颜色：font-size：12px;color:#666
粗体：font-weight：bold
斜体：font-style:italic;
下划线：text-decoration:underline;
删除线：text-decoration:line-through;
缩进：text-indent:2em;(缩进两个)
行间距：line-height:2em;(行高)
中文字间距、字母间距：letter-spacing（文字间隔、字母间隔）；英文单词之间的间距呢？可以使用 word-spacing
对齐：块状元素中的文本、图片设置居中样式，text-align:center;
字体颜色（color）、背景颜色（background-color）、边框颜色（border）等
设置颜色的方法：
p{color:rgb(133,45,200);}或者
p{color:rgb(20%,33%,25%);}p{color:#00ffff;}如果每两位的值相同，可以缩写一半, p{color:#000000;} 可以缩写为：p{color: #000;}
px（像素）、em、% 百分比，这三个单位都是相对单位
px(像素)
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
p{font-size:12px;text-indent:2em;}上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
<p>以这个<span>例子</span>为例。</p>
css:
p{font-size:14px} span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）
总之：1em = 1font-size
p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）
元素分类：
在CSS中，html中的标签元素大体被分为三种不同的类型：
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>常用的内联块状元素有：
<img>、<input>块元素(block element)一般是其他元素的容器元素，能容纳其他块元素或内联元素。最常见的就是P和div这两个。
说的简单点，块元素就好比一个四方块，可以放其他的四方块，并可以呈现在页面上任何地方。默认情况下块元素，是独占一行的。
内联元素(inline element)也叫内嵌元素或行内元素，一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素有a和span。
块元素与内联元素的区别？（默认情况下）
块状元素
内联元素可以设置display:block将元素显示为块级元素。
a{display:block;}，就是让a元素具有块状元素的特点
块级元素特点：
内联元素（行内元素）
<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。
块状元素也可以通过代码display:inline将元素设置为内联元素。
内联元素特点：
内联块状元素
内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。
inline-block 元素特点：
padding：内边距
margin：外边距
border：边框
边框--border：
border-bottom: 1px solid red padding(内边距):元素内容与边框之间是可以设置距离的，称之为“填充”
margin(外边距)：元素与其它元素之间的距离可以使用边界（margin）来设置
总结：padding在边框里，margin在边框外。
元素的宽和高：
一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
即：margin-left+border-left+padding-left+width+padding-right+border-right+margin-right
三种基本的布局模型：
流动模型（flow）
浮动模型（float）
想让两个块状元素并排显示，设置元素浮动
任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
div{ width:200px; height:200px; border:2px red solid; float:right; }
层模型（flow）
图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。
CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
绝对定位（position: absolute）：
position:absolute(表示绝对定位)
作用：将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; }
相对定位（position: relative）：
div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } /#相对于以前位置向右移动100px,向下移动50px#/
absolute表里如一，移动了就是移动了。relative只是表面显示移动了，但实际还在文档流中原有位置，别的元素无法占据原来的位置。
固定定位(position:fixed):
与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
应用：positive:fixed
Relative 和 Absolute 组合使用
相对于其它元素进行定位？
使用position:relative
前提：
总结：要在父辈元素中加relative,因为你要相对该父辈进行定位 而在自辈元素中加absolute,再进行设置长宽高！
水平居中行内元素
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。如下代码
定宽块状元素
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的
- 加入 table 标签
- 设置 display：inline 方法
- 设置 position:relative 和 left:50%
第一种：添加 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括
<tbody>、<tr>、<td>)。
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
第二种：设置 display：inline 方法
改变块级元素的 display 为 inline 类型，然后使用
text-align:center来实现居中效果
第三种：设置 position:relative 和 left:50%
通过给父元素设置 float，然后给父元素设置
position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。
原理：
父元素position:relative;left:50%浮动起来后相对浏览器左边框移动到水平正中央；这时候父元素的左边界就相当于中轴；这时候子元素position:relative;left:-50%;向左移动自己宽度的50%，这样子元素就正好剧居中
父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的
父元素高度确定的多行文本（方法一）
方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
父元素高度确定的多行文本（方法二）
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式
隐性改变display类型
当为元素（不论之前是什么类型元素，display:none 除外）
元素会自动变为以 display:inline-block 的方式显示，当然就可以设置元素的 width 和 height 了且默认宽度不占满父元素。
相关文章推荐: