论HTML（基础版）
2025-09-14 10:56:39
发布于：浙江
33阅读
0回复
0点赞
网页，大家都不陌生，但网页所用到的编程语言不是C++，不是Python，而是HTML。
要创建一个网页，就得准备好一个电脑（废话），键盘和鼠标（依旧废话），以及一个文本文档。（有VScode的把VScode准备一下，方便修改）
右键桌面，选择“新建”，在右侧弹框中选择 文本文档。
有些电脑不显示后缀名（即像 *.txt *.bat 之类的），选择此电脑中的查看，勾上 文件扩展名。
接下来开始上正课。
<!--第一步：文档声明-->
<!DOCTYPE HTML>
<!--在html5，这里可以不大写 -->
<!-- 位于文件最开头，声明当前 HTML 文档遵循的规范，告诉浏览器如何解析页面。 -->
<!-- 第二步：根元素-->
<html lang="zh-CH">
<!--
整个 HTML 文档的根容器，所有其他元素都嵌套在其中。
通常包含 lang 属性指定页面主要语言，如 <html lang="zh-CN">。
-->
<!--第三步：头部-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标准 HTML 结构</title>
<link rel="stylesheet" href="styles.css">
<style>
/* 内部样式 */
</style>
<script src="script.js"></script>
</head>
<!--
这里就开始上强度了。
<meta>：定义字符编码（如 <meta charset="UTF-8">）、视口设置（适配移动端）等
<title>：设置网页标题（显示在浏览器标签栏）
<link>：引用外部资源（如 CSS 样式表、图标）
<style>：嵌入内部 CSS 样式
<script>：嵌入或引用 JavaScript 脚本
这里可能还有人不知道CSS是什么意思
CSS（Cascading Style Sheets，层叠样式表）是一种用于描述 HTML
（或 XML 等标记语言）文档呈现样式的语言。它主要负责控制网页的布
局、颜色、字体、间距等视觉表现，实现了内容（HTML）与样式（CSS）
的分离，让网页设计更灵活、维护更高效。
-->
<!--第四步：主体-->
<!--这里才是真正的重中之重-->
<body>
<h1>页面标题</h1>
<p>这是可见内容</p>
</body>
<!--
h1是一级标题，相当于 Markdown 中的 # ，对应的，有h1,h2,h3,h4,h5,h6。
<p>标签就是显示内容，最为基础。
body中的大部分标签都有结束标签
例如<p>标签，写时就要写成：
-->
<p>显示的内容</p>
对于初学者而言，常用标签分7类（见下）。
一、文本类标签（展示文字内容）
1. <h1>-<h6>，1至6级标题，权重递减，一个网页建议只用一个<h1>，对SEO友好。
2. <p>，显示文本内容，会自动换行。
3. <br>，强制换行，没有结束标签，即不存在</br>
4. <hr>，水平分割线，单标签，即不存在</hr>，用于分割不同内容板块，显示一条
水平线。
5. <strong>，强调、加粗文本
6. <em>，强调文本（斜体）
7.<span>，行内文本容器，无默认样式，主要用于 “包裹部分行内文本”（如单独修改
某几个字的颜色、大小）。
-->
<body>
<h1>欢迎来到我的个人博客</h1>
<hr>
<h2>关于我</h2>
<p>大家好！我是一名<span style="color: #2c3e50; font-weight: bold;">前端开发爱好者</span>，热衷于学习HTML、CSS和JavaScript等网页技术。</p>
<p>我喜欢分享技术心得，记录学习过程中的收获与思考。<br>希望通过这个博客与更多志同道合的朋友交流！</p>
<h2>我的文章</h2>
<h3>HTML基础学习笔记</h3>
<p>HTML是构建网页的基础，掌握好语义化标签非常重要。<br>
例如<h1>-<h6>用于标题层级，<p>用于段落文本，这些标签能让页面结构更清晰。</p>
<p><strong>重点提示：</strong>语义化标签不仅有助于SEO，还能提高代码的可维护性。</p>
<h3>CSS样式入门</h3>
<p><em>CSS可以让网页变得更加美观</em>，通过设置颜色、字体和布局，能极大提升用户体验。<br>
后续我会分享更多关于选择器和盒模型的知识。</p>
<hr>
<h2>联系方式</h2>
<p>邮箱：example@mail.com<br>
微信：web_dev_learner</p>
</body>
<!--下面这张图，是以上代码的预览-->
更新至此。
<!--
不难发现，在我所举的例子内有个
< 和 >
这是用来在浏览器中显示实体字符的。
什么是实体字符？
就是像 < , > , 空格 , & 这些会被浏览器解析的特殊符号
-->
常见实体字符：
< : <
> : >
" : "
' : '
窄空格 :  
半角空格 :   或 &nbst;
全角空格 :  
二、媒体类标签（嵌入图片、音频、视频）
用于在网页中插入图片、声音、视频等多媒体内容，让页面更丰富。
1. <img>
<!--插入图片，具体格式见下-->
<img src="图片路径" alt="图片加载失败时显示的文字" title="鼠标悬停时显示的文字">
2. <audio>
<!--插入音频，具体格式见下-->
<audio src="音频路径" controls>您的浏览器不支持音频播放</audio>
<!--
支持 controls 属性（显示播放 / 暂停按钮），可选 autoplay（自动播放，部分
浏览器不支持）、loop（循环播放）。
-->
3. <vedio>
<!--插入视频，具体格式见下-->
<video src="视频路径" controls width="500">您的浏览器不支持视频播放</video>
<!--类似 <audio>，width/height 控制尺寸，controls 显示播放控件。-->
更新至此
三、链接与锚点标签（实现跳转）
<a>
<!--超链接（核心跳转标签）具体格式见下-->
<!--1. 跳外部网页：-->
<a href="https://www.baidu.com" target="_blank">打开百度（新窗口）</a>
<!--. 跳本地页面：-->
<a href="about.html">打开关于我们页面</a>
<!--3. 跳页面内锚点：-->
<a href="#section1">跳至第一部分</a>
四、列表标签（有序 / 无序列表、定义列表）
1. <ul><li>
<!--无序列表，具体格式见下-->
<ul><li>苹果</li><li>香蕉</li><li>橙子</li></ul>
2. <ol><li>
<!--有序列表，具体格式见下-->
<ol><li>第一步：打开软件</li><li>第二步：登录账号</li></ol>
五、表格标签（展示结构化数据）
具体格式见完整示例。
1. <table>
<!--表格容器-->
2. <tr>
<!--表格行（一行数据）-->
3. <th>
<!--表头单元格（加粗居中）-->
4. <td>
<!--普通单元格（数据内容）-->
<!--
整体实例：
-->
<table border="1"> <!-- border="1" 显示边框（方便初学调试，后续用 CSS 美化） -->
<tr> <!-- 第一行（表头） -->
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr> <!-- 第二行（数据） -->
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr> <!-- 第三行（数据） -->
<td>李四</td>
<td>30</td>
<td>设计师</td>
</tr>
</table>
代码预览：
六、表单标签（收集用户输入）
1. <form>
<!--表单容器，具体格式见下-->
<form action="提交地址" method="get/post">...</form>
2. <input>
<!--输入框（核心表单元素），具体格式见下-->
文本输入：<input type="text" placeholder="请输入用户名">
密码输入：<input type="password" placeholder="请输入密码">
单选按钮：<input type="radio" name="gender" value="male"> 男
复选框：<input type="checkbox" name="hobby" value="reading"> 阅读
提交按钮：<input type="submit" value="提交">
3. <textarea>
<!--多行文本输入框，具体格式见下-->
<textarea rows="5" cols="30" placeholder="请输入详细描述">...</textarea>
4. <select><option>
<!--下拉选择框，具体格式见下-->
<select><option value="beijing">北京</option><option value="shanghai">上海</option></select>
5. <button>
<!--按钮（比 <input type="submit"> 灵活），具体格式见下-->
<button type="submit">提交表单</button>
<button type="button">普通按钮</button>
七、容器标签（组织页面结构）
1. <div>
<!--块级容器（独占一行），具体格式见下-->
<div style="background: #f5f5f5;"><h2>内容区标题</h2><p>内容区文本</p></div>
2. <span>
<!--块级容器（不独占一行），具体格式见 “文本类标签” 中的 <span> 示例-->
至此，7个板块个基础HTML语法标签已学完，不过，还有一些注意事项。
- 标签闭合：除 <br>、<hr>、<img> 等单标签外，所有标签必须成对闭合（如 <p>...</p>，不能漏写结束标签）。
- 嵌套规则：块级标签（如 <div>、<p>）可嵌套行内标签（如 <span>、<a>），但行内标签不能嵌套块级标签（如不能写 <span><div>...</div></span>）。
- 语义优先：尽量用有语义的标签（如 <h1>-<h6>、<strong>、<ul>），而非纯样式标签（如 <b>、<i>），既利于 SEO，也方便后续维护。
最后，来个代码大总结吧！
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML常用标签示例</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
.section {
margin-bottom: 30px;
padding: 20px;
border: 1px solid #eee;
border-radius: 5px;
}
form {
background-color: #f9f9f9;
padding: 20px;
border-radius: 5px;
}
input, textarea, select, button {
margin-bottom: 10px;
padding: 8px;
width: 100%;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
img {
max-width: 100%;
height: auto;
}
.media-container {
margin: 20px 0;
}
</style>
</head>
<body>
<!-- 页面标题部分 -->
<div class="section">
<h1>HTML常用标签示例网页</h1>
<p>这个网页展示了初学HTML时常用的所有body标签，包含文本、媒体、链接、列表、表格和表单等元素。</p>
<hr>
</div>
<!-- 文本类标签示例 -->
<div class="section">
<h2>1. 文本类标签</h2>
<h3>这是三级标题</h3>
<p>这是一个段落标签，用于展示普通文本内容。段落之间会自动换行并保留适当的间距。</p>
<p>在段落中，我们可以使用<br>换行标签来强制换行，<br>就像这样实现多行文本而不需要另起一个段落。</p>
<p>我们还可以使用<strong>strong标签来强调重要内容（粗体）</strong>和<em>em标签来表示强调语气（斜体）</em>。</p>
<p>span标签是一个<span style="color: red; font-weight: bold;">行内文本容器</span>，可以用来单独设置部分文本的样式。</p>
</div>
<!-- 媒体类标签示例 -->
<div class="section">
<h2>2. 媒体类标签</h2>
<div class="media-container">
<h3>图片标签</h3>
<img src="https://picsum.photos/600/300" alt="示例风景图片" title="这是一张风景图片">
<p>上面是使用img标签插入的图片，包含src（图片路径）、alt（替代文本）和title（提示文本）属性。</p>
</div>
<div class="media-container">
<h3>音频标签</h3>
<audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls>
您的浏览器不支持音频播放
</audio>
<p>上面是使用audio标签插入的音频，controls属性显示播放控件。</p>
</div>
<div class="media-container">
<h3>视频标签</h3>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls width="600">
您的浏览器不支持视频播放
</video>
<p>上面是使用video标签插入的视频，controls属性显示播放控件，width属性设置宽度。</p>
</div>
</div>
<!-- 链接与锚点标签示例 -->
<div class="section">
<h2>3. 链接与锚点标签</h2>
<p>链接标签(a标签)可以创建各种类型的链接：</p>
<ul>
<li><a href="https://www.baidu.com" target="_blank">外部链接（打开百度，新窗口）</a></li>
<li><a href="#section-lists">页面内锚点（跳转到列表部分）</a></li>
<li><a href="mailto:example@example.com">邮件链接</a></li>
</ul>
</div>
<!-- 列表标签示例 -->
<div class="section" id="section-lists">
<h2>4. 列表标签</h2>
<h3>无序列表 (ul + li)</h3>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>前端框架
<ul>
<li>React</li>
<li>Vue</li>
<li>Angular</li>
</ul>
</li>
</ul>
<h3>有序列表 (ol + li)</h3>
<ol>
<li>学习HTML基础</li>
<li>掌握CSS样式</li>
<li>学习JavaScript交互</li>
<li>实践项目开发</li>
</ol>
<h3>定义列表 (dl + dt + dd)</h3>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言，用于创建网页的结构</dd>
<dt>CSS</dt>
<dd>层叠样式表，用于设计网页的外观和布局</dd>
<dt>JavaScript</dt>
<dd>编程语言，用于实现网页的交互功能</dd>
</dl>
</div>
<!-- 表格标签示例 -->
<div class="section">
<h2>5. 表格标签</h2>
<table>
<tr>
<th>课程名称</th>
<th>难度</th>
<th>学习时长</th>
</tr>
<tr>
<td>HTML基础</td>
<td>简单</td>
<td>1周</td>
</tr>
<tr>
<td>CSS样式</td>
<td>中等</td>
<td>2周</td>
</tr>
<tr>
<td>JavaScript入门</td>
<td>较难</td>
<td>3周</td>
</tr>
</table>
<p>上面是使用table、tr、th、td标签创建的表格，展示了课程信息。</p>
</div>
<!-- 表单标签示例 -->
<div class="section">
<h2>6. 表单标签</h2>
<form action="#" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">
<label for="password">密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码">
<label>性别：</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<label>爱好：</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">阅读</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">运动</label>
<input type="checkbox" id="coding" name="hobby" value="coding">
<label for="coding">编程</label>
<label for="city">所在城市：</label>
<select id="city" name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">广州</option>
<option value="shenzhen">深圳</option>
</select>
<label for="introduction">个人简介：</label>
<textarea id="introduction" name="introduction" rows="5" cols="30" placeholder="请输入个人简介"></textarea>
<input type="submit" value="提交表单">
<button type="button">普通按钮</button>
</form>
</div>
<!-- 页脚 -->
<div class="section">
<hr>
<p>© 2023 HTML学习示例 | 使用了所有常用的HTML body标签</p>
</div>
</body>
</html>
有帮助，赞一个