HTML5和CSS3常见面试题

😊各位小伙伴们，本专栏新文章出炉了！！！

---

1.HTML5有哪些新特性？

1. 语义化标签
   1. <aside>定义域页面主要信息相关的辅助信息，如侧边连。
   2. <dialog>定义对话框或子窗口。
   3. <footer>定义页面或节（section）的底部。
   4. <header>定义页面或节的头部。
   5. <main>定义页面的主要内容。
   6. <section>定义文档中的节（section），如章节，页眉或页脚。
2. 媒体支持
   1. <audio>用于嵌入音频文件。
   2. <vadio>用于嵌入视频文件。
3. 表单控制增强，改善用户体验和数据验证。
   1. 新的输入类型：如<input type="email">、<input type="date">等。
   2. 新的属性：如required、pattern、placeholder等。用于表单验证和提示。
   3. <datalist>定义输入字段的建议列表。
   4. <output>定义计算结果的输出。
4. 绘图与动画
   1. <canvas>用于绘制图形和动画，结合JavaScript使用。
   2. <svg>用于嵌入可缩放的矢量图形。
5. 本地存储（LocalStorage和SessionStorage）
6. WebSocket
7. Web Workers（允许在后台线程中执行JavaScript脚本，避免阻塞用户界面）

2.你是如何理解语义化标签的？

语义化标签是指具有明确含义和用途的HTML标签。使用语义化标签有助于提高代码的可读性和可维护性，并且能提升网站的SEO（搜索引擎排名）排名和无障碍访问。

3.CSS3有哪些新特性？

1. 选择器增强（属性选择器、伪类选择器、伪元素选择器、通用兄弟元素选择器、相邻兄弟选择器）
2. 圆角属性（border-radius）
3. 盒阴影（box-shadow）
4. 渐变背景（linear-gradient、radial-gradient）
5. 过渡（transition）
6. 动画（animation）
7. Flexbox布局
8. Grid布局
9. 媒体查询（@media是响应式设计的核心）
10. 自定义字体（@font-face）
11. 透明度
12. 变形（transform）
13. 计算（calc用于计算长度、频率、角度、时间等属性）
14. 多列布局（column-count）

4.rem和em的区别是什么？

rem和em都是用来设置字体大小或其他长度单位的相对单位，但是它们相对于不同的基点。

em

em是相对于父元素的字体大小，如果一个元素没有明确的父元素，那么他会相对于根元素html的字体大小。当应用于非字体大小的属性时（如边距），em单位仍然相对于父元素的字体大小。

rem

rem是相对于根元素html的字体大小。使用rem设定的尺寸不会受到父元素字体大小的影响。

/* 设置根元素字体大小 */
html {
   
  font-size: 16px;
}

/* 使用rem设置 */
p {
   
  font-size: 1rem;
  /*等于16px*/
}

/* 使用em设置 */
div {
   
  font-size: 1em;
  /*默认情况下也等于16px*/
}

/* 如果div有一个父级元素设置了字体大小 */
div.parent {
   
  font-size: 20px;
}

/* 此时子元素使用em单位 */
div.child {
   
  font-size: 1em