HTML入门指南：从零开始学前端

第一章 初识 HTML & JavaWeb 前端学习方向

一、HTML 的定义

定义：HTML 全称超文本标记语言

1.HTML 的核心是给文本赋予机器可解析的语义结构，而非 “做网页”，网页只是其最常见的应用场景；

2.HTML 是声明式标记语言，无编程逻辑，底层通过 DOM 树实现与浏览器的交互；

3.HTML 的 “超文本” 本质是构建信息的非线性关联，是万维网的基础数据格式。

二、JavaWeb前端学习的方向

1.前端核心基础三剑客

HTML：负责搭建网页的骨架，决定页面有什么内容

CSS：负责搭建网页的骨架，决定页面有什么内容

JavaScript：负责给网页加交互，决定页面能做什么（点击按钮、表单验证、轮播图等）

2.进阶技术栈

前端框架：Vue、React、Angular（简化复杂项目开发，面试高频）

工程化工具：Webpack、Vite（打包项目、优化性能）

数据交互：AJAX、Fetch、Axios（实现前端和后端的数据通信）

三、各技术之间的关系（拿盖房子举例子）

HTML 是房子的钢筋水泥框架，规定了房间、门窗的位置和结构；

CSS 是房子的装修设计，负责刷墙、铺地板、选家具，让房子好看；

JavaScript 是房子的智能家居系统，控制灯的开关、窗帘的升降，让房子 “活” 起来；

前端框架和工程化工具，就是盖房子的施工设备，能让建大房子的效率更高。

第二章 今日实战：HTML 常用标签运用

一、基础文本标签

1.标签

<h1></h1>-<h6></h6>:标题标签，定义标题，从h1到h6字体依次减小、权重依次降低（h1优先级最高，通常一个页面只写 1 个）

<p></p>:段落标签，独占一行，注意里面只能包裹行内标签如<span>、<br>，不能包裹块级标签，如<h1>，<div>等

<hr/>：水平分割线（块级元素，默认自带上下间距 + 浅灰色线条）

<br/>：强制换行（行内元素，无自带间距）

<img/>：图片标签，属性有src（后面带图片路径），alt（当图片无法显示时文字提示），前两个都是必填属性，还有title（鼠标悬浮在图片上时显示的提示文本），width和height设置图片宽高，一般只写一个这样可以实现自动等比例缩放

<a></a>：超链接，属性href(必填，跳转的目标地址)，target（属性值有两个_self和_blank分别表示在本页面跳转和跳转到一个新页面）

<strong>/<s>:加粗文本，表示重要内容，推荐用strong更有语义

<em>/<i>:斜体，表示强调内容，推荐使用em更有语义

<del>/<s>:删除线条，表示已删除 / 废弃内容，推荐使用del更有语义

<ins>/<u>:下划线文本，表示新增 / 插入内容，推荐使用ins更有语义

<mark>:高亮文本，表示需要突出的内容（默认黄色背景）

<span>:行内 “容器” 标签，无默认样式，用来包裹小段文本（方便单独设置样式）

<sub>:下标文本

<sup>:上标文本

二、表格标签

table：表格核心容器，包裹所有表格内容的根容器（所有表格标签必须写在<table>内部才生效），常用属性有border，width，height，一般放在css里面统一设置更便捷

thead：表格表头区域（通常放列标题，一个表格只能有 1 个）

tbody：表格主体区域（放数据内容，一个表格至少有 1 个，可写多个）

tfoot：表格尾部区域（放汇总信息，如合计行，一个表格只能有 1 个），不常用

tr：代表一行，必须放在<table>/<thead>/<tbody>里面，不能单独使用

td：代表单元格，必须在<table>/<thead>/<tbody>/<tr>里面，不能单独使用

th：代表表头单元格，默认加粗 + 水平居中 + 垂直居中，必须放在<table>/<thead>/<tbody>里面，不能单独使用

补充：单元格合并属性

colspan="n"：跨列合并（当前单元格占n列的宽度，n是数字）。

rowspan="n"：跨行合并（当前单元格占n行的高度，n是数字）。

注意：即使不写<thead>/<tbody>/<tfoot>，浏览器也会自动把内容包裹在<tbody>里，但建议手动写（增强结构语义）。

案例代码：

