HTML基础回顾

本文主要内容

html 的常见元素
html 元素的分类
html 元素的嵌套关系
html 元素的默认样式和 CSS Reset
html 常见面试题

html 的常见元素

html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。

1、head 区域的 html 元素

head 区域的 html 元素，不会在页面上留下直接的内容。

meta
title
style
link
script
base

title

title 标签定义文档的标题，显示在浏览器的标题栏或标签页上。

html

<title>HTML基础回顾</title>

style

style 标签用于在文档内定义 CSS 样式。

html

<style>
    body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 20px;
    }
    h1 {
        color: #333;
    }
</style>

link

link 标签用于链接外部资源，最常见的是链接外部 CSS 文件。

html

<link rel="stylesheet" href="styles.css">
<link rel="icon" href="favicon.ico" type="image/x-icon">

script

script 标签用于定义客户端脚本，如 JavaScript。

html

<!-- 内部脚本 -->
<script>
    function sayHello() {
        alert('Hello, World!');
    }
</script>

<!-- 外部脚本 -->
<script src="script.js"></script>

base

base 标签为页面上的所有相对 URL 指定基准 URL。

html

<base href="https://example.com/images/" target="_blank">

2、body 区域的 html 元素

body 区域的元素，会直接出现在页面内容中。

排版标签

标题：h1, h2, h3, h4, h5, h6
段落：p
换行：br
水平线：hr
分区：div
行内分区：span

html

<h1>一级标题</h1>
<h2>二级标题</h2>
<p>这是一个段落。<br>这是新的一行。</p>
<hr>
<div>这是一个区块</div>
<span>这是行内元素</span>

文本标签

强调：em
加粗：strong
下标：sub
上标：sup
删除线：del
插入线：ins
标记：mark
引用：blockquote, q
代码：code, pre

html

<p><em>强调文本</em></p>
<p><strong>重要文本</strong></p>
<p>H<sub>2</sub>O 是水的化学式</p>
<p>2<sup>3</sup> = 8</p>
<p><del>删除的文本</del></p>
<p><ins>插入的文本</ins></p>
<p><mark>标记的文本</mark></p>
<blockquote>这是一段长引用</blockquote>
<p>正如爱因斯坦所说：<q>想象力比知识更重要</q></p>
<p><code>console.log('Hello');</code></p>
<pre>
function hello() {
    console.log('Hello, World!');
}
</pre>

列表标签

无序列表：ul, li
有序列表：ol, li
定义列表：dl, dt, dd

html

<ul>
    <li>无序列表项 1</li>
    <li>无序列表项 2</li>
</ul>

<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
</ol>

<dl>
    <dt>HTML</dt>
    <dd>超文本标记语言</dd>
    <dt>CSS</dt>
    <dd>层叠样式表</dd>
</dl>

链接和图片

链接：a
图片：img

html

<a href="https://example.com">访问示例网站</a>
<img src="image.jpg" alt="图片描述" width="300" height="200">

表格标签

表格：table
表格行：tr
表格单元格：td
表格标题单元格：th
表格标题：caption
表格头部：thead
表格主体：tbody
表格脚注：tfoot

html

<table border="1">
    <caption>学生成绩表</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>85</td>
            <td>90</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>78</td>
            <td>92</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>平均分</td>
            <td>81.5</td>
            <td>91</td>
        </tr>
    </tfoot>
</table>

表单标签

表单：form
输入框：input
文本域：textarea
下拉列表：select, option
按钮：button
标签：label
字段集：fieldset
字段集标题：legend

html

<form action="/submit" method="post">
    <fieldset>
        <legend>个人信息</legend>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name"><br>
        
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email"><br>
        
        <label for="password">密码：</label>
        <input type="password" id="password" name="password"><br>
        
        <label>性别：</label>
        <input type="radio" id="male" name="gender" value="male">
        <label for="male">男</label>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">女</label><br>
        
        <label>爱好：</label>
        <input type="checkbox" id="reading" name="hobby" value="reading">
        <label for="reading">阅读</label>
        <input type="checkbox" id="sports" name="hobby" value="sports">
        <label for="sports">运动</label><br>
        
        <label for="country">国家：</label>
        <select id="country" name="country">
            <option value="china">中国</option>
            <option value="usa">美国</option>
            <option value="japan">日本</option>
        </select><br>
        
        <label for="message">留言：</label><br>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br>
        
        <button type="submit">提交</button>
        <button type="reset">重置</button>
    </fieldset>
</form>

html 元素的分类

HTML 元素可以按照不同的方式进行分类。

