这样去写你的 HTML

今天想分享的是如何去使用我们的 HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现：

1. 文档声明：<!Doctype>

其实这跟 WCAG 根本上连不上什么直接关系，但为了一个兼容性更好，特别是向后兼容的页面，我推荐你这样写：

 

<!Doctype html>

2. 链接：<a>

互联网的联几乎可以说是用 <a> 来实现的，作为一个页面最常见的标签。我们应该如何对待呢？

  1. 为关键链接添加 accesskey
  2. 除非万不得已，不要去掉 focus 时虚线框
<ahref=""title=""accesskey="M"rel=""hidefocus>Link</a>

3. 缩写: <abbr>

对于用 HTML Tag 的正确使用，也是非常重要的，这有利于读屏软件使用者对于页面结构的理解。特别是在 H1,H2,H3 等这些标签的使用，滥用非常容易造成结构费解。当然，使用一般的标签，再利用 CSS 来使视觉上形成对比这也是常人能辨识的。但读屏软件用户呢。当然，这里只是顺带提起需要注意页面标签的使用方法，而 abbr 最重要的应该是应该添加一个 title 属性对缩写进行描述。比如：

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

4. 大段引用: <blockquote>，一般引用: <cite>

 有大段引用的时候，使用 <blockquote>，而行内引用则使用 <cite>，让你的结构更加易读：

<blockquote>之前就一直想写这样的一篇文章，分享一下如何去创造一个可访问性更好的页面。今天的计划里有一条把 HTML Tag 和 WCAG标准结合起来。我推荐你这样去写你的 HTML，让某些人的生活可以更容易。
</blockquote><p>某A给我印象最深刻的一句话是，<cite>“做前端要有爱。不要动不动就有朩有地对各种人使用咆哮体”</cite>。</p>

5. 删除：<del>

在纸上写东西不能像在计算机上写东西一样，可以用撤销键可以按，但当我们想要强调某些东西是被删除的怎么办？那就是使用 <del> 标签了。比如这样：

<del>HTML上表示强调时，请使用 &lt;b&gt; 标签</del>
HTML上表示强调时，请使用 &lt;strong&gt; 标签

效果是这样的：

HTML上表示强调时，请使用 <b> 标签
HTML上表示强调时，请使用 <strong> 标签

6. 定义列表：<dl>

去年带着新人做支付宝前端博客的时候，他们给我印象最深刻的是很喜欢用 <dl>。当时在想，这些同学挺不错的，对语义化的理解还不错。我们还是比较少用到定义列表的。而是使用一般的 <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 等，都经常要要用到。这个就无须多说了。但有一点还是需要明白的，不要相信什么 <ul>/<ol> 是 <table> 的替代品。在我们常用的 HTML Tags 中，每个标签都有自己的作用，谁都不是谁的替代品。

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

8. 表格: <table>

如果是一个表格，那就，就不要用段落来替代，更不要用列表。除非万不得已，并且他们是可以转换的。另外，表格中还有一些需要注意的点：

  • 给 <table> 添加 summary 属性，有些表格非常大，并不需要去读完整个
  • 添加 <tbody>，如果我没记错，如果没添加的话，浏览器会自动为你添加
  • 必要时使用 <col> <colgroup> 来控制表示的栏
<tablesummary="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> 来代替一般的 <p>。

<code>text-align:center</code><pre>
{ ( 1 * 10
2 
) + ( 9 * 10
1 
) + ( 3 * 10
0 
) }
</pre>

10. 换行: <br>

在现代网页中，使用 <br> 的情况是非常少的。网页中的留白，一般都是使用 CSS 的 padding 和 margin 来实现。这样更精准，并用更容易控制。现在推荐的用法是，使用到一般的段落 <p> 中做简单的换行，而不是用来控制页面留白。

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

11. 分割线: <hr>

<hr> 具有非常好的语义作用。但他的视觉效果很难控制。之前就写过这样的文章关于<hr />在各浏览器中的问题。一般也都很少用。如果专门为读屏软件使用者提供单独页面的话，或许 <hr> 会大有用处。

<h3>标题一</h3><p>Lorem Ipsum is ...</p><hr/><h3>标题二</h3><p>This is the entry of... </p>

12. 无语义标签：<div>/<span>

