😎【HTML新手村通关指南】边笑边学的超有趣笔记😎

MrSkye
1,424 阅读12分钟

引入

🤖【前方高能】当你颤抖的手点开这篇文章时——
恭喜你！即将解锁《人类早期驯服HTML的珍贵录像》📹

😱 你正在经历这些吗？

✅ 看教程像看天书，每个汉字都认识但连起来就...
✅ 永远分不清 <div>和<span>谁是霸道总裁
✅ 写代码5分钟，找消失的</p>花半小时🔍
✅ 别人的网页像科幻片，你的像石器时代🪓

🚀 本文专治：

「一看就废」综合症
「学完就忘」拖延症
「标签太多」密集恐惧症

📦 你将收获：

✨ 把HTML标签变成乐高积木的魔法
✨ VS Code隐藏骚操作（让键盘冒火星！）
✨ 连奶奶都能听懂的表格/表单秘籍
✨ 最最最重要的是—— 从此写代码时露出变态の微笑😏

⚠️警告：接下来的内容可能引起极度舒适，建议准备好奶茶/肥宅快乐水，我们马上发车！( • ̀ω•́ )✧

🌈 一、先来点VS Code骚操作（程序员の加速器）

  1. 代码格式化：Shift+Alt+F （自动整理格式）
  2. 将文本向上或者向下移动一行（Alt+Up/Alt+Down）
  3. 快速复制一行（Shift+Alt+Up/Down）
  4. 快速保存：Ctrl+S
  5. 快速搜索：Ctrl+F
  6. 快速替换：Ctrl+H
  7. 快速生成HTML骨架：利用Vscode在创建HTML文件后，打出一个“ ! ” 按回车即可生成

🏗️ 二、HTML是什么？

如果把网页比作人体 👩💻

  • 骨骼 = HTML（结构）
  • 肌肉 = CSS（样式）
  • 灵魂 = JavaScript（交互）

接下来让我们看一看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>

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 > 标题标签

<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的！

🚨作死型用法

<h1>这段文字只是要变特大号！</h1>  <!-- 浏览器：你是标题刺客吗？ -->
<h4>这段只是想要倾斜效果</h4>  <!-- 搜索引擎：你礼貌吗？ -->

🎯 生存法则

  • 王者法则：标题是金字塔👑，不是平头哥！

    <!-- 正解 ↓ -->
<h1>人类驯服野生HTML实录</h1>  
<h2>第一章：被div支配的恐惧</h2>
<!-- 像剥洋葱一样层层递进 -->

  • SEO秘籍：正确使用标题 = 在搜索引擎里"混脸熟"👥
    （SEO机器人：这网站标题结构好清晰，多给点流量！）

⚠️ 血的教训：CSS才是管样式的老大！想变大变粗？请找style娘娘~

1.2 标题的 "站位哲学" —— align是门玄学！

align=‘left|center|right',分别对应将文本放在左、中、右边。

<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>
    <!--关于单标签，建议斜杠写在后面，HTML5可以不写。写在前面可能会被 错误认为是闭合标签。<br/> √  </br> × -->

< hr/> 无论你多么牛b，HR才是决定你能不能进入公司的关键😋，所以 < hr >为分界线。

它可以设置属性如color、width、size、align（默认居中）。

    <hr color="red" size="10px" width="300px" align="left">
    <!-- size为分界线的宽度，width为分界线的长度，即延长多少。-->

3. < img >标签

    <img src="猫主子.jpg" alt="加载失败显示文字" width="500px" height="500px" title='我的朋友圈'>
    <!--像极了发朋友圈：没图时显示"[图片加载中]"-->

img是单标签，不需要闭合操作

src: 图片的路径

alt：规定图像的替代文本（图片显示不出来时，会显示此文本）

width：规定图像宽度

height：规定图像高度

title：鼠标悬停在图片上给予提示

3.1 例子

    <img src="C:\Users\17718\Desktop\素材\11.jpg" width=200 px alt="Meow" title="Kitty">

正常显示：

image-20250318113016566.png 不正常显示：

image-20250318113047931.png 鼠标悬停在图片上会有提示：Kitty

3.2 图片的路径（绝对路径/相对路径/网络路径）

绝对路径："地址写太全 = 作死の前奏"
 <img src="C:\Users\17718\Desktop\素材\11.jpg">  
  <!--  由盘符开始访问 -->
<!-- 浏览器：  
  你的电脑：已找到！💡  
  别人的电脑：C盘？我选择死亡.jpg 💀  
-->

翻译成人类语言：

  • 就像大喊"我在地球·亚洲·中国·XX市·XX小区3栋1801沙发底下"
  • 优点：自带GPS级别的精准定位
  • 缺点：换个电脑直接上演《消失的图片》
相对路径：两者相对关系，两者在同一路径下可以访问

  • 子级关系：/ 从当前目录往下找

  • 父级关系：../ 返回上一级目录往下找

  • 同级关系：./ 在同级目录开始找

翻译一下：我在地球·亚洲·中国·XX市·XX小区3栋1801，

如果我用 / ，则我从1801里开始寻找我要的东西，

