html5 页面局部替换,HTML/CSS - 块级非块级 & 替换非替换

块级元素

块级元素的特点:

在浏览器显示时，独占一行,默认情况下，其宽度自动填满其父元素宽度；

可以设置width，height属性；

可以设置margin和padding属性；

对应于display:block

块级元素包含：

元素

描述

定义地址

定义表格标题

定义列表中定义条目

定义文档中的分区或节

定义列表

定义列表中的项目

定义一个框架集

创建表单元素

-

标题元素

---

水平线

给fieldset元素定义标题

定义列表项目

为那些不支持框架的浏览器显示文本，放置于frameset标签内

为那些不支持脚本的浏览器显示文本

有序列表

无序列表

定义段落

定义预格式化文本

定义表格

定义表格主体

表格中的标准单元格

表格中的行

表格中的页脚

定义表头单元格

定义表格的表头

内联元素

内联元素的特点：

相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

行内元素设置width，height属性无效

行内元素起边距作用的只有margin-left、margin-right、padding-left、padding-right，其它属性不会起边距效果。

对应于display:inline；

内联元素包含：

元素

描述

可定义锚以及超链接

表示一个缩写形式

表示只取title中首字母的缩写形式

字体加粗

可覆盖默认的文本方向

大号字体加粗

换行

引用进行定义

定义计算机代码文本

定义一个定义项目

定义为强调的内容

斜体文本效果

向网页中嵌入一张图像

输入框

定义键盘文本

为input进行标记/标注

定义短的引用

表示不准确不相关，却不应当给予删除的内容

定义样本文本

定义单选或者多选菜单

呈现小号字体效果

组合文档中的行内元素

语气更强的强调内容

定义下标文本

定义上标文本

多行文本输入控件

打字机或者等宽的文本效果

定义变量

块级元素和内联元素比较记忆

块级元素

行内元素

独占一行,默认情况下，其宽度自动填满其父元素宽度

相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

可以设置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中的、、、、。

eg1:

标签是根据type属性来决定是显示输入框，还是提交按钮等等。

type属性值

描述

button

定义可点击按钮(多数情况下，用于通过 JavaScript 启动脚本)。

checkbox

定义复选框。

file

定义输入字段和 "浏览"按钮，供文件上传。

hidden

定义隐藏的输入字段。

image

定义图像形式的提交按钮。

password

定义密码字段。该字段中的字符被掩码。

radio

定义单选按钮。

reset

定义重置按钮。重置按钮会清除表单中的所有数据。

submit

定义提交按钮。提交按钮会把表单数据发送到服务器。

text

定义单行的输入字段，用户可在其中输入文本。默认宽度为 20 个字符。

eg2:

元素通过src属性的值来读取图片信息并显示出来，而如果查看html代码，却看不到图片的实际内容，而且元素的内容通常会被src属性指定的图像替换掉；

eg3: 元素

元素(或者称作 HTML嵌入对象元素)表示引入一个外部资源，这个资源可能是一张图片，一个嵌入的浏览上下文，亦或是一个插件所使用的资源。

属性

描述

data

一个合法的 URL 作为资源的地址，，需要为 data 和 type 中至少一个设置值。

type

data 指定的资源的 MIME 类型，需要为 data 和 type 中至少一个设置值。

usemap

指向一个 元素的 hash-name；格式为 ‘#’ 加 map 元素 name 元素的值。

width

资源显示的宽度，单位是 CSS 像素。

height

资源显示的高度，单位是 CSS 像素。

name

浏览上下文名称(HTML5)，或者控件名称(HTML 4)。

也有某些元素只在一些特殊情况下表现为可替换元素，例如、、 和 。 通过 CSS content 属性来插入的对象被称作匿名可替换元素(anonymous replaced elements)。

非替换元素

html 的大多数元素是不可替换元素，即其内容直接表现给用户端

不可替换元素

复制代码

行内非替换元素

width和height在行内非替换元素中无效。行内非替换元素框的宽度是它的内容渲染后(在任何子元素相对偏移之前)的宽度，它的高则是基于字体。

如、是行内非替换元素

，但是浮动后的行内非替换元素可以使用width和height。