博客文章：HTML核心概念与常见标签速览

一、 HTML 基本结构与标签认知

HTML（HyperText Markup Language）是构成网页的骨架，其代码由 **"标签"** 构成。

标签组成 ：标签名置于尖括号 < >中，如 <body>。
标签类型：
- 双标签 ：大部分标签成对出现，如 <body>为开始标签，</body>为结束标签，中间为内容。
- 单标签 ：只有开始标签，如换行标签 <br/>。
标签属性 ：在开始标签中可添加属性，为元素提供额外信息或设置。例如 id属性为元素设定唯一标识：<body id="myId">hello</body>。

一个基本的HTML文件结构如下：

复制代码

<!DOCTYPE html>
<html>
  <head>
    <title>页面标题</title>
  </head>
  <body>
    页面显示内容
  </body>
</html>

html：根标签。
head：存放页面属性，如标题、字符编码、视口设置等。
body：存放所有在浏览器中显示的内容。

二、标签层次与DOM树

标签之间存在层次关系，构成了 DOM树 (Document Object Model，文档对象模型)。

父子关系 ：如 head和 body是 html的子标签。
兄弟关系 ：如 head和 body互为兄弟标签。

可以使用浏览器开发者工具（F12或右键审查元素）的 Elements 标签查看详细的页面DOM结构。

三、常用文本与排版标签

标题标签 (h1- h6) ：定义标题，h1最大最重要，h6最小。
段落标签 (p)：定义一个段落。浏览器会自动在段落前后添加一些空白。
换行标签 (br) ：单标签，用于强制换行。规范写法为 <br/>。
格式化标签：用于设置文本样式（但实际开发中，样式通常由CSS控制）。
- 加粗：<strong>(语义更强) 或 <b>
- 倾斜：<em>(语义更强) 或 <i>
- 删除线：<del>(语义更强) 或 <s>
- 下划线：<ins>(语义更强) 或 <u>

四、媒体与链接标签

图片标签 (img) ：单标签，用于嵌入图像。必须包含 src属性来指定图片路径。
- 关键属性：
  - src：图片路径（必需）。
  - alt：替换文本，当图片无法加载时显示，对无障碍访问和SEO很重要。
  - title：提示文本，鼠标悬停时显示。
  - width/height：控制宽高（通常只设置一个以保持比例）。
超链接标签 (a)：定义超链接，用于跳转到其他页面或位置。
- 关键属性：
  - href：指定链接目标URL（必需）。
  - target：指定打开方式。_self（默认，当前页跳转），_blank（新窗口/标签页打开）。
- 链接类型：
  - 外部链接：指向其他网站。<a href="https://www.baidu.com">百度</a>
  - 内部链接：指向网站内部页面，使用相对路径。
  - 锚点链接：快速定位到当前页面的特定部分。需配合目标元素的 id属性使用。
    复制代码
```
<a href="#chapter1">跳转到第一章</a>
<h2 id="chapter1">第一章</h2>
```

五、路径详解

在 src、href等属性中指定文件位置，有两种方式：

相对路径：以当前HTML文件所在位置为参考起点。
- image.jpg或 ./image.jpg：同级目录。
- img/image.jpg：下一级目录（img文件夹内）。
- ../image.jpg：上一级目录。
绝对路径：
- 完整磁盘路径：D:/website/image.jpg(不推荐，可移植性差)。
- 完整网络URL：https://example.com/image.jpg。

六、表格与列表标签

表格标签 (table)：用于展示行列数据。
- 基本结构：<table>> <tr>(行) > <td>(单元格) / <th>(表头单元格)。
- 合并单元格：
  - 跨行合并：rowspan="n"
  - 跨列合并：colspan="n"
列表标签：用于呈现列表化信息，常用于导航、菜单布局。
- 无序列表 (ul> li)：项目符号为圆点等。
- 有序列表 (ol> li)：项目带数字或字母序号。
- 自定义列表 (dl> dt+dd) ：包含术语 (dt) 及其描述 (dd)。

七、表单标签 (`form`与 `input`)

表单是用户与服务器交互数据的关键部件。

表单域 (form)：定义数据提交的范围和目的地。

复制代码

<form action="submit.php" method="post">
  <!-- 各种表单控件放在这里 -->
</form>

表单控件 (input) ：type属性决定其形态。
- 文本框：<input type="text">
- 密码框：<input type="password">
- 单选框：<input type="radio" name="groupName">(**相同name** 才能实现多选一)。
- 复选框：<input type="checkbox">
- 提交按钮：<input type="submit" value="提交">(将表单数据发送到服务器)。
- 重置按钮：<input type="reset" value="清空">(清空表单内用户输入)。
- 文件选择：<input type="file">
label标签 ：提升表单可用性。通过 for属性与对应 input的 id绑定，点击 label文字也能聚焦到对应控件。
复制代码
```
<label for="username">用户名：</label>
<input type="text" id="username">
```
下拉菜单 (select> option) 和 **多行文本框 (textarea)** 也是重要的表单元素。

