HTML-CSS-JavaScript（经典面试题）

啊唯11

已于 2022-08-31 18:07:27 修改

阅读量1.2k

点赞数 2

文章标签： javascript html css

于 2022-08-31 17:12:49 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_66059613/article/details/126627476

版权

本文详细介绍了HTML语义化的概念和好处，包括如何利用语义化标签增强网页可读性和搜索引擎优化。接着讨论了浮动布局的工作原理和清除浮动的必要性，以及在不同场景下的应用。此外，还探讨了CSS中的垂直居中实现方法，包括绝对定位、相对定位的差异以及盒子模型。最后，提到了DOCTYPE的作用和浏览器的渲染模式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是HTML语义化？

HTML语义化就是使用HTML语义化标签。语义化标签就是拥有语义的标签。语义元素清楚地向浏览器和开发者描述其意义。例如：div、span都是没有语义的标签，无法通过标签确定信息。

基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等

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

2.语义化的HTML结构到底有什么好处？

我们知道HTML5新增的标签，比如<header>和<footer>，html正在朝着更加健壮的语义化的HTML结构发展，xhtml2在这点上没html5先进，这也是xhtml2死亡的一个原因，这一点也说明了语义化的HTML结构是html的发展趋势。

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化

3.什么是清除浮动

在了解什么是浮动之前我们先了解一下html元素在普通流排列方式。在普通流中，元素是按照它在 HTML 中的出现的先后顺序自上而下依次排列布局的，在排列过程中所有的行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为一整行。如果没有特殊样式指定，所有元素默认都是按照普通流方式排列布局，即普通流中元素的位置由该元素在 HTML 文档中的位置决定的。

浮动使元素脱离文档普通流，漂浮在普通流之上的。浮动元素依然按照其在普通流的位置上出现，然后尽可能的根据设置的浮动方向向左或者向右浮动，直到浮动元素的外边缘遇到包含框或者另一个浮动元素为止，且允许文本和内联元素环绕它。浮动会产生块级框（相当于设置了display:block），而不管该元素本身是什么。
就如上图的显示的div1，div2，div3就是按照普通流排列布局方式呈现的，而后面的div4，div5，div6中的div5的布局方式就不一样了，因为我给div5设置了向左浮动。此时div5脱离普通流，漂浮在普通

最低0.47元/天解锁文章