其实 <div>/<span> 这两个标签是有语义的，都是 defines a section in a document。是的，和 HTML5 中的 <section> 其实是一样的。只是，因为搜索引擎的的原因，搜索引擎认为它们是无语义标签，因此他们成了 “无语义” 标签。推荐用法是尽量使用其他来做为页面框架的容器，比如布局、添加额外的视觉效果，而不是段落等的替代品。

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

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

这几个标签几乎可以说是一个页面标签等级结构中最重要的标签。我们可以用一本书的结构来说明这几个标签，而我们构建一个页面的时候，也应该有这样的一种思想在脑中：

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

是的，当然还有引用 <blockquoute>，技术类书中提供的代码 <pre class="code">，一些需要注意点的列表 <ul>，一些方便比较的表格 <table> 等。

<h1>LOGO</h1><h2>Title</h2><divclass="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>，一般情况下他们对于内容重要性的排序是这样的：strong > em ≈ cite。 

<strong>注意：</strong>别使用老掉牙的标签，比如<cite>FONT、CENTER</cite>等，特别是 <em>FONT</em>。

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

表单项是 HTML 中相对比较复杂的标签，需要注意的点也比较多：

  1. 需要给每个表单项添加 <label> 对其进行描述，当不能使用 label 时，为表单项添加 title 属性
  2. 当表单项是必填项的时候，使用 “*“ 符号来标记
  3. Flash 创建表单项一般是不会生成 <label> 的，请勾上 auto label 那个选项
<formmethod="post"action="http://sofish.de"><fieldset><legend>My Form</legend><labelfor="firstname">* First name:</label><inputtype="text"id="firstname"/><labelfor="speech">Say something:</label><textareaid="speech"/></textare><inputtype="submit"value="submit"title="submit button"/></fieldset></form>

16. 图片: <img>

对于图片，盲人看不到。提供 alt 来表示替代文本。告诉他们这是一张什么样的图。

<imgsrc="http://sofish.de/favicon.ico"alt="幸福收藏夹的 favicon"/>

17. 框架: <iframe>

尽量避免 <iframe>框架的使用，但当你需要使用的时候，最好提供一个 title 属性对其进行描述。

<iframesrc="http://sofish.de"title="幸福收藏夹"/></iframe>

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

媒体也是比较复杂的格式，处理起来比较麻烦。通常我们可以这样做：

  • 为视听媒体提供相应的文本，包括相应的场景，比如演讲中的鼓掌等有利有阅读者感知现在气氛的，都应该体现在演讲文本中。其他的依此类推。
  • 如果像交响乐这种不能提供具体描述的，可以进行简单的说明
  • 如果文本较长，不能在当前页面展示，可以在媒体后提供一个链接到相应替代文本的链接
  • 如果媒体中有可能会引起癫痫发作的，应做相应的说明
<audiosrc="mozart.mp4">莫扎特39号交响曲</audio>

19. 网页标题：<title>

网页中一定要包含标题，并且每个标签应该具有辨识性。比如支付宝中是这样体现的：

alipay web page title

<title>联系我 -- 幸福收藏夹</title>

20. 总结

好吧。就先写到这里了。WCAG 并不只是这些简单的 HTML Tags 的用法，语义化的网页也不是一两篇文章能够写完的。慢慢来吧。从最常见的做起，养成好的习惯。回到文章前面的那句话，难道你忍心把页面写得这么难用吗？

 

转自http://sofish.de/1688

转载于:https://www.cnblogs.com/gumgum/articles/3009849.html

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/259858.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

iframe懒加载_前端常见问题

iframe懒加载_前端常见问题

原地址&#xff1a;https://blog.csdn.net/Mr_JavaScript/article/details/843110681. flex布局&#xff1a;又叫做弹性布局任何一个容器都可以指定flex布局&#xff0c;如display:flex 或 display:inline-flex注意&#xff1a;设置了flex布局以后&#xff0c;子元素的float&am…
阅读更多...
手机运行服务器无响应,《最强蜗牛》服务器无响应怎么办 服务器无响应解决方法...

手机运行服务器无响应,《最强蜗牛》服务器无响应怎么办 服务器无响应解决方法...

导读最强蜗牛服务器无响应怎么办&#xff1f;本作在今日迎来了正式的公测&#xff0c;这会导致大批量的玩家同时涌入进来&#xff0c;而服务器也因此而遭受到了非常大的符合&#xff0c;所以会导致后续加入进来的玩家出现服务器无响应进不去的现象。下面就为大家带...最强蜗牛服…
阅读更多...
自己动手写操作系统--个人实践

