首页
Javascript
Html
Css
Node.js
Electron
移动开发
工具类
服务端
浏览器相关
前端收藏
其他

语义化HTML-语义化你的HTML标签或属性

2012年10月21日 发布 阅读(456) 作者:懒炖

什么是语义化标签?

HTML赋予了每个标签以不同的语义。高质量的HTML代码,要求我们在遵循HTML语法的同时,也应该遵循HTML的标签语义,如:

div 语义:Division(分隔)

span 语义:Span(范围)

ol 语义:Ordered List(排序列表)

ul 语义:Unordered List(不排序列表)

li 语义:List Item(列表项目)

HTML常用标签语义:

<Hx>

<h1>、<h2>、<h3>、<h4>、<h5>、<h6>,作为标题使用,并且依据重要性递减。<h1>是最高的等级。

由于一些浏览器会默认地把 <h1> 元素显示为很大的字体,因此会有一些 web 开发者使用 <h2> 元素代替 <h1> 元素来显示最上层的标题。这样做不会对读者产生影响,但会使那些试图“理解网页结构

”的搜索引擎和其他软件感到迷惑。

请确保把 <h1> 用于最顶层的标题,<h2> 和 <h3> 用于较低的层级。
从语义上讲,它们应该适用于所有标题文字。

但这里会出现一个语义上的分歧。h1究竟该理解为一级标题呢还是理解为1号字体大小的标题。我通常理解为一级标题,一级标题下再有小标题就用h2。但是事实上回顾HTML设计之初,h1-h6后面的数字

更多的被理解为控制标题文字大小的。用h3或许只是为了使用三号大小的字体,而并非它就是三级标题。否则一级标题全用h1,个个都是斗大的字,又不得不用CSS来控制字号,感觉很累赘。所以,这是一个待商榷的问题。

例如:

  1. <h1>标题1</h1>
  2. <h2>标题2</h2>

<b>标签与<strong>标签

<b>:标签语义为“加粗

<strong>:标签语义为“强调

当我们知道了<b>标签和<strong>标签的语义时,做SEO时就好决定用哪个来强调重要的关键字了,强调用<strong>,纯粹加粗用<b>

<ul>标签、<ol>标签、<li>标签

<ul>语义: 定义无序列表

<ol>语义:定义有序列表

<li>语义:定义列表项目

所以涉及到列表的项目,应该用<ul><li>或<ol><li>来布局,而不是 用<table>或<p>甚至<span>,当然也可以 用<dl><dt><dd>

应该要补充的是,别忘了li里面还可以再用ul或ol,形成第二级列表。

<dl>标签、<dt>标签、<dd>标签

<dl>语义:定义了定义列表

<dt>语义:定义了定义列表中的项目(即术语部分)

<dd>语义:定义列表中定义条目的定义部分

一些带标题的列表可采用<dl><dt><dd>自定义列表

<span>标签

<span>语义:被用来组合文档中的行内元素

列如:

  1. p span { color:#ff0000; font-weight:bold; }
  2. <p>
  3. <span>提示:</span>:这是提示内容
  4. </p>

可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。

<table>、<th>、<td>、<caption>

<table>语义: 定义 HTML 表格

<th>语义: 定义表格内的表头单元格

<caption>语义: 定义表格标题

<button>标签、<input>标签、<textarea>标签

<button> 标签定义一个按钮

<input> 标签用于搜集用户信息,根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

<button> 控件 与 <input type=”button”> 相比,提供了更为强大的功能和更丰富的内容。<button> 与 </button> 标签之间的所有内容都是按钮的内容,其中包括任何可接受的正文内容,比如文本或

多媒体内容。

<textarea>语义:定义多行的文本输入控件

<label> 标签

<label>语义: 为 input 元素定义标注(标记)

<center>,<font>不建议使用

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处

评论

  •  
  • html之”aria-*“标签

    ARIA是W3C的一个规范。其全称是’Accessible Rich Internet Applications’,是WAI-ARIA的一部分(它是W3C的Web无障碍推进组织(Web Accessibility Initiative / WAI)在2014年3月20日发布的可访问富互联网应用实现指南)。 WAI-ARIA是一个为残疾人士等提供无障碍访问动态、可交互Web内容的技术规范。主要针对的是视觉缺陷,失聪,行动不便的残疾人以及假装残疾的测试人员。尤其像盲人,眼睛看不到,其浏览网页则需要借助辅助设备,如屏幕阅读器,屏幕阅读机可以大声朗读或者输出盲文。

    发布:2019-01-30 阅读(298)

  • ECMA-262-5详述 第一章. 属性和属性描述符

    这一章专门讨论了ECMA-262-5 规范的新概念之一 — 属性特性及其处理机制 — 属性描述符。 当我们说“一个对象有一些属性”的时候,通常指的是属性名和属性值之间的关联关系。但是,正如在ES3系列文章中分析的那样,一个属性不仅仅是一个字符串名,它还包括一系列特性—比如我们在ES3系列文章中已经讨论过的{ReadOnly},{DontEnum}等。因此从这个观点来看,一个属性本身就是一个对象

    发布:2018-10-26 阅读(213)

  • HTML5 对history新增的API:pushState,replaceState,state,popstate

    基于MVC设计模式和ajax技术实现单页面结构时,如果实现前进后退功能呢?这在以前我们可以采用hash方法,但终究不是很完美,我们在访问facebook或google的一些页面时会发现,页面不仅实现了局部刷新,而且页面URL也发生了变化。这就是HTML5对history的贡献.

    发布:2014-04-22 阅读(408)

  • javascript Arguments对象之length、callee属性

    arguments是调用对象的一个属性,它与形参及局部变量是一样的,它实际上是调用了一个Arguments对象,Arguments对象与数组相似,但它又不是数组,因为它不具备数组的一些常用方法,如push,sort,shift等等。Arguments对象有两个属性:

    发布:2013-09-30 阅读(159)

  • 禁止<textarea>标签右下角拉动

    HTML标签textarea在大部分浏览器中只要指定行(rows)和列(cols)属性,就可以规定 textarea 的尺寸,大小就不会改变,不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同,可以拖动右下角图标改变大小

    发布:2012-11-14 阅读(291)