这样去写你的 HTML 让你的编码更好的适配性

例如那些必须读屏手机软件的客户。做为1个前端开发，大家又如何会忍心呢。以前就1直想写这样的1篇文章内容，共享1下怎样去造就1个可浏览性更好的网页页面。今日的方案里有1条把 HTML Tag 和 WCAG规范融合起来。我强烈推荐你这样去写你的 HTML，让一些人的日常生活能够更非常容易。

今日想共享的是怎样去应用大家的 HTML Tag, 把 WCAG 的规范和词义网的总体目标开展编码上的反映：

1. 文本文档申明：<!Doctype>

实际上这跟 WCAG 压根上连不上甚么立即关联，但以便1个适配性更好，非常是向后适配的网页页面，我强烈推荐你这样写：

<!Doctype html>

2. 连接：<a>

互联网技术的联基本上能够说是用 <a> 来完成的，做为1个网页页面最多见的标识。大家应当怎样对待呢？

  1. 为重要连接加上 accesskey
  2. 除非万不可已，不必去掉 focus 时虚线框 
<a href="" title="" accesskey="M" rel="" hidefocus>Link</a>

3. 缩写: <abbr>

针对用 HTML Tag 的正确应用，也是是非非常关键的，这有益于读屏手机软件应用者针对网页页面构造的了解。非常是在 H1,H2,H3 等这些标识的应用，乱用十分非常容易导致构造难以相信。自然，应用1般的标识，再运用 CSS 来使视觉效果上产生比照这也是平常人能辨识的。但读屏手机软件客户呢。自然，这里只是顺便提到必须留意网页页面标识的应用方式，而 abbr 最关键的应当是应当加上1个 title 特性对缩写开展叙述。例如：

<abbr title="Web Developer" >WD</abbr>

4. 大段引入: <blockquote>，1般引入: <cite>

 有大段引入的情况下，应用 <blockquote>，而行内引入则应用 <cite>，让你的构造更为易读：

<blockquote>
    以前就1直想写这样的1篇文章内容，共享1下怎样去造就1个可浏览性更好的网页页面。今日的方案里有1条把 HTML Tag 和 WCAG规范融合起来。我强烈推荐你这样去写你的 HTML，让一些人的日常生活能够更非常容易。
</blockquote>
<p>某A给我印象最刻骨铭心的1句话是，<cite>“做前端开发要有爱。不必动没动就有朩有地对各种各样人应用怒吼体”</cite>。</p>

5. 删掉：<del>

在纸上写物品不可以像在测算机上写物品1样，能够用撤消键能够按，但当大家要想强调一些物品是被删掉的如何办？那便是应用 <del> 标识了。例如这样：

<del>HTML上表明强调时，请应用 &lt;b&gt; 标识</del>
HTML上表明强调时，请应用 &lt;strong&gt; 标识

实际效果是这样的：

HTML上表明强调时，请应用 <b> 标识
HTML上表明强调时，请应用 <strong> 标识

6. 界定目录：<dl>

上年带着新人做付款宝前端开发blog的情况下，她们给我印象最刻骨铭心的是很喜爱用 <dl>。那时候在想，这些同学挺非常好的，对词义化的了解还非常好。大家還是较为少用到界定目录的。而是应用1般的 <ul> <ol> 这两个。<dl> 也是应当慎用的，最好是只应用在一些有“界定”实际意义的条目，如 w3school 的这个事例，对咖啡和牛奶的界定：

<dl>
  <dt>Coffee</dt>
    <dd>- black hot drink</dd>
  <dt>Milk</dt>
    <dd>- white cold drink</dd>
</dl>

7. 无序/井然有序目录 <ul>/<ol>

目录，这个针对每一个前端开发来讲，都熟习但是了。由于构造能够十分灵便地开展运用，在导航栏、目录、Tab 等，都常常要要用到。这个就不必多说了。但有1点還是必须搞清楚的，不必坚信甚么 <ul>/<ol> 是 <table> 的取代品。在大家常见的 HTML Tags 中，每一个标识都有自身的功效，谁都并不是谁的取代品。

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

8. 报表: <table>

假如是1个报表，那就，就不必用段落来取代，更不必用目录。除非万不可已，而且她们是能够变换的。此外，报表中也有1些必须留意的点：

  • 给 <table> 加上 summary 特性，一些报表十分大，其实不必须去读详细个
  • 加上 <tbody>，假如我没记错，假如没加上的话，访问器会全自动为你加上
  • 必要时应用 <col> <colgroup> 来操纵表明的栏 
<table summary="sofish's blog status">
    <thead>
        <tr>
            <th>DATE</th>
            <th>IP</th>
            <th>PV</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2011.3.11</td>
            <td>3000</td>
            <td>8000</td>
        </tr>
    </tbody>
</table>

9. 文件格式化片断 <code>/<pre>

<code> 是指 computer code text, 而 <pre> 是指 preformatted text。<pre> 的范畴更广，而且是块状元素，将会被应用来文件格式化各种各样文字，非常是编码。应用沒有必须非常留意的，关键是词义上的正确应用，例如不必用 <pre> 来替代1般的 <p>。

<code>text-align:center</code>
<pre>
{ ( 1 * 102 ) + ( 9 * 101 ) + ( 3 * 100 ) }
</pre>

10. 换行: <br>

