前言
余为前端菜鸟,感姿势水平匮乏,难观前端之大局。遂决定循前端知识之脉络,以兴趣为引,辅以几分坚持,望于己能解惑致知、于同道能助力一二,岂不美哉。
本系列代码及文档均在 此处
SEO
描述
SEO(search engine optimization, 搜索引擎优化),利用搜索引擎的搜索规则来提高目标网站在搜索引擎索引库内的得分和排名。
常用
- title
- description
<meta name="description" content="xxxx" /> - keywords
<meta name="keywords" content="xxxx" />
html结构化
语义化标签
header, nav, section, aside, article, footer等,详见 github
好处
- 语义化标签具有更丰富的含义,方便开发、维护
- 利于搜索引擎识别页面的各部分
- 方便其他设备
WAI-ARIA
描述
ARIA(Accessible Rich Internet Applications, 可访问富互联网应用),是一个为残疾人士等提供无障碍访问动态、可交互web内容的技术规范
简单了解
role部分html5标签自带role,主要是设定元素的角色aria-aria属性有不少,主要是控制元素的一些行为表现
这一part其实不是很感兴趣,点到为止,详细内容参考大漠老师的 WAI-ARIA 无障碍Web规范
web components
标准化的组件封装
每个组件组织自己的html/css/js,不影响页面其他部分
shadow dom
通过shadow dom创建子dom树,和主文档流互不干扰
使用
- 组件内定义好html结构和样式,也即模板
- 通过js脚本将模板转为dom elment并插入到shadow root
- 在document上注册一个自定义的key
- 组件被link引用后,可以直接使用这个key作为自定义标签使用
- 具体代码见 github
好处
- 无侵入、标准化组件
- 语义化,结构化
虽发表于此,却毕竟为一人之言,又是每日学有所得之笔记,内容未必详实,看官老爷们还望海涵。