zoukankan      html  css  js  c++  java
  • 让我们的标签语义化成为一种习惯好处多多

    使用标签语义化的理由可以有无数条: 

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

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

    P

    段落标记,知道了 p 作为段落,你就不会再使用<br />来换行了,而且不需要<br /> 来区分段落与段落。p中的文字会自动换行,而且换行的效果优于<br />。段落与段落之间的空隙也可以利用CSS来控制,很容易而且清晰的区分出段落与段落。  

    <abbr> 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式,IE6及以下版本浏览器不支持。 

    <address> 可定义一个地址(比如电子邮件地址)。您应当使用它来定义地址、签名或者文档的作者身份。 

    不论创建的文档是简短扼要还是冗长完整,都应该确保每个文档都附加了一个地址,这样做不仅为读者提供了反馈的渠道,还可以增加文档的可信度。  

    <area> 标签定义图像映射中的区域(注:图像映射指得是带有可点击区域的图像)。 

              area 元素总是嵌套在 <map> 标签中。

               注释:<img> 标签中的 usemap 属性与 map 元素 name 属性相关联,创建图像与映射之间的联系。

    如下例:

    <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />  
      
    <map name="planetmap" id="planetmap">  
      <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />  
      <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />  
      <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />  
    </map>  

    <b> 定义粗体,最好使用strong代替 

    <base> 定义页面中所有链接的基准 URL

     <blockquote> 标签定义块引用。<blockquote> 与 </blockquote> 之间的所有文本都会从常规文本中分离出来,经常会    在左、右两边进行缩进(增加外边距),而且有时会使用斜体。也就是说,块引用拥有它们自己的空间。

          提示:请使用 q 元素来标记短的引用。

    <blockquote cite="http://www.iteye.com">让语义化标签成为一种习惯</blockquote>

     <cite> 标签定义作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。

    <p>  
    <cite>《富春山居图》</cite>由黄公望始画于至正七年(1347),于至正十年完成。   
    </p> 

    pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。

    <code> 标签用于表示计算机源代码或者其他机器可以阅读的文本内容。

    <var> 标签表示变量的名称,或者由用户提供的值。

    <var> 标签是计算机文档中应用的另一个小窍门,这个标签经常与 <code> 和 <pre> 标签一起使用,用来显示计算机编程代码范例及类似方面的特定元素。

    用 <var> 标签标记的文本通常显示为斜体。

    <table>

    <caption> 定义表格标题

    <thead> 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。

    <th> 定义表格内的表头单元格。 <tr>定义表格中的行

    <tbody> 标签表格主体(正文)。该标签用于组合 HTML 表格的主体内容。

    <td> 标签定义 HTML 表格中的标准单元格。

    <tfoot> 标签定义表格的页脚(脚注或表注)。该标签用于组合 HTML 表格中的表注内容。 

    <sub><sup>上标和下标文本 

    <del> 定义删除文本

    <strong>重点强调  <em>强调 

    <optgroup> 标签定义选项组。

    optgroup 元素用于select组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

    <select>  
      <optgroup label="Swedish Cars">  
        <option value ="volvo">Volvo</option>  
        <option value ="saab">Saab</option>  
      </optgroup>  
      
      <optgroup label="German Cars">  
        <option value ="mercedes">Mercedes</option>  
        <option value ="audi">Audi</option>  
      </optgroup>  
    </select>  

    <fieldset> 标签将表单内容的一部分打包,生成一组相关表单的字段。

    当一组表单元素放到 <fieldset> 标签内时,浏览器会以特殊方式来显示它们,它们可能有特殊的边界、3D 效果,或者甚至可创建一个子表单来处理这些元素。

    <form>  
      <fieldset>  
        <legend>health information</legend>  
        height: <input type="text" />  
        weight: <input type="text" />  
      </fieldset>  
    </form>  

    <i>斜体文本,建议使用font-style

    好了,就写到这儿吧。

  • 相关阅读:
    H5+CSS3知识点
    三维立体
    HTML5的Audio标签打造WEB音频播放器
    video.js-H5视频播放库
    js事件(Event)知识整理
    高端大气上档次的fullPage.js
    javascript的正则表达式学习
    轮播图—运动框架来实现(拥有透明度效果)
    Android FM模块学习之四源码分析(3)
    Android FM模块学习之四源码学习(2)
  • 原文地址:https://www.cnblogs.com/helenR/p/code_xiguan_all.html
Copyright © 2011-2022 走看看