文档章节

标签语义化是对网页一种最好的表达

欢乐小金鱼
 欢乐小金鱼
发布于 2015/03/02 22:06
字数 1667
阅读 26
收藏 0

        前端时间看了一本书叫:《易读代码的艺术》,这本书写的很好,中心思想就是:你的代码别人读起来更快理解更易懂就是好的代码(代码的写法应当使别人理解它所需的时间最小化),我觉得这个思想和标签语义化的宗旨是相同的。那么标签的语义化是怎么做到的呢?

        学习html5,知道html5中增加了很多标签,这些标签是用来做什么的呢?可以说是对html中某个模块更加清晰的表达,选择一个最恰当最合适的标签,这样无论是谁都能看懂这块要表达什么,其实这就像是起class的名字一样,比如导航,我们习惯性的给起个名字class="nav",那么在html5中呢,有一个<nav>标签,不给它添加任何class我们也知道它表达的是导航,如此便更加方便了。

        那么是不是只有html5的标签语义化了呢,其实不然,html中很多标签都有自己的语义都有自己的适用范围,但往往会被我们忽略或者被我们滥用,比如我,我就经常习惯性的一直用div,在一个小的项目中还不以为然,在大型的项目中,div几千个几万个,其实div只是一个表层而已,非常不利于后期维护。所以这么多的标签,我们要大胆的使用,要恰当的使用。

标签语义化的好处

让你使用标签语义化的理由可以有无数条:

  1. 去掉样式或者样式丢失时页面结构依然清晰分明

  2. 移动设备能够更加完美的展示你的网页(移动设备对css的支持较弱)

  3. 阅读器会根据标签的语义自动

  4. 解析,呈现更容易阅读的内容形式(无障碍阅读)

  5. 搜索引擎会根据标签的语义确定上下文和权重问题

  6. 便于后期的开发以及维护,团队合作效率提高

  1. ……

HTML标签语义汇总

为了更快更好的运用标签语义化,下面的表单列出了所有的HTML标签以及标签的描述。以下列表按字母顺序排列,其中 new :为 HTML5 中的新标签。


