HTML的语义化

笔记类文章

常用HTML5语义化标签

结构标签

• header
• nav
• main
• article
• section
• aside
• footer
• h1-h6
• div
  以上用来搭建文档结构
  其实，在网站的每一个块中，其实都可以用到他们

整个网站就是一个块，我们通常将其分成“头—中—尾”这样的结构，而在中部，又可以进行分块，通常使用main，article，section这样的标签。他们分成的小块，又可以在内部有"头—中—尾"的结构。

所以说，通过以上标签，并且在合适的位置添加一些id，class，完全可以达到简单，清晰，语义化的目标。不至于满屏div，每个div上都一个class。

文体标签

• p
• strong/em
• i/b（仅仅只是样式上的变化，在seo中没有屌用）
• code
• q（定义一段短引用）/blockquote（定义长引用）
• cite（用于定义，引用内容出自杂志/书籍的标题）
• u
• abbr（缩写，在title中写入全称）
• br
• a
• time（注意用法）
• dfn/samp/kbd/wbr
• span
• pre（格式不变的文本，常用来表示源代码）
• figure/figcaption

这些标签，在具体使用中，认真体会。

seo

Search English Optimization 搜索引擎优化。

• 白帽seo
• 黑帽seo
  通过友好的编程，使得搜索引擎的爬虫能够更好的理解网站。

优化要点

• 扁平化结构
  也就是，网站的结构层，不要太深，提倡三层到底
• 控制首页链接数量
• 面包屑导航
• 网站结构语义化
  • 头部：logo 主导航 用户信息
  • 主体：左右分栏等，主次分明的布局，加上面包屑导航，分页导航写清楚页码"首页 1 2 3 4 ...下拉框"。
  • 尾部：版权，链接
• 优化html，减少http请求等
  • title keywords description注意填写规范
  • 语义化标签
  • a标签加title，链接到别人家网站的加上"el='nofollow'"
  • 注意在不同块中使用h1
  • 小标签的使用br，em，i等，不要超出语义化范围
  • img加一定加alt
  • strong em来强调，因为这俩标签会引起搜索引擎的重视，b/i对seo无效
  • 缩进不要用&nbsp，版权不要用&copy。前者用css，后者用输入法'banquan'
  • 注意js输出，因为爬虫不认识
  • 慎用display: none
  • js的位置

无障碍

• 注意label的使用方式，别乱写老老实实用for
• img加上alt
  • 如果文本嵌入在图像中，将文本添加到alt属性。
  • 装饰性图片应该由CSS处理。如果不能由css处理，应加空alt属性（例如<img src=”decor.jpg” alt=”” />）。这不仅能通过验证，还能告知辅助技术该图片不包含任何意义。
  • 对于某些图片，如图表和插图等，需要更长的描述。有多种方法可以添加长描述，例如：在行内增加内容，使用“D – Link”（译者注：D表示description，该链接的链接文本为D，表示链接至详细描述页面 ，如<a href=”detail.html”>D</a>）
  • 如果一个链接只包含图像内容，那么alt文本应描述链接的功能，而不是图像本身。(以上来自25种增强网站可访问性的方法)
• 键盘可访问

结束。