面试必知：HTML&CSS基础与标签区别详解

在IT面试中，基础知识的考察至关重要，特别是在前端开发领域。以下是一些面试常考的基础知识点： 1. HTML元素分类 - 行内元素：如`<span>`、`<img>`、`<input>`，它们不独占一行，通常用于文本或小元素的插入。 - 块级元素：如`<div>`、`<footer>`、`<header>`等，这些元素独占一行，适合布局和容器，能设置宽高。 - 空元素：如`<br>`（换行符）和`<hr>`（水平线），它们在文档流中不占位置，但具有特定的视觉效果。 2. CSS布局控制 - `display`属性用于元素的展示模式： - `inline`: 将元素变为行内元素，不独占一行，无法设置宽高。 - `inline-block`: 结合行内和块级特性，可以设置宽高，不独占一行。 - `block`: 元素变为块级，独占一行并可设置宽高。 3. CSS导入与引用样式表 - `link`标签用于外部链接样式表，通常更优先于`@import`，具有更好的浏览器兼容性。 - `@import`虽然简洁，但可能导致样式延迟加载，影响用户体验。`link`则保证了样式表的顺序加载。 4. 标题与内容标签的区别 - `title`用于定义文档的元信息，显示在浏览器标签页，对SEO有益，但不会显示在页面内容中。 - `h1`用于文档的主要标题，显示在页面内容上，对SEO同样重要，但通常用于标识页面主要内容。 5. 字体标记的区别 - `b`和`strong`都用于加粗文本，`strong`更强调内容的重要性，遵循CSS3建议，应优先使用`strong`。 - `i`和`em`用于倾斜和强调文本，`em`更符合语义，用于强调内容而非仅外观。 6. 图片标签细节 - `img`的`title`属性提供鼠标悬停时的提示文本，增强交互性。 - `alt`属性在图片无法显示时提供替代文本，保证了网页的可访问性和搜索引擎理解。 以上这些知识点不仅在面试中经常被问到，也是日常开发中必不可少的基础，熟练掌握它们能帮助你更好地构建和维护网站结构以及优化用户体验。