<!DOCTYPE html> 文档声明，声明网页按照h5标准
<html lang="en"> 向浏览器声明该网页是英文网站，zh设置为中文网站
<head> </head> 定义文档的信息 此标签定义内容不会向用户展示
<meta charset="UTF-8"> 声明为UTF-8字符编码
常见的<meta>标签用法：
页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
定义网页作者
搜索引擎索引方式
页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页
禁止从本地缓存中访问页面内容：访问者将无法脱机浏览
<title>Title</title> 定义了文档的标题
<body> </body>定义向用户展示内容
1.px
代表像素 1px代表一个像素
2.%
百分比是相对其父元素的百分比
3.em
相对于当前元素字体大小
<h1> </h1>
一级标题，将文字以较大的形式输出（还有h2—h6标签，字体逐渐变小）
<p> </p>
表示一个段落，独占一行，会自动换行
<b> </b>
字体加粗
<em> </em>
斜体 （强调语气）
<strong> </strong>
粗体 （强调内容）
<small> </small>
表示一些细则一类的内容，比如：合同中的小字，网站的版权声明
small便签的内容会比他的父元素中的文字要小一些
q标签（表示一个短的引用 即行内引用，q标签引用的内容，浏览器默认会加上引号）
列：<p>WWF 的目标是：<q>构建人与自然和谐共存的世界。</q></p>
blockquote标签（表示一个长引用即块级引用 ）
sup标签（表示上标）
sub标签（表示下标）
del标签（定义文档中已被删除的文本。）
ins标签（带有已删除部分和新插入部分的文本）
a标签
href属性加URL 表链接地址
target属性可选值为blank和self（blank以新的窗口打开，self默认本窗口打开，#为占位符）
mailto属性后面加邮箱地址，subject属性后可加默认编写的内容
<a href="#" target="blank">我是一个超链接</a>
<abbr>标签
用于缩略词鼠标移入给出提示
例：
img图像标签（自结束标签）
定义图像：<img src="url" />
替换文本属性（Alt）：<img src="boat.gif" alt="Big Boat">
设置图像背景：
<body background="/i/eg_background.jpg"> </body>
调整图片大小：<img src="/i/eg_mouse.jpg" width="50px" height="50px">
border设属性置边框
定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<col> 定义用于表格列的属性。
无序列表<ul> </ul>
是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记
有序列表
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
定义列表
自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始
注：列表均可通过CSS list-style:none 清楚格式
header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容（比如侧栏）
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题
<h1 align="center">This is a heading</h1> 拥有关于对齐方式的附加信息
text-align 属性规定了元素中文本的水平对齐方式(使用较多)
background-color 属性为元素定义了背景颜色
font-family（可写多个值）、color、font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸
id选择器
作用：根据元素的id属性值选中一个元素
语法：#id属性值{}
类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值
通配选择器
作用：选中页面中的所有元素
语法: *
交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器n{}
注意点：
交集选择器中如果有元素选择器，必须使用元素选择器开头
选择器分组（并集选择器）
作用：同时选择多个选择器对应的元素
语法：选择器1,选择器2,选择器3,选择器n{}
#b1,.p1,h1,span,div.red{}
子元素选择器
作用：选中指定父元素的指定子元素
语法：父元素 > 子元素
后代元素选择器：
作用：选中指定元素内的指定后代元素
语法：祖先 后代
选中具有title属性
p[title]{ }
为title属性值为hello的设置背景颜色
p[title^="hello"]{ }
已hello开头的属性
p[title^="hello"]{ }
已hello结尾的属性
p[title$="hello"]{ }
包含hello
p[title*="hello"]{ }
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级
可以在某一个样式的后边添加 !important ，则此时该样式会获取到最高的优先权
link 用来表示没访问过的链接（正常的链接）
visited 用来表示访问过的链接
由于隐私的原因，所以visited这个伪类只能修改链接的颜色
hover 用来表示鼠标移入的状态
active 用来表示鼠标点击
三个样式：
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
【border-width】 边框的宽度
border-width: 10px;
默认值，一般都是 3个像素
border-width可以用来指定四个方向的边框的宽度值的情况
四个值：上 右 下 左
三个值：上 左右 下
两个值：上下 左右
一个值：上下左右
除了border-width还有一组 border-xxx-width
xxx可以是 top right bottom left
用来单独指定某一个边的宽度
【border-color】 边框的颜色
border-color用来指定边框的颜色，同样可以分别指定四个边的边框
规则和border-width一样
【border-style】
border-style 指定边框的样式
solid 表示实线
dotted 点状虚线
dashed 虚线
double 双线
border-style的默认值是none 表示没有边框
内边距（padding）
- 内容区和边框之间的距离是内边距
- 一共有四个方向的内边距：
padding-top
padding-right
padding-bottom
padding-left
外边距（margin）
外边距（margin）
- 外边距不会影响盒子可见框的大小
- 但是外边距会影响盒子的位置
- 一共有四个方向的外边距：
margin-top
- 上外边距，设置一个正值，元素会向下移动
margin-right
- 默认情况下设置margin-right不会产生任何效果
margin-bottom
- 下外边距，设置一个正值，其下边的元素会向下移动
margin-left
- 左外边距，设置一个正值，元素会向右移动
- margin也可以设置负值，如果是负值则元素会向相反的方向移动
注：清除样式
默认值：visible
hidden：删除溢出修建
auto：根据需求增加滚动条
可选值：
none 默认值 ，元素不浮动
left 元素向左浮动
right 元素向右浮动
在选择器最后面添加一个空白的元素
转换为一个块元素
去除两侧浮动
相对定位：
当元素的position属性值设置为relative时则开启了元素的相对定位
相对定位的特点：
1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
2.相对定位是参照于元素在文档流中的位置进行定位的
3.相对定位会提升元素的层级
4.相对定位不会使元素脱离文档流
5.相对定位不会改变元素的性质块还是块，行内还是行内
- 偏移量（offset）
- 当元素开启了定位以后，可以通过偏移量来设置元素的位置
top
- 定位元素和定位位置上边的距离
bottom
- 定位元素和定位位置下边的距离
- 定位元素垂直方向的位置由top和bottom两个属性来控制
通常情况下我们只会使用其中一
- top值越大，定位元素越向下移动
- bottom值越大，定位元素越向上移动
left
- 定位元素和定位位置的左侧距离
right
- 定位元素和定位位置的右侧距离
- 定位元素水平方向的位置由left和right两个属性控制
通常情况下只会使用一个
- left越大元素越靠右
- right越大元素越靠左
绝对定位
- 当元素的position属性值设置为absolute时，则开启了元素的绝对定位
- 绝对定位的特点：
1.开启绝对定位后，如果不设置偏移量元素的位置不会发生变化
2.开启绝对定位后，元素会从文档流中脱离
3.绝对定位会改变元素的性质，行内变成块，块的宽高被内容撑开
4.绝对定位会使元素提升一个层级
5.绝对定位元素是相对于其包含块进行定位的
包含块( containing block )
- 正常情况下：
包含块就是离当前元素最近的祖先块元素
<div> <div></div> </div>
<div><span><em>hello</em></span></div>
- 绝对定位的包含块:
包含块就是离它最近的开启了定位的祖先元素，
如果所有的祖先元素都没有开启定位则根元素就是它的包含块
文本域