<h2>第四节：表格标签</h2>

    <h3>我的游戏清单</h3>

    <h4>【游戏基础信息表】</h4>

    <table>

        <thead>

            <tr>

                <th>游戏名称 </th>

                <th>游戏类型</th>

                <th>游玩时长</th>

                <th>评分10分</th>

                <th>游玩状态</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>光·遇</td>

                <td>治愈冒险</td>

                <td>280小时</td>

                <td>9.6</td>

                <td>偶尔玩</td>

            </tr>

            <tr>

                <td>植物大战僵尸</td>

                <td>塔防休闲</td>

                <td>150小时</td>

                <td>9.4</td>

                <td>通关多遍</td>

            </tr>

            <tr>

                <td>消消乐</td>

                <td>消除闯关</td>

                <td>320小时</td>

                <td>9.0</td>

                <td>日常打卡</td>

            </tr>

            <tr>

                <td>贪吃蛇大作战</td>

                <td>休闲竞技</td>

                <td>80小时</td>

                <td>8.7</td>

                <td>偶尔娱乐</td>

            </tr>

            <tr>

                <td>球球大作战</td>

                <td>休闲竞技</td>

                <td>120小时</td>

                <td>8.9</td>

                <td>朋友组队</td>

            </tr>

        </tbody>

    </table>



    <h4>【游戏设备适配表】</h4>

    <table>

        <thead>

            <tr>

                <th>游戏名称</th>

                <th>电脑</th>

                <th>手机</th>

                <th>主机</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>光·遇</td>

                <td>✅</td>

                <td>✅</td>

                <td>❌</td>

            </tr>

            <tr>

                <td>植物大战僵尸</td>

                <td>✅</td>

                <td>✅</td>

                <td>❌</td>

            </tr>

            <tr>

                <td>消消乐</td>

                <td>❌</td>

                <td>✅</td>

                <td>❌</td>

            </tr>

            <tr>

                <td>贪吃蛇大作战 </td>

                <td>❌</td>

                <td>✅</td>

                <td>❌</td>

            </tr>

            <tr>

                <td>球球大作战</td>

                <td>❌</td>

                <td>✅</td>

                <td>❌</td>

            </tr>

        </tbody>

    </table>

效果图：

三、表单标签

1.form：包裹所有表单元素，是表单的 “总容器”，负责把内部元素的信息提交到后端

2.核心表单控件（按使用频率排序）

(1)input：单行输入 / 选择控件（核心标签）

作用：实现单行文本、数字、单选、复选等交互，必须配合 type 属性使用。

必写属性：type和name（控件的 “标识名”，后端通过这个名字识别数据）

• 补充：以下是type的一些属性值（左边是常用的属性值，右边则用的比较少）

注意：单选 / 复选按钮，同一组的 name 必须一致（比如性别单选的两个按钮，name 都写 gender，才能实现 “互斥选择”）

选写属性（常用）：

value：控件的 “默认值”（比如 value="默认内容"）；单选 / 复选按钮必须写 value（后端通过 value 区分选了哪一个）。

placeholder：输入框的提示文字（比如 placeholder="请输入姓名"）。

required：标记为 “必填项”，不填就无法提交。

pattern：正则校验（如手机号 \d{11}）

min/max：数字 / 日期范围限制

(2)<select>+<option>：下拉框

示例：

<label for="city">所在城市：</label>

<select name="city" required>

        <option disabled selected>--请选择省份--</option> <option value="beijing">北京</option>         <option value="shanghai">上海</option>

</select>

（3）<textarea>：多行文本域

示例：

<label for="materials">所需食材：</label> <textarea name="materials" rows="5" cols="30" placeholder="请输入食材清单，每行一种"></textarea>

（4）button：按钮操作（提交表单、重置内容、自定义点击事件）

常用属性：type（决定按钮功能）

(5)label：标签关联（提升交互体验）

核心作用：点击文字可选中对应控件

关联方式：

推荐：用 for + id 关联（控件必须写 id，label 的 for 值和 id 一致）：

<label for="male">男</label> <input type="radio" name="gender" value="male">

简化：把控件包在 <label> 里：此时可以省略 for 和 id，点击文字自动触发控件：

<label> 女 <input type="radio" name="gender" value="female"> </label> 

注意：label 仅关联行内控件（input/select），禁止嵌套块级元素（如 <label><select>...</select></label>）。

案例：源代码以及效果图

