一、块元素、内联元素、内联块元素
元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
1、块元素
块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：
` 1、支持全部的样式 2、如果没有设置宽度，默认的宽度为父级宽度100% 3、盒子占据一行、即使设置了宽度 `
| h1-h6 | 标题标签 |
| p | 段落标签paragraph |
| ul、ol、li | 无序、有序列表标签 |
| dl、dt、dd | 定义列表标签 |
| div | 容器、表示一块内容，没有具体的语义 |
- html标题标签
通过 h1、h2、h3、h4、h5、h6,标签可以在网页上定义6种级别的标题。6种级别的标题表示文档的6级目录层级关系，比如说： h1用作主标题，其后是 h2，再其次是h3，以此类推。搜索引擎会使用标题将网页的结构和内容编制索引，所以网页上使用标题是很重要的。
<h1>这是一级标题</h1> <h2>这是二级标题</h2> <h3>这是三级标题</h3>
效果：
这是一级标题
这是二级标题
这是三级标题
2. html段落标签 p>标签定义一个文本段落，一个段落含有默认的上下间距，段落之间会用这种默认间距隔开，代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>段落</title> </head> <body> <p>HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超 文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的 标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm。 </p> <p>一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方 式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件渲染成网页，显示的网 页可以从一个网页链接跳转到另外一个网页。</p> </body> </html>
3.html列表
- 有序列表
在网页上定义一个有编号的内容列表可以用ol、li配合使用来实现，代码如下：
<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li> </ol>
在网页上生成的列表，每条项目上会按1、2、3编号，有序列表在实际开发中较少使用。
- 列表文字一
- 列表文字二
- 列表文字三
- 无序列表
在网页上定义一个无编号的内容列表可以用ul、li配合使用来实现，代码如下：
<ul> <li><a href="#">新闻标题一</a></li> <li><a href="#">新闻标题二</a></li> <li><a href="#">新闻标题三</a></li> </ul>
在网页上生成的列表，每条项目上会有一个小图标，这个小图标在不同浏览器上显示效果不同，所以一般会用样式去掉默认的小图标，如果需要图标，可以用样式自定义图标，从而达到在不同浏览器上显示的效果相同,实际开发中一般用这种列表。
实际应用实例：
- 定义列表
定义列表通常用于术语的定义。dl标签表示列表的整体。dt标签定义术语的题目。dd标签是术语的解释。一个dl中可以有多个题目和解释，代码如下：
<h3>前端三大块</h3> <dl> <dt>html</dt> <dd>负责页面的结构</dd> <dt>css</dt> <dd>负责页面的表现</dd> <dt>javascript</dt> <dd>负责页面的行为</dd> </dl>
2、 内联元素
内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：
1、支持部分样式（不支持宽、高、margin上下、padding上下） 2、宽高由内容决定 3、盒子并在一行 4、代码换行，盒子之间会产生间距 5、子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式 解决内联元素间隙的方法： 1、去掉内联元素之间的换行 2、将内联元素的父级设置font-size为0，内联元素自身再设置font-size
| a | 超链接标签 |
| em | 表示语气的强调部分 |
| b | 表示文档中的关键字或者产品名 |
| strong | 表示非常重要的内容 |
| span | 表示一行中的一小段内容，没有具体的语义。 |
3、内联块元素
内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：
1、支持全部样式 2、如果没有设置宽高，宽高由内容决定 3、盒子并在一行 4、代码换行，盒子会产生间距 5、子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
这三种元素，可以通过display属性（css）来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。
display属性 display属性是用来设置元素的类型及隐藏的，常用的属性有： 1、none 元素隐藏且不占位置 2、block 元素以块元素显示 3、inline 元素以内联元素显示 4、inline-block 元素以内联块元素显示
二、常用元素（标签）
- 换行标签br
- 水平线hr
- 图像img
- 表单form
- 实体字符
* 图像
<img src="images/pic.jpg" alt="产品图片" /> • 1
- 表单
<form action="http://www..." method="get"> <p> <label>姓名：</label><input type="text" name="username" /> </p> <p> <label>密码：</label><input type="password" name="password" /> </p> <p> <label>性别：</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>爱好：</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片：</label> <input type="file" name="person_pic"> </p> <p> <label>个人描述：</label> <textarea name="about"></textarea> </p> <p> <label>籍贯：</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">广州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <!-- input类型为submit定义提交按钮 还可以用图片控件代替submit按钮提交，一般会导致提交两次，不建议使用。如： <input type="image" src="xxx.gif"> --> <input type="reset" name="" value="重置"> </p> </form>
- 字符实体
代码中成段的文字，如果文字间想空多个空格，在代码中空多个空格，在渲染成网页时只会显示一个空格，如果想显示多个空格，可以使用空格的字符实体,代码如下：
<!-- 在段落前想缩进两个文字的空格，使用空格的字符实体： --> <p> 一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用<br /> 文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件<br /> 渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。</p> 在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如： <!-- “<” 和 “>” 的字符实体为 < 和 > --> <p> 3 < 5 <br> 10 > 5 </p>
- 效果展示
一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用
文本的方式编辑它，如果用浏览器打开，浏览器会按照标签描述内容将文件
渲染成网页，显示的网页可以从一个网页链接跳转到另外一个网页。
在网页上显示 “<” 和 “>” 会误认为是标签，想在网页上显示“<”和“>”可以使用它们的字符实体，比如：
3 < 5
10 > 5
三、 div 与span
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局。
- div和span的介绍
div标签：可以把标签中的内容分割为独立的区块。必须单独占据一行。 span标签：和div的作用一致，但不换行。
- div标签的属性：
align="属性值"：设置块儿的位置。属性值可选择：left、right、 center。
- div和span的区别
span和div唯一的区别在于：span是不换行的，而div是换行的。 - 如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
- div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。 div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
- span也是表达“小区域、小跨度”的标签，但只是一个文本级的标签。 就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