在当代网页页面中，应用 <br> 的状况是是非非常少的。网页页面中的留白，1般全是应用 CSS 的 padding 和 margin 来完成。这样更精确，并用更非常容易操纵。如今强烈推荐的用法是，应用到1般的段落 <p> 中做简易的换行，而并不是用来操纵网页页面留白。

<p>我是1个段落。<br />
诗歌都会用换行的。
</p>

11. 切分线: <hr>

<hr> 具备十分好的词义功效。但他的视觉效果实际效果很难操纵。以前就写过这样的文章内容有关<hr />在各访问器中的难题。1般也都非常少用。假如专业为读屏手机软件应用者出示独立网页页面的话，也许 <hr> 会大有效处。

<h3>题目1</h3>
<p>Lorem Ipsum is ...</p>
<hr />
<h3>题目2</h3>
<p>This is the entry of... </p>

12. 无词义标识：<div>/<span>

实际上 <div>/<span> 这两个标识是有词义的，全是 defines a section in a document。是的，和 HTML5 中的 <section> 实际上是1样的。只是，由于检索模块的的缘故，检索模块觉得它们是无词义标识，因而她们变成 “无词义” 标识。强烈推荐用法是尽可能应用别的来作为网页页面架构的器皿，例如合理布局、加上附加的视觉效果实际效果，而并不是段落等的取代品。

<div id="container">
    <div id="content">
    </div>
    <div id="sidebar">
        <ul>
            <li><span>God</span>, oh my zsh</span></li>
        </ul>
    </div>
</div>

13. 段落/题目: <p>,<h1>/<h2>/<h3>…

这几个标识基本上能够说是1个网页页面标识级别构造中最关键的标识。大家能够用1本书的构造来讲明这几个标识，而大家搭建1个网页页面的情况下，也应当有这样的1种观念在脑中：

  • 书的名字：H1
  • 书的每一个章节题目: H2
  • 章节内的文章内容题目: H3
  • 章节的段落: P
  • 副标题/副题目: H4/H5/H6

是的，自然也有引入 <blockquoute>，技术性类书中出示的编码 <pre class="code">，1些必须留意点的目录 <ul>，1些便捷较为的报表 <table> 等。

<h1>LOGO</h1>
<h2>Title</h2>
<div class="entry">
    <h3>Summary:</h3>
    <p>lorem ipsum is ...<em>emphasize</em></p>
</div>

14. 强调: <em>/<strong>

<em> emphasize 的缩写。而 <strong> 是 strong emphasize。将会许多刚新手入门前端开发的同学会对 <em>、<strong>、<cite> 、<i>、<b> 这几个标识的应用拿捏禁止。<i> 和 <b> 基础上是被废置的，非常于如今的 <em> 和 <strong>，1般状况下她们针对內容关键性的排列是这样的：strong > em ≈ cite。 

<strong>留意：</strong>别应用老掉牙的标识，例如<cite>FONT、CENTER</cite>等，非常是 <em>FONT</em>。

15. 表单项: <input>/<textarea>/<select>

表单项是 HTML 中相对性较为繁杂的标识，必须留意的点也较为多：

  1. 必须给每一个表单项加上 <label> 对其开展叙述，当不可以应用 label 时，为表单项加上 title 特性
  2. 当表单项是必填项的情况下，应用 “*“ 标记来标识
  3. Flash 建立表单项1般是不容易转化成 <label> 的，请勾上 auto label 那个选项 
<form method="post" action="http://sofish.de">
    <fieldset><legend>My Form</legend>
      <label for="firstname">* First name:</label> <input type="text" id="firstname" />
      <label for="speech">Say something:</label>
      <textarea id="speech" />
      </textare>
      <input type="submit" value="submit" title="submit button" />
    </fieldset>
</form>

16. 照片: <img>

针对照片，视障看不见。出示 alt 来表明取代文字。告知她们这是1张甚么样的图。

<img src="http://sofish.de/favicon.ico" alt="幸福快乐个人收藏夹的 favicon" />

17. 架构: <iframe>

尽可能防止 <iframe>架构的应用，但当你必须应用的情况下，最好是出示1个 title 特性对其开展叙述。

<iframe src="http://sofish.de" title="幸福快乐个人收藏夹" /></iframe>

18. 流新闻媒体：<video>/<audio>/<object>/<embed>

新闻媒体也是较为繁杂的文件格式，解决起来较为不便。一般大家能够这样做：

  • 为视听新闻媒体出示相应的文字，包含相应的情景，例如演讲中的欢呼等有益有阅读文章者认知如今气氛的，都应当反映在演讲文字中。别的的依此类推。
  • 假如像交响乐这类不可以出示实际叙述的，能够开展简易的表明
  • 假如文字较长，不可以在当今网页页面展现，能够在新闻媒体后出示1个连接到相应取代文字的连接
  • 假如新闻媒体中有将会会引发癫痫发病的，应做相应的表明 
<audio src="mozart.mp4">莫扎特39号交响曲</audio>

19. 网页页面题目：<title>

网页页面中1定要包括题目，而且每一个标识应当具备辨识性。例如付款宝中是这样反映的：

<title>联络我 -- 幸福快乐个人收藏夹</title>

20. 总结

好吧。就先写到这里了。WCAG 其实不只是这些简易的 HTML Tags 的用法，词义化的网页页面也并不是1两篇文章内容可以写完的。渐渐地来吧。从最多见的做起，培养好的习惯性。返回文章内容前面的那句话，难道说你忍心把网页页面写得这么难用吗？