1.Web内容可访问性及HTML语义化标签

前言：

通过自身学习C4的过程总结归纳、总结出知识点，方便自己巩固以及为备考、预考的同学提供便利文档

注：内容出处:【CSDN-C训练】

一、Web内容可访问性

(1) 字符编码（解决乱码问题）

<meta charset="UTF-8" />

(2) 设置网页宽度（实现不同屏幕下会等比缩放）

<meta name="viewport" content="width=960px">

(3) SEO设置（网站关键词及网站说明）

<meta name="keywords" content="电商,农产品，在线购物" />
<meta name="description" content="十分优惠的鲜活农产品平台，每周三周五优惠" />

(4) 使用语义化标签（解决站点关键词排名低下）

除了整个html的title元素，我们也可以通过article元素标记内容为一篇文章，h1来标记内容的主标题，h2副标题，p标记段落，address标记地址等；

因此，正确的使用语义标签，能帮助我们在搜索引擎和其他搜索系统中得到正确的匹配和更靠前的排序，从而获取更多的流量。

(5) 可访问性验证（创建可供任何人使用的网站的实践方式）

如果整个页面都是使用div和span构建的，对于正常视力用户阅读虽然没有什么影响，但是对于盲人，则基本无法正常使用网页。

<nav></nav>表示这是一个导航栏，<li></li>表示链接地址构成的列表，<a></a>则是需要跳转的链接.很多属性对于盲人也是必须的，例如图片的alt属性:

<img src="12212.jpg" alt="一张狗狗的照片" />

由于盲人无法看到图片，通过给img设置alt属性，屏幕阅读器可以依然可以通过读出alt属性的内容来让盲人了解网页上的信息。

题外话：创建Web可访问性站点是格外重要的，尤其对于大公司而言，大公司提供的服务很多都成为了社会的基础设施，不要因为程序员的不专业给需要关怀的群体制造更多的访问障碍。（2018年，国外某域名注册服务商的博客发布数据，2015年后新增站点，欧洲地区和日韩地区，超过半数都能支撑无障碍访问，而中国地区站点不到3%）

二、HTML元素分类与使用

1、文档结构标签

   html、head、body

2、HTML文档信息

        meta、link、script、style、title

3、内容区域标签

   article、aside、footer、header、h1~h6、main、nav、section、address 等

4、文本内容标签

   div、dd、dl、dt、hr、li、ol、p、pre、ul等

5、 内联文本语义

   a、span、code、em、i、small等

6、图片与多媒体标签

   area、audio、img、map、video等

7、特定内容标签

      7.1、表格

   caption、col、colgroup、table、tbody、td、tfoot、th、thead、tr 等

      7.2、表单

   button、form、input、label、option、progress、select、textarea 等

---

生命不息，学习不止，键盘敲蓝，月薪过万！加油，代码人！