一、HTML的基本标签
1、【mate标签】：现在多采用UTF-8，万国码
2、http-equiv属性：需配合content属性使用。主要声明浏览器如何解释编译文件
3、name属性：需配合content属性使用。主要用于给搜索引擎提供必要信息。
4、link标签作用，用于为网页链接各种文件
二、HTML常见块级标签
1、标题标签<h1></h1>:默认加粗，H1最大，H6最小
2、水平线<hr/>
3、 段落<p></p>
4、 换行<br/>
5、 引用<blockquote></blockquote>
1、表明标签中的文字为引用的内容。浏览器显示为缩进。
2、cite属性，表明引用的来源，一般为引用的网址URL
6、预格式<pre></pre>
浏览器解析时会按照等宽字体显示，并保留标签内的空格和回车。 常用于保留代码格式。
7、【组合标签】figure
①、<figure></figure>标签有两个子标签：
<img src="">:一幅图片，src表示图片的路径
<figcaption></figcaption>图片的标题
②、浏览器显示为：图片与标题上下排列，且整体向后缩进一个单位
8、【分区标签】div
常配合于css使用，为网页中最常用的分区标签，常用于网页布局
三、常用的行级标签
1、 span（文本）
2、 em（强调）
3、 strong（强调）
4、q（短引用）
5、 i（倾斜）
6 、 b（加粗）
7、 small（缩小字体）
8、 img（图片）
9、 a（超链接）
注：img图片标签
src属性：表示图片引用路径
>>>常见路径的写法
① 相对路径：
第一种情况：当图片在当前文件下一层时：文件夹名/图片名 img/abc.jpg
第二种情况:当图片与当前文件夹在同一层时：直接图片名 src=“abc.jpg”
第三种情况;当图片在当前文件夹前一层时：../ 使用相对路径时，图片最外层只能放到网站艮目录，即图片必须在项目文件夹中
② 绝对路径:写法：“file：///E:/aaa.png” 但是，严禁使用
③ 网络链接:直接使用网络上图片，不可控，不建议使用
四、表格
【表格的跨行与跨咧】
1、colspan：某单元格跨n列，则该单元格右边的n-1个td就不需要了
2、rolspan：某单元格跨n行，则该单元格下方的n-1个td就不需要了
五、表单
1、两个重要属性：
action：表单需要提交的服务器地址
method;表单提交数据使用的方法get和post
2、input的常用属性：
type:设置input的输入类型
name：给input输入框起名。一般情况下name属性必不可少。因为传递数据时，使用name=value（输入内容）的形式传递
value：是input输入框的默认值
placeholder：输入框的提示内容，当input有默认的value或输入值时，placeholder消失
3、input-type属性的常用属性值
text：文本框
password：密码输入框，输入内容默认显示为小黑点
radio：使用它时，value属性必填，提交时，提交的为value中的默认值，radio凭借name属性，确定是否为同一组，
name相同为同一组，只能选一个.
使用checked属性，设置默认选中项（单选）
checkbox 多项选择
submit：提交按钮，将所有表单数据提交至服务器
file：文件上传,使用accept=类型，设置只能上传的类型，image/* 任意格式图片
reset：重置表单数据，将表单数据恢复到默认状态
image：图形提交按钮，和submit一样具有表单提交功能，使用src属性选择图片路径
button:普通按钮，没用
4、下拉选择控件 select
① 写法：<select>
<option></option> //可以有N多个
</select>
② name属性，应该写在<select>上，所有选项只有一个name
③ multiple="multiple" 设置select控件为多选，可在界面使用Ctrl+鼠标，进行多选。一般不用。
④ option常用属性：
value="":当option没有value属性时，往后台传递的是<option></option>标签中的文字；
当option有value属性时，往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
⑤ <optgroup label="山东省"></optgroup> :用于将option标签进行分组，label属性表示分组名。
【文本域 textarea】
① 写法：<textarea></textarea>
② 设置宽高style=" 200px; height: 150px;" 自身有cols="" rows=""两个属性，但不常用
③ readonly="readonly" 设置为只读模式，不允许编辑。
④ style="resize: none;" 设置为宽高不允许修改。
⑤ style="overflow: ;" 设置当文字超出区域时，如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字，隐藏无法显示
scroll 无论文字多少，均会显示滚动
auto 自动，根据文字多少自动决定是否显示滚动条（默认样式）
表格的边框与标题<fieldest>表格的边框
<lengend>表格的标题</lengend>
N多个表单元素
</fieldest>
注：①一个表单可以有多组边框加标题
②新增input的属性：
Autocomplete：自动完成功能,根据之前输入过的内容（或者记忆），在下次输入时根据以前输入过的内容提示自动完成
绝大部分浏览器自动开启
有两个属性on/off
可以在form标签上设置autocomplete，控制整张表单。但可以在个别input上单独设置，覆盖form的整体设置
Autofocus：自动获得焦点
③属性名等于属性值的情况
checked="checked " 设置radio或者checked为默认选中项
multiple="multipled" 设置select控件的多选
selected= "selected" 设置selec控件默认选中的option选项
readonly="readonly " 设置textarea只读
hidden="hidden " 隐藏控件。等效于<input type="hidden"
disabled="disabled" 设置失效
required="required" 设置input为必填
autofocus="autofocus" 自动获得焦点
六、css常用选择器
【标签选择器】 【通用选择器】 [类选择器class选择器] 【ID】选择器 【后代选择器】 【子代选择器】 【交集选择器】 【并集选择器】
注：选择器优先级
* 1、近者优先
* 2、当作用于同一层时：可用权重计算
* 权重划分：标签选择器为1，class选择器为10 ，ID选择器为100 ，行级样式表为1000。
* #ul .li .li2 li{}的权重为121
伪类选择器：
写法：选择器名：伪类状态{}
常见的伪类状态:
①:link未访问状态 ② wisited：已访问状态 ③ hover：鼠标指上状态 ④active：激活状态
当超链接同时具有以上四种状态，则选择器必须按照上述顺序排列。
七、css常用文本属性
1、字体、字号：
font-weight:字体的粗细，可选属性值：bold加粗 lighter细体 100~900数值(400正常，700 bold)
font-size:字体大小 **PX **%（浏览器默认字体大小的百分比，绝大部分默认16px）
font-family:字体族，设置字体。
>>>多个字体样式间用逗号分隔，浏览器解析时，会从左往右依次解析，选择可用字体。
>>>一般前面使用具体字体名称，最后一个使用字体族类名称。
（常用字体族名称：衬线体serif 非衬线体sans-serif(常用) 等宽体Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;
font-style:字体样式,正常(normal) 斜体(italic)
font-variant：small-caps; 将字母转为小型大写字体。
(了解)font缩写形式：font-style font-variant font-weight font-size line-height font-family
>>> 使用注意事项 ：
① 顺序必须严格按照上述顺序；
② 多个样式之间用空格分割，而且font-size/line-height 必须作为一对用/分割
③ font-size和font-family必须指定，其他样式不指定将采用默认样式显示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜体 加粗 字号/行高 字体族(微软雅黑，非衬线字体族)
2、字体颜色：
color:字体颜色
opacity:透明度,0~1之间的数字。 调整时控件以及子控件均会透明，而使用rgba调整时，只会时本控件透明，子控件不会发生透明度变化。
3、行距、对齐等：
line-height:行高 ① 像素单位 48px ② 不带px 正常行高的倍数 ③百分数 同2
>>> 典型应用，调整控件中文垂直居中的方式：控件的height=控件的line-height
text-align:块级元素中文字的水平对齐方式 left center right
letter-spacing:字符间距,字与字之间的间距
text-decoration:文本修饰 下划线underline、删除线line-through、上划线overline、none(去除边框)
overflow:控制超出范围文本的显示方式(auto 根据文字多少自动显示滚动条，scroll始终显示滚动条， hidden 超出范围文本隐藏) 可以通过overflow-x overflow-y分别设置水平垂直方向
text-overflow:设置多余文字的显示方式 clip裁剪掉 ellipsis省略号
>>>【重点】让每行多余文字显示省略号：
① white-space: nowrap; 设置行末不断行
② overflow: hidden; 设置控件超出范围隐藏
③ text-overflow: ellipsis; 设置多余文本省略号显示
white-space: nowrap; 设置中文行末不断行显示
word-break: 浏览器默认在空格处断行，当一个单词长度超出范围时，会不断行显示， break-all 允许在单词内换行。
text-shadow:文本阴影，有四个属性值：
①水平阴影距离 必选，数值越大，阴影右移
②垂直阴影距离 必选，数值越大，阴影下移
③阴影模糊距离 可选，数值越大，阴影越模糊。默认为0，不模糊
④阴影颜色 可选，默认为黑色
text-indent:首行缩进，可用像素值调整缩进大小
text-stroke: -webkit-text-stroke: 0.2px #008000; 描边的粗细，描边的颜色
八、css常用背景属性
background：背景
background-color:背景色
background-image:背景图,background-image: url(图片地址相对路径);背景图和背景色同时存在时，背景图会覆盖背景色
background-repeat：背景图重复方式 ，no-repeat不平铺 repeat平铺(默认) repeat-x水平平铺 repeat-y垂直平铺
background-size:背景图大小。
【指定宽度高度】
>>> 宽高的写法，第一个属性值为宽度，第二个属性值为高度，可以：①直接写像素 ②写百分比（父容器宽高的百分比）
>>> 当只有一个属性值时，默认为宽度。高度等比缩放。
当有两个属性值时，会按照指定的高度宽度进行压缩/拉伸显示。
【其他属性值】
>>> contain:图片等比缩放，缩放到宽或高的某一边等于父容器的宽高，另一边按照图片大小缩放（可能导致部分空余区域无法覆盖）
>>> cover:图片等比缩放，使背景图像完全覆盖背景区域。(可能导致背景图部分区域无法显示)
background-position：位置坐标、偏移量
>>> 指定位置：left/center/right top/center/bottom
当只写一个属性值时，另一个默认居中
>>> 填写坐标：水平位置 垂直位置 (像素或百分比形式)
① 当只写一个属性值时，默认写的为水平方向，则垂直居中
② 当使用像素时：图片的左上角往各个方向移动的实际距离
水平方向：正数右移 负数左移 垂直方法：正数下移 负数上移
(左负有正 上负下正)
③ 当使用百分数时，一般只能是正数。代表去掉图片后，剩余空白距离的分布比例。例如 background-position：30%; 水平方向去掉图片后，剩余区域3:7分