• 标签语义化

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. android开发之Fragment加载到一个Activity中

    Fragments 是android3.0以后添加的.主要是为了方便android平板端的开发.方便适应不同大小的屏幕.此代码是为了最简单的Fragment的使用,往一个Activity中添加Frag ...

  2. 结构体定义 typedef struct 用法详解和用法小结

    typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请node 的变量时,需要这样写,stru ...

  3. 网络IPC:套接字之套接字选项

    套接字机制提供两个套接字选项接口来控制套接字的行为.一个接口用来设置选项,另一个接口允许查询一个选项的状态.可以获取或设置的三种选项: (1)通用选项,工作在所有套接字类型上. (2)在套接字层次管理 ...

  4. apache vhost 访问权限配置

    apache的<directory>     </directory>语句,查考如下: 如何访问根目录下的目录http://192.168.1.12/test/ 第一.缺省ap ...

  5. 理解php Hash函数,增强密码安全

    1.声明 密码学是一个复杂的话题,我也不是这方面的专家.许多高校和研究机构在这方面都有长期的研究.在这篇文章里,我希望尽量使用简单易懂的方式向你展示一种安全存储Web程序密码的方法. 2.“Hash” ...

  6. 嵌入式设备上的 Linux 系统开发

    转载:http://www.ibm.com/developerworks/cn/linux/embed/embdev/index.html   如果您刚接触嵌入式开发,那么大量可用的引导装载程序(bo ...

  7. c语言函数传递数组

    1.传递数组,打印不出来 #include <stdio.h> void solve() { printf(]); } int main() { int i; ;i<n;i++) { ...

  8. Sql语句中的truncate,delete,drop的区别

    相同点: 1.truncate和不带where子句的delete.以及drop都会删除表内的数据. 不同点: 1. truncate 和 delete 只删除数据不删除表的结构(定义) drop 语句 ...

  9. Honda HDS IMMO PCM Code calculator Free Download

    HDS IMMO PCM Code calculator software for Honda vehicle models is free download available in Eobd2.f ...

  10. Android(java)学习笔记109:通过反射获取成员变量和成员方法并且使用

    一.反射获取成员变量并且使用: 1.获取字节码文件对象:         Class c = Class.forName("cn.itcast_01.Person"); 2.使用无 ...