美文网首页Web前端之路让前端飞
前端编程之路一一HTML标签分类

前端编程之路一一HTML标签分类

作者: 前端王祖蓝 | 来源:发表于2020-12-09 11:40 被阅读0次

HTML标签分类

HTML标签有更多种,不仅限于以下标签,仅作记录。

块级元素

块级元素(block level element)
可容纳内联元素和块状元素,宽度和高度起作用
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示

宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制

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

可以包含某些块级元素和内联元素

标签名 标签作用 主要属性 说明
address 定义文档或文章的作者/拥有者的联系信息 类似于 acronym标签,H5不支持
article 定义文章 H5新增元素
aside 定义其所处内容之外的内容可用作文章的侧栏 H5新增
audio 声音内容 autoplay : 音频就绪后自动播放、controls : 向用户显示控件、loop : 结束后重新播放、muted : 静音播放、preload : 加载页面时加载,预备播放,与autoplay属性冲突、src : 音频地址 H5新增
blockquote 定义块引用
center 居中对齐块 不推荐使用
dir 目录列表 不推荐使用
div 定义节
dl 定义列表
fieldset 定义围绕表单中元素的边框
footer 定义文档或节的页脚 H5新增
form 定义供用户输入的 HTML 表单
hr 水平分隔线
h1 - h6 定义 HTML 标题
header 定义 section 或 page 的页眉 H5新增
iframe 定义内联框架
nav 定义导航链接 H5新增
noframes 不支持框架的用户的替代内容
noscript 不支持客户端脚本的用户的替代内容
section 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分
ol 排序列表
ul 非排序列表
p 段落
pre 格式化文本
table 表格

内联元素

内联元素(inline element)
只能容纳文本或其它内联元素,宽度和高度不起作用
内联元素允许其他内联元素与其位于同一行

宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变

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

只能内联元素,不能包含块级元素

标签名 作用 属性 说明
a 锚点定义超链接,用于从一张页面链接到另一张页面 href : 指向链接目标、target : 打开链接的方式、- _blank 打开新标签页、- _parent 覆盖父页面、- _self 当前标签页、- _top 覆盖当前页面、- framename
abbr 缩写通过对缩写进行标记,能够为浏览器、拼写检查和搜索引擎提供有用的信息 类似于 acronym标签,H5不支持
b 粗体字 不推荐
bdo 覆盖默认的文本方向,设置文字方向 dir : 定义文字方向、- ltr left to right、- rtl left to right、- auto
big 大号字体
br 换行
cite 定义引用
code 定义计算机代码
dfn 定义项目
em 强调文本
img 图片
input 定义输入控件
meter 度量 high : 被视作高的值的范围、low : 被视作低的值的范围、max : 范围的最大值、min : 范围的最小值、optimum : 度量的优化值、value : 度量的当前值 H5新增
progress 标示任务的进度(进程) max : 总值、value : 当前值 H5新增
span 常用内联容器,定义文本内区块

其他元素

由于有一些元素需要一些其他文件的支持,无法测试其分类

标签名 作用 属性 说明
area 带有可点击区域的图像映射
嵌套在 <map> 标签中 coords : 定义可点击区域的坐标、shape : 定义区域的相状、- default- rect 矩形(左上角右下角坐标)、- circle 圆形(圆心坐标半径长度)、- poly 多边形(多边形各项顶点的坐标值) <img> 标签中的 usemap 属性与 map 标签 name 属性相关联
applet 定义嵌入的 applet code : 指向java applet的文件名 使用object代替,H5不支持
base 为页面上的所有链接规定默认地址或默认目标
basefont 定义基准字体 没有浏览器支持,不推荐使用
canvas 定义图形,比如图表和其他图像 H5新增
bdi 设置一段文本,使其脱离其父元素的文本方向设置 dir : 定义文本方向、- ltr left to right、- rtl left to right、- auto H5新增,Firefox、Google支持
button 定义按钮 H5新增了一些属性
caption 定义表格标题 紧随 table 标签之后
datalist 定义选项列表
dialog 定义对话框或窗口
embed 定义嵌入的内容,比如插件 H5新增
figure 规定独立的流内容 H5新增
figcaption 定义 figure元素的标题 H5新增
frame frameset 中的一个特定的窗口(框架)
frameset 定义框架集
legend 定义 fieldset 元素的标题
map 定义图像映射
mark 定义有记号的文本 H5新增

相关文章

网友评论

    本文标题:前端编程之路一一HTML标签分类

    本文链接:https://www.haomeiwen.com/subject/lxqhgktx.html