我要用 ./ 我就可以从1802，1803....(和1801同级） 开始找我要的东西，

如果我用 ../ 则我从3栋开始找我要的东西...

网络地址：直接访问网站的图片地址，直接CV即可
<img src="https://别人的服务器/土豪图片库.jpg">  
<!-- 实际效果：  
  图片正常：薅到羊毛了！🎉  
  图片挂了：链接被大佬删库跑路了…💥  
-->

人类使用守则：

  1. 优点：无需自己存图，直接蹭网用
  2. 风险：原作者删图=你的网站裂开，仿佛在喊 "还我图来！"

暴言总结：

  • 绝对路径 → 社恐式精准自嗨
  • 相对路径 → 职场老油条的迂回战术
  • 网络路径 → 在违法的边缘疯狂试探
    终极选择：用相对路径，保平安（和同事的友谊）🙏

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：这些都是闭合标签哦~）

区别：

image-20250319140726495.png

注意： 常用文本标签和段落是不同的，段落代表一段文本，而文本标签一般表示文本词汇。

6. 有序列表

简而言之，就是写出来的列表是有序号的呗~

嘿~ 还以为多高级的东西呢，还不如我每天早晨在东直门喝的豆汁儿呢~

    <ol>
        <li> 苹果 </li>
        <li> 香蕉 </li>
        <li> 梨 </li>
    </ol>

    <!--
    <ol>的type属性拥有的选项：
    1. 1 表示列表项目用数字标号（1，2，3...）
    2. a 表示列表项目用小写字母标号（a,b,c..）
    3. A 表示列表项目用大写字母标号（A,B,C...）
    4. i 表示列表项目用小写罗马字母标号（i,ii,iii...）
    5. I 表示列表项目用大写罗马字母标号（I,II,III...）
    -->

image-20250319141027965.png

image-20250319141356975.png

哦！对了！列表也可以进行嵌套哦~



    <ol type="A">
            <li>水果</li>
        <li>
            <ol type="a">
            <li> 苹果 </li>
            <li> 香蕉 </li>
            <li> 梨 </li>
            </ol>
        </li>
        <li>蔬菜</li>
        </ol>

image-20250319141555244.png

7. 无序列表

    <ul>
        <li>水果</li>
        <li>蔬菜</li>
        <li>肉</li>
    </ul>

    <!--
    <ul>的type属性拥有的选项：
    1. disc 实心圆
    2. circle 空心圆
    3. square 实心正方形
    4. none 无效果

    -->

image-20250319142508094.png 当然老实的有序列表可以进行嵌套，我们的无序列表也可以 0v0！

快捷生成：ul>li*3(数字根据想生成的li的数量来修改)

8. 表格

表格组成和特点：

行、列、单元格

单元格特点：同行等高、同列等宽。

表格标签：

< table > 表格

< tr > 行

< td > 列（单元格）

表格属性：

border：设置表格的边框

width：设置表格的宽度

height：设置表格的高度

*快捷键：table>tr*3>td*2{damn!}

image-20250319143507875.png

    <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 单元格合并

    <!--

    colspan  左右合并：保留左边内容  col:列，跨列合并，所以是左右合并
    rowspan  上下合并：保留上面内容  row:行，跨行合并，所以是上下合并

    -->
    <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>

image-20250319144257514.png

🌟五、表单：网页的交友软件——收集用户信息的终极奥义！

作用：使得网页具有交互性，例如输入信息并提交。

    <form action='url' method='post/get'name='myform'>
        
    </form>
  • action：数据要私奔到哪个服务器地址（比如/login）
  • method：私奔方式（GET=大喇叭广播，POST=加密专车）
  • name：给表单取的灵魂代号（方便JS操控）

💣 GET vs POST の世纪对决

GETPOST
数据传送URL明文传送（像裸奔）请求体加密（穿隐身衣）
安全性永远不要用来传密码！稍微安全（但也要HTTPS护体）
容量限制URL最长约3000字符（像小书包）无限制（像集装箱）
典型场景搜索关键词、分页参数登录注册、文件上传

血泪案例

<!-- 用GET传密码 ↓ 全网直播 ↓ -->
<form method="get">    
<input type="password" name="password">    
<input type="submit"></form>

→ 提交后地址栏变身：?password=iloveyou ⚠️社死现场警报！

表单元素： 一般包含三个组成部分：

表单标签（form标签）、表单域（输入框）、表单按钮（提交按钮）。

🛠️ 表单三兄弟の技能树

成员必杀技武器库案例
表单标签<form> 结界展开设定攻击路线(method)和传送门(action)
表单域<input> 读心术大师文字、密码、按钮...七十二变
表单按钮<input type="submit">"提交"核弹发射按钮

1. 表单域

表单域，表单域，表单里面的区域就是表单域！嗯，就是这样，比如下面被form标签包裹的区域就是表单域。

    <form>  
        <input type='text' name='用户名'>  
        <input type='password' name='密码'>
        <input type='submit' value='提交'>
        <!-- 或者 <button type='submit'>提交</button> -->
    </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

HTML5新增标签 / < div >

div是容器元素，用来给页面分区。

作用说明
分组组织 HTML 结构
布局配合 CSS 实现页面布局
样式设置颜色、边框、阴影等
交互配合 JavaScript 实现动态效果

新增标签：header、nav、article、section、silder、footer

注意： 这些新特性在某些老版本的浏览器不支持，所以某些网站为了兼容性也是利用div + id来设计网页。

    <!-- 新增前 -->
    <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穿上高定时装的魔法——
你将在《CSS：让网页从裸奔到维密大秀的致命诱惑》中：

  • 🎨 用选择器施展元素变装术（某元素突然变成赛博朋克？）
  • 📐 用盒模型开启空间折叠魔法（边距padding的量子纠缠？）
  • 🎭 用定位开启网页版星际穿越（让按钮漂浮到屏幕外？）

🦄 警告：
学习CSS后，你可能再也无法直视黑白命令行——
毕竟，谁能拒绝让表格变水晶宫、让输入框发光的诱惑呢？

（下一页PPT正在加载像素...）

avatar
文章
阅读
粉丝