zoukankan      html  css  js  c++  java
  • HTML标签语义化

    • 标签语义化

    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>&#8220;我们大部分人都有深刻体验,每当主流浏览器版本的升级,我们刚建立的网站就可能变得过时,我们就需要升级或者重新建造一遍网站。例如1996-1999年典型的"浏览器大战",为了兼容 Netscape 和 IE,网站不得不为这两种浏览器写不同的代码。同样的,每当新的网络技术和交互设备的出现,我们也需要制作一个新版本来支持这种新技术或新设备,例如支持手机上网的 WAP 技术。类似的问题举不胜举:网站代码臃肿、繁杂浪费了我们大量的带宽;针对某种浏览器的 DHTML 特效,屏蔽了部分潜在的客户;不易用的代码,残障人士无法浏览网站等等。这是一种恶性循环,是一种巨大的浪费。&#8221;
    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是表示插入,也有这样的属性。

  • 相关阅读:
    Java实现各种内部排序算法
    Java实现堆排序(大根堆)
    Java对象的序列化和反序列化
    Java实现链式存储的二叉查找树(递归方法)
    337. House Robber III(包含I和II)
    318. Maximum Product of Word Lengths
    114. Flatten Binary Tree to Linked List
    106. Construct Binary Tree from Inorder and Postorder Traversal
    105. Construct Binary Tree from Preorder and Inorder Traversal
    96. Unique Binary Search Trees(I 和 II)
  • 原文地址:https://www.cnblogs.com/little-jelly/p/5359486.html
Copyright © 2011-2022 走看看