--- theme: qklhk-chocolate --- # 引入 🤖【前方高能】当你颤抖的手点开这篇文章时——\ 恭喜你！即将解锁《人类早期驯服HTML的珍贵录像》📹 *** ### 😱 你正在经历这些吗？ ✅ 看教程像看天书，每个汉字都认识但连起来就...\ ✅ 永远分不清 `

`和``谁是霸道总裁\ ✅ 写代码5分钟，找消失的`

`花半小时🔍\ ✅ 别人的网页像科幻片，你的像石器时代🪓 *** ### 🚀 本文专治： **「一看就废」综合症**\ **「学完就忘」拖延症**\ **「标签太多」密集恐惧症** *** ### 📦 你将收获： ✨ 把HTML标签变成乐高积木的魔法\ ✨ VS Code隐藏骚操作（让键盘冒火星！）\ ✨ 连奶奶都能听懂的表格/表单秘籍\ ✨ **最最最重要的是——** 从此写代码时露出变态の微笑😏 *** ⚠️警告：接下来的内容可能引起极度舒适，建议准备好奶茶/肥宅快乐水，我们马上发车！( • ̀ω•́ )✧ # 🌈 一、先来点VS Code骚操作（程序员の加速器） 0. 代码格式化：**Shift+Alt+F** （自动整理格式） 1. 将文本向上或者向下移动一行（**Alt+Up/Alt+Down**） 2. 快速复制一行（**Shift+Alt+Up/Down**） 3. 快速保存：**Ctrl+S** 4. 快速搜索：**Ctrl+F** 5. 快速替换：**Ctrl+H** 6. 快速生成HTML骨架：利用Vscode在创建HTML文件后，打出一个“ ! ” 按回车即可生成 # 🏗️ 二、HTML是什么？ > 如果把网页比作人体 👩💻 > > * **骨骼** = HTML（结构） > * **肌肉** = CSS（样式） > * **灵魂** = JavaScript（交互）接下来让我们看一看HTML的基础骨架吧 # 三、HTML骨架大全（拒绝阿飘网页！） ## HTML5的基本骨架 **< html > < head > < body > < meta > < title >** ```html ✨防崩声明：告诉浏览器你不是个野鸡页面 🌐汉语结界：让浏览器知道你在说中文 🔠中文密码本（防止乱码）我的第一个网页 📛顶栏小标题（SEO加塞小能手） 👻 这里会显示页面内容（用户看得到的地方） ``` ### 1. DOCTYPE DOCTYPE是document type的缩写，是H5的声明，位于文档最前面，网页必备的组成部分，**避免浏览器怪异模式**。 ### 2. < head > head用于定义文档头部，包含各种属性和信息，包括文档标题，在Web的位置，以及和其他文档的关系，绝大多数文档头部包含的数据不会作为真正的内容展示给读者。 ### 3.< body > 其元素定义在文档的主体，包含文档的所有内容（文本、超链接、图像、表格和列表....）它会直接在页面显示出来，是用户可以直观看到的内容。 ### 4. < title > < title >是< head >中唯一必须要求包含的东西，也就是说写head一定要有title < title > 的增加有利于SEO的优化。 SEO：Search Engine Optimization（搜索引擎优化的缩写）听起来很高级对吧，其实简单来讲这个东西就是会影响搜索引擎能不能搜到你的网站，你的SEO做的好一点，被搜到的几率就高一点，当然建议用必应hhhhhh，不像国内某搜索引擎，一搜全是野鸡网站😓😓，你说对吧，某d。 ### 5. < Meta > 其为单标签，用来描述HTML网页文档的属性，例如 charset=‘utf-8’，就是说这个**文档的编码**是utf-8. # 🎭 四、常用标签魔幻秀 ## 1. < hx > 标题标签 ```html

我是大哥大

👑字号最大，SEO最重视

我是中不溜秋

🤏字号适中（你存在感最弱）

最后的倔强

