chore: 更新mermaid依赖至11.12.1并删除过时文档
删除html2.md文档并简化html-tags-attributes.md内容
This commit is contained in:
@@ -4,115 +4,7 @@ createTime: 2025/11/2 19:30:00
|
||||
permalink: /programming/web/basic-syntax/html-tags-attributes/
|
||||
---
|
||||
|
||||
## 开场：掌握这些标签，就能写出 80% 的网页
|
||||
|
||||
今天我们来认识**最常用的 HTML 标签**和它们的**常见属性**。
|
||||
把它们学会，你就能从零搭建出结构清晰、内容丰富的网页。语言风格延续上一课的节奏：轻松、直观、能马上上手。
|
||||
|
||||
想象一下：
|
||||
- 网页是一座房子；
|
||||
- 标签是房子里的“房间与家具”；
|
||||
- 属性是“家具的颜色、大小、功能开关”。
|
||||
|
||||
## 一、页面骨架（Head / Body）
|
||||
|
||||
网页的基本结构：
|
||||
```html title="index.html"
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>仲夏夜之梦</title>
|
||||
<link rel="stylesheet" href="style.css"> <!-- 引入外部样式 -->
|
||||
</head>
|
||||
<body>
|
||||
<!-- 页面主体内容放这里 -->
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
常用属性与标签说明：
|
||||
- `<html lang="zh-CN">`：声明页面语言，有利于无障碍与搜索引擎。
|
||||
- `<meta charset="utf-8">`：统一编码，避免中文乱码。
|
||||
- `<meta name="viewport" ...>`：移动端适配必备。
|
||||
- `<title>`：浏览器标签页的标题。
|
||||
- `<link rel="stylesheet" href="...">`：引入 CSS。
|
||||
- `<script defer src="...">`：引入 JS（`defer` 表示文档解析完再执行）。
|
||||
|
||||
补充说明：
|
||||
- `<!DOCTYPE html>`：让浏览器以标准模式解析页面，避免兼容性怪异行为。
|
||||
- `<head>` 放“页面信息与资源引入”，`<body>` 放“实际可见内容”。不要把可见内容标签写进 `<head>`。
|
||||
- 资源引入推荐顺序：`meta` → `title` → `link`。脚本通常后置并非必需（本节示例不包含 JS）。
|
||||
- `lang` 与 `charset` 是无障碍与中文页面的基础配置，几乎必填；`viewport` 是移动端适配必备。
|
||||
- 开发实践：先搭骨架（结构正确），再补样式与交互，便于调试与定位问题。
|
||||
|
||||
**小案例：基础页面骨架**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>小案例：基础页面骨架</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<h1>你好，HTML！</h1>
|
||||
<p>这是一个最小可运行的页面骨架。</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
body { font-family: system-ui, -apple-system, Segoe UI, Roboto; margin: 2rem; line-height: 1.6; }
|
||||
h1 { color: #2b7; }
|
||||
```
|
||||
:::
|
||||
|
||||
**小作业：搭建你的个人主页**
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>我的个人主页</title>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1><!-- TODO: 写下你的名字 --></h1>
|
||||
<p><!-- TODO: 写一句话自我介绍 --></p>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>关于我</h2>
|
||||
<p>写一段 2-3 句的自我介绍。</p>
|
||||
</section>
|
||||
<section>
|
||||
<h2>联系我</h2>
|
||||
<p><!-- TODO: 填写你的邮箱 --></p>
|
||||
</section>
|
||||
</main>
|
||||
<footer>© 2025 祀梦</footer>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
body { margin: 2rem; font-family: system-ui; }
|
||||
header, footer { text-align: center; }
|
||||
main { max-width: 720px; margin: 0 auto; }
|
||||
h2 { margin-top: 1.5rem; }
|
||||
```
|
||||
:::
|
||||
|
||||
## 二、文本与标题（H/P/Span/Strong/Em）
|
||||
## 文本与标题（H/P/Span/Strong/Em）
|
||||
|
||||
**标题**：从重要到不重要，`<h1>` ~ `<h6>`。
|
||||
```html title="index.html"
|
||||
|
||||
@@ -1,144 +0,0 @@
|
||||
---
|
||||
title: Web 前端基础第二课
|
||||
createTime: 2025/11/2 18:25:48
|
||||
permalink: /programming/web/basic-syntax/html2/
|
||||
---
|
||||
|
||||
## 认识div标签
|
||||
|
||||
**什么是 <div>？**
|
||||
|
||||
<div> 是 "division"（分区）的缩写，可以理解为网页中的"容器"或"盒子"。
|
||||
|
||||
想象一下搬家时的纸箱：
|
||||
|
||||
* 网页 = 整个房间
|
||||
* <div> = 一个个纸箱
|
||||
* 箱子里 = 可以放各种物品（文字、图片、按钮等）
|
||||
|
||||
## <div> 的基本特点
|
||||
|
||||
1. 块级元素
|
||||
<div> 是块级元素，这意味着：
|
||||
|
||||
* 默认会占据整行的宽度
|
||||
* 前后会自动换行
|
||||
* 就像段落一样，每个<div>都会从新的一行开始
|
||||
|
||||
**<div> 本身没有特定含义，它只是用来分组和布局。**
|
||||
|
||||
## 为什么要使用 <div>？
|
||||
|
||||
没有<div>的情况：
|
||||
```html title='index.html'
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>仲夏夜之梦</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的网站</h1>
|
||||
<p>欢迎来到我的个人网站！</p>
|
||||
<img src="photo.jpg" alt="我的照片">
|
||||
<p>这是我的个人介绍...</p>
|
||||
<button>联系我</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
所有元素都堆在一起，很难分别控制样式。
|
||||
|
||||
使用 <div> 的情况：
|
||||
```html title='index.html'
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>仲夏夜之梦</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>我的网站</h1>
|
||||
<p>欢迎来到我的个人网站！</p>
|
||||
</div>
|
||||
<div class="content">
|
||||
<img src="photo.jpg" alt="我的照片">
|
||||
<p>这是我的个人介绍...</p>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<button>联系我</button>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
这样我就可以分别控制每个部分的样式啦！
|
||||
|
||||
这个时候又有聪明的小朋友问了：这个class是什么呀？难道说？！是**起的名字！！**
|
||||
|
||||
太好了，恭喜你答对了，那么我们为什么要用class呢？
|
||||
|
||||
## Class
|
||||
|
||||
Class 可以理解为给 HTML 元素起的"组名"或"类别名"，让 CSS 能够精确地找到并美化特定的元素。
|
||||
|
||||
想象一个学校：
|
||||
* HTML 元素 = 学生
|
||||
* Class = 学生的身份（如"三年级一班"、"篮球队员"）
|
||||
* CSS = 老师，根据身份给学生安排不同的任务和服装
|
||||
|
||||
class基本用法此处就不举例了，详情参照上面的代码。
|
||||
|
||||
如果没有class的情况：
|
||||
```html title='index.html'
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>仲夏夜之梦</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的网站</h1>
|
||||
<p>普通段落</p>
|
||||
<p>个人介绍</p>
|
||||
<p>重要提示</p>
|
||||
<button>普通按钮</button>
|
||||
<button>重要按钮</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
如果我们想给"重要提示"和"重要按钮"设置特殊样式，很难精确选择！像之前我教的一样css直接用p或者h1来选择的话就无法区分具体每一段的区别了。
|
||||
|
||||
这时候就可以用class了！
|
||||
::: code-tabs
|
||||
@tab index.html
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>仲夏夜之梦</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>我的网站</h1>
|
||||
<p class="normal">普通段落</p>
|
||||
<p class="intro">个人介绍</p>
|
||||
<p class="warning">重要提示</p>
|
||||
<button class="normal-btn">普通按钮</button>
|
||||
<button class="important-btn">重要按钮</button>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
@tab style.css
|
||||
```css
|
||||
.warning {
|
||||
color: red;
|
||||
font-weight: bold;
|
||||
}
|
||||
.important-btn {
|
||||
background-color: red;
|
||||
color: white;
|
||||
}
|
||||
```
|
||||
**现在自己动手尝试一下**
|
||||
Reference in New Issue
Block a user