• 标签语义化

Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。

如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可以认出哪些是页面重要内容,予以较高的权值。h1~h6这几个标签在搜索引擎中权值非常高,用它们作页面标题就是一个简单的SEO,知道了这个你还使用DIV+CSS来写标题吗?(不是说直接用h1~h6标签做标题,要这几个标签+CSS)

回到开始时的疑惑,这时候header、footer、sidebar、article等标签的出现就不是那么让人困惑了,HTML5的一大革新就是语义化标签的完善

使用这样结构写出的网页其语义显而易见。在有些面试的时候会问到类似strong 和font-weight: bold有什么区别,这时候就可以从语义化的角度解答了。

1.<Hx>

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

2.<p>

段落标记,知道了<p>作为段落,你就不会再使用<br/>来换行了,而且不需要<br/><br/>来区分段落与段落。<p></p>中的文字会自动换行,而且换行的效果优于<br>。

3.<b>、<em>和<strong>

<b>标签语义为“加粗

<em>标签语义为“强调”

<strong>标签语义为“更强烈的强调” 而且em 默认用斜体表示,strong 用粗体表示。

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

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

<ul>标签语义为定义无序列表

<ol>标签语义为定义有序列表

<li>标签语义为定义列表项目

因此当涉及到列表的项目,应该用<ul><li>或<ol><li>(或者是<dl><dt><dd>来布局),而不是用<table>或<p>甚至<span>。

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

<dl>标签语义为定义了定义列表

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

<dd>标签语义为定义列表中定义条目的定义部分

所以,当我们用带标题的列表时,即可采用<dl><dt><dd>自定义列表实现

6.<span>标签

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

(另外应当区分<span>和<div>的区别,<div>是块级元素(block level),而<span>是行内元素,前者的内容会自动换行,而后者前后不会自动换行

7.<q>、 <blockquote>、<cite>

<q>标签的语义为用来标记简短的单行引用,Web浏览器会自动识别在<q>之间的内容

<blockquote>标签的语义为用来标记那些一段或者好几段的长篇引用

<cite>标签既可以与<q> 一起用,也可以与<blockquote>一起用,用来提供引用内容的来源地址。

看一个例子

1 <p> <cite>孔子</cite>曰:<q>有朋自远方来,不亦乐乎</q>.
2 </p>
1 <blockquote cite="http://www.w3cn.org/">
2 <p>“我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。”
3 </p>
4 </blockquote>

8.<table>、<th>、<td>、<caption>

<table>标签的语义的为定义 HTML 表格

<th>标签的语义为定义表格内的表头单元格

<caption>标签的语义为定义表格标题

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

<button>标签的语义为定义一个按钮

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

<textarea>标签的语义为定义多行的文本输入控件

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

10.<label> 标签

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

11.<ins>, <del>

<ins>标签的语义为定义已经被插入文档中的文本。

<del>标签的语义为定义文档中已被删除的文本。

<ins>与 <del> 一同使用,来描述文档中的更新和修正。知道del,就不要再用<s>做删除线了,用del显然更具有语义化。而且del还带有cite和datetime来表明删除的原因以及删除的时间。ins是表示插入,也有这样的属性。

HTML标签语义化的更多相关文章

  1. 标签语义化之常用HTML标签

    一.布局的理解误区 网络上流行管新型的布局方式叫“DIV+CSS”,其实是一个错误的理解,导致了很多人过度依赖与滥用DIV标签, HTML提供了我们一共七八十个标签,其中常用的有三十个左右,DIV不过 ...

  2. 【转载】html标签语义化

    Html语义化标签-语义化你的HTML标签和属性   1 语义化你的HTML标签和属性 1.1 <Hx> 1.2 <p> 1.3 <ul>.<ol>.& ...

  3. ASP.NET动态网站制作(5)-- 标签语义化及知识补充

    前言:这节课主要是讲标签语义化及一些知识点的补充 内容:参考老师的博文:http://www.cnblogs.com/ruanmou/p/4821894.html

  4. 谈CSS布局中HTML标签语义化

    很多人都在做前端,当然这里包括很多新手,也许在新手的想法就是在做布局的时候不要用font标签之类的就算是web标准了,这样一来,造成如今网上“div泛滥”,一看源文件,霍,除了div没其他标签了. 这 ...

  5. 基础复习之HTML (doctype、标签语义化)

    这段时间找实习看的眼花缭乱的,然后也被拒得落花流水,啊哈哈-还是写博客好玩儿-嘿嘿,下面正题 一.doctype 标准模式 (Full Standards Mode) 接近标准模式 (Almost S ...

  6. web标签语义化的理解_web语义化是什么意思

    web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...

  7. 灵魂代码分享HTML元素标签语义化及使用场景实用到爆

    灵魂三问: 标签语义化是什么?为什么要标签语义化?标签语义化使用场景有哪些? 下面让我们跟着这三个问题来展开一下本文的内容. 一.标签语义化是什么? 标签语义化就是让元素标签做适当的事情.例如 p 标 ...

  8. HTML5--(1)兼容前缀+结构性标签+语义化标签

    一.兼容前缀+兼容写法 兼容前缀 1.HTML5有部分类容兼容到IE9,IE8及以下完全不兼容的内容不再考虑. 2.部分内容需要加兼容前缀 a)     -webkit- 兼容谷歌 b)     -m ...

  9. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

