一、
11.排版标签：h1-h6不能嵌套，p标签里不能有h1-h6,p,div标签
13.块级元素和行内元素：
块级元素：独占一行（p,h1-h6,div）
行内元素：不独占一行（input）
块元素中可写行内元素和块元素，行内元素中只能写行内元素
h1-h6不能嵌套 p中不要写块元素
二、
1.常用标签：em、strong（重点阅读），span（包裹作用）【都属于行内元素】
2.不常用标签
3.图文标签：img
src:图片在文件中的位置 alt:图片描述 width、height:图片尺寸、单位是像素
4.路径分类
（1）相当路径：同一个文件夹里的
（2）绝对路径：本地：自己电脑其他文件夹 网络：网络上的
5.常见图片格式
jpg：空间小，不支持透明背景和动图
png：空间大，支持透明背景
gif：支持简单透明背景和动图
base64：将图片转变成base64编码
6.超链接：<a></a>（行元素，但是可以包裹除自己以外所有的元素）
href:要跳转的具体位置
target:跳转时如何打开页面（_self:在本页面打开，_blank:在新页面打开）
跳转到页面、跳转到文件、跳转到锚点、唤起指定应用
7.列表
（1）有序列表（ol）:有顺序要求的元素
（2）无须元素（ul）:没有顺序要求的元素
（3）列表嵌套：列表内还有一个列表
（4）自定义列表（dl）:包含术语名称（dt）以及术语描述（dd）的列表
8.表格
（1）结构和属性
table元素的broder属性可以控制表格边框，但border不控制单元格边框的宽度
th或td设置了宽（高）度后，他们所在一列的宽（高）度就确定了
（2）跨行和跨列
rowspan：指定要跨的行数
colspan：指定要跨的列数
9.常用标签补充
br：换行 hr：分隔 pre：按照原文显示
10.表单
（1）基本结构
（2）常用表单控件
文本输入框：type="text"
密码输入框：type="password"
单选框：type="radio" 【多个radio的name要一致】
复选框：type="checkbox" 【checked属性：让该复选框默认选中】
隐藏域：type="hidden" →
提交按钮：type="submit"
button标签type属性的默认值是submit
button不要指定name属性
input标签编写的按钮，使用value属性指定按钮文字
重置按钮：type="reset"
button不雅指定name属性
input标签编写的按钮，使用value属性指定按钮文字
普通按钮：type="button"
普通按钮的type="button"，若不写type值是submit会引起表单的提交
文本域：<textarea name="msg" row=" " col=" "></textarea> →
下拉框：<select> <option></option> </select>
（3）禁用表单控件：disabled
input、textarea、button、select、option都可以设置disabled属性
三、
1.表单
（4）label标签：与表单控件相关联，关联之后点击文字，对应的表单控件会获得焦点
label标签的for属性的值等于表单控件的id
（5）fieldset为表单控件分组、legend是分组的标签【了解】
（6）表单总结：
2.框架标签
iframe应用：嵌入广告，与超链接或表单的target配合，展示不同的内容
3.常见字符实体
一个&和一个实体名称，最后加上一个分号；
4.HTML全局属性 
5.meta元信息
（1）配置字符编码
（2）针对移动端的配置
（3）配置网页关键字
（4）配置网页描述信息
（5）针对搜索引擎爬虫配置
（6）配置网页作者
（7）配置网页生成工具
（8）配置定义网页版权信息
（9）配置网页自动刷新
CSS部分
1.css编写位置：行内样式；内部样式；外部样式
2.样式表的优先级（行内样式>内部样式=外部样式）
3.css语法规范
4.css代码风格
（1）展开风格：开发时推荐，便于维护和调试
（2）紧凑风格：项目上线时推荐，可减小文件体积
5.css基本选择器
（1）通配选择器：选中所有的HTML元素（对清楚样式的时候有很大帮助）
（2）元素选择器：为页面中同种元素统一设置样式（同种元素无法实现差异化设置）
（3）类选择器：根据元素class值，来选中某些元素
元素的class属性不带·（点），但是css的类选择器要带·（点）
class值：不要使用纯数字、不要使用中文
一个元素不可以写多个class属性，但一个class属性可以写多个值，用空格隔开
（4）ID选择器：根据元素的id属性值，来选择某个元素
id属性值：尽量由字母、数字、下划线、短杠组成
一个元素只能有一个id属性，多个元素的id属性不能相同
一个元素可以同时有id和class属性
6.css复合选择器
（1）交集选择器：选中同时符合多个条件的元素（且）
有标签名，标签名写前面
不能出现两个元素选择器，因为一个元素，不可能即是p元素又是div元素
（2）并集选择器：选中多个选择器对应的元素（或）（一般竖着写）
并集选择器，通常用于集体声明
任何形式的选择器，都可以作为并集选择器的一部分
四、
1.css复合选择器
（3）后代选择器：选中指定元素中，符合要求的后代元素
（选择器之间使用空格隔开）（先写祖先，再写后代）
后代选择器最终选中后代，不选中祖先
结构一定要符合之前讲的HTML嵌套要求
（4）子代选择器：选中指定元素中，符合要求的子元素
（选择器之间使用>隔开）（先写父，后写子）
子代选择器，最终选择的是子代，不是父级
后代是子、孙、重孙，而子代是下一代儿子
（5）兄弟选择器
相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素（紧邻下一个）
（选择器之间使用+相连）
通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素
（选择器之间使用~相连）
（两种兄弟选择器，选择的都是下面的兄弟）
（6）属性选择器：选中属性值符合一定要求的元素
（7）伪类选择器：选中特殊状态的元素【像类（class），但不是类，是元素的一种特殊状态】
动态伪类：遵循LVHA顺序，即link、visited、hover、active
表单类元素才能使用：focus伪类
结构伪类：
否定伪类（:not）：排除满足括号中条件的元素
UI伪类：
目标伪类
语言伪类
（8）伪元素选择器：选中元素的一些特殊位置
2.选择器的优先级
（行内样式>ID选择器>类选择器>元素选择器>通配选择器）
行内样式>所有选择器；
!important权重最高（!important>行内样式>所有选择器）
3.css三大特性
（1）层叠性：当发生了样式冲突，就会根据选择器优先级，进行样式的层叠
（2）继承性：元素会自动拥有其父元素，或祖先元素上所设置的某些样式（优先继承离得近的）
常见可继承性：text-??,font-??,line-??,color
（3）优先级：!important>行内样式>ID选择器>类选择器>元素选择器>*>继承样式
4.颜色表示
（1）颜色名：直接使用颜色对应的英文单词
（2）rgb或rgba：使用红、绿、蓝这三种光的三原色进行组合
r→红色 g→绿色 b→蓝色 a→透明度
若三种颜色值相同，呈现的是灰色，值越大，灰色越浅
（3）HEX或HEXA：红、绿、蓝进行组合，#后只要用6个数字，分成三组来表达
（4）HSL或HSLA：通过色相、饱和度、亮度、来表示颜色
五、
1.css字体属性
（1）字体大小（font-size）
浏览器默认字体为16px
通常给body设置fone-size属性，这样body中元素都可以继承
（2）字体族（font-family）
windows系统中，默认的字体是微软雅黑
使用字体的英文名字兼容性会更好（建议字体名使用引号包裹）
设置多个字体，通常最后会写上serif或sans-serif
（3）字体风格（font-style）
常用属性值：normal-正常；oblique-斜体（强制倾斜产生的斜体效果）
italic-斜体（字体自带的斜体效果）【推荐】
（4）字体粗细（font-weight）
常见属性值：lighter-细；normal-正常；bold-粗；bolder-很粗（很多字体不支持）
数值：100~1000且无单位，数值越大，字体越粗
100~300等同于lighter，400~500等同于normal，600及以上等同于bold
(5)字体复合写法（font）【不推荐老己使用，你肯定记不住】
4.常用文本属性
（1）文本颜色（color）
可选：颜色名、rgb或rgba、HEX或HEXA（这两个开发常用） 、HSL或HSLA
（2）文本间距
字母间距：letter-spacing
单词间距：word-spacing
属性值为像素（px）,正值让间距更大，负值让间距更小
（3）文本修饰（text-decoration）
none-无装饰线；underline-下划线；overline-上划线；line-trough-删除线；dotted-虚线； wavy-波浪线；也可以指定颜色
（4）文本缩进（text-indent）
（5）文本对齐_水平（text-align）
常用值：left-左对齐（默认）；right-右对齐；center-居中对齐
（6）行高（line-height）
line-height = height（文本就可以在垂直方向居中）
line-height可以继承
（7）文本对齐_垂直（后面可以用定位做）
居中：单行文字，line-height = height
底部：单行文字，line-hright = (height*2)-font-size-X
（8）vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式
vertical-align不能控制块元素 
2.css列表属性（作用在ul、ol、li元素上）
3.css表格属性
（1）边框相关属性（其他元素也可以使用）
（2）表格独有属性（只有table标签可以用）
4.css背景属性
5.鼠标光标样式
6.css盒子模型
（1）css长度单位（必须加单位）
px-像素；em-相当元素font-size的倍数；rem-相对根（html）字体大小；%-相对父元素计算
（2）元素的显示模式
六、
1.css盒子模型
（3）总结各元素的显示模式
（4）修改元素显示模式（display）
none-元素被隐藏；block-元素作为块级元素显示；
inline-元素作为内联元素显示；inline-block-元素作为行内块元素
（5）盒子模型的组成（css会把所有的HTML元素都看成一个盒子）
盒子的大小=content+左右padding+左右border
（外边距margin不影响盒子的大小，但影响盒子的位置）
（6）盒子内容区（content）
max-width、min-width一般不与width一起使用
max-height、min-height一般不与height一起使用
（7）关于默认长度（设置width属性时，元素呈现的宽度）
总宽度=父元素的content-自身左右margin
内容区的宽度=父元素content-自身左右margin-自身左右border-自身左右padding
（8）盒子内边距（padding）
padding不可以为负数
行内元素的左右内边距是没有问题的，上下内边距不能完美的设置
块级、行内块元素，四个方向内边距都可以完美设置
（9）盒子的边框（border）
边框相关属性共20个
border-style、border-width、border-color其实是复合属性
（10）盒子外边框（margin）
（11）margin注意事项
子元素的margin，是参考父元素的content计算的（因为父元素的content承载着子元素）
上margin、左margin：影响自己的位置；下margin、右margin：影响兄弟元素的位置
块级、行内块元素，均可以完美地设置四个方向的margin；
但行内元素，左右margin可以完美设置，上下margin设置无效
margin值可是auto，如果给一个块元素设置左右margin都为auto，该块元素会水平居中
margin的值可以是负值
（12）margin塌陷问题
第一个子元素的上margin作用在父元素上，最后一个子元素的下margin作用在父元素上
（13）margin合并问题
（上面兄弟元素的下外边距和下面兄弟的上外边距会合并，取一个最大的值，而不是相加）
解决：布局时上下的兄弟元素，只给一个设置上下外边距
（14）处理内容溢出
overflow-x、overflow-y不能一个是hidden，一个是visible，是实验性属性（不建议使用）
overflow（不仅能处理溢出的显示方式，还可以解决其他的疑难杂症）常用的值是hidden和auto
（15）隐藏元素的方式
visibility属性
visibility属性默认值是show，，如果设置为hidden，元素会隐藏
元素看不见了，还占有原来的位置（元素的大小依旧保持）
display属性
设置display：none，就可以让元素隐藏
彻底地隐藏，不但看不见，也不占用任何位置，没有大小宽度
（13）样式继承：
元素本身没有设定某些样式，会从父元素开始一级一级继承
会继承的css属性：字体属性、文本属性（除vertical-align）、文字颜色等
不会继承的css属性：边框、背景、内边距、外边距、宽高、溢出方式等
（14）默认样式
优先级：元素默认样式>继承样式，如果重置元素的默认样式，选中器要直接选择器到该元素
（15）布局小技巧
（16）元素之间的空白问题
原因：行内元素、行内块元素，彼此之间的换行会被浏览器解析为一个空白字符
解决：方案一：去掉换行和空格（不推荐）
方案二：给父元素设置font-size:0，再给需要显示文字的元素，单独设置字体大小（推荐）
（17）行内块的幽灵空白问题
原因：行内块元素与文本的基线对齐，而文本的基线与文本最底端之间是有一定距离的
解决：
方案一：给行内块设置vertical，值不为baseline即可，设置为middle、bottom、top均可
方案二：若父元素中只有一张图片，设置图片为display:block
方案三：给父元素设置font-size:0，如果该行内块内部还有文本，则需单独设置font-size
2.css浮动
（1）浮动的特点
（2）浮动的影响
对兄弟元素的影响：
后面的兄弟元素会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响
对父元素的影响：
不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素
（3）解决浮动的影响（清除浮动）
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动
七、
1.定位
（1）相对定位（position:relative）
可以使用left、right、top、bottom四个属性调整位置
参考位置：相对自己原来的位置
绝大多数情况下，相对定位，会与绝对定位配合使用
（2）绝对定位（position:absolute）
可以使用left、right、top、bottom四个属性调整位置
参考位置：包含块
【包含块：1 没有脱离文档流的元素，包含块就是父元素；2 脱离文档流的元素，包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）】
定位元素：默认宽、高都被内容所撑开，且能自由设置宽高
（3）固定定位（position:fixed）
可以使用left、right、top、bottom四个属性调整位置
参考位置：视口（我们看见的网页）
（4）粘性定位（position:sticky）
可以使用left、right、top、bottom四个属性调整位置，不过最常用的是top值
参考位置：离它最近的一个拥有"滚动机制"的祖先元素，即便这个祖先不是最近的真实可滚动祖先
（5）定位层级
（6）定位的特殊应用
注意：
发生固定定位、绝对定位后，元素变成了定位元素，默认宽高被内容撑开，依然可以设置宽高
发生相对定位后，元素依然是之前显示模式
以下所说的特殊应用，只针对绝对定位和固定定位的元素，不包括相对定位的元素
让定位元素的宽充满包含块
1 块宽想与包含块一致，可以给定位元素同时设置left和right为0
2 高度想与包含块一致，top和bottom设置为0
让定位元素在包含块中居中：该定位必须设置宽高（见笔记）
2.布局
（1）版心
（2）常用布局名词
（3）重置默认样式
3.css伸缩模型
（1）简介
（2）伸缩容器、伸缩项目（一个元素可以同时伸缩容器、伸缩模型）
1 伸缩容器（display:flex或display:inline-flex【少用】）：开启了flex元素
2 伸缩项目：伸缩容器所有子元素自动成为；无论什么元素，一旦成为伸缩项目，全都会"块状化"
（3）主轴与侧轴
主轴：伸缩项目沿着主轴排列，主轴默认是水平的，从左到右
侧轴：与主轴垂直的就是侧轴，侧轴默认是垂直的，从上到下
（4）主轴方向（flex-direction）
改变主轴的方向，侧轴方向也随之改变
（5）主轴换行方式（flex-warp）
（6）flex-flow（复合属性，复合了flex-direction和flex-wrap两个属性，值没有顺序要求）
（7）主轴对齐方式（justify-content）
（8）侧轴对齐方式
1 侧轴对齐一行（align-items）
2 侧轴对齐多行（align-content）
（10）主轴方向的基准长度（flex-basis）：会让宽度或高度失效
（11）伸缩项目------伸
flex-grow定义伸缩项目的放大比例，默认为0，即：纵使主轴再剩余空间，也不拉伸（放大）
规则：
若所有伸缩项目的flex-grow值为1，则她们会等分剩余空间
若三个伸缩项目的flex-grow值为1、2、3，则按比例瓜分空间
（12）伸缩项目------缩
flex-shrink定义了项目的压缩比例，默认为1，即：空间不足，该项目会变小
八、
1.css伸缩模型
（1）flex复合属性：复合了：flex-grow、flex-shrink、flex-basis三个属性，默认值为0 1 auto
（2）项目排序
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0
（3）单独对齐
通过align-self属性，可以单独调整某个伸缩项目的对齐方式
默认值为auto，表示继承父元素的align-items属性
2.响应式布局
（1）媒体查询
媒体类型：all 检测所有设备
screen 检测电子屏幕，包括：电脑屏幕、平板屏幕、手机屏幕等
print 检测打印机
（2）媒体特性
（3）运算符
（4）常用阈值