自己动手写操作系统--个人实践

近期開始看于渊的《自己动手写操作系统》这本书&#xff0c;刚開始看就发现做系统的引导盘居然是软盘&#xff01;心里那个汗啊&#xff01; 如今都是U盘了&#xff0c;谁还用软盘。于是考虑用U盘。 于是開始下面步骤&#xff1a; 1、既然书上说给先要把软盘做引导盘&#xff0…
阅读更多...
sql加上唯一索引后批量插入_阿里大佬总结的52条SQL语句性能优化策略，建议收藏...

sql加上唯一索引后批量插入_阿里大佬总结的52条SQL语句性能优化策略，建议收藏...

你知道的越多&#xff0c;不知道的就越多&#xff0c;业余的像一棵小草&#xff01;你来&#xff0c;我们一起精进&#xff01;你不来&#xff0c;我和你的竞争对手一起精进&#xff01;编辑&#xff1a;业余草cnblogs.com/SimpleWu/p/9929043.html推荐&#xff1a;https://www…
阅读更多...
Web缓存技术

Web缓存技术

本章导读 缓存主要是为了提高数据的读取速度。因为服务器和应用客户端之间存在着流量的瓶颈&#xff0c;所以读取大容量数据时&#xff0c;使用缓存来直接为客户端服务&#xff0c;可以减少客户端与服务器端的数据交互&#xff0c;从而大大提高程序的性能。 本章从缓存所在的命…
阅读更多...
【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

【HTML5初探之绘制图像（上）】看我canvas元素引领下一代web页面

弧度一块可能有误&#xff0c;需要再研究 导航 【初探HTML5之使用新标签布局】用html5布局我的博客页&#xff01; 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放 【HTML5初探之绘制图像&#xff08;上&#xff09;】看我canvas元素引领下一代web页面 【HTML5初…
阅读更多...
关卡 动画 蓝图 运行_UE4入门之路（基础蓝图篇）：蓝图的制作

关卡 动画 蓝图 运行_UE4入门之路（基础蓝图篇）：蓝图的制作

蓝图系统简介蓝图系统是UE4中十分有代表性的一个特点&#xff0c;所谓蓝图就是一种可视化的脚本。该系统非常灵活且非常强大&#xff0c;因为它为设计人员提供了一般仅供程序员使用的所有概念及工具。 程序员能够很方便的创建一个基础系统&#xff0c;并交给策划进一步在蓝图中…
阅读更多...
虚拟串口服务器zenetmanager,Avocent服务器/串口管理 KVM

虚拟串口服务器zenetmanager,Avocent服务器/串口管理 KVM

MergePoint Unity交换机在单个设备中结合了 KVM over IP和串行控制台管理技术。这项独特的结合为IT管理员提供了用于访问和控制服务器、网络设备及其他数据中心和分支办公室设备的完整远程管理解决方案。MergePoint Unity交换机直接与物理KVM、USB和串行端口进行安全的远程带外…
阅读更多...
KAFKA分布式消息系统

KAFKA分布式消息系统

Kafka[1]是linkedin用于日志处理的分布式消息队列&#xff0c;linkedin的日志数据容量大&#xff0c;但对可靠性要求不高&#xff0c;其日志数据主要包括用户行为&#xff08;登录、浏览、点击、分享、喜欢&#xff09;以及系统运行日志&#xff08;CPU、内存、磁盘、网络、系统…
阅读更多...
jar打包 剔除第三方依赖以及它的依赖_面试官：为什么Spring Boot的jar可以直接运行？...

jar打包 剔除第三方依赖以及它的依赖_面试官：为什么Spring Boot的jar可以直接运行？...

来源&#xff1a;Gormats Notesfangjian0423.github.io/2017/05/31/springboot-executable-jar/Spring Boot Loader抽象的一些类JarLauncher的执行过程关于自定义的类加载器LaunchedURLClassLoaderSpring Boot Loader的作用SpringBoot提供了一个插件spring-boot-maven-plugin用…
阅读更多...
CQRS架构图

CQRS架构图

2019独角兽企业重金招聘Python工程师标准>>> 转载于:https://my.oschina.net/darkness/blog/814243
阅读更多...
Analyzer普通用户登录不了[从网络访问此计算机]

