欢迎大家来到IT世界,在知识的湖畔探索吧!
引入
【前方高能】当你颤抖的手点开这篇文章时—— 恭喜你！即将解锁《人类早期驯服 HTML 的珍贵录像》
你正在经历这些吗？
✅ 看教程像看天书，每个汉字都认识但连起来就… ✅ 永远分不清 <div> 和 <span> 谁是霸道总裁 ✅ 写代码5分钟，找消失的 </p> 花半小时 ✅ 别人的网页像科幻片，你的像石器时代
本文专治：
「一看就废」综合症 「学完就忘」拖延症 「标签太多」密集恐惧症
你将收获： #技术分享
✨ 把 HTML 标签变成乐高积木的魔法 ✨ VS Code 隐藏骚操作（让键盘冒火星！） ✨ 连奶奶都能听懂的表格/表单秘籍 ✨ 最最最重要的是—— 从此写代码时露出变态の微笑
— ⚠️警告：接下来的内容可能引起极度舒适，建议准备好奶茶/肥宅快乐水，我们马上发车！( • ̀ω•́ )✧
C 一、先来点VS Code骚操作（程序员の加速器）
- 代码格式化： Shift+Alt+F （自动整理格式）
- 将文本向上或者向下移动一行（ Alt+Up/Alt+Down ）
- 快速复制一行（ Shift+Alt+Up/Down ）
- 快速保存： Ctrl+S
- 快速搜索： Ctrl+F
- 快速替换： Ctrl+H
- 快速生成HTML骨架：利用Vscode在创建HTML文件后，打出一个“ ! ” 按回车即可生成
HTML ️ 二、HTML是什么？
如果把网页比作人体
骨骼 = HTML（结构）
肌肉 = CSS（样式）
灵魂 = JavaScript（交互）
接下来让我们看一看 HTML 的基础骨架吧
HTML 三、HTML骨架大全（拒绝阿飘网页！）
HTML HTML5的基本骨架
< html > < head > < body > < meta > < title >
<!DOCTYPE html> ✨防崩声明：告诉浏览器你不是个野鸡页面
<html lang="zh"> 汉语结界：让浏览器知道你在说中文
<head>
<meta charset="UTF-8"> 中文密码本（防止乱码） <title>我的第一个网页</title> 顶栏小标题（SEO 加塞小能手） </head>
<body>
这里会显示页面内容（用户看得到的地方） </body>
</html>
欢迎大家来到IT世界,在知识的湖畔探索吧!
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 > 标题标签
欢迎大家来到IT世界,在知识的湖畔探索吧!<h1>我是大哥大</h1> 字号最大，SEO最重视 <h3>我是中不溜秋</h3> 字号适中（你存在感最弱） <h6>最后的倔强</h6> 蚂蚁级别的文字
< h1 > ~ < h6 > 六个标题标签。
一次性打出6个标签的魔术方法（Magic~）：h$\6
<h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6> 1.1 标题的正确使用：不是用来装X的！
作死型用法
欢迎大家来到IT世界,在知识的湖畔探索吧!<h1>这段文字只是要变特大号！</h1> <h4>这段只是想要倾斜效果</h4>
生存法则
- 王者法则 ：标题是金字塔，不是平头哥！
<h1>人类驯服野生HTML实录</h1> <h2>第一章：被 div 支配的恐惧</h2> - SEO秘籍 ：正确使用标题 = 在搜索引擎里”混脸熟”
（SEO机器人：这网站标题结构好清晰，多给点流量！）
⚠️ 血的教训：CSS 才是管样式的老大！想变大变粗？请找 style 娘娘~
1.2 标题的 “站位哲学” —— align是门玄学！
align=‘left|center|right’,分别对应将文本放在 左、中、右 边。
欢迎大家来到IT世界,在知识的湖畔探索吧!<h2 align="left"> 社恐模式：贴墙站，生怕被人看到</h2> <h1 align="center"> C 位出道：头顶聚光灯，全场我最靓</h1> <h3 align="right"> 右翼反骨：歪嘴一笑，就爱搞不对称</h3>
2. < p > < br > < hr />标签
段落是通过 < p >来定义的，直接在 body 写的文本效果和< p >一样，但是不推荐，因为后续要对于文本进行 css 样式改变。
< br > < /br > （单标签） 换行
<p>你猜猜<br/>我在干嘛</p> < hr/> 无论你多么牛 b，HR 才是决定你能不能进入公司的关键，所以 < hr >为分界线。
它可以设置属性如 color、width、size、align（默认居中）。
欢迎大家来到IT世界,在知识的湖畔探索吧!<hr color="red" size="10px" width="300px" align="left">
3. < img >标签
<img src="猫主子.jpg" alt="加载失败显示文字" width="500px" height="500px" title='我的朋友圈'> img 是 单标签 ，不需要闭合操作
src: 图片的路径
alt：规定图像的替代文本（图片显示不出来时，会显示此文本）
width：规定图像宽度
height：规定图像高度
title：鼠标悬停在图片上给予提示
3.1 例子
欢迎大家来到IT世界,在知识的湖畔探索吧!<img src="C:\Users\17718\Desktop\素材\11.jpg" width=200 px alt="Meow" title="Kitty">
正常显示：
不正常显示：
鼠标悬停在图片上会有提示：Kitty
3.2 图片的路径（绝对路径/相对路径/网络路径）
绝对路径： “地址写太全 = 作死の前奏”
<img src="C:\Users\17718\Desktop\素材\11.jpg"> 翻译成人类语言：
- 就像大喊”我在 地球·亚洲·中国·XX市·XX小区3栋1801沙发底下 “
- 优点 ：自带GPS级别的精准定位
- 缺点 ：换个电脑直接上演《消失的图片》
相对路径：两者相对关系，两者在同一路径下可以访问
- 子级关系：/ 从当前目录往下找
- 父级关系：../ 返回上一级目录往下找
- 同级关系：./ 在同级目录开始找
翻译一下 ：我在 地球·亚洲·中国·XX 市·XX 小区3栋1801 ，
如果我用 / ，则我 从1801 里开始寻找我要的东西，
我要用 ./ 我就可以 从1802，1803….(和1801同级） 开始找我要的东西，
如果我用 ../ 则我从 3栋 开始找我要的东西…
网络地址：直接访问网站的图片地址，直接CV即可
欢迎大家来到IT世界,在知识的湖畔探索吧!<img src="https://别人的服务器/土豪图片库.jpg">
人类使用守则：
- 优点：无需自己存图，直接蹭网用
- 风险：原作者删图=你的网站裂开，仿佛在喊 “还我图来！”
暴言总结：
- 绝对路径 → 社恐式精准自嗨
- 相对路径 → 职场老油条的迂回战术
- 网络路径 → 在违法的边缘疯狂试探
终极选择：用相对路径，保平安（和同事的友谊）
4. 超文本链接 < a >
< a >用于文字/图片……..
<a href='www.xxxx.com'>跳转</a> 利用 target=’_blank’ 在新标签页内打开（直接在 a 中写，此非 style 样式），
text-decoration =none,去除下划线，
color : inherit,继承父文本颜色。（这是作者在写某超级复古 JSP 技术作业时遇到的一种需求）
5. 文本标签
作用：帮你显示不一样的文字
< em > 定义着重文字
< b > 定义粗体文本
< i > 定义斜体字
< strong > 定义加重语气
< del > 定义删除字
< span > 元素没有特殊的含义
（PS：这些都是 闭合标签 哦~）
区别：
注意： 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇。
6. 有序列表
简而言之，就是写出来的列表是有序号的呗~
嘿~ 还以为多高级的东西呢，还不如我每天早晨在东直门喝的豆汁儿呢~
欢迎大家来到IT世界,在知识的湖畔探索吧!<ol> <li> 苹果 </li> <li> 香蕉 </li> <li> 梨 </li> </ol>
哦！对了！列表也可以进行嵌套哦~
<ol type="A"> <li>水果</li> <li> <ol type="a"> <li> 苹果 </li> <li> 香蕉 </li> <li> 梨 </li> </ol> </li> <li>蔬菜</li> </ol> 7. 无序列表
欢迎大家来到IT世界,在知识的湖畔探索吧!<ul> <li>水果</li> <li>蔬菜</li> <li>肉</li> </ul>
当然老实的有序列表可以进行嵌套，我们的无序列表也可以 0v0！
快捷生成 ：ul>li*3(数字根据想生成的 li 的数量来修改)
8. 表格
表格组成和特点：
行、列、单元格
单元格特点：同行等高、同列等宽。
表格标签：
< table > 表格
< tr > 行
< td > 列（单元格）
表格属性：
border：设置表格的边框
width：设置表格的宽度
height：设置表格的高度
- 快捷键： table>tr3>td2{damn!}
<table> <tr> <td>damn!</td> <td>damn!</td> </tr> <tr> <td>damn!</td> <td>damn!</td> </tr> <tr> <td>damn!</td> <td>damn!</td> </tr> </table> 8.1 单元格合并
欢迎大家来到IT世界,在知识的湖畔探索吧!<table width="40px" height="40px" border=1> <tr> <td colspan="2">damn!</td> </tr> <tr> <td>damn!</td> <td rowspan="2">damn!</td> </tr> <tr> <td>damn!</td> </tr> </table>
五、 表单：网页的交友软件——收集用户信息的终极奥义！
作用：使得网页具有交互性，例如输入信息并提交。
<form action='url' method='post/get'name='myform'> </form> - action ：数据要私奔到哪个服务器地址（比如 /login ）
- method ：私奔方式（GET=大喇叭广播，POST=加密专车）
- name ：给表单取的灵魂代号（方便JS操控）
GET vs POST の世纪对决
| | GET | POST | | —
| 数据传送 | URL 明文传送（像裸奔） | 请求体加密（穿隐身衣） | | 安全性 | 永远不要用来传密码！| 稍微安全（但也要 HTTPS 护体） | | 容量限制 | URL 最长约3000字符（像小书包） | 无限制（像集装箱） | | 典型场景 | 搜索关键词、分页参数 | 登录注册、文件上传 |
血泪案例
欢迎大家来到IT世界,在知识的湖畔探索吧!<form method="get"> <input type="password" name="password"> <input type="submit"></form>
→ 提交后地址栏变身：?password=iloveyou ⚠️社死现场警报！
表单元素： 一般包含三个组成部分：
表单标签（form 标签）、表单域（输入框）、表单按钮（提交按钮）。
️ 表单三兄弟の技能树
| 成员 | 必杀技 | 武器库案例 | | —
| 表单标签 |
结界展开 | 设定攻击路线(method)和传送门(action) | | 表单域 | 读心术大师 | 文字、密码、按钮…七十二变 | | 表单按钮 | | “提交”核弹发射按钮 |
1. 表单域
表单域，表单域，表单里面的区域就是表单域！嗯，就是这样，比如下面被 form 标签包裹的区域就是表单域。
<form> <input type='text' name='用户名'> <input type='password' name='密码'> <input type='submit' value='提交'> </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 | 隐藏元素 | 元素不显示，且不占据空间 |
记住了没有？ 孩子，记不住就对了哈哈哈哈哈，达康书记来了他也记不住啊，这东西太多了，大家不要想着看完就记住，要多看，多用，到了实际生产中多用一用就记住了不是~~~
HTML HTML5新增标签 / < div >
div 是容器元素，用来给页面分区。
| 作用 | 说明 | | —
| 分组 | 组织 HTML 结构 | | 布局 | 配合 CSS 实现页面布局 | | 样式 | 设置颜色、边框、阴影等 | | 交互 | 配合 JavaScript 实现动态效果 |
新增标签 ：header、nav、article、section、silder、footer
注意： 这些新特性在某些老版本的浏览器不支持，所以某些网站为了兼容性也是利用 div + id 来设计网页。
欢迎大家来到IT世界,在知识的湖畔探索吧!<div id='header'> </div> <div id='nav'> </div> <div id='article'> <div id='section'> </div> </div> <div id='slider'> </div> <div id='footer'> </div>
<header></header> 头部 <nav></nav> 导航 <article> 代表一个独立的、完整的相关内容块、例如一篇完整的论坛帖子、一篇博客、一个用户评论等。 <section></section> 定义文档中的节，比如章节、页眉、页脚 </article> <aside></aside> 侧边栏 <footer></footer> 脚部 HTML HTML修炼终章：当代码遇见美学革命
至此，你已解锁 HTML 核心奥义 —— 从「肉身骨架」般的表格布局，到「话痨达人」的交互表单，此时的网页虽能传递信息，却仿佛身穿囚服的哲学家：灵魂强大，外表寒酸。
但！真正的暴击即将到来！ 下一场代码革命，是给 HTML 穿上 高定时装 的魔法—— 你将在《CSS：让网页从裸奔到维密大秀的致命诱惑》中：
- 用选择器施展 元素变装术 （某元素突然变成赛博朋克？）
- 用盒模型开启 空间折叠魔法 （边距padding的量子纠缠？）
- 用定位开启 网页版星际穿越 （让按钮漂浮到屏幕外？）
警告： 学习 CSS 后，你可能再也无法直视黑白命令行—— 毕竟，谁能拒绝让表格变水晶宫、让输入框发光的诱惑呢？
（下一页 PPT 正在加载像素…）
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://itzsg.com/136821.html
