前端与HTML｜ 青训营

DOM树

概念

HTML树（HTML DOM树或者HTML文档树）是指HTML文档中各个元素（标签）间的层次关系形成的树状结构。HTML树从标签开始，到标签结束，整个树形结构包含了HTML文档中所有的元素、属性和文本内容。

图

html语法

• 标签和属性不区分大小写
• 推荐小写空标签可以不闭合，比如input、meta属性
• 推荐用双引号包裹
• ·某些属性值可以省略，比如required、readonly

html语义化

概念

HTML语义化是指在HTML文档中，合理使用HTML标签，使得页面有良好的结构和含义，符合人类和搜索引擎的阅读习惯，有助于提高页面的可读性、可维护性和可访问性。
以下是一些HTML语义化的推荐做法：

• 使用语义化标签：如**
  、

  、 、

  、

  、

  **等，它们能够更精确地描述网页的结构和含义。
• 避免使用无语义的标签：如
  和 等，应该尽量使用语义化标签来代替它们，以提高页面的可读性和可维护性。
• 合理使用标题标签：

  到

  标签用来表示标题级别，应该按照从大到小的顺序使用，并且每个页面应该只有一个

  标签。

• 使用alt属性：对于标签，应该给每个图片添加alt属性，以提高页面的可访问性和搜索引擎优化。
• 使用表格标签：、

  和	等，用来表示表格数据，而不是用 和 等标签来模拟表格。

• 合理使用链接标签：标签用来表示链接，应该使用href属性来指定链接地址，并且使用title属性来描述链接的含义。

好处

• 代码可读性
• 可维护性
• 搜索引擎优化
• 提升无障碍性

如何做到语义化

• 了解每个标签和属性的含义
• 思考什么标签最适合描述这个内容
• 不使用可视化工具生成代码

总结

总之，HTML语义化是一个良好的编码习惯，能够提高网页的可读性、可维护性和可访问性，同时也有助于SEO优化和提高用户体验。

面试题

1.title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

• title 属性表示网页的标题，h1 元素则表示层次明确的页面内容标题，对页面信息的抓取也有很大的影响
• strong 是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时：strong会重读，而b是展示强调内容
• i 是italic(斜体)的简写，是早期的斜体元素，表示内容展示为斜体，而 em 是emphasize（强调）的简写，表示强调的文本

2.HTML5新增了哪些新特性？移除了哪些元素？

HTML5主要是关于图像、位置、存储、多任务等功能的增加：

• 语义化标签，如：article、footer、header、nav等
• 视频video、音频audio
• 画布canvas
• 表单控件，calemdar、date、time、email
• 地理
• 本地离线存储，localStorage长期存储数据，浏览器关闭后数据不丢失，sessionStorage的数据在浏览器关闭后自动删除
• 拖拽释放

3.img上 title 与 alt

• alt：全称alternate，切换的意思，如果无法显示图像，浏览器将显示alt指定的内容
• title：当鼠标移动到元素上时显示title的内容

区别：
一般当鼠标滑动到元素身上的时候显示title，而alt是img标签特有的属性，是图片内容的等价描述，用于图片无法加载时显示，这样用户还能看到关于丢失了什么东西的一些信息，相对来说比较友好。