前言

余为前端菜鸟，感姿势水平匮乏，难观前端之大局。遂决定循前端知识之脉络，以兴趣为引，辅以几分坚持，望于己能解惑致知、于同道能助力一二，岂不美哉。

本系列代码及文档均在

SEO

描述

SEO(search engine optimization, 搜索引擎优化)，利用搜索引擎的搜索规则来提高目标网站在搜索引擎索引库内的得分和排名。

常用

• title
• description

        复制代码

• keywords

        复制代码

html结构化

语义化标签

header, nav, section, aside, article, footer等，详见

好处

• 语义化标签具有更丰富的含义，方便开发、维护
• 利于搜索引擎识别页面的各部分
• 方便其他设备

WAI-ARIA

描述

ARIA(Accessible Rich Internet Applications, 可访问富互联网应用)，是一个为残疾人士等提供无障碍访问动态、可交互web内容的技术规范

简单了解

• role 部分html5标签自带role，主要是设定元素的角色
• aria- aria属性有不少，主要是控制元素的一些行为表现

这一part其实不是很感兴趣，点到为止，详细内容参考大漠老师的

web components

标准化的组件封装

每个组件组织自己的html/css/js，不影响页面其他部分

shadow dom

通过shadow dom创建子dom树，和主文档流互不干扰

使用

• 组件内定义好html结构和样式，也即模板
• 通过js脚本将模板转为dom elment并插入到shadow root
• 在document上注册一个自定义的key
• 组件被link引用后，可以直接使用这个key作为自定义标签使用
• 具体代码见

好处

• 无侵入、标准化组件
• 语义化，结构化

虽发表于此，却毕竟为一人之言，又是每日学有所得之笔记，内容未必详实，看官老爷们还望海涵。