😭蚂蚁级别的文字 ``` < h1 > \~ < h6 > 六个标题标签。一次性打出6个标签的魔术方法（Magic\~）：**h\$\6** ```html

``` ## 🤖 1.1 标题的正确使用：不是用来装X的！ 🚨**作死型用法** ```html

这段文字只是要变特大号！

这段只是想要倾斜效果

``` 🎯 **生存法则** * **王者法则**：标题是金字塔👑，不是平头哥！ ```html

人类驯服野生HTML实录

第一章：被div支配的恐惧

``` * **SEO秘籍**：正确使用标题 = 在搜索引擎里"混脸熟"👥\ （SEO机器人：这网站标题结构好清晰，多给点流量！） ⚠️ 血的教训：CSS才是管样式的老大！想变大变粗？请找style娘娘\~ ## 1.2 标题的 "站位哲学" —— align是门玄学！ align=‘left|center|right',分别对应将文本放在**左、中、右**边。 ```html

👈 社恐模式：贴墙站，生怕被人看到

🎤 C位出道：头顶聚光灯，全场我最靓

👉 右翼反骨：歪嘴一笑，就爱搞不对称

``` ## 2. < p > < br > < hr />标签段落是通过 < p >来定义的，直接在body写的文本效果和< p >一样，但是不推荐，因为后续要对于文本进行css样式改变。 < br > < /br > **（单标签）** 换行 ```html

你猜猜
我在干嘛

``` < hr/> 无论你多么牛b，HR才是决定你能不能进入公司的关键😋，所以 < hr >为分界线。它可以设置属性如color、width、size、align（默认居中）。 ```html

``` ## 3. < img >标签 ```html 加载失败显示文字

``` img是**单标签**，**不需要闭合操作** src: 图片的路径 alt：规定图像的替代文本（图片显示不出来时，会显示此文本） width：规定图像宽度 height：规定图像高度 title：鼠标悬停在图片上给予提示 ### 3.1 例子 ```html Meow

``` 正常显示： ![image-20250318113016566.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6b5105c7f0584a11b37e5c7fa4706cb4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=xQmkrmc31QmcFMBz8t5H5wgo%2Bjo%3D) 不正常显示： ![image-20250318113047931.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d5f5a16bae104c348b10189851c13f43~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=glFZePjAJMy2QyAfOeLC2jSZ7ng%3D) 鼠标悬停在图片上会有提示：Kitty ### 3.2 图片的路径（绝对路径/相对路径/网络路径） #### 绝对路径：**"地址写太全 = 作死の前奏"** ```html

``` **翻译成人类语言：** * 就像大喊"我在**地球·亚洲·中国·XX市·XX小区3栋1801沙发底下**" * **优点**：自带GPS级别的精准定位 * **缺点**：换个电脑直接上演《消失的图片》 #### 相对路径：两者相对关系，两者在同一路径下可以访问 * 子级关系：/ 从当前目录往下找 * 父级关系：../ 返回上一级目录往下找 * 同级关系：./ 在同级目录开始找 **翻译一下**：我在**地球·亚洲·中国·XX市·XX小区3栋1801**，如果我用 / ，则我**从1801**里开始寻找我要的东西，我要用 ./ 我就可以**从1802，1803....(和1801同级）** 开始找我要的东西，如果我用 ../ 则我从**3栋**开始找我要的东西... #### 网络地址：直接访问网站的图片地址，直接CV即可 ```html

