si-meng-spec/SiMengWebSite_Notes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs(web): 修正HTML标签文档中的代码格式和描述

Browse Source 
统一使用反引号标记HTML标签，提高文档可读性和一致性
This commit is contained in:
祀梦
2025-11-02 20:43:42 +08:00
parent 43aa3f07e5
commit 2b9e5f9bd1
1 changed files with 16 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
docs/notes/programming/web/basic-syntax/html-tags-attributes.md
View File

@@ -15,30 +15,30 @@ permalink: /programming/web/basic-syntax/html-tags-attributes/
### 认识div标签 ### 认识div标签
**什么是 <div>？** **什么是 `<div>`？**
<div> 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。 `<div>` 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。
想象一下搬家时的纸箱： 想象一下搬家时的纸箱：
* 网页 = 整个房间 * 网页 = 整个房间
* <div> = 一个个纸箱 * `<div>` = 一个个纸箱
* 箱子里 = 可以放各种物品（文字、图片、按钮等） * 箱子里 = 可以放各种物品（文字、图片、按钮等）
### <div> 的基本特点 ### `<div>` 的基本特点
1. 块级元素 1. 块级元素
<div> 是块级元素，这意味着： `<div>` 是块级元素，这意味着：
* 默认会占据整行的宽度 * 默认会占据整行的宽度
* 前后会自动换行 * 前后会自动换行
* 就像段落一样，每个<div>都会从新的一行开始 * 就像段落一样，每个`<div>`都会从新的一行开始
**<div> 本身没有特定含义，它只是用来分组和布局。** **`<div>` 本身没有特定含义，它只是用来分组和布局。**
### 为什么要使用 <div>？ ### 为什么要使用 `<div>`？
没有<div>的情况： 没有`<div>`的情况：
```html title='index.html' ```html title='index.html'
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -58,7 +58,7 @@ permalink: /programming/web/basic-syntax/html-tags-attributes/
所有元素都堆在一起，很难分别控制样式。 所有元素都堆在一起，很难分别控制样式。
使用 <div> 的情况： 使用 `<div>` 的情况：
```html title='index.html' ```html title='index.html'
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
@@ -265,11 +265,11 @@ p { max-width: 60ch; }
## 三、链接与图片（A/IMG） ## 三、链接与图片（A/IMG）
### 什么是 <img> 标签 ### 什么是 `<img>` 标签
<img> 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。 `<img>` 标签用于在网页中插入图片，它是自闭合标签（不需要结束标签）。
### <img> 标签的基本属性 ### `<img>` 标签的基本属性
* src：指定图片的路径（必填） * src：指定图片的路径（必填）
* alt：指定图片的替代文本（必填，用于图片加载失败时显示） * alt：指定图片的替代文本（必填，用于图片加载失败时显示）
@@ -293,13 +293,13 @@ HTML中的链接是一种用于在不同网页之间导航的元素。
链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。 链接允许用户在浏览网页时单击文本或图像来跳转到其他位置，从而实现网页之间的互联。
HTML 链接 通过 <a> 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。 HTML 链接 通过 `<a>` 标签创建，通常用于将用户从一个页面导航到另一个页面、从一个部分跳转到页面中的另一个部分、下载文件、打开电子邮件应用程序或执行 JavaScript 函数等。
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。 当把鼠标指针移动到网页中的某个链接上时，箭头会变为**一只小手**。
## <a> 标签的基本属性 ## `<a>` 标签的基本属性
* href：指定链接的目标 URL（必填） * href：指定链接的目标 URL（必填）
* target：指定链接在何处打开（可选） * target：指定链接在何处打开（可选）
@@ -312,7 +312,7 @@ HTML 链接 通过 <a> 标签创建，通常用于将用户从一个页面导航
```html title='index.html' ```html title='index.html'
<a href="https://www.example.com">链接文本</a> <a href="https://www.example.com">链接文本</a>
``` ```
- <a> 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。 - `<a>` 标签：定义了一个超链接（anchor）。它是 HTML 中用来创建可点击链接的主要标签。
- href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。 - href 属性：指定目标 URL，当点击链接时，浏览器将导航到此 URL。
**这里还有一个target 属性**： **这里还有一个target 属性**：