按默认显示方式分类

块级元素（Block Elements）：
- 特点：独占一行，宽度默认是父容器的 100%，可以设置宽高
- 常见元素：div, h1-h6, p, ul, ol, li, table, form 等
行内元素（Inline Elements）：
- 特点：不独占一行，宽度由内容决定，不可以设置宽高
- 常见元素：span, a, strong, em, img, input, button 等
行内块元素（Inline-Block Elements）：
- 特点：不独占一行，但可以设置宽高
- 常见元素：img, input, button 等

按内容分类

流内容（Flow Content）：
- 大多数 HTML 元素都属于这一类
元数据内容（Metadata Content）：
- 用于设置文档表现和行为的元素
- 例如：title, style, meta, link, script 等
区块内容（Sectioning Content）：
- 定义页面结构的元素
- 例如：article, aside, nav, section 等
标题内容（Heading Content）：
- 定义章节标题的元素
- 例如：h1-h6
短语内容（Phrasing Content）：
- 文本和文本标记元素
- 例如：a, em, strong, span 等
嵌入内容（Embedded Content）：
- 导入其他资源的元素
- 例如：img, iframe, video, audio 等
交互内容（Interactive Content）：
- 用户可以交互的元素
- 例如：a, button, input, select 等

html 元素的嵌套关系

HTML 元素的嵌套关系遵循一定的规则：

块级元素可以包含块级元素和行内元素：
- 例如，div 可以包含 p, h1, span 等
行内元素通常只能包含行内元素：
- 例如，span 可以包含 a, strong, em 等
- 但不应该包含块级元素如 div, p 等
特殊情况：
- a 元素虽然是行内元素，但可以包含块级元素
- p 元素不应该包含块级元素

常见的嵌套关系

html

<!-- 正确的嵌套 -->
<div>
    <h1>标题</h1>
    <p>段落 <span>行内文本</span></p>
    <ul>
        <li>列表项 1</li>
        <li>列表项 2</li>
    </ul>
</div>

<!-- 错误的嵌套 -->
<span>
    <div>这是错误的，行内元素不应该包含块级元素</div>
</span>

<p>
    <div>这也是错误的，p 元素不应该包含块级元素</div>
</p>

html 元素的默认样式和 CSS Reset

默认样式

浏览器会为 HTML 元素应用默认样式，这些样式可能在不同浏览器之间有所不同。例如：

标题元素（h1-h6）有默认的字体大小和边距
段落（p）有默认的上下边距
列表（ul, ol）有默认的左内边距和项目符号/数字
链接（a）有默认的颜色和下划线

CSS Reset

为了消除浏览器默认样式的差异，开发者经常使用 CSS Reset。以下是一些常见的 CSS Reset 方法：

1. 简单的 CSS Reset

css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

2. Eric Meyer's Reset CSS

css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

3. Normalize.css

Normalize.css 是一种现代的 CSS Reset 替代方案，它不是简单地消除所有默认样式，而是保留有用的默认样式，并修复浏览器之间的差异。

css

/* 这只是 Normalize.css 的一小部分示例 */
html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