八、无语义布局标签：`div`与 `span`

div：块级元素，独占一行，是一个"大盒子"，常用于页面布局分区。
span：行内元素，不独占一行，是一个"小盒子"，常用于对一小段文本或行内元素进行样式化或分组。

它们是CSS和JavaScript进行样式控制与交互操作的主要挂钩。

面试可能问的问题与参考答案

Q1: HTML文件的基本结构是怎样的？各个部分的作用是什么？

**A1:** 一个标准的HTML5文件基本结构如下：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面标题</title>
</head>
<body>
    <!-- 页面内容 -->
</body>
</html>

<!DOCTYPE html>：声明文档类型为HTML5，确保浏览器以标准模式渲染。
<html>：根元素，lang属性声明页面主要语言，有助于搜索引擎和辅助工具。
<head>：包含页面的元信息（meta），不直接显示在页面上。
- <meta charset="UTF-8">：定义字符编码，防止中文乱码。
- <meta name="viewport" ...>：移动端视口配置，实现响应式布局的基础。
- <title>：定义浏览器标签页标题，对SEO至关重要。
<body>：包含所有用户可见的网页内容。

Q2: 请解释一下什么是语义化标签，并举例说明其好处。

A2: 语义化标签是指使用具有明确含义的HTML标签来构建页面结构（如<header>, <nav>, <article>, <section>, <footer>），而不仅仅是使用<div>和<span>。

举例：用<nav>包裹导航栏，用<article>包裹独立文章内容，用<footer>定义页脚。
好处：
1. 对开发者：代码可读性更强，易于维护。
2. 对SEO：搜索引擎能更好地理解页面内容结构，提升排名。
3. 对无障碍访问：屏幕阅读器等辅助设备能更准确地解析内容，提升残障用户访问体验。
4. 对浏览器：有助于更好地解析和渲染页面。

Q3: img标签的alt和title属性有什么区别？

**A3:** 两者都提供文本信息，但用途不同：

alt（替换文本）：
- 核心作用：当图片因路径错误、加载失败或用户使用屏幕阅读器时，显示此文本作为图片内容的描述。
- 重要性 ：对无障碍访问 和搜索引擎优化(SEO) 至关重要，是img标签的必需属性（在验证性场景下）。
title（提示文本）：
- 核心作用：鼠标悬停在图片上时显示的额外提示信息，是对图片的补充说明。
- 重要性：增强用户体验，但非必需。

Q4: 行内元素和块级元素有哪些区别？请举例说明。

**A4:** 主要区别体现在布局方式和盒子模型上：

块级元素 (Block)：
- 独占一行，前后会自动换行。
- 可以设置宽度(width)、高度(height)、内边距(padding)、外边距(margin)。
- 默认宽度是父元素的100%。
- 常见标签 ：<div>, <p>, <h1>-<h6>, <ul>, <li>, <table>, <form>。
行内元素 (Inline)：
- 不会独占一行，多个相邻的行内元素会排列在同一行，直到放不下才换行。
- 通常不能 直接设置宽度和高度（部分如<img>等替换元素例外）。
- 水平方向的内外边距有效，但垂直方向的外边距通常无效。
- 常见标签 ：<span>, <a>, <strong>, <em>, <img>, <input>, <label>。
行内块元素 (Inline-Block) ：如<img>, <input>，兼具两者特性：不独占一行，但可以设置宽高。

Q5: 表单提交中，get和post方法有什么区别？

A5: 这是表单method属性的两种主要值，区别如下：

GET：
- 将表单数据以 查询字符串 (name=value&name2=value2) 的形式附加在URL之后，在地址栏可见。
- 有长度限制（受浏览器和服务器限制）。
- 适用于：获取数据（如搜索查询），不改变服务器状态的请求，可被缓存和收藏。
- 不安全：敏感数据（如密码）会暴露在URL中。
POST：
- 将表单数据放在HTTP请求体中发送，在地址栏不可见。
- 理论上没有数据大小限制（实际受服务器配置限制）。
- 适用于：提交敏感数据（登录）、大量数据（上传文件）、会改变服务器状态的操作（新增、删除数据）。
- 相对GET更安全，但并非绝对安全，敏感信息传输仍需HTTPS。

博客文章：HTML核心概念与常见标签速览

一、 HTML 基本结构与标签认知

二、 标签层次与DOM树

三、 常用文本与排版标签

四、 媒体与链接标签

五、 路径详解

六、 表格与列表标签

七、 表单标签 (form与 input)

八、 无语义布局标签：div与 span

面试可能问的问题与参考答案

二、标签层次与DOM树

三、常用文本与排版标签

四、媒体与链接标签

五、路径详解

六、表格与列表标签

七、表单标签 (`form`与 `input`)

八、无语义布局标签：`div`与 `span`