Analyzer普通用户登录不了[从网络访问此计算机]

问题&#xff1a; 最近客户诺奇反映说Analyzer普通用户登录不了&#xff0c;但是发现管理员又可以登录&#xff0c;几经周折发现原来是系统的本地安全策略设置了不让远程使用本地账户密码登录系统导致。解决方案&#xff1a; 修改本地安全策略的“从远程访问此计算机”中的用户…
阅读更多...
源码 移植_FreeModbus移植总结

源码 移植_FreeModbus移植总结

modbus是一项工业上经常用到的通讯协议&#xff0c;而freemodbus是一款开源的从机协议栈。关于它的移植网上已经有了很多的文章&#xff0c;但是大多都只是针对其中部分问题的表述。本文将会把自己在移植freemodbus过程中遇到的问题以及freemodbus的源码分析尽量表述清楚。&…
阅读更多...
word标题大纲级别_快速按标题层级把Word转Excel—附详细操作步骤

word标题大纲级别_快速按标题层级把Word转Excel—附详细操作步骤

如何快速把层级分明的word文档转换成横向从属结构的excel表格一、问题描述文档如下图所示。文档一共三个层次&#xff0c;大纲级别分别是1、2、3级&#xff0c;左则是其文档结构图&#xff0c;可以看出文档层级分明。最终要将文档转换成如下横向从属结构的表格。一个层次的内容…
阅读更多...
servlet中getWriter和getOutputStream的区别

servlet中getWriter和getOutputStream的区别

getWriter();getOutputStream();区别&#xff1a;1、getWriter()用于向客户机回送字符数据2、getOutputStream()返回的对象&#xff0c;可以回送字符数据&#xff0c;也可以回送字节数据&#xff08;二进制数据&#xff09;如何选择&#xff1a;若果我们回送字符数据&#xff0…
阅读更多...
execve系统调用_张凯捷—系统调用分析(3) (基于最新Linux5.0版本系统调用日志收集系统)...

execve系统调用_张凯捷—系统调用分析(3) (基于最新Linux5.0版本系统调用日志收集系统)...

在上一篇文章《系统调用分析(2)》中介绍和分析了32位和64位的快速系统调用指令——sysenter/sysexit和syscall/sysret&#xff0c;以及内核对快速系统调用部分的相关代码&#xff0c;并追踪了一个用户态下的系统调用程序运行过程。本篇中将基于最新的Linux-5.0内核&#xff0c;…
阅读更多...
批量下载小说网站上的小说（python爬虫）

批量下载小说网站上的小说（python爬虫）

随便说点什么 因为在学python&#xff0c;所有自然而然的就掉进了爬虫这个坑里&#xff0c;好吧&#xff0c;主要是因为我觉得爬虫比较酷&#xff0c;才入坑的。 想想看&#xff0c;你可以批量自动的采集互联网上海量的资料数据&#xff0c;是多么令人激动啊&#xff01; 所以我…
阅读更多...
华为欧拉系统服务器开接口,华为操作系统 euleros

华为欧拉系统服务器开接口,华为操作系统 euleros

华为操作系统 euleros 内容精选换一换Atlas 900 AI集群安装上架、服务器基础参数配置、安装操作系统等操作&#xff0c;请根据集群配置参见对应的手册&#xff1a;《Atlas 900 PoD 用户指南 (型号9000, 直流)》《Atlas 900 PoD 用户指南 (型号9000, 交流)》《Atlas 900 计算节点…
阅读更多...
对勾函数_对勾函数？2020福建省中考压轴题分析

对勾函数_对勾函数？2020福建省中考压轴题分析

训练营机密视频大公开欢迎转发、分享传播知识&#xff0c;传播力量&#xff01;福建也是全省统一考选择题&#xff1a;这题考的是二次函数的性质&#xff0c;先求出对称轴就好了填空题&#xff1a;这题看似有反比例&#xff0c;确实会用到反比例函数的对称性。但其实重点是考察…
阅读更多...
通过Ajax解析和jQuery写了一个小小的导航条

通过Ajax解析和jQuery写了一个小小的导航条

最近在用ajax和jquery做开发&#xff0c;所以闲来无事写了些小导航条&#xff0c;通过ajax解析XML文件动态的创建WEB网站的导航条。 <link href"css/style.css" rel"stylesheet" type"text/css" /><script src"js/jquery-1.8.2.mi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023