资讯专栏INFORMATION COLUMN

【前端】HTML__内联元素与块元素

Jason_Geng / 2131人阅读

摘要:在时代,的元素类型分内联元素和块元素。第一内联元素内联元素是是一种基于语义级的基本元素,一般只能容纳文本和其他内联元素。

在HTML4.0时代,HTML的元素类型分内联元素(inline element)和块元素(block-level element)。

第一、内联元素

内联元素是是一种基于语义级的基本元素,一般只能容纳文本和其他内联元素。

下面的元素都是内联元素:

b(字体加粗) 
kbd(代表文字从键盘录入) 
q(引用文字) 
big(字号比周围字体大一号) 
strong(重要文字,在盲文阅读设备中,会重点读,界面显示效果为加粗) 
script(脚本)
i(文字斜体)
samp(极少用,连字符)
span(用于组合其他内联元素)
small(比周围字体小一号)
time(html5中的新标签,用于标记时间,目前浏览器都不支持)
sub(定义下标文本,显示为其他文字高度一半)
tt(告诉浏览器,字体必须等宽)
var(告诉浏览器,这是变量)
sup(定义上标文本)
abbr(代表是长单词或短语的缩写)
a(超链接)
button(按钮)
acronym(缩写,HTML5中已弃用,请使用abbr替代)
bdo(可定义文本方向)
input(基本输入框)
cite(定义引用的文档)
br(换行符)
label(文本标签,但是有个牛逼的特性,利用for属性,可以绑定其他元素,使得鼠标点击该标签时,被绑定元素获得焦点)
code(定义源码文本)
img(图片文本)
select(下拉选择组件)
dfn(definition and usage,定义一个概念的定义处,一般的在一个文档中最先出现的地方)
map(定义一个客户端的图形映射)
textarea(文本输入框)
em(定义需要强调的文字,一般用斜体表示)
object(定义一个嵌入的对象)

第二 块元素

块元素一般是其他元素的容器元素,用于布局,需要放在body标签里面。

下面都是块元素:

address(定义了文章拥有者的联系信息)
figure(定义独立的流内容,例如图片、视频)
noscript(定义如果浏览器不支持脚本语言时显示的内容)
article(定义文章内容)
footer(定义文档底部)
ol(ordered list)
aside(aside content,可用做侧栏)
form(input form)
output(定义form的输出)
blockquote(定义引用于别处的内容)
h1,h2,h3,h4,h5,h6(标题)
p(段落)
canvas(画布)
header(页眉)
pre(preformatted text,定义预格式化内容)
dd(definition description)
hgroup(对标题进行组合)
section(定义页眉的区域)
div(文档分割)
hr(定义分割线)
table(表格)
dl(definistion list)
li(list item)
tfoot(table footer)
fieldset(field set label)
main(contains the central content to this document)
ul(unordered list)
figcaption(figure caption)
nav(contains navigation links)
video(video player)
第三 内联与块元素的区别

默认,块元素会新起一行,而内联元素会在行内

通常,块元素的内部结构要比内联元素复杂,块元素内部可能包含内联元素和其他块元素。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50360.html

相关文章

  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 )这些标签以<标签名称>的形式出现,用于标记文本内容的含义浏览器通过元素标...

    superPershing 评论0 收藏0
  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。 前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现,用于标记文本内容的含义 浏览器通过元素标签解析文本内容并...

    ACb0y 评论0 收藏0
  • 一个后端开发者的前端语言基础:HTML5 & CSS

    摘要:每个标签可有一个独立的号。该标签是一个内联元素,与块级元素相反,内联元素不会自动在前后自动放置换行符,因此内联元素会默认在同一行显示。 前端语言基础:HTML5 & CSS (一) HTML5:超文本标记语言 (1) 基本概念 是由一系列成对出现的元素标签(标记)嵌套组合而成 ( XML也是标签构成的 ) 这些标签以的形式出现,用于标记文本内容的含义 浏览器通过元素标签解析文本内容并...

    DevWiki 评论0 收藏0
  • 前端--CSS

    摘要:一介绍是的简称中文称为层叠样式表用来控制网页数据的表现可以使网页的表现与数据内容分离,层叠样式表定义如何显示元素。用于控制内容与边框之间的距离边框围绕在内边距和内容外的边框。内容盒子的内容,显示文本和图像。一.CSS介绍 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. CSS(CascadingStyl...

    番茄西红柿 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<