笔记类文章
常用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无效
- 缩进不要用 ，版权不要用©。前者用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种增强网站可访问性的方法)
- 键盘可访问
结束。
