html标签
标签分类标签初始化(即去掉默认样式)表单相关标签输入框优化用户体验表格标签常用标签列表标签文本类标签a标签img标签html5常用标签figure标签
标签分类
块级元素：独占一行 header、footer、nav、section、article、aside ol、ul、li、dl、dt、dd、div、h1-h6、p、figure内联元素：不独占一行，代码换行有空格，不能设置css样式 span、a、strong、b、em、i mark、cite、sub、sup、del内联块元素：不独占一行，代码换行有空格，可以设置css样式 img
标签初始化(即去掉默认样式)
dl，dd ：有margin值 h1-h6，body，p ：有margin值 ol,ul ：有margin值有padding值，有样式 a ：有下划线，蓝色（text-decoration color） img ：下面有留白（vertical-align：top/middle） h1-h6 ：加粗(font-weight) em，i ：斜体(font-style) mark ：字体背景颜色(background)
表单相关标签
form表单提交
数据提交方式：method：get/post
数据提交地址：action
input输入框：text 文本框 ----name 区分输入框输入的数据（比如输入18，name为age，
后台获取就是age=18） value 文本框默认内容，纯黑色
submit 提交按钮----value 按钮名称
password 密码框（特点就是输入密码后是黑点点）
reset 重置框
(重置此框之前form表单之内的值
)
button 自定义按钮
file 上传文件
radio
单选框----name需要一样，才能单选。加上checked:默认选中
checkbox 复选框----加上checked：默认选中
注意：数据要提交： name 和value必须有。（后台才能知道这是什么）
image 图片
email 邮箱
tel 电话
(移动端点击，只显示数字
) 各地电话差异大所以不验证
search 输入后，有个×号清空此输入框内容（各浏览器展示情况不同，少用）
url 输入网址（提交时要验证）
color 选择输入颜色（少用。可用于换肤）
range 数字滚动条。可用js获取值，max最大，min最小，step每次拉动步数
number 数字选择器。输入或选择各种数字。min，max，step
datetime-local 日期及时间
date 日期
week 周
month 年月
hidden 隐藏信息（个人信息会被监控）
输入框更多属性
placeholder 输入框默认填写信息，跟value有区别
重点：修改颜色，百度撒
autocomplete 是否记录用户输入过的内容 on开启，off关闭
注意：添加name，结合提交表单
contenteditable 定义内容是否可编辑 true可以，false不行
readonly 只读
disabled 禁用
formnovalidate 取消验证
required 必填项
autofocus 自动获取光标
formaction 新增提交地址，不依靠 form上面的 action
pattern 正则验证
title:提示内容，:invalid正则验证错误时输入框的样式
button按钮 ：与input的type为button的按钮一样
select option ：下拉框
textarea ：文本输入框
datalist list ： 有输入提示（类似下拉框的输入框）
progress ：进度条（max最大值，value当前进度），可以加工下更好看
输入框优化用户体验
用label标签优化输入框（扩大选中区域）用outline优化输入框（输入框输入时有蓝色线条边框）
//扩大选中区域，点男也能选中
<label>
<input type="radio" name="gender">
<span>男</span>
</label>
.ipt{outline:none
} //去掉输入时的蓝色线条边框，可改为其他颜色
<input type=
"text" class=
"ipt"
表格标签
thead、tfoot、caption 都能不写。但是tbody必须写合并单元格列：colspan=“n” ：合并n列合并单元格行：rowspan=“n” ：合并n行 （不允许跨thead、tbody、tfoot合并）border-spacing：边框间距border-collapse:collapse; 边框合并（更细）
<!-- 边框可以直接加在table标签，并且不加单位 -->
<table border=
"1">
<!-- <caption>表格的标题</caption> 不常用-->
<thead>
<tr>
<th>表格的头部</th>
<th>表格的头部</th>
<th>表格的头部</th>
</tr>
</thead>
<tbody>
<tr>
<td>表格的主体</td>
<td colspan=
"2">表格的主体</td> <!-- 合并之后，后面的要多出去，记得删除 -->
<td>表格的主体</td>
</tr>
<tr>
<td>表格的主体</td>
<td rowspan=
"2">表格的主体</td> <!-- 合并之后，后面元素也要多，记得删除 -->
<td>表格的主体</td>
</tr>
<tr>
<td>表格的主体</td>
<td>表格的主体</td>
<td>表格的主体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格的主体</td>
<td>表格的主体</td>
<td>表格的主体</td>
</tr>
</tfoot>
</table>
常用标签
列表标签
有序列表ol li无序列表ul li自定义列表dl dt dd注意根据需要清除默认样式有序列表无序列表设置样式 list-style-type 列表符号（有序列表默认数字，无序列表默认实心圆。circle空心圆 square实心正方形 none不要列表符号） list-style-image 列表符号图片(用url导入图片地址) list-style-position 列表符号位置（outside，inside）
文本类标签
<br /> 强制换行
<hr /> 水平线
<h> 标题
<p> 段落（段落自带margin）
<span> 文本（行内标签）
<strong><b> 加粗（strong强调加粗，b加粗）
<em><i> 斜体（em强调加粗，i加粗）
<sup> 上标标签（2的三次方：2<sup>3</sup>）
<sub> 下标标签（氢气：H<sub>2<sub>）
<del> 删除线标签（原件现价）
<mark> 高亮（自带背景颜色黄色）
<time> 时间标签（加不加浏览器都没有变化，开发自己用）
<cite> 引用（文本变斜体罢了）
a标签
target：_blank 新窗口打开 _self 在当前窗口打开 ：base标签控制所有的a标签 ，写在head中 a标签作用： 1、跳转页面 2、锚点（即跳转到页面的那个哪个div或者哪个部位等等） 3、打电话（tel:400-123-0826） 4、下载文件（href填写需要下载的地址压缩包） 5、发邮件（110@qq.com）
img标签
img标签的五个属性 width 图片宽度 height 图片高度 src 图片位置 titile 鼠标悬停时图片显示文字 alt 图片不显示时的文字让图片底部不留白 vertical-align:middle/top 设置图文对齐方式 留白原因：文字四条线：顶线、中线、基线、底线。而图文对齐方式默认为基线对齐，文字基线位于中下方，图片基线位于最底部
html5常用标签
<header> 头部
<article> 文章（可以包含：标题：作者、发布时间、发布内容等）
<aside> 侧边内容（侧边悬浮等）
<section> 划分板块（免得遍地div）
<footer> 底部（网站底下的哪些小模块）
<nav> 导航栏（包含a标签的超链接，文字可跳转的部分）
figure标签
figure标签：用于引入图片，网页中独立的内容，移除之后不会对其他内容有影响figcaption：用于描述图片的标题
<figure>
<img src=
"./img/img8.jpg" alt=
"">
<img src=
"./img/img9.jpg" alt=
"">
<figcaption>点进来看看，这个里面的东西巴适得很</figcaption>
</figure>
