web前端入门到实战：HTML/CSS-块级非块级&替换非替换-创新互联
块级元素
块级元素的特点:
在浏览器显示时，独占一行,默认情况下，其宽度自动填满其父元素宽度；
可以设置width，height属性；
可以设置margin和padding属性；
- 对应于display:block
块级元素包含：
| 元素 | 描述 |
|---|---|
<address> | 定义地址 |
<caption> | 定义表格标题 |
<dd> | 定义列表中定义条目 |
<div> | 定义文档中的分区或节 |
<dl> | 定义列表 |
<dt> | 定义列表中的项目 |
<fieldset> | 定义一个框架集 |
<form> | 创建表单元素 |
<h2> - <h7> | 标题元素 |
<hr> | 水平线 |
<legend> | 给fieldset元素定义标题 |
<li> | 定义列表项目 |
<noframes> | 为那些不支持框架的浏览器显示文本，放置于frameset标签内 |
<noscript> | 为那些不支持脚本的浏览器显示文本 |
<ol> | 有序列表 |
<ul> | 无序列表 |
<p> | 定义段落 |
<pre> | 定义预格式化文本 |
<table> | 定义表格 |
<tbody> | 定义表格主体 |
<td> | 表格中的标准单元格 |
<tr> | 表格中的行 |
<tfoot> | 表格中的页脚 |
<th> | 定义表头单元格 |
<thead> | 定义表格的表头 |
内联元素
内联元素的特点：
- 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化
- 行内元素设置width，height属性无效
- 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。
- 对应于display:inline；
内联元素包含：
| 元素 | 描述 |
|---|---|
<a> | 可定义锚以及超链接 |
<abbr> | 表示一个缩写形式 |
<acronym> | 表示只取title中首字母的缩写形式 |
<b> | 字体加粗 |
<bdo> | 可覆盖默认的文本方向 |
<big> | 大号字体加粗 |
<br> | 换行 |
<cite> | 引用进行定义 |
<code> | 定义计算机代码文本 |
<dfn> | 定义一个定义项目 |
<em> | 定义为强调的内容 |
<i> | 斜体文本效果 |
<img> | 向网页中嵌入一张图像 |
<input> | 输入框 |
<kbd> | 定义键盘文本 |
<label> | 为input进行标记/标注 |
<q> | 定义短的引用 |
<s> | 表示不准确不相关，却不应当给予删除的内容 |
<samp> | 定义样本文本 |
<select> | 定义单选或者多选菜单 |
<small> | 呈现小号字体效果 |
<span> | 组合文档中的行内元素 |
<strong> | 语气更强的强调内容 |
<sub> | 定义下标文本 |
<sup> | 定义上标文本 |
<textarea> | 多行文本输入控件 |
<tt> | 打字机或者等宽的文本效果 |
<var> | 定义变量 |
块级元素和内联元素比较记忆
| 块级元素 | 行内元素 |
|---|---|
| 独占一行,默认情况下，其宽度自动填满其父元素宽度 | 相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化 |
| 可以设置width，height属性 | 行内元素设置width，height属性无效 |
| 可以设置margin和padding属性 | 行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。 |
| 对应于display:block | 对应于display:inline； |
我们在刷题的时候会遇到一个这样的题：
eg1: 浏览器天生默认inline-block元素有哪些？（拥有内在尺寸，可以设置高度，但是不会自动换行。）
input button img label texterea
eg2: 请选出所有的置换元素（）
正确答案: A B C D 你的答案: A B C D (正确)
A. img
B. input
C. textarea
D. select
这就引出了我们接下来要讲的替换元素和不可替换元素
替换元素
替换元素浏览器根据元素的标签和属性，来决定元素的具体显示内容。
替换元素一般有内在尺寸，所以具有width和height。
所以替换元素也可增加行框高度，但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替换元素居中，可以设置line-height = height， vertral-align = middle。
常见的替换元素有html中的<img>、<input>、<textarea>、<select>、<object>。
eg1:
<input type="submit" name="submit" value="提交"/>
<input>标签是根据type属性来决定是显示输入框，还是提交按钮等等。
| type属性值 | 描述 |
|---|---|
button | 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）。 |
checkbox | 定义复选框。 |
file | 定义输入字段和 "浏览"按钮，供文件上传。 |
hidden | 定义隐藏的输入字段。 |
image | 定义图像形式的提交按钮。 |
password | 定义密码字段。该字段中的字符被掩码。 |
radio | 定义单选按钮。 |
reset | 定义重置按钮。重置按钮会清除表单中的所有数据。 |
submit | 定义提交按钮。提交按钮会把表单数据发送到服务器。 |
text | 定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。 |
eg2:
<img src="helloWord.jpg"/>
<img>元素通过src属性的值来读取图片信息并显示出来，而如果查看html代码，却看不到图片的实际内容，而且<img>元素的内容通常会被src属性指定的图像替换掉；
eg3:
<object>元素
<object> 元素（或者称作 HTML嵌入对象元素）表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。
| 属性 | 描述 |
|---|---|
| data | 一个合法的 URL 作为资源的地址，，需要为 data 和 type 中至少一个设置值。 |
| type | data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。 |
| usemap | 指向一个 |
| width | 资源显示的宽度，单位是 CSS 像素。 |
| height | 资源显示的高度，单位是 CSS 像素。 |
| name | 浏览上下文名称（HTML5），或者控件名称（HTML 4）。 |
也有某些元素只在一些特殊情况下表现为可替换元素，例如<video>、<audio>、 <picture>和 <canvas>。 通过 CSS content 属性来插入的对象被称作匿名可替换元素（anonymous replaced elements）。
非替换元素
html 的大多数元素是不可替换元素，即其内容直接表现给用户端
不可替换元素
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）
- 行内非替换元素
width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后（在任何子元素相对偏移之前）的宽度，它的高则是基于字体。
如<a>、<span>是行内非替换元素 ，但是浮动后的行内非替换元素可以使用width和height。
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
分享文章：web前端入门到实战：HTML/CSS-块级非块级&替换非替换-创新互联
文章地址：http://pwwzsj.com/article/iesdp.html
