文章目录
一、什么是网页布局？Web标准是什么？
网页布局是网页设计的核心，它决定了网页内容的组织方式和视觉呈现效果。简单来说，布局就是如何在页面上安排和摆放各个元素，比如导航栏、内容区、侧边栏、页脚等。
布局的重要性
- 用户体验：良好的布局让用户更容易找到需要的信息
- 可读性：合理的布局提高内容的可读性
- 响应式：适应不同设备屏幕大小
为什么需要Web标准？
不同浏览器是渲染引擎不同，对于相同代码解析的效果会存在差异，如果用户想看一个网页，结果用不同浏览器打开效果不同，用户体验极差！
Web标准：让不同的浏览器按照相同的标准显示结果，让展示的效果统一！
Web标准中分为三个构成
| 构成 | 语言 | 说明 |
|---|---|---|
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式 |
| 行为 | JavaScript | 网页模型的定义与页面交互 |
Web标准要求页面实现：结构、表现、行为三层分离
HTML是构建网页的基础骨架，它通过标签来描述网页的结构、内容（文字、图片、链接等），浏览器会解析这些标签并渲染出可视化的页面。
二、开发工具
下载地址： 官方链接: vscode.
三、常用的HTML标签
1、标签与元素
HTML的基本组成单位是元素，而元素有标签包裹内容构成，格式通常是：
html
<标签名>内容</标签名> <!-- 双标签：有开始和结束标签 -->
<标签名> <!-- 单标签：无需包裹内容，通常用于插入资源（如图片） -->比如：
html
<p>这是一个段落</p> <!-- 双标签：p是段落标签 -->
<img src="图片地址"> <!-- 单标签：img是图片标签 -->2、HTML文档的基本结构
一个完整的HTML文档有固定的"骨架"，所有的内容都要写在这个结构里：
html
<!DOCTYPE html> <!-- 声明：告诉浏览器这是HTML5文档 -->
<html> <!-- 根元素：整个网页的容器 -->
<head> <!-- 头部：存放网页的"元信息"（不直接显示在页面上） -->
<meta charset="UTF-8"> <!-- 字符编码：确保中文等文字正常显示 -->
<title>我的第一个网页</title> <!-- 网页标题：显示在浏览器标签栏 -->
</head>
<body> <!-- 主体：网页的可见内容都写在这里 -->
<h1>这是一级标题</h1>
<p>这是一段正文内容</p>
</body>
</html>3、基础标签详解
- 标题标签：
h1~h6,表示1-6级标题（h1层级最高，字体最大）
html
<h1>一级标题（通常一个页面只有1个）</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
- 段落标签：
p，用于包裹一段文字，自动换行并与其他内容留空行
html
<p>这是第一段内容，HTML会自动将段落分开显示，不需要手动打很多换行~</p>
<p>这是第二段内容，段落之间会有默认的间距哦。</p>
- 换行/水平线
<br>：强制换行（单标签）<hr>：插入一条水平线（单标签）
html
<p>第一行内容<br>第二行内容（用br实现换行）</p>
<hr> <!-- 插入水平线分隔内容 -->
<p>水平线下面的内容</p>
- 链接标签：
a（实现页面跳转）
a标签的核心属性是href，表示"链接目标地址"；target="_blank"表示"在新标签页打开"。
html
<!-- 跳转到外部网站 -->
<a href="https://www.csdn.net" target="_blank">点击访问CSDN官网</a>
<!-- 跳转到本地页面（比如同文件夹下的index2.html） -->
<!-- 注意文件一定要存在并且要存在在同一文件夹下-->
<a href="index2.html">点击跳转到我的第二个页面</a>
- 文本格式化标签
让文本有加粗、下划线、倾斜、删除线文本的格式效果
html
<!-- 第⼀组 -->
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<s>删除线</s>
<br>
<!-- 第二组：推荐使用，语义更加强烈 -->
<strong>加粗</strong>
<ins>下划线</ins>
<em>倾斜</em>
<del>删除线</del>
- 图片标签：
img（插入图片）
img是单标签，核心属性：
- src：图片的地址（本地图片写路径，网页图片写URL）
- alt：图片加载失败时显示的替代文字（必写，提升兼容性）
- width/height：设置图片宽度/高度（单位通常是像素px）
注意： 1、如果只设置图片的宽度或者高度，此时另一个会自动等比例缩放
2、如果同时设置了两个，若设置不当此时图片可能会变形- title：鼠标移动到图片上方时显示的提示文字（更方便用户对图片的理解）
html
<!-- 插入网络图片 -->
<img src="https://img-blog.csdnimg.cn/20231010123456/abc123.jpg"
alt="这是一张Python相关的图片"
width="300"> <!-- 宽度设为300px，高度会自动等比例缩放 -->
<!-- 插入本地图片（图片放在同文件夹的images目录下） -->
<img src="images/myphoto.jpg" alt="我的个人照片" width="200">
- 媒体标签
- 音频标签：
audio，核心属性：
- src：音频路径
- controls：播放控件
- autoplay：自动播放（部分浏览器不支持）
- loop：循环播放
- 视频标签：
video，核心属性：
- src：视频路径
- controls：播放控件
- autoplay：自动播放（部分浏览器不支持）-> 在谷歌浏览器中写muted可以完成静音的自动播放
- loop：循环播放
html
<audio src="./music.mp3" controls autoplay loop></audio>
<video src="./video.mp4" controls autoplay muted loop></video>
- 容器标签（用于分组排版）
div：块级容器，默认独占一行，常用于"大区域"的分组（比如页面的头部、主体、底部）span：行内容器，默认和其他内容在同一行，通常用于"小范围文字"的样式修改
html
<!-- div：页面头部区域 -->
<div>
<h1>我的个人主页</h1>
<p>欢迎访问我的页面~</p>
</div>
<!-- span：修改部分文字颜色（后续结合CSS） -->
<p>我正在学习<span>HTML</span>和<span>CSS</span>，感觉很有趣！</p>四、列表与表格
- 无序列表：
ul（列表容器）+li（列表项），默认显示"圆点"标记- 有序列表：
ol（列表容器）+li（列表项），默认显示"数字标记"- 自定义列表：
dl（列表容器）+dt（列表项）+dd（列表项中的内容）
html
<!-- 无序列表：比如"我的爱好" -->
<h3>我的爱好</h3>
<ul>
<li>看电影</li>
<li>写代码</li>
<li>阅读技术文章</li>
</ul>
<!-- 有序列表：比如"学习步骤" -->
<h3>HTML学习步骤</h3>
<ol>
<li>先学基础标签</li>
<li>练习写简单页面</li>
<li>结合CSS美化页面</li>
</ol>
<!-- 定义列表：比如"食物分类" -->
<h3>食物分类</h3>
<dl>
<dt>水果类</dt>
<dd>西瓜</dd>
<dd>香蕉</dd>
<dd>水蜜桃</dd>
<dt>蔬菜类</dt>
<dd>西红柿</dd>
<dd>黄瓜</dd>
<dd>土豆</dd>
</dl>表格用于有序呈现多行多列的信息（比如课程表、成绩表），核心标签是
table（表格容器）tr（行）td（单元格），还有辅助标签th（表头单元格）
html
<table border="1"> <!-- border="1" 显示表格边框（默认无） -->
<!-- 表头行：th默认居中、加粗 -->
<tr>
<th>姓名</th>
<th>年龄</th>
<th>专业</th>
</tr>
<!-- 数据行：td是普通单元格 -->
<tr>
<td>张三</td>
<td>18</td>
<td>计算机</td>
</tr>
<tr>
<td>李四</td>
<td>19</td>
<td>软件工程</td>
</tr>
</table>
表格的合并单元格
通过
colspan（跨列合并）rowspan（跨行合并）实现单元格合并：
html
<h3>跨行</h3>
<table border="1" width="600px" height="300px"><!-- width与height是设置单元格的宽度和高度-->
<tr align="center"><!--align="center"是设置内容居中显示 -->
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr align="center">
<td>张三</td>
<td colspan="2">无</td>
</tr>
<tr align="center">
<td>李四</td>
<td>20</td>
<td>成都</td>
</tr>
</table>
<h3>跨列</h3>
<table border="1" width="600px" height="300px">
<tr align="center">
<td>姓名</td>
<td>年龄</td>
<td>地址</td>
</tr>
<tr align="center">
<td>张三</td>
<td>18</td>
<td rowspan="2">深圳</td>
</tr>
<tr align="center">
<td>李四</td>
<td>20</td>
</tr>
</table>五、表单
表单时网页和用户交互的核心（比如登录、注册、搜索），核心标签是
form（表单容器），配合各种表单控件（输入框、按钮等）form标签的核心属性：
- action：表单提交 ，数据发送到的服务器地址（暂时可以写
#表示"当前页面"）- method：数据提交方式（常用
get/post）
html
<form action="#" method="get">
<!-- 表单控件写在这里 -->
<p>用户名：<input type="text" name="username"></p>
<p>密码：<input type="password" name="password"></p>
<p><button type="submit">提交</button></p>
</form>效果：输入用户名和密码后，点击 "提交"，浏览器会把数据拼接到地址栏（get方式）。
常用表单控件
- 输入框类：
input（通过type区分类型）
html
<!-- 1. 单行文本框 -->
<p>姓名：<input type="text" placeholder="请输入姓名"></p> <!-- placeholder是提示文字 -->
<!-- 2. 密码框（输入内容隐藏） -->
<p>密码：<input type="password" placeholder="请输入密码"></p>
<!-- 3. 单选按钮（name相同则互斥） -->
<p>性别：
<input type="radio" name="gender" value="male" id="male">
<label for="male">男</label> <!-- label和input绑定，点击文字也能选中 -->
<input type="radio" name="gender" value="female" id="female">
<label for="female">女</label>
</p>
<!-- 4. 复选框（可多选） -->
<p>爱好：
<input type="checkbox" name="hobby" value="code" id="code">
<label for="code">写代码</label>
<input type="checkbox" name="hobby" value="read" id="read">
<label for="read">阅读</label>
</p>
<!-- 5. 文件上传 -->
<p>头像：<input type="file" name="avatar"></p>
- 下拉选择框：
select+option
html
<p>学历：
<select name="edu">
<option value="">请选择</option> <!-- 默认提示项 -->
<option value="high">高中</option>
<option value="college">大专</option>
<option value="uni">本科</option>
</select>
</p>
- 多行文本框：
textarea
html
<p>个人介绍：
<textarea name="intro" rows="5" cols="30" placeholder="请输入个人介绍"></textarea>
</p>rows：代表默认显示的行数
cols：代表默认显示的列数
- 按钮类
html
<!-- 1. 提交按钮：触发表单提交 -->
<button type="submit">提交表单</button>
<!-- 2. 重置按钮：清空表单内容 -->
<button type="reset">重置内容</button>
<!-- 3. 普通按钮：需配合JS实现功能 -->
<button type="button">普通按钮</button>六、综合案例
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单</title>
</head>
<body>
<p>青春不常在，抓紧谈恋爱</p>
<hr />
<p>
昵称：<input type="text" value="" placeholder="请输入昵称"/>
</p>
<p>
性别：<input type="radio" value="男" name="sex" checked="checked"/>男
<input type="radio" value="女" name="sex"/>女
</p>
<p>
所在城市：<select name="city">
<option spellcheck="true">上海</option>
<option>杭州</option>
<option>深圳</option>
<option>怀化</option>
<option>长沙</option>
<option>成都</option>
</select>
</p>
<p>
婚姻状况：<input type="radio" value="未婚" name="marrige" checked="checked"/>未婚
<input type="radio" value="已婚" name="marrige"/>已婚
<input type="radio" value="保密" name="marrige"/>保密
</p>
<p>
喜欢的类型：<input type="checkbox" value="可爱"/>可爱
<input type="checkbox" value="性感"/>性感
<input type="checkbox" value="御姐"/>御姐
<input type="checkbox" value="萝莉"/>萝莉
<input type="checkbox" value="小鲜肉"/>小鲜肉
<input type="checkbox" value="大叔"/>大叔
</p>
<p>个人介绍：</p>
<p>
<textarea name="输入框" rows="10" cols="80"></textarea>
</p>
<h3>我承诺</h3>
<ul>
<li>年满18岁、单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<p>
<input type="checkbox" value="我同意所有条款" /> 我同意所有条款
</p>
<p>
<input type="button" value="免费注册" />
<input type="reset" value="重置"/>
</p>
</body>
</html>
结语
这篇文章带你系统地入门了HTML网页开发的核心知识。从理解Web标准开始，到掌握基础标签、列表表格、以及最重要的表单交互，每一步都为你的前端之路打下了坚实基础。记住，HTML是搭建网页的骨架，多动手练习是掌握它的最好方式。现在，你已经准备好用代码构建自己的第一个网页了。