一、HTML
1. img图像标签属性：
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性，指定图片路径 |
alt | 文本 | 图像不能显示时，替换图像的文本 |
title | 文本 | 鼠标放在图片上显示的提示文本 |
<a href=”跳转目标” target=“目标窗口的弹出方式”>文本或图片
属性 | 作用 |
href | 用于指定连接目标的url地址（必须属性），当标签为href时，就有了超链接功能 |
target | 用于指定连接页面的打开方式，其中_self为默认值，在当前窗口打开链接；_blank为在新窗口中打开链接target="_blank |
2. 特殊字符（重点记住空格、大于、小于三个即可，注意是字符，不用加标签符）
特殊字符 | 描述 | 字符代码 |
空格 | 空格符 |
|
< | 小于号 | < |
> | 大于号 | > |
& | 和 | & |
￥ | 人民币 | ¥ |
x | 乘 | × |
÷ | 除 | ÷ |
2 | 二次方 | ² |
3 | 三次方 | ³ |
3. 列表总结
标签名 | 定义 | 说明 |
无序列表 | 只能包含
| |
有序列表 | 只能包含
| |
自定义列表 | 只能包含
|
4. 在我们写表单元素之前，应该有一个表单域
表单域是
4.1 表单控件（表单元素）
表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。
1. input输入表单元素
2. select下拉表单元素
3. textarea文本域元素
用于收集用户信息，标签中，包含一个type属性，根据不同属性值，输入的字段拥有很多种形式（可以是文本字段、单选按钮、按钮、复选框、掩码后的文本控件等），
属性值 | 描述 |
button | 定义可点击按钮（多数情况下，用于通过JavaScript启动脚本） |
checkbox | 复选框（多选） |
file | 输入字段和“浏览”按钮，供文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式的提交按钮 |
password | 密码字段，该字段中的字符被掩码 |
radio | 单击按钮 |
reset | 重置按钮，清楚表单中所有数据 |
submit | 提交按钮，把表单数据发送到服务器 |
text | 单行的输入字段，可以输入文本，默认宽度为20个字符 |
标签还有许多其他属性，常用属性如下：
属性 | 属性值 | 描述 |
name | 用户自定义 | 定义该表单元素input的元素名称 |
value | 用户自定义 | 定义该表单元素input的值 |
checked | checked | 规定此input元素首次加载时默认被选中 |
maxlength | 正整数 | 规定输入字段中字符的最大长度 |
二、CSS
1. 基础选择器总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
标签选择器 | 可以选择所有相同标签 | 不能差异化选择 | 较多 | p{color:red;} |
类选择器 | 可以选择一个或多个标签 | 可以根据需求选择 | 非常多 | .red{color:red} |
id选择器 | 一次只能选择一个标签 | 一个id属性在一个HTML文档中只能被调用一次 | 一般和js搭配使用 | #red{color:red} |
通配符选择器 | 选择所有标签 | 只能选择所有标签 | 特殊情况使用 | *{color:red} |
2. 字体属性
属性 | 表示 | 注意点 |
font-size | 字号 | 一定要后跟单位：16px |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | normal=400正常不加粗；bold=700加粗；不用加单位 |
font-style | 斜体 | italic斜体，不倾斜为normal，normal较常用 |
font | 字体属性连写 | 顺序严格按照font：style weight size/line height family;且size和family必须出现，否则不生效 |
3. CSS用font-weight属性设置文本字体的粗细
属性值 | 描述 |
normal | 默认值（不加粗的） |
bold | 粗体 |
100-900 | normal=400；bold=700 注意这个数字后面不跟单位 |
4. CSS使用font-style属性设置文本的风格（斜体）
属性值 | 描述 |
normal | 默认值，正的 |
italic | 斜体，很少使用斜体，通常是给斜体标签，用normal改正 |
5. 文本颜色：color
表示方法 | 属性值 |
预定义的颜色值 | color: red; |
十六进制 | color: #a01717;开发最常用十六进制，一般用吸管直接选色 |
RGB代码 | color: rgb(255, 0, 0); |
6. 对齐文本 text-align 属性用于设置文本内容的水平对齐方式
属性值 | 解释 |
left | 左对齐（默认值） |
center | 居中 /* 本质是让盒子内的文字居中对齐，盒子的位置并不变 */ |
right | 右对齐 |
7. 装饰文本 text-decoration 属性规定添加到文本的修饰，可以给文本添加下划线、删除线、上划线等；
属性值 | 解释 |
none | 默认值，没有任何装饰线（常用） |
underline | 下划线，标签链接，自带下划线，一般用none去掉 |
overline | 上划线（几乎用不到） |
line-through | 删除线（不常用） |
8. 文本缩进 text-indent属性用来指定文本第一行的缩进，通常是将段落的首行缩进；em是一个相对单位，就是当前元素（font-size）1个文字的大小，如果当前元素没有设置大小，则会按照父元素的1个文字大小；相对当前标签的单位，缩进两个文字即缩进2em.
9. 行间距 line-height控制行与行之间的距离
/* 行高=上间距+下间距+文本高度 */
让行高等于盒子高度即居中
10. 文本属性总结
属性 | 小时 | 注意点 |
color | 颜色 | 通常用十六进制，并且是简写形式#fff |
text-align | 文本对齐 | 设置文字水平的对齐方式，常用center |
text-indent | 文本缩进 | 通常段落首行缩进2个字，text-indent：2em； |
text-decoration | 文本修饰线 | 添加下划线underline，取消下划线none |
line-height | 行高 | 控制行与行之间的距离 |
11. 复合选择器总结
选择器 | 作用 | 特征 | 使用情况 | 分隔符及用法 |
后代选择器 | 可选择所有后代 | 可以是儿子孙子等 | 较多 | .nav a |
子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | .nav>p |
并集选择器 | 选择某些需要有向同样式的元素 | 多用于集体声明 | 较多 | .nav,p |
链接伪类选择器 | 选择不同状态的链接 | 修改链接状态 | 链接 | a:hover |
：focus选择器 | 选择获得光标的表单 | 用于input表单 | 表单 | input:focus |
12. 元素显示模式总结
元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
块级元素 | 一行只能有一个块级元素 | 可以设置宽度高度 | 容器的100% | 可以包含任何标签 |
行内元素 | 一行可以放多个行内元素 | 宽度高度设置无效 | 本身内容的宽度 | 容纳文本或其他行内元素 |
行内块 | 一行可以放多个 | 可以设置宽度高度 | 本身内容的宽度 |
13. CSS的背景总结
属性 | 作用 | 值 |
background-color | 背景颜色 | 预定义、十六进制、RGB代码 |
background-image | 背景图片 | url（图片地址） |
background-repeat | 背景图是否平铺 | repeat、no-repeat、repeat-x/y |
background-position | 背景图位置 | length/position left、right、top、bottom、center |
background-attachment | 背景附着 | fixed（固定）、scroll |
复合写法（简写） | 书写更简单 | background： |
背景半透明色 | 图片半透明 | background:rgba(0,0,0,0.3)；后面必须四个值 |
14. 选择器权重
选择器 | 选择器权重 |
继承或* | 0,0,0,0 |
元素选择器 | 0,0,0,1 |
类选择器,伪类选择器 | 0,0,1,0 |
id选择器 | 0,1,0,0 |
行内样式style=”” | 1,0,0,0 |
!important重要的 | ∞无穷大 |
15. 边框属性
属性 | 作用 |
border-width | 定义边框粗细,单位是px |
border-style | 边框的样式(虚线\实线\点线) |
border-color | 边框颜色 |
border-collapse: collapse; | 合并相邻边框 |
16.边框样式属性
属性 | 作用 |
none | 无边框,忽略所有边框宽度(默认值) |
solid | 单实线(最常用) |
dashed | 虚线边框 |
dotted | 点线边框 |
17. padding属性用于设置内边距,即边框与内容之间的距离
属性 | 作用 |
padding-left | 左内边距 |
padding-right | 右内边距 |
padding-top | 上内边距 |
padding-bottom | 下内边距 |
18. padding属性(简写)可以有1-4个值
值的个数 | 表达意思 |
padding: 5px; | 一个值,代表四个边框都是5px |
padding: 5px 10px; | 两个值,代表上下5px，左右10px |
padding: 10px 20px 5px; | 三个值,上中下,第一个上边距,第二个左右边距,第三个下边距 |
padding: 10px, 20px, 10px, 5px; | 四个值,顺时针,上右下左 |
margin外边距与padding用法基本一致
19. 去除小ul中li中的小圆点：list-style: none;
20. CSS3中新增了圆角边框样式;
border-radius:10px;
参数值可以为数值或百分比的形式
如果是正方形,想设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%
21. 盒子阴影
box-shadow:h-shadow v-shadow blur spread color inset;
值 | 描述 |
h-shadow | 必需.水平阴影的位置.允许负值 |
v-shadow | 必需.垂直阴影的位置.允许负值 |
blur | 可选, 模糊距离 |
spread | 可选, 阴影的尺寸 |
color | 可选,阴影的颜色,参阅CSS颜色值 |
inset | 可选,将外部阴影(outset)改为内部阴影 |
22. 文字阴影
text-shadow:h-shadow v-shadow blur color;
