HTML标签语义化小结

HTML语义化是个面试过程中喜闻乐见的问题,问得多了,也是时候要作个系统的总结,这样才能形成知识网络。

所谓标签语义化,其实就是按照标准,给内容用上一个最恰当最合适的标签,这样一来,就算样式表没加载,也能正常浏览文章。对了,说起这个,我想起我手机在浏览部分网站的时候会有个阅读模式的东西,就是把样式去掉,让你更专注于文本,所以如果你的语义化做得不好,在这种阅读模式下是会“死人”的,哈哈哈。

  每个HTML标签都有自己的意义,也有自己的适用范围,但往往会被我们忽略或者滥用,比如,div标签,这个标签常用来布局,但是它其实是一个无意义的标签,并不利于后期维护。

  好处:

  1. 去掉样式或者样式丢失时页面结构依然清晰分明
  2. 移动设备能够更加完美的展示你的网页
  3. 阅读器会根据标签的语义自动解析,呈现更容易阅读的内容形式(无障碍阅读)
  4. 搜索引擎会根据标签的语义确定上下文和权重问题(有利于SEO)
  5. 便于后期的开发以及维护,团队合作效率提高

  既然好处多多,那么是需要好好记记的,下面这个表格来源于网络:

标签 描述
<!–…–> 定义注释。
<!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 中不支持。定义预格式文本。
时间: 2024-12-09 08:31:06

HTML标签语义化小结的相关文章

HTML标签语义化——使用b标签,还是strong标签

HTML标签语义化,相关的内容网上有很多.大家可以去学习一下,看一下你所使用的标签是否具有其真正要表达的意义,标签你用对了吗?今天要介绍的内容是使用b标签,还是strong标签,翻译自http://www.think-ink.net/html/bold.htm. There is a difference between using what are referred to as logical tags and tags that primarily affect visual layout.

web标签语义化

一.web标签的含义:web标签的语义化是指用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解.二.html布局的三种方式:1.自然布局.没有任何修饰的布局是自动靠左的.2.流动布局上面讲的float:left的情况.3.定位布局 相对定位和绝对定位都是相对于父div标签的.  相对------以这个元素的本来应该在的位置为参照点  绝对--以父div标签的原点(左上角)为参照点.a.由于外层是position:relative,所以里层是absolute的话,则

谈CSS布局中HTML标签语义化

很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这里,我可以很负责的告诉大家,这不叫web标准,这叫“div+css”.名副其实的“div+css”.也许有人会说,我用“div+css”做出来的页面完全表达出设计图的意图,浏览器都兼容,没有任何问题.的确,你这样做出来的页面看起来是没任何问题,注意,这里说的是“看起来没任何问题”,仅此而已. 人是可

html标签语义化

1.强调 <strong> 标签和 <em> 标签一样,用于强调文本,但strong强调的程度更强一些. em强调在浏览器解析下默认为斜体,虽然<i>标签也是斜体的效果,但是em才具有语义化. 2.引用 用<q>标签的真正关键点不是它的默认样式双引号,是它的语义:引用别人的话(短文本的引用). <blockquote>的作用也是引用别人的文本.但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签.浏览器对<blockq

标签语义化

标签的语义化,是指在看到标签名的情况下基本能理解它所代表的含义,比较直观. 语义化的好处有: 对搜索引擎友好,有良好的页面结构和语义你的内容能够孜然被搜索引擎捕捉到,也利用网站的推广:语义化标签有助于定义遵从标准,便于团队之间的合作与开发.

html学习之——标签语义化

html语义化在前端学习中会经常出现,下面对html语义化做个总结 一.什么是HTML语义化 HTML语义化总的来说就是用正确的标签做正确的事.围绕着一些标签展开,如h1-h6.把适当的标签用在合适的地方.是页面结构更加的清晰. 二.html语义化有什么作用 1.使用html语义化,能使页面结构更清晰,便于解析. 2.有利于SEO.搜索引擎爬虫依赖于html标签来确定上下文和关键字权重. 3.使用html语义化,在没有css样式的时候页面也能正确清晰的呈现 4.有利于各种设备的解析,如盲人阅读器

李洪强和你一起学习前端之(2)表格、表单、标签语义化

大家早上好!新的一天开始了,学如逆水行舟,不进则退,一起加油吧! 在学习的过程中有任何问题想与我交流的,加我QQ: 990625403 好了,让我们开始今天的学习吧! 温故而知新 1 复习昨天的知识 1.1 单标签 <!--文本内容--> 注释标签  Ctrl +/ <br> 换行标签 <hr> 横线标签 1.2 双标签 <p></p> 段落标签 <hn></hn> n的取值是1-6  标题标签 <font size

HTML标签语义化对照表

标签名 英文全拼 中文翻译 a anchor 锚 abbr abbreviation 缩写词 acronym acronym 取首字母的缩写词 address address 地址 b bold 粗体 big big 变大 blockquote block   quotation 区块引用于 br break 换行 caption caption 标题 center center 居中 dd definition   description 定义描述 del delete 删除 div divi

HTML标签的语义化

标签的语义化就是指标签的含义.标签为什么要使用语义化的定义呢?是为了使我们的网站更好的被搜索引擎收录. 下面是一个例子 <table> <tr> <td>单价</td> <td>数量</td> </tr> <tr> <td>5.0</td> <td>1</td> </tr> </table> 上面的代码没有使用语义化,下面是使用语义化的代码