前端日拱一卒D1——结构化与SEO

SEO

描述

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

常用

titledescription

 体验AI代码助手复制代码

keywords

 体验AI代码助手复制代码

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

好处

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

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