标签 描述
<!–…–> 定义注释。
<!DOCTYPE> 定义文档类型。
<a> 定义超链接。
<abbr> 定义缩写。
<acronym> HTML 5 中不支持。定义首字母缩写。
<address> 定义地址元素。
<applet> HTML 5 中不支持。定义 applet。
<area> 定义图像映射中的区域。
<article> 定义 article。
<aside> 定义页面内容之外的内容。
<audio> 定义声音内容。
<b> 定义粗体文本。
<base> 定义页面中所有链接的基准 URL。
<basefont> HTML 5 中不支持。请使用 CSS 代替。
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
<bdo> 定义文本显示的方向。
<big> HTML 5 中不支持。定义大号文本。
<blockquote> 定义长的引用。
<body> 定义 body 元素。
<br> 插入换行符。
<button> 定义按钮。
<canvas> 定义图形。
<caption> 定义表格标题。
<center> HTML 5 中不支持。定义居中的文本。
<cite> 定义引用。
<code> 定义计算机代码文本。
<col> 定义表格列的属性。
<colgroup> 定义表格列的分组。
<command> 定义命令按钮。
<datalist> 定义下拉列表。
<dd> 定义定义的描述。
<del> 定义删除文本。
<details> 定义元素的细节。
<dfn> 定义定义项目。
<dir> HTML 5 中不支持。定义目录列表。
<div> 定义文档中的一个部分。
<dl> 定义定义列表。
<dt> 定义定义的项目。
<em> 定义强调文本。
<embed> 定义外部交互内容或插件。
<fieldset> 定义 fieldset。
<figcaption> 定义 figure 元素的标题。
<figure> 定义媒介内容的分组,以及它们的标题。
<font> HTML 5 中不支持。
<footer> 定义 section 或 page 的页脚。
<form> 定义表单。
<frame> HTML 5 中不支持。定义子窗口(框架)。
<frameset> HTML 5 中不支持。定义框架的集。
<h1> to <h6> 定义标题 1 到标题 6。
<head> 定义关于文档的信息。
<header> 定义 section 或 page 的页眉。
<hgroup> 定义有关文档中的 section 的信息。
<hr> 定义水平线。
<html> 定义 html 文档。
<i> 定义斜体文本。
<iframe> 定义行内的子窗口(框架)。
<img> 定义图像。
<input> 定义输入域。
<ins> 定义插入文本。
<keygen> 定义生成密钥。
<isindex> HTML 5 中不支持。定义单行的输入域。
<kbd> 定义键盘文本。
<label> 定义表单控件的标注。
<legend> 定义 fieldset 中的标题。
<li> 定义列表的项目。
<link> 定义资源引用。
<map> 定义图像映射。
<mark> 定义有记号的文本。
<menu> 定义菜单列表。
<meta> 定义元信息。
<meter> 定义预定义范围内的度量。
<nav> 定义导航链接。
<noframes> HTML 5 中不支持。定义 noframe 部分。
<noscript> 定义 noscript 部分。
<object> 定义嵌入对象。
<ol> 定义有序列表。
<optgroup> 定义选项组。
<option> 定义下拉列表中的选项。
<output> 定义输出的一些类型。
<p> 定义段落。
<param> 为对象定义参数。
<pre> 定义预格式化文本。
<progress> 定义任何类型的任务的进度。
<q> 定义短的引用。
<rp> 定义若浏览器不支持 ruby 元素显示的内容。
<rt> 定义 ruby 注释的解释。
<ruby> 定义 ruby 注释。
<s> HTML 5 中不支持。定义加删除线的文本。
<samp> 定义样本计算机代码。
<script> 定义脚本。
<section> 定义 section。
<select> 定义可选列表。
<small> 将旁注 (side comments) 呈现为小型文本。
<source> 定义媒介源。
<span> 定义文档中的 section。
<strike> HTML 5 中不支持。定义加删除线的文本。
<strong> 定义强调文本。
<style> 定义样式定义。
<sub> 定义下标文本。
<summary> 定义 details 元素的标题。
<sup> 定义上标文本。
<table> 定义表格。
<tbody> 定义表格的主体。
<td> 定义表格单元。
<textarea> 定义 textarea。
<tfoot> 定义表格的脚注。
<th> 定义表头。
<thead> 定义表头。
<time> 定义日期/时间。
<title> 定义文档的标题。
<tr> 定义表格行。
<track> 定义用在媒体播放器中的文本轨道。
<tt> HTML 5 中不支持。定义打字机文本。
<u> HTML 5 中不支持。定义下划线文本。
<ul> 定义无序列表。
<var> 定义变量。
<video> 定义视频。
<xmp> HTML 5 中不支持。定义预格式文本。

© 著作权归作者所有

欢乐小金鱼
粉丝 9
博文 14
码字总数 6977
作品 0
海淀
程序员
私信 提问
重学前端学习笔记(四)--div和span不是够用吗?

笔记说明 重学前端是程劭非(winter)【前手机淘宝前端负责人】在极客时间开的一个专栏,每天10分钟,重构你的前端知识体系,笔者主要整理学习过程的一些要点笔记以及感悟,完整的可以加入w...

凯小默
04/27
0
0
Web前端最全面试宝典- Html篇

HTML 1.对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访...

颜卿今天Coding了吗
2017/03/04
0
0
每日 30 秒 ⏱ 语义化与无障碍树

简介 无障碍、语义化、a11y、Accessibility、无障碍树 对于语义化出发点不一样观点也不一样: 角度:原有的 heading、a、img 等标签加上新带来的标签,配合良好的结构和语义内容非常有帮助。...

zhangxiangliang
04/15
0
0
Web前端相关段子

Web标准:结构、样式和行为分离 使用语义化标签 0)标签的语义:使用有良好语义的标签,能够很好地实现自我解释,方便搜索引擎理解网页结构,抓取重要内容。去样式后也会根据浏览器的默认样式...

v1-alpha
2015/12/22
38
0
每日 30 秒 ⏱ HTML Cosplay

简介 无障碍、WAI、ARIA、a11y、Accessibility、框架选择 如何向 介绍兔子长什么样?有的同学可能会说: 毛茸茸的长耳朵。 短短圆圆的小尾巴。 红红的眼睛。 那如何向 介绍网页长什么样?有看...

zhangxiangliang
04/17
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
5
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
5
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
15
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部