乐趣区

语义化标签以及常用标签

jiezi

_版权声明：本文为博主原创文章，转载请注明出处。_#1

一开始接触到页面这个东西，毫无疑问大家首页看到的是 html 这玩意。我对 html 有了初步的认识是在我大二上数据结构这门课程的时候老师讲课之余就给我们讲讲深度学习，网页设计之类的简单知识。自从那以后就断断续续在 W3school 以及 MDN 学习它，以下内容是对之前的学习做个较为简单的总结。????

  1. 常用标签

html 标签又称为 html 元素，html 元素分为行内 (内联) 元素、行内块级元素以及块级元素。

行内元素的特点

  • 这些行内元素本身的属性 display:inline，而行内块级元素则为 display:inline-block;
  • 和其他行内元素从左到右在一行显示，给它设置的宽高值无效，但可以设置内外边距的值(左右有效，上下无效)
  • 行内元素的宽高是由本身内容的大小决定（文字、图片等）
  • 行内元素只能容纳文本或者其他内联元素，不要在行内元素嵌套块级元素

常见的行内元素
“span”标签，通常用于放一些文字和 icon 图标之类作为内敛容器等
”script“标签，常用于引入外部文件，嵌入代码等
“a”标签，常用于超链接，锚点等方面
“img”标签，用于引入外部图像文件
“br”标签用于换行
“input”标签，用于表单控件
“button” 标签，页面按钮
”label“标签，通常结合 input 来使用，相当命名标签
“select”标签，选项标签
”textarea“标签，文本区域
“i”标签，呈现斜体文本，此外许多框架用它制作页面小图标等
“b” 标签，加粗文本，新的标准出来不推荐使用
“em”标签，用于将文本进行强调
”strong“标签，用于将文本进行强调加粗
“big”标签，大字体文本
”small“标签，小字体文本

常见的行内块级元素

行内块级元素的特征

  1. 不自动换行, 如果超出父元素(不为行内元素)width 则换行
  2. 可以设置宽高
  3. 在一行内从左到右依次排列

在 HTML5 中，开发者可以自定义标签，在任意定义标签中，设置 display:block 属性即可变为块级元素，display:inline 就为行内元素，display:inline-block 则为行内块级。绝大多数标签都是可以互相转换的。

常见的块级元素
块级元素的特征

  1. 可以设置宽高，内外边距等
  2. 可以内嵌其他元素（不管是块级的内联的还是行内块级的元素）
  3. 独占每个块级元素默认一行，可以自动换行，默认排列方式为从上至下

div – 常用块级容易，也是 css layout 的主要标签
p – 段落标签主要用于文章段落，多行文字方面
ul – 无序列表
ol – 有序列表
form – 交互表单
h1~h6 标题标签
hr – 水平分割线
dl – 定义列表
address – 地址
blockquote – 块引用
center – 举中对齐块，等等其他不常用的标签
HTML5 中新增常见的标签以及其语义化(以下顺序不分先后)
header ???? 页眉（网页（部分区域）的头部 顶部 导航区域等等）块级元素
nav ???? 导航链接部分 块级元素
section ???? 标签定义网页中的区域（部分）。比如章节、页眉、页脚或文档中的其他部分。块级元素
article ???? 内容是引用其他地方的。一个区域中的，另外一部分内容；块级元素
aside ???? 和 article 是一起使用；是辅助 article 区域的内容。也可以理解为整个网页的 辅助区域
footer ???? 页脚（网页（部分区域）的底部 | 版权区域等等）块级元素
audio ???? 播放声音文件，比如音乐或其它音频流 行内元素
video ???? 播放视频文件，比如电影或其它视频流 行内元素
canvas ???? 定义图形，比如图表和其他图像 有着默认宽高 行内元素
hgroup 给标题分组，为标题或者子标题进行分组 块级元素
figure 对多个元素进行组合 块级元素
figcaption 定义 figure 元素的标题 块级元素
output 定义输出的一些类型。
details 定义元素的细节
command 定义命令按钮
summary 为 details 元素定义可见的标题
mark 主要用来在视觉上向用户呈现那些需要突出的文字 高亮字体
meter ???? 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
progress 定义任何类型的任务的进度 标签运行中的进程。可以使用 标签来显示 JavaScript 中耗费时间的函数的进程
time ???? 定义日期或时间，或者两者 行内元素
datalist ???? 定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表 行内元素
embed 定义嵌入的内容，比如插件。用来插入各种多媒体，格式可以是 MIDI、MP3 等 行内元素 有默认宽高
keygen 定义生成密钥
source ???? 为媒介元素（比如 video 和 audio）指定多个播放格式与编码，浏览器会自动选择第一个可以识别的格式 行内元素

查看全部标签或者进一步了解这些标签的属性以及如何请移步☞http://www.w3school.com.cn/ta…

退出移动版