main {
    display: block;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

html 常见面试题

1. DOCTYPE 的作用是什么？

DOCTYPE（文档类型声明）告诉浏览器使用哪种 HTML 或 XHTML 规范来解析页面。在 HTML5 中，DOCTYPE 声明非常简单：

html

<!DOCTYPE html>

它的作用是让浏览器以标准模式渲染页面，而不是怪异模式（Quirks Mode）。

2. HTML5 有哪些新特性？

HTML5 引入了许多新特性，包括：

语义化标签：header, footer, nav, section, article, aside 等
多媒体标签：audio, video
Canvas 和 SVG 绘图
本地存储：localStorage, sessionStorage
表单增强：新的输入类型和属性
Web Workers
Geolocation API
WebSockets
拖放 API

3. 语义化标签的意义是什么？

语义化标签的意义在于：

使代码更具可读性和可维护性
有利于 SEO（搜索引擎优化）
有利于屏幕阅读器等辅助技术解析页面
在没有 CSS 的情况下，页面也能呈现出清晰的结构

4. 块级元素和行内元素的区别？

块级元素：独占一行，可以设置宽高，如 div, p, h1-h6
行内元素：不独占一行，不可以设置宽高，如 span, a, strong

5. HTML 中的 meta 标签有什么作用？

meta 标签用于提供关于 HTML 文档的元数据，如字符编码、视口设置、页面描述等。常见的 meta 标签包括：

html

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1, 关键词2">

6. HTML5 中的 localStorage 和 sessionStorage 有什么区别？

localStorage：数据永久存储，除非手动删除
sessionStorage：数据在会话结束后（关闭页面或浏览器）被删除

两者都提供相同的 API：setItem(), getItem(), removeItem(), clear()。

7. 如何理解 HTML 语义化？

HTML 语义化是指使用恰当的 HTML 标签来表示内容的结构和含义，而不仅仅是为了展示效果。例如：

使用 h1-h6 表示标题层级
使用 nav 表示导航
使用 article 表示独立的内容
使用 footer 表示页脚

语义化的好处包括提高可访问性、SEO 友好、代码可读性和可维护性。

8. HTML5 的 data-* 属性有什么用？

data-* 属性允许我们在标准的 HTML 元素上存储额外的信息，而不需要使用非标准的属性或额外的 DOM 属性。

html

<div id="user" data-id="123" data-name="张三" data-role="admin">用户信息</div>

<script>
    const user = document.getElementById('user');
    console.log(user.dataset.id);    // "123"
    console.log(user.dataset.name);  // "张三"
    console.log(user.dataset.role);  // "admin"
</script>

9. HTML5 中的 Canvas 和 SVG 有什么区别？

Canvas：
- 基于像素的绘图
- 使用 JavaScript 动态生成和操作图形
- 适合复杂的动画和游戏
- 分辨率依赖，放大会失真
SVG：
- 基于矢量的绘图
- 使用 XML 描述图形
- 适合静态图形和简单动画
- 分辨率无关，放大不会失真

10. 如何优化网页加载速度？

压缩 HTML、CSS 和 JavaScript 文件
优化图片大小和格式
使用 CDN（内容分发网络）
减少 HTTP 请求
使用浏览器缓存
延迟加载非关键资源
使用异步加载 JavaScript
避免重定向
使用 HTTP/2

总结

HTML 是构建网页的基础，了解 HTML 元素的分类、嵌套关系、默认样式以及如何重置这些样式对于前端开发至关重要。随着 HTML5 的普及，新的语义化标签和 API 使得 Web 开发变得更加强大和灵活。掌握这些基础知识将有助于创建结构良好、语义清晰、易于维护的网页。

HTML基础回顾 ​

本文主要内容 ​

html 的常见元素 ​

1、head 区域的 html 元素 ​

meta ​

title ​

style ​

link ​

script ​

base ​

2、body 区域的 html 元素 ​

排版标签 ​

文本标签 ​

列表标签 ​

链接和图片 ​

表格标签 ​

表单标签 ​

html 元素的分类 ​

按默认显示方式分类 ​

按内容分类 ​

html 元素的嵌套关系 ​

常见的嵌套关系 ​

html 元素的默认样式和 CSS Reset ​

默认样式 ​

CSS Reset ​

1. 简单的 CSS Reset ​

2. Eric Meyer's Reset CSS ​

3. Normalize.css ​

html 常见面试题 ​

1. DOCTYPE 的作用是什么？ ​

2. HTML5 有哪些新特性？ ​

3. 语义化标签的意义是什么？ ​

4. 块级元素和行内元素的区别？ ​

5. HTML 中的 meta 标签有什么作用？ ​

6. HTML5 中的 localStorage 和 sessionStorage 有什么区别？ ​

7. 如何理解 HTML 语义化？ ​

8. HTML5 的 data-* 属性有什么用？ ​

9. HTML5 中的 Canvas 和 SVG 有什么区别？ ​

10. 如何优化网页加载速度？ ​

总结 ​

HTML基础回顾

本文主要内容

html 的常见元素

1、head 区域的 html 元素

meta

title

style

link

script

base

2、body 区域的 html 元素

排版标签

文本标签

列表标签

链接和图片

表格标签

表单标签

html 元素的分类

按默认显示方式分类

按内容分类

html 元素的嵌套关系

常见的嵌套关系

html 元素的默认样式和 CSS Reset

默认样式

CSS Reset

1. 简单的 CSS Reset

2. Eric Meyer's Reset CSS

3. Normalize.css

html 常见面试题

1. DOCTYPE 的作用是什么？

2. HTML5 有哪些新特性？

3. 语义化标签的意义是什么？

4. 块级元素和行内元素的区别？

5. HTML 中的 meta 标签有什么作用？

6. HTML5 中的 localStorage 和 sessionStorage 有什么区别？

7. 如何理解 HTML 语义化？

8. HTML5 的 data-* 属性有什么用？

9. HTML5 中的 Canvas 和 SVG 有什么区别？

10. 如何优化网页加载速度？

总结