网页基础HTML+CSS（阶段末尾总结）

· 各种标签的使用，以及相关的css属性

(以下为常见)

· <h> <p> <a> <img>
· 列表标签：<ol>与<ul>
· 表格标签：<table> <tr> <th>和<td>
· 表单标签：<form>用于创建表单区域 <input> <textarea> <select>-option;
· <div><span>

· 四种定位

1、静态定位（Static Positioning）：position static 默认定位
2、相对定位（Relative Positioning）：position relative 相对元素在文档流中的原始位置进行定位。top、bottom、left、right
3、绝对定位（Absolute Positioning）：position absolute 相对最近的祖先元素进行定位
4、固定定位（Fixed Positioning）:position fixed:相对于浏览器窗口进行定位

· 选择器的种类有哪些？每一种都是怎么用的？他们的优先级是怎么样的

1、元素选择器：选择html的名称，并将样式应用于该元素。p{ color:red }
2、类选择器：使用HTML元素的class属性来选规则元素并应用样式。.my-class{ color-red }
3、ID选择器：使用HTML元素的id属性来选择。#my-id{ background-color:pink }
4、属性选择器：通过HTML元素的属性来选择元素并应用样式，input[ type=”text” ]{border:1px solid black} 将所有的类型为文本的输入框设置为黑色
5、伪类选择器：选择元素的特殊状态如 :hover 、:active、 :focus等。
6、伪类元素选择器：选择元素的特定部分，如 ::hover、::after等。在选定内容之前插入。必须和content=”“搭配。
7、！important规则，用自己的理解就是提高权柄。

html的加载顺序

1、获取HTML文件
2、解析HTML
3、加载外部资源
4、构建DOM树：每个元素伪要给节点，加载构造
5、构建CSSOM树–>css
6、合并DOW与CSSOM
7、布局和绘制
8、JavaScript解析与执行

css单位的种类和区别

长度单位：

· 像素（px）
· 百分比（%）
· 视窗宽度单位（vw）
· 视窗高度单位（vh）
· 字体相对长度单位（em、rem）
· cm mm(毫米) in(英寸) pt(磅) pc(点)

角度单位：

· 度（deg）
· 弧度（rad）
· 梯度（grad）

时间单位：

· 毫秒
· 秒

频率单位：

· 赫兹（Hz）
· 千赫兹（kHz）

颜色的表明方式

1、十六进制表明法：#ff0000
2、RGB表明法：rgb(255,0,0)
3、RGBA表明法：rgba(255,0,0,0.5);
4、颜色关键词：red、green等

浮动，以及清除浮动的几种方法

浮动float：left/right/top/bottom–>浮动会脱标
清除浮动在.clearfix{clear:both}

a标签的target属性，与锚标签

target指定在指定链接处打开
<a href=”” target=”_blank” > 在新窗口打开链接 </a>
_self 链接在当前窗口打开
_blank 链接在新窗口打开
_parent 链接在父级窗口打开
_top 链接在顶层窗口打开

掌握盒子模型的使用

1、内容区域（Content）
2、内边距（Padding）
3、边框（border）
4、外边距（Margin）
5、盒子模型的的计算（box-sizing：border-box）

特殊字符的使用，例如空格()、大于、小于、版权等

空白：&nbsp 版权:&copy

块级元素与行级元素的区别

块级、行内块级、行级
其中：块级是默认父级的100%。可设置长宽。

布局：flex，响应式，常见布局（单列，多列），居中方案

Flex布局是一种弹性布局模型，通过display：flex实现
响应式：网页在不同设备上，以最佳的方式呈现。
单列布局：在网页上单行呈现，如博客
多列布局：常见于网站哪个的导航菜单
栅格布局：分成多行和多列
水平居中：margin：0 auto;
垂直居中：align-items:center
水平垂直居中：以上两种结合