1.行内元素
行内元素按照文档流按照从左到右流的方式布局，遇到阻碍或者宽度不够自动换行，然后继续从左到右。
* 行内元素：`<title> <lable> <span> <br> <a> <em> <strong>`
2.块级元素
块级元素单独占据一行，并按照从上到下的方式布局。
* 块级元素：`<body> <div> <h1>-<h6> <p> <ol> <ul> <hr> <select> <button> <textarea>`
3. 块级和行内元素的区别和转换
-
区别：
1.块级元素可以设置宽高，行级元素不能设置宽高（只能根据文字来设置，比较特殊的是img\input是可以设置宽高的行内块元素）；
2.块级元素是独占一行，行级元素不是；
-
互变：
1.转行级元素：
display: inline（设置宽高无效）2.转块级元素：
display: block（独占一行，可以设置宽高）3.转行内块元素：
display: inline-block（不会独占一行，可以设置宽高）
4.HTML中元素对应名称
块元素(block element) HTML标签分类明细：
* address - 地址
* blockquote - 块引用
* center - 举中对齐块
* dir - 目录列表
* div - 常用块级元素
* dl - 定义列表
* form - 交互表单 （只能用来容纳其它块元素）
* h1 - 大标题
* h2 - 副标题
* h3 - 3级标题
* h4 - 4级标题
* h5 - 5级标题
* h6 - 6级标题
* hr - 水平分隔线
* ol - 排序表单
* p - 段落
* pre - 格式化文本
* table - 表格
* ul - 非排序列表
内联元素(inline element) HTML标签分类明细 ：
* a - 锚点
* abbr - 缩写
* acronym - 首字
* big - 大字体
* br - 换行
* code - 计算机代码(在引用源码的时候需要)
* em - 强调
* i - 斜体
* img - 图片
* input - 输入框
* label - 表格标签
* q - 短引用
* select - 项目选择
* small - 小字体文本
* span - 常用内联容器，定义文本内区块
* strong - 粗体强调
* textarea - 多行文本输入框
* u - 下划线
5.表格的属性和作用
1. 创建表格
定义表格：
<table></table>创建表行：
<tr></tr>创建列(单元格):
<td></td>注意：默认情况下，每行中的列数是统一的。
2. table表格的特点：
独占一行
宽度自适应(由内容来决定)
3. table的表格属性：
<table>
width：设置表格宽度
height：设置表格高度
align：设置表格在其父元素中的水平对齐方式，取值：left,center,right
border：边框,边框宽度，以px为单位的数值，px可以省略
cellpadding：单元格内边距单元格边框与内容之间的距离
cellspacing：单元格外边距单元格与单元格之间或者单元格与表格之间的距离
bgcolor：背景颜色
<tr>
align：该行的内容水平对齐方式
valign该行的内容垂直对齐方式。取值：top，middle，bottom
bgcolor
<td>
width
height
align
valign
bgcolor
colspan：设置单元格跨列
rowspan：设置单元格跨行
4. 还有表格中的其他标记：
<caption></caption>
作用：为表格定义标题
位置：表格正上方居中显示
<th></th>
行(列)标题列标题：第一行中的每一列（或每行里面的第一列），加粗，水平居中的效果显示。
5. 表格的复杂应用
* 行分组表格可以被划分成3个部分:
1、表头
<thead></thead>
2、表主体
<tbody></tbody>
3、表尾
<tfoot></tfoot>
注意：如果不对表格行进行分组的话，那么默认都属于tbody
* 不规则表格每行中的列数，不是统一化的。
1.跨列合并列，让指定的单元格，横向向右，合并几个单元格(包含自己)语法：td 的 colspan 属性
2.跨行合并行，让指定的单元格，纵向向下，合并几个单元格(包含自己)语法：td 的 rowspan 属性
注意：无论是跨行还是跨列，被合并的单元格一定从代码中删除出去
* 表格的嵌套在一个表格中
又嵌入了另外一个表格被嵌套的表格必须出现在<td>中。
6. html table表格特有的样式属性
* html table表格样式属性之边框合并
属性：border-collapse
取值：
- separate：默认值，分离边框模式
- collapse：边框合并模式
* html table表格样式属性之边框边距
作用：设置相邻单元格边框之间的距离(类似于cellspacing)
属性：border-spacing取值：
- 取1个值.表示水平和垂直间距相等.
- 取2个值.第一个值表示的水平间距,第二个值表示的垂直间距,两个值之间用空格隔开.
- 要求border-collapse必须为separate必须为分离边框模式时有效
* html table表格样式属性之标题位置:
<caption></caption>
作用：将标题位置由默认的位置改到表格之下
属性：caption-side
取值：
- top：默认
- bottom：标题位于表格之下
* html table表格样式属性之显示规则:
作用:
指定浏览器以什么样的方式来布局一个表格。实际是指定了单元格的算法规则默认算法：单元格的宽由内容来决定，不受设置的width值来限定。
属性：table-layout
取值：
- auto：默认值，自动，列宽由内容来决定
- fixed：固定表格布局，列宽由设定的值决定。
- 自动表格布局&固定表格布局1
- 自动表格布局(auto)单元格的大小会适应内容大小在表格复杂时，加载会比较慢适用于不确定每列大小时使用传统表格表现方式
- 固定表格布局(fixed)单元格的大小由设定的值来决定，与内容无关会加速显示表格，浏览器在加载完第一行的时候就不用再计算了。
* 隐藏的显示效果属性：
visibility：collapse用在表格元素上，删除一行或一列，不影响表格整个布局
6.HTML表单
1. 表单元素
<input>
<input> 元素根据不同的 type 属性，可以变化为多种形态
<select>
<select> 元素定义下拉列表。
<option> 元素定义待选择的选项。
<texarea>
<textarea> 元素定义多行输入字段（文本域）：
<button>
<button> 元素定义可点击的按钮
<datalist>
<datalist> 元素为 <input> 元素规定预定义选项列表。
用户会在他们输入数据时看到预定义选项的下拉列表。
<input> 元素的 list 属性必须引用 <datalist> 元素的 id 属性。
2. 输入类型（input元素）
text：定义文本输入字段
password：定义密码字段
submit：定义提交表单数据到表单处理程序的按钮
radio：定义单选框
checkbox：定义复选框
button：定义按钮
3. 输入属性（input元素）
value：规定输入字段初始值。
readonly：只读。
disabled：禁用。
size：输入字段尺寸（按字符计）。
maxlength：最大输入尺寸。
autocomplete：规定表单或输入字段是否应该自动完成。
