位置:电子教程 > HTML入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
第1章 HTML 入门
第2章 HTML 基础标签
第3章 HTML 高级标签
第4章 HTML 表单标签
第5章 HTML 媒体和视频(Videos)
当前阅读教程:HTML入门到精通 > 2.6 块级元素和行内元素
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 2.5 HTML 换行 br 标签 下一篇: 2.7 HTML 文本格式化

基础用法

根据CSS规范的规定,每一个网页元素(标签)都有一个display属性,用于确定该元素的类型;每一个元素都有默认的display属性值,比如div元素(标签)、h1元素(标签)、p元素(标签),它的默认display属性值为“block”,成为“块级”元素(block-level);块级元素会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子,我们可以设置块级元素的背景颜色来查看其所占据的空间。

与之相反,而span元素的默认display属性值为“inline”,称为“行内”元素,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。

行内、块状元素区别

块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化。

一般情况下,块级元素可以设置 width, height属性,行内元素设置width,  height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)块级元素可以设置margin padding.  行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)

块级元素总结

n  总是从新的一行开始

n  高度、宽度都是可控的

n  宽度没有设置时,默认为100%

n  块级元素中可以包含块级元素和行内元素

行内元素总结

n  和其他元素都在一行

n  高度、宽度以及内边距都是不可控的

n  宽高就是内容的高度,不可以改变

n  行内元素只能行内元素,不能包含块级元素

块级元素有哪些

<h1>...</h1> 标题一级

<marquee>...</marquee>   滚动文本

<h2>...</h2> 标题二级

<ul>...</ul> 无序列表

<h3>...</h3> 标题三级

<ol>...</ol> 有序列表

<h4>...</h4> 标题四级

<dl>...</dl> 定义列表

<h5>...</h5> 标题五级

<table>...</table> 表格

<h6>...</h6> 标题六级

<form>...</form> 表单

<hr> 水平分割线

<address>...</adderss>

<p>...</p> 段落

<center>...</center>   地址文字

<div>...</div>

<blockquote>...</blockquote>

<pre>...</pre> 预格式化

……

Html中行内元素有哪些?

a - 锚点或链接

abbr - 缩写

acronym - 首字

b - 粗体(不推荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引用

code - 计算机代码

dfn - 定义字段

em - 强调

font - 字体设定(不推荐)

i - 斜体

img - 图片

input - 输入框

kbd - 定义键盘文本

label - 表格标签

q - 短引用

s - 中划线(不推荐)

samp - 定义范例计算机代码

select - 项目选择

small - 小字体文本

span - 常用内联容器,定义文本内区块

strike - 中划线

strong - 粗体强调

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 定义变量

……

下面我们来看下块级元素和行内元素的在网页中的效果,示例

小白教程网www.2d5.net

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>块级元素和行内元素</title>
</head>
 
<body>
     <div style="background-color:aliceblue;width:30%;">div01</div><!--块级元素-->
     <div style="background-color: antiquewhite;width:30%;">div02</div><!--块级元素-->
     <h1>H1</h1><!--块级元素-->
     <h2>H2</h2><!--块级元素-->
    
     <span style="background-color: aqua;">黄菊华老师span01</span><br>
     <span>span02</span><br>
     <span>span03</span><br>
     <span>span04</span><br>
     <span>span05</span>
     <span>span06</span><!--行内元素-->
</body>
</html>

效果如图2-9

image.png


上一篇: 2.5 HTML 换行 br 标签 下一篇: 2.7 HTML 文本格式化
毕业设计网             广告联系QQ:45157718(微信同号)