随机推荐

  1. 理解 __declspec(dllexport)和__declspec(dllimport)

    1.解决的问题: 考虑下面的需求,使用一个方法,一个是提供者,一个是使用者,二者之间的接口是头文件.头文件中声明了方法,在提供者那里方法应该被声明为__declspec(dllexport),在使用者 ...

  2. Codeforces Gym 100571A A. Cursed Query 离线

    A. Cursed QueryTime Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100571/problem ...

  3. thinkphp分配数组

    TestAction.class.php 的edit方法中 $this->assign('list',array('one'=>'a','two'=>'b')); 后,在edit.h ...

  4. ${var}变量替换

    ${age},${name} 给定一个上下文 Map<String,String> context 使用上下文替换变量private static final Pattern VAR_PA ...

  5. iOS开发——新特性篇&swift新特性(__nullable和__nonnull)

    swift新特性(__nullable和__nonnull) 最近在看老师写代码的时候经常遇到两个陌生的关键字,但是当我在我的电脑上敲得时候就是敲不出,后来才知道这是为了swift与OC混编的时候产生 ...

  6. android:layout_weight总有你不知道的用法.

    都知道weight是权重的意思. 在布局中起到非常重要的作用. 但是这玩意不能嵌套使用, 而且只能使用在LinearLayout中. 下面说说它的几种用法(以下例子全为横排 注意android:lay ...

  7. BEA WebLogic Server 10 查看和配置日志

    查看和配置日志 WebLogic Server 内的每个子系统都可生成日志消息来传达其状态.例如,当启动 WebLogic Server 实例时,安全子系统会输出消息以报告其初始化状态.为了记录其子系 ...

  8. [转] 详解http和https的作用与区别

    PS: https就是http和TCP之间有一层SSL层,这一层的实际作用是防止钓鱼和加密.防止钓鱼通过网站的证书,网站必须有CA证书,证书类似于一个解密的签名.另外是加密,加密需要一个密钥交换算法, ...

  9. oracle 排序

    1.ORDER BY 中关于NULL的处理 缺省处理,Oracle在Order by 时认为null是最大值,所以如果是ASC升序则排在最后,DESC降序则排在最前. 当然,你也可以使用nulls f ...

  10. Oracle 数据泵导入导出总结

    Oracle 数据泵(IMPDP/EXPDP)导入导出总结 Oracle数据泵导入导出是日常工作中常用的基本技术之一,它相对传统的逻辑导入导出要高效,这种特性更适合数据库对象数量巨大的情形,因为我日常 ...