<h2>第五节：表单标签</h2>

    <form action="http://localhost:3000" method="post" enctype="multipart/form-data">

        <h3>【1. 基础信息区】</h3>



        <label for="name">

            您的昵称:

            <input type="text" name="username" placeholder="请输入您的昵称" required>

        </label><br>



        <label for="phone">

            联系电话：

            <input type="tel" name="phone" placeholder="请输11位手机号" pattern="\d{11}" required>

        </label><br>



        <label for="email">

            联系邮箱：

            <input type="email" name="email" placeholder="请输入您的邮箱" required>

        </label><br>



        <label for="date">

            出生日期：

            <input type="date" name="date">

        </label><br>

        <label for="city">所在城市：</label>

        <select name="localcity" required>

            <option disabled selected>--请选择省份--</option>

            <option value="beijing">北京</option>

            <option value="shanghai">上海</option>

            <option value="guangdong">广东</option>

            <option value="shenzhen">深圳</option>

            <option value="hanzhou">杭州</option>

            <option value="jiangsu">江苏</option>

            <option value="chengdu">成都</option>

        </select>

       



        <h3>【2. 烘焙能力区】</h3>

        烘焙经验：

        <label><input type="radio" name="experience" value="新手一年内">新手一年内</label>

        <label><input type="radio" name="experience" value="进阶1-3年">进阶1-3年</label>

        <label><input type="radio" name="experience" value="资深3年以上">资深3年以上</label>

        <br>



        擅长品类：

        <label><input type="checkbox" name="category" value="蛋糕">蛋糕</label>

        <label><input type="checkbox" name="category" value="饼干">饼干</label>

        <label><input type="checkbox" name="category" value="泡芙">泡芙</label>

        <label><input type="checkbox" name="category" value="面包">面包</label>

        <label><input type="checkbox" name="category" value="挞类">挞类</label>

        <label><input type="checkbox" name="category" value="其他">其他</label>

        <br>



       

        <label for="brand">

            烤箱品牌：

            <input type="text" name="brand" placeholder="如：长帝、美的、海尔">

        </label><br>

       

        <label for="temperature">烤箱温度（℃）：</label>

        <input type="number" name="temperature" min="100" max="250" placeholder="100-250">

       



        <h3>【3. 食谱核心信息区】</h3>

        <label for="foodname">

            食谱名称：

            <input type="text" name="foodname" placeholder="如：原味戚风蛋糕" required>

        </label><br>



       

        <label for="foodtype">食谱类型： </label><br>

            <select name="foodtype">

                <option disabled selected>--请选择食谱类型--</option>

                <option value="戚风蛋糕">戚风蛋糕</option>

                <option value="曲奇饼干">曲奇饼干</option>

                <option value="奶油泡芙">奶油泡芙</option>

                <option value="可颂面包">可颂面包</option>

                <option value="芋泥拿破仑">芋泥拿破仑</option>

            </select>



        制作难度：

        <label><input type="radio" name="difficulty" value="简单" checked>简单</label>

        <label><input type="radio" name="difficulty" value="中等">中等</label>

        <label><input type="radio" name="difficulty" value="困难">困难</label>

        <br>



        <label for="time">

            制作时长（分钟）：

            <input type="number" name="time" min="10" max="180" placeholder="10-180" required>

        </label><br>



       

        <label for="cnumber">成品份数：</label><br>

            <select name="cnumber">

                <option value="1份">1份</option>

                <option value="2-4份">2-4份</option>

                <option value="4-8份">4-8份</option>

                <option value="8份以上">8份以上</option>

            </select>

       



        所需材料：

        <label for="ingredients">所需食材（详细）：</label>

        <textarea name="ingredients" placeholder="示例：

        1.低精面粉80g

        2.鸡蛋3个

        3.细砂糖60g

        4.牛奶150ml"></textarea>

        <br>



        <label for="cphone">

            成品图上传：

            <input type="file" name="cphone">

        </label><br>



        <button type="submit">提交</button>

        <button type="reset">重置</button>

        <button type="button">无默认行为</button>

    </form>

效果图：

第三章 踩坑实录 & 代码截图

1.错题本1：HTML 标签嵌套与路径规范错误

错误点及核心原理

1.标签嵌套语法错误

标签嵌套规则：1.块级元素（div/p/h1-h6）可嵌套行内元素（span/strong），但p不能嵌套其他块级；- 行内元素（span/a）不能嵌套块级元素；2. p标签：用于包裹单一段落，自动分段且有默认间距

2.图片路径不规范

这段代码里面使用本地绝对路径c:\Users\EDY\Desktop\1.jpg，绝对路径仅在本地生效，若代码部署到服务器 / 其他电脑，路径会失效；且 Windows 路径的\在 HTML 中需转义为/，否则可能解析错误

补充知识点：

1. 路径规则：绝对路径：file:///C:/...（仅本机有效）

2.相对路径：../css/style.css（基于当前文件位置，通用）-->需要用../回到上一级，直到和css平级再开始找目标文件

修改只需要把p标签的块级元素和p标签移除即可，就不再粘贴代码了~

label的核心作用是「关联表单控件」，通过for+id匹配即可，嵌套块级元素（select）冗余且不符合规范

label标签正确用法：

1. 关联方式：for="控件id" + 控件id="xxx"；

2. 交互价值：点击 label 文字可选中对应控件；

3. 禁止嵌套块级元素（select/textarea等）

以下是修改之后的代码：

<select name="localcity" required>

            <option disabled selected>--请选择省份--</option>

            <option value="beijing">北京</option>

            <option value="shanghai">上海</option>

            <option value="guangdong">广东</option>

            <option value="shenzhen">深圳</option>

            <option value="hangzhou">杭州</option>

            <option value="jiangsu">江苏</option>

            <option value="chengdu">成都</option>

        </select>

表单类错误（高频重点）

错误1：手机号用type="text"，无格式校验

修改原理：type="tel"比text更语义化，适配移动端数字键盘，手机号加校验

修改后的代码：将type改成了tel，加了正则校验pattern="\d{11}"，还加了required必填属性

<label for="phone"> 联系电话：</label> <input type="tel" name="phone" placeholder="请输11位手机号" pattern="\d{11}" required> 

错误2：数字输入框（烤箱温度 / 制作时长）无min/max限制

修改方法：数字输入框加范围

<label for="temperature">烤箱温度（℃）：</label> <input type="number" name="temperature" min="100" max="250" placeholder="100-250">

补充知识点：HTML5 表单验证属性：

require：必填  

pattern="\d{11}"：正则校验（11 位数字）

min/max：数字范围

 accept：文件类型限制

input语义化类型

tel（手机号）

email（邮箱）

number（数字）

file（文件）