``` **人类使用守则：** 1. 优点：无需自己存图，直接蹭网用 2. 风险：原作者删图=你的网站裂开，仿佛在喊 **"还我图来！"** **暴言总结：** * 绝对路径 → **社恐式精准自嗨** * 相对路径 → **职场老油条的迂回战术** * 网络路径 → **在违法的边缘疯狂试探**\ **终极选择：用相对路径，保平安（和同事的友谊）🙏** ## 4. 超文本链接 < a > < a >用于文字/图片........ ```html 跳转 ``` 利用 `target='_blank'`在新标签页内打开（直接在a中写，此非style样式）， `text-decoration`=none,去除下划线， `color`: inherit,继承父文本颜色。（这是作者在写某超级复古JSP技术作业时遇到的一种需求） ## 5. 文本标签作用：帮你显示不一样的文字 **< em >** 定义着重文字 **< b >** 定义粗体文本 **< i >** 定义斜体字 **< strong >** 定义加重语气 **< del >** 定义删除字 **< span >** 元素没有特殊的含义（PS：这些都是**闭合标签**哦\~）区别： ![image-20250319140726495.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ae99bc7364fe4f638dd6a3ecb9fe815c~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=syXP3K21ViB%2F3hrPOOPvcdwD%2BI4%3D) **注意：** 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇。 ## 6. 有序列表简而言之，就是写出来的列表是有序号的呗\~ 嘿\~ 还以为多高级的东西呢，还不如我每天早晨在东直门喝的豆汁儿呢\~ ```html

苹果
香蕉
梨

``` ![image-20250319141027965.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/07c44fbfcc2a45d6bc6a99659559b236~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=fJ89smjHrgqnJ7TVT9RZQ4H7tqw%3D) ![image-20250319141356975.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/1ca6a950efeb4b2d95ba84a79be5285b~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=uW5mniebBpJXfPS9A%2FjoIh7Evl0%3D) 哦！对了！列表也可以进行嵌套哦\~ ```html

水果
1. 苹果
2. 香蕉
3. 梨
蔬菜

``` ![image-20250319141555244.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/ef15eebde94542b193189aff13352414~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=n9A66vduhf%2B2h3ovfrGBkbpqc20%3D) ## 7. 无序列表 ```html

水果
蔬菜
肉

``` ![image-20250319142508094.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/6a29320729684c47b22f133e2c3c12dc~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=OMWcLTkBbqPEk8wlbTo14sbySDE%3D) 当然老实的有序列表可以进行嵌套，我们的无序列表也可以 0v0！ **快捷生成**：ul>li\*3(数字根据想生成的li的数量来修改) ## 8. 表格 **表格组成和特点：** 行、列、单元格单元格特点：同行等高、同列等宽。 **表格标签：** < table > 表格 < tr > 行 < td > 列（单元格） **表格属性：** border：设置表格的边框 width：设置表格的宽度 height：设置表格的高度 \**快捷键：*table>tr\*3>td\*2{damn!}** ![image-20250319143507875.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/53e31e543a49433a84723645645abc92~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=zqUhRvtkf2h9Xmm%2BP2djr80qU84%3D) ```html

damn!	damn!
damn!	damn!
damn!	damn!

``` ### 8.1 单元格合并 ```html

damn!
damn!	damn!
damn!

