前端极简复习：HTML和CSS基础七问
DOCTYPE 是什么，都有哪些属性？
HTML 的 <!DOCTYPE> 声明是文档类型声明，就是告诉浏览器"按标准规则渲染"。它通常出现在 HTML 文档的第一行
HTML5 的简单声明：<!DOCTYPE html>
之前 HTML 4.01 / XHTML 1.0 的时代还需要写出 DTD 引用地址，现在已经不用了。
meta 标签是干什么的，都有什么属性和作用
`<meta>` 标签提供页面的元信息，写在 `<head>` 里，不显示在页面上
常见的 meta 信息如下：
1.字符编码：<meta charset="UTF-8" />
2.移动端视口，移动端不加它，页面会按桌面宽度缩放，手机上字会非常小。<meta name="viewport" content="width=device-width, initial-scale=1.0" />
3.搜索引擎优化（SEO），提供描述性信息，便于搜索引擎索引
SEO 关键词：<meta name="keywords" content="前端, 面试, 前端面试"/>
SEO 描述：<meta name="description" content="面试派，大厂面试规范，开源免费" />
搜索引擎索引规则：<meta name="robots" content="index, follow" />
4.作者信息<meta name="author" content="老师" />
什么是 DOM ，它和 HTML 有什么区别？
DOM（Document Object Model）是浏览器解析 HTML 后生成的**树形对象模型**，可以用 JavaScript 读取和修改（通过 DOM API（如 `document.getElementById`））
浏览器渲染流程：
HTML → DOM 树 + CSS → CSSOM 树（CSS 对象模型） → 渲染树 → 页面
HTML 解析：浏览器解析 HTML 代码，生成 DOM 树。
CSSOM 生成：解析 CSS，生成 CSSOM（CSS 对象模型）。
渲染树：结合 DOM 和 CSSOM，生成渲染树。
页面渲染：根据渲染树将内容显示在页面上。
HTML5 语义化
语义化就是用有含义的标签代替 div 堆砌，让结构本身就携带信息。
作用：
1. **SEO**：搜索引擎能更好地理解页面结构，对排名有帮助
2. **可访问性**：屏幕阅读器能根据标签帮助视障用户导航
3. **可维护性**：代码更清晰，`<nav>` 比 `<div class="nav">` 可读性好得多
常用标签：
| 标签 | 含义 |
|---|---|
<header> |
页头 |
<nav> |
导航 |
<main> |
主内容区 |
<article> |
独立文章 |
<section> |
内容分区 |
<aside> |
侧边栏/补充内容 |
<footer> |
页脚 |
常见的 CSS 选择器有哪些？
基础选择器：
| 类型 | 示例 | 说明 |
|---|---|---|
| 元素选择器 | p { } |
选中所有 <p> |
| 类选择器 | .btn { } |
选中 class="btn" |
| ID 选择器 | #header { } |
选中 id="header" |
| 通配选择器 | * { } |
选中所有元素 |
CSS overflow: hidden display：none 和 visibility: hidden 有什么区别
overflow: hidden 溢出内容不可见，未溢出的部分正常可见
display：none 隐藏内容，不占用任何空间，内容变化不会重新渲染
visibility: hidden 隐藏元素，但保留其占据的空间，内容变化会重新渲染
CSS 盒模型是什么？两种盒模型的区别？
每个 HTML 元素在页面中都是一个矩形盒子，由四个部分组成：
margin（外边距）→ border（边框）→ padding（内边距）→ content（内容）
| 模式 | box-sizing | width 含义 | 总宽度 |
|---|---|---|---|
| 标准盒模型 | content-box（默认） |
只算 content 宽度 | width + padding + border + margin |
| IE/替代盒模型 | border-box |
包含 content + padding + border | width + margin |
脑启社区是一个专注类脑智能领域的开发者社区。欢迎加入社区，共建类脑智能生态。社区为开发者提供了丰富的开源类脑工具软件、类脑算法模型及数据集、类脑知识库、类脑技术培训课程以及类脑应用案例等资源。
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)