前端的开发工具：HBuilder WebStorm VScode Sublime
查看文档：1.www.w3school.com.cn 2.www.runoob.com
Html(超文本标记语言)： 版本Html4 Html5
CSS层叠样式表(Cascading Style Sheets)：用于网页的排版和美化
1.样式定义如何显示Html元素。
2.样式储存在样式表里。
3.外部样式表可以极大的提高工作效率。
4.外部样式通常储存在CSS文件当中。
5.多个样式可重叠为一。
层叠次序：
当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1.浏览器缺省设置
2.外部样式表
3.内部样式表（位于 <head> 标签内部）
4.内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。
总结：以上三种样式是有优先级的 内联样式>内部样式>外部样式。
内部样式表>外部样式表有一个前提：外部样式表一定要写在内部样式表的前面。总体来说：就近原则（离被设置元素越近优先级就越高）
CSS类选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 "#" 来定义。
类选择器：.选择器名称
id选择器与类选择器的区别？
相同点：可以应用于任何html元素
不同点：
1.id选择器只能在文档中使用一次而类选择器可以使用多次
2.可以使用类选择器为一个元素同时设置多个样式，而id选择器是不可以的。
-子元素选择器：使用（>）主要用于选择指定标签元素的第一代子元素
-后代选择器：可以使用（空格）用于选择指定标签元素下的后代元素
总结：>作用于元素的第一代后代 空格：作用于元素的所有后代
通用选择器（*）：它的作用是匹配html中所有的标签元素
分组选择器：element,element
注意：
1.CSS是具有继承性的：它就是一种规则，它允许样式不仅应用于某个特定的html标签元素，而且也可以应用其后代。
2.CSS是具有特殊性的，浏览器会根据一个权值一判断使用哪一种样式。使用的是权值最高的样式。
权值规则：
对于同一个元素设置了不同的css样式，此时根据权值来判断使用哪种样式，选择权值高的样式进行设置。
权值的定义：标签的权值为1 类选择器的权值为10 ID选择器权值为100
P span 它的权值如何计算：1+1=2
P span .waring 它的权值是：12
3.CSS具有层叠性：当权值相同的时候，后面的样式会覆盖前面的样式。
4.重要性(!important)在属性后面使用!important，会覆盖页面内任何位置定义的元素样式。
元素的分类：
Html中的标签分类：块级元素 内联元素（行内元素） 内联块级元素
常见的块级元素：
<address> 定义地址
<caption> 定义表格标题
<dd> 定义列表中定义条目
<div> 定义文档中的分区或节
<dl> 定义列表
<dt> 定义列表中的项目
<fieldset> 定义一个框架集
<form> 创建表单元素
<h1><h2><h3><h4><h5><h6> 标题元素
水平线
<li> 定义列表项目
<noframes> 为那些不支持框架的浏览器显示文本，放置于frameset标签内
<noscript> 为那些不支持脚本的浏览器显示文本
<ol> 有序列表
<ul> 无序列表
<p> 定义段落
<pre> 定义预格式化文本
<table> 定义表格
<tbody> 定义表格主体
<td> 表格中的标准单元格
<tr> 表格中的行
<tfoot> 表格中的页脚
<th> 定义表头单元格
<thead> 定义表格的表头
常见的内联元素:
<a> 可定义锚以及超链接
<b> 字体加粗
<bdo> 可覆盖默认的文本方向
<big> 大号字体加粗
换行
<cite> 引用进行定义
<code> 定义计算机代码文本
<dfn> 定义一个定义项目
<em> 定义为强调的内容
<i> 斜体文本效果
<img> 向网页中嵌入一张图像
<input> 输入框
<kbd> 定义键盘文本
<label> 为input进行标记/标注
<q> 定义短的引用
<s> 表示不准确不相关，却不应当给予删除的内容
<samp> 定义样本文本
<select> 定义单选或者多选菜单
<small> 呈现小号字体效果
<span> 组合文档中的行内元素
<strong> 语气更强的强调内容
定义下标文本
定义上标文本
<textarea> 多行文本输入控件
<tt> 打字机或者等宽的文本效果
<var> 定义变量
常见的内联块元素：
<img>
<input>
块级元素的设置 display:block 作用：将元素显示为块级元素
块级元素的特点：
- 每个块级元素都会从新的一行开始（独占一行）
- 元素的高度 宽度 行高 顶边距以及底边距都是可以设置的
- 如果元素不设置宽度，它是本身父容器的100%（和父元素的一样）
行内元素（内联元素 inline）特点：
- 在同一行显示
- 元素的宽度以及高度是不可以设置的
- 元素的宽度就是它包含文字或图片的宽度，是不可变的
内联块（inline-block）:就是同时具备内联元素以及块级元素的特点
元素的特点：
- 和其它元素在同一行来显示的
- 元素的宽度以及高度是可以设置的
列出了内联元素和块级元素的主要区别：
html中内联元素和块级元素的区别 块级元素 行内元素
独占一行,默认情况下，其宽度自动填满其父元素宽度 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
可以设置width，height属性 行内元素设置width，height属性无效
可以设置margin和padding属性 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
对应于display:block 对应于display:inline
CSS的布局模型（3种）
- 流动模型(Flow)
- 流动模型它是网页默认的布局方式，块级元素，它会垂直分布，因为块级元素默认的宽度为100%，而内联元素在此模型下是从左到右水平分布的。
- 浮动模型(Float)
- 层模型（Layer）:它有三种类型 绝对定位 相对定位 固定定位
