Web 前端八股文之 HTML 核心知识问答
目录
一、HTML5 基础概念
1. 什么是 HTML5？它和 HTML 有什么关系？
2. HTML5 的 DOCTYPE 声明有什么作用？
二、HTML 标签相关
1. HTML 标签有哪些常见形式？
2. 请简述 HTML5 基本骨架中各主要标签的作用。
3. 标题标签
4. 图片标签有哪些重要属性？图片路径有哪几种类型？
三、HTML 列表与表格
1. 有序列表和无序列表的标签分别是什么？它们的type属性有哪些取值？
2. 表格标签由哪些组成？单元格合并如何实现？
四、HTML 表单
1. 表单的作用是什么？
标签有哪些重要属性？2. 常见的表单控件有哪些？如何实现文本框、密码框和提交按钮？
五、块元素与行内元素
1. 块元素和行内元素有哪些主要区别？
2. 常见的块元素、行内元素和行内块元素有哪些？
六、HTML5 新增标签
1. HTML5 为什么要新增语义化标签？
2. 请列举几个 HTML5 新增的语义化标签，并说明其作用。
在 Web 前端开发领域，HTML 作为构建网页的基石，其相关知识是面试中的高频考点。今天，我们结合 HTML 网页编程基础的核心内容，整理出一系列常见的八股文问题，帮助大家在面试中脱颖而出。
一、HTML5 基础概念
1. 什么是 HTML5？它和 HTML 有什么关系？
HTML5 是 HTML（超文本标记语言）的最新修订版本，于 2014 年 10 月由万维网联盟（W3C）完成标准制定。它在 HTML 的基础上，新增了许多功能和特性，如语义化标签、多媒体支持、离线存储等，使网页开发更加高效、规范，能够更好地满足现代 Web 应用的需求 。
2. HTML5 的 DOCTYPE 声明有什么作用？
DOCTYPE 是 “document type”（文档类型）的缩写，是 HTML5 的声明，位于文档的最前面，处于标签之前。它的主要作用是告诉浏览器该文档使用的是 HTML5 标准，避免浏览器以怪异模式（Quirks Mode）渲染页面。怪异模式下，浏览器的渲染规则可能与标准模式不同，会导致页面显示异常，而正确的 DOCTYPE 声明能确保浏览器以一致的、符合标准的方式呈现网页内容。
二、HTML 标签相关
1. HTML 标签有哪些常见形式？
HTML 标签主要有两种形式：
- 双标签：由开始标签和结束标签组成，结束标签比开始标签多一个斜杠，例如、。双标签用于包裹网页中的各种内容和元素。
- 单标签：只有开始标签，没有结束标签，例如
、
、
。单标签通常用于一些简单的、不需要包含其他内容的元素，如插入图片、换行、绘制水平线等。
2. 请简述 HTML5 基本骨架中各主要标签的作用。
HTML5 基本骨架包含以下重要标签：
- 标签：定义整个 HTML 文档，是网页的根元素，所有其他 HTML 元素都要包含在标签内，浏览器通过识别该标签知道这是一个 HTML 文档。
- 标签：用于定义文档的头部，包含了文档的各种属性和信息，如文档标题（）、字符编码（）、外部样式表链接（）、脚本文件引用（）等。头部的内容不会直接显示在网页页面中，主要用于配置和描述网页的相关信息 。
- 标签：定义文档的主体部分，包含了网页中所有可见的内容，如文本、图像、链接、表格、表单等，这些内容会直接呈现在浏览器窗口中，供用户浏览和交互。
- 标签：是标签中唯一必须包含的元素，用于定义文档的标题，显示在浏览器窗口的标题栏或状态栏上，同时也会在搜索引擎结果页面中作为网页的标题展示，对网页的 SEO（搜索引擎优化）非常重要。
- 标签：用于描述 HTML 网页文档的属性，如字符编码（charset属性）、网页描述（name="description"）、关键词（name="keywords"）等。例如，charset="utf-8"表示当前网页使用 UTF - 8 编码格式，确保网页能正确显示各种字符。
3. 标题标签-在使用时有哪些注意事项？
在使用时有哪些注意事项？
- 语义和层级：
-
用于定义不同级别的标题，
表示最高级别的主标题，重要性依次递减，
为最低级别标题。应按照内容的逻辑层级合理使用，使网页结构清晰，便于搜索引擎理解和抓取，有利于 SEO 优化。
- 避免滥用：不要仅仅为了实现文本加粗或增大字号等样式效果而使用标题标签，标题标签应仅用于表示真正的标题内容。
- 对齐方式：可以通过align属性设置标题的对齐方式，如align="left"（左对齐）、align="center"（居中对齐）、align="right"（右对齐），默认情况下标题为左对齐 。
