前端面试题html部分之HTML语义化及前端SEO

HTML语义化

1、是什么

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的带码同时让浏览器的爬虫和机器很好的解析

2、为什么

• 为了在没有css的情况下，页面也可以很好的呈现内容结构
• 提高用户体验
• 利于SEO
• 方便其他设备解析，比如盲人阅读器，屏幕阅读器等
• 便于团队开发和维护代码，减少差异化

3、怎么做

• 尽可能少使用无意义的标签div和span（想要实现这个真的太难了）
• 尽可能少使用样式标签如b，u等
• 使用表格时，标签要规范，标题，表头，表格内容等
• 表单域要用fieldest包裹起来

---

前端SEO

1、是什么

SEO即搜索引擎优化

2、为什么

为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为，前端SEO是通过网站的结构布局设计和网页代码优化，使得页面既能让浏览器用户可以看懂，也能让浏览器爬虫看懂

3、怎么做

• 网站结构布局优化
  ①扁平化目录层次，最好不要超过三层
  ②导航尽可能的使用文字
  ③网站的布局结构-页面头部，页面主体，页面底部
  ④控制页面大小，最好不要超过100kb
• 网页代码优化
  ①多使用语义化的标签，如nav、section、article等
  ②添加meta关键词
  ③少使用display:none，不想在当前页面显示可使用z-index:-9999;等来达到页面内容不可见效果
  ④dom操作要放在html标签之后，body结束之前

还有想到了再补充