``` ![image-20250319144257514.png](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/8534e0c1a7d64c26bf57e899de287d48~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=qbFOP1eD384FbMvi5lyMQD%2BTdj4%3D) # 🌟五、**表单：网页的交友软件——收集用户信息的终极奥义！** 作用：使得网页具有交互性，例如输入信息并提交。 ```html ``` * **action**：数据要私奔到哪个服务器地址（比如`/login`） * **method**：私奔方式（GET=大喇叭广播，POST=加密专车） * **name**：给表单取的灵魂代号（方便JS操控） ## 💣 **GET vs POST の世纪对决** | | GET | POST | | -------- | ------------------ | ---------------- | | **数据传送** | URL明文传送（像裸奔） | 请求体加密（穿隐身衣） | | **安全性** | 永远不要用来传密码！ | 稍微安全（但也要HTTPS护体） | | **容量限制** | URL最长约3000字符（像小书包） | 无限制（像集装箱） | | **典型场景** | 搜索关键词、分页参数 | 登录注册、文件上传 | **血泪案例** ```html ``` → 提交后地址栏变身：`?password=iloveyou` ⚠️社死现场警报！ **表单元素：** 一般包含三个组成部分：表单标签（form标签）、表单域（输入框）、表单按钮（提交按钮）。 **🛠️ 表单三兄弟の技能树** | 成员 | 必杀技 | 武器库案例 | | -------- | ----------------------- | -------------------------- | | **表单标签** | ` ``` ## 2. 块级元素与行内元素（内联元素） | 块级元素 | 内联元素 | | ------------------------- | ------------------------------- | | 霸道总裁（在页面中独占一行，能包养所有元素） | 小鸟依人（行内元素不会独占页面的一行，只占自身的大小） | | 可以设置width、height属性 | 行内元素设置width和height无效 | | 一般块级元素可以包含**行内元素和其他块级元素** | 一般行内元素可以包含**行内元素**而不能包含**块级元素** | > 常见的块级元素： div、form、h1\~h6、hr、p、table、ul 等 > 常见的行内元素： a、b、em、i、span、strong 等 > 行内块级元素： button、img、input 等（特点：不换行、能识别宽高） ### 2.1 display属性 display属性用于控制元素的显示方式。 | **`display` 值** | **描述** | **特点** | | --------------- | ------ | -------------------- | | `block` | 块级元素 | 独占一行，可设置宽高、内边距、外边距 | | `inline` | 内联元素 | 不独占一行，宽高由内容决定，无法设置宽高 | | `inline-block` | 行内块级元素 | 不独占一行，但可以设置宽高 | | `none` | 隐藏元素 | 元素不显示，且不占据空间 | **记住了没有？** 孩子，记不住就对了哈哈哈哈哈，达康书记来了他也记不住啊，这东西太多了，大家不要想着看完就记住，要多看，多用，到了实际生产中多用一用就记住了不是\~\~\~ ![dk6.jpg](https://p3-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/882cff899ebc4f86b2f369aeb167a6ef~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAgTXJTa3ll:q75.awebp?rk3s=f64ab15b&x-expires=1759998189&x-signature=pK0gSb8mzepi4OufPlhhh1X3GnA%3D) # HTML5新增标签 / < div > **div**是容器元素，用来给页面分区。 | 作用 | 说明 | | ------ | -------------------- | | **分组** | 组织 HTML 结构 | | **布局** | 配合 CSS 实现页面布局 | | **样式** | 设置颜色、边框、阴影等 | | **交互** | 配合 JavaScript 实现动态效果 | **新增标签**：header、nav、article、section、silder、footer **注意：** 这些新特性在某些老版本的浏览器不支持，所以某些网站为了兼容性也是利用div + id来设计网页。 ```html

``` ```html

头部导航

代表一个独立的、完整的相关内容块、例如一篇完整的论坛帖子、一篇博客、一个用户评论等。

定义文档中的节，比如章节、页眉、页脚

侧边栏脚部 ``` # 🔥 **HTML修炼终章：当代码遇见美学革命** 至此，你已解锁**HTML核心奥义**——\ 从「肉身骨架」般的表格布局，到「话痨达人」的交互表单，\ 此时的网页虽能传递信息，却仿佛身穿囚服的哲学家：灵魂强大，外表寒酸。 **但！真正的暴击即将到来！**\ 下一场代码革命，是给HTML穿上**高定时装**的魔法——\ 你将在《CSS：让网页从裸奔到维密大秀的致命诱惑》中： * 🎨 用选择器施展**元素变装术**（某元素突然变成赛博朋克？） * 📐 用盒模型开启**空间折叠魔法**（边距padding的量子纠缠？） * 🎭 用定位开启**网页版星际穿越**（让按钮漂浮到屏幕外？） **🦄 警告：**\ 学习CSS后，你可能再也无法直视黑白命令行——\ 毕竟，谁能拒绝让表格变水晶宫、让输入框发光的诱惑呢？ **（下一页PPT正在加载像素...）**