成都创新互联网站制作重庆分公司

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

这就引出了我们接下来要讲的替换元素和不可替换元素

替换元素

替换元素浏览器根据元素的标签和属性,来决定元素的具体显示内容。

替换元素一般有内在尺寸,所以具有widthheight

所以替换元素也可增加行框高度,但不影响line-height,内容区高度值 = padding-top + padding-bottom + margin-top + margin-bottom + height。 要想替换元素居中,可以设置line-height = heightvertral-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 指向一个 元素的 hash-name;格式为 ‘#’ 加 map 元素 name 元素的值。
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)

  • 行内非替换元素

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

<a><span>是行内非替换元素 ,但是浮动后的行内非替换元素可以使用width和height。


新闻标题:web前端入门到实战:HTML/CSS-块级非块级&替换非替换
本文来源:http://cxhlcq.com/article/jjsjsh.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部