HTML5

你好！看文章的小伙伴，很高兴你想要学习前端！HTML5是前端三剑客之一，也是需要最先学习的内容（其余两个是CSS3、JavaScript），如果你是零基础的小白，你也完全可以在两个小时内掌握HTML5的核心基础，并能写出一个简单的网页。虽然“完全掌握”一门技术需要长期的实践，但两小时内足以让你理解其基本结构、语法和常用标签，并能动手做出几个完整的实用案例。

下面我将用清晰、通俗易懂的快速讲解，带你一步步走进HTML5的世界。

一、什么是HTML5？

HTML 全称是 HyperText Markup Language（超文本标记语言）。
它不是编程语言，而是一种标记语言，用标签来描述网页的结构和内容。
HTML5 是HTML的第五个版本，是目前最主流的标准，支持多媒体、语义化标签、本地存储等新特性。

✅ 简单说：HTML5 就是搭建网页的“骨架”。

开发工具：建议VS Code（最流行，支持高亮、自动补全）。

二、HTML5的基本结构

每一个HTML5网页都遵循一个标准结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    <!-- 网页内容写在这里 -->
    <h1>欢迎来到我的第一个网页！</h1>
</body>
</html>

文件后缀名是.html。

：这个是注释，注释就是解释说明的文字。

逐行解释：

代码	说明
`<!DOCTYPE html>`	声明这是HTML5文档
`<html lang="zh">`	根元素，`lang="zh"` 表示语言是中文，`lang="en"`是表示英文
`<head>`	存放页面元信息（不显示在页面上）
`<meta charset="UTF-8">`	设置字符编码为UTF-8（支持中文）
`<meta name="viewport"...>`	让网页在手机上正常显示
`<title>`	浏览器标签页上显示的标题
`<body>`	页面的主体内容，用户能看到的部分

浏览器显示效果

三、常用HTML5标签（重点掌握）

1. 文本标签

标签	作用	示例
`<h1>` 到 `<h6>`	标题（h1最大）	`<h1>主标题</h1>`
`<p>`	段落	`<p>这是一段文字</p>`
`<strong>`	加粗（强调）	`<strong>重要</strong>`
`<em>`	斜体（强调）	`<em>强调</em>`
`<br>`	换行	`第一行<br>第二行`
`<hr>`	水平线	`<hr>`

2. 链接与图片

标签	作用	示例
`<a href="网址">`	超链接	`<a href="https://www.baidu.com">百度</a>`
`<img src="图片地址" alt="描述">`	图片	`<img src="logo.png" alt="公司logo">`

3. 列表

类型	标签	示例
无序列表	`<ul><li>项目</li></ul>`	项目符号列表
有序列表	`<ol><li>项目</li></ol>`	数字编号列表

4. 表单（重点）

什么是 HTML 表单？

表单（Form） 是网页中用于收集用户数据的区域。
用户可以在表单中输入文本、选择选项、上传文件等。
提交后，数据会发送到服务器进行处理（如保存到数据库、发送邮件等）。

✅ 简单说：表单就是网页上的“填写框 + 提交按钮”。

表单的基本结构

所有表单都用 <form> 标签包裹：

<form action="/submit" method="POST">
  <!-- 表单控件写在这里 -->
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username">

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

浏览器显示效果

关键属性解释：

属性	说明
`action`	表单提交的目标 URL（服务器地址）
`method`	提交方式，常用 `GET` 或 `POST`

method="GET"：数据会显示在 URL 中（如 ?name=小明），适合搜索。
method="POST"：数据隐藏发送，更安全，适合登录、注册。

常用表单控件（输入元素）

每个输入框都用 input 或其他标签创建。

文本输入框 <input type="text">
```
<input type="text" name="username" placeholder="请输入用户名">
```
- name：提交时的字段名（必须设置！）。
- placeholder：提示文字（灰色）。
- value：默认值。
密码框<input type="password">
```
<input type="password" name="password" placeholder="请输入密码">
```
- 输入内容显示为 ••••••。
- 同样需要 name 属性。

单选框<input type="radio">

用于单选（只能选一个）：

<p>性别：</p>
<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>

name 必须相同，才能互斥。
value 是提交的值。
label 关联点击更友好。

复选框<input type="checkbox">
用于多选：

<p>兴趣爱好：</p>
<input type="checkbox" id="read" name="hobby" value="reading">
<label for="read">阅读</label>

<input type="checkbox" id="code" name="hobby" value="coding">
<label for="code">编程</label>

注意：多个 checkbox 如果 name 相同，提交时会以数组形式发送（如 hobby=reading&hobby=coding）。

下拉菜单<select>

<label for="city">所在城市：</label>
<select id="city" name="city">
  <option value="">请选择城市</option>
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

option 是选项。
第一个 value="" 通常是默认提示。
可加 selected 属性设置默认选中。

多行文本<textarea>

用于输入大段文字：

<label for="message">留言：</label>
<textarea id="message" name="message" rows="5" placeholder="请输入留言"></textarea>

rows：显示行数。
cols：列数（可省略，用 CSS 控制更好）。

文件上传<input type="file">

<label for="avatar">上传头像：</label>
<input type="file" id="avatar" name="avatar" accept="image/*">

accept="image/*" 限制只选图片。
accept=".pdf" 可限制文件类型。

日期选择<input type="date">
```
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday">
```
浏览器会自动弹出日期选择器。

其他类型：
- time：时间。
- datetime-local：日期+时间。
- month：年月。
- week：周。

数字输入<input type="number">

<label for="age">年龄：</label>
<input type="number" id="age" name="age" min="1" max="120">

min/max 限制范围。
带上下箭头调节。

邮箱、网址、电话

<input type="email" name="email" placeholder="请输入邮箱">
<input type="url" name="website" placeholder="请输入网址">
<input type="tel" name="phone" placeholder="请输入电话">

浏览器会自动检查格式是否正确。
在手机上会弹出对应键盘（如邮箱键盘）。

<label>标签的重要性

<label> 用于关联表单控件，提升用户体验和可访问性。

<input type="checkbox" id="agree" name="agree" value="yes">
<label for="agree">我同意用户协议</label>

for 属性值 = 输入框的 id。
点击文字也能选中单选框或复选框。
对屏幕阅读器（视障用户）非常友好。

表单验证（HTML5原生验证）

HTML5 支持无需 JavaScript 的简单验证。

必填字段required
```
<input type="text" name="username" required>
```
- 用户不填就无法提交。
- 浏览器会提示“请填写此字段”。

最小/最大的长度

<input type="text" name="username" minlength="3" maxlength="20">

正则验证pattern

<input type="text" name="username" pattern="[a-zA-Z0-9]+" title="只能输入字母和数字">

pattern 接收正则表达式。
title 是错误提示。

实战小案例：用户注册表单

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
</head>
<body>
    <h1>用户注册</h1>
    <form action="/register" method="POST">
        <!-- 用户名 -->
        <p>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" required minlength="3" placeholder="3-20位字母或数字">
        </p>

        <!-- 密码 -->
        <p>
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" required minlength="6">
        </p>

        <!-- 邮箱 -->
        <p>
            <label for="email">邮箱：</label>
            <input type="email" id="email" name="email" required>
        </p>

        <!-- 性别 -->
        <p>
            <label>性别：</label>
            <input type="radio" id="male" name="gender" value="male" checked>
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">女</label>
        </p>

        <!-- 城市 -->
        <p>
            <label for="city">城市：</label>
            <select id="city" name="city">
                <option value="">请选择</option>
                <option value="beijing">北京</option>
                <option value="shanghai">上海</option>
                <option value="shenzhen">深圳</option>
            </select>
        </p>

        <!-- 兴趣爱好 -->
        <p>
            <label>兴趣爱好：</label><br>
            <input type="checkbox" id="read" name="hobby" value="reading">
            <label for="read">阅读</label><br>
            <input type="checkbox" id="code" name="hobby" value="coding">
            <label for="code">编程</label><br>
            <input type="checkbox" id="travel" name="hobby" value="travel">
            <label for="travel">旅行</label>
        </p>

        <!-- 留言 -->
        <p>
            <label for="bio">个人简介：</label><br>
            <textarea id="bio" name="bio" rows="3" placeholder="介绍一下自己吧"></textarea>
        </p>

        <!-- 同意协议 -->
        <p>
            <input type="checkbox" id="agree" name="agree" required>
            <label for="agree">我同意<a href="#">用户协议</a></label>
        </p>

        <!-- 提交按钮 -->
        <p>
            <button type="submit">注册</button>
            <button type="reset">重置</button>
        </p>
    </form>
</body>
</html>

浏览器显示效果

5. 语义化标签（HTML5新增，非常重要！）

HTML5 引入了语义化标签，让代码更清晰，对SEO（搜索引擎优化）和可访问性更好：

标签	含义
`<header>`	页眉
`<nav>`	导航栏
`<main>`	主要内容
`<section>`	内容区块
`<article>`	独立文章
`<aside>`	侧边栏
`<footer>`	页脚

四、实战案例（3个完整例子）

案例1：最简单的HTML5页面

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个网页</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我的第一个HTML5页面。</p>
    <p>我用了<strong>加粗</strong>和<em>斜体</em>。</p>
    <hr>
    <p>下面是我的兴趣爱好：</p>
    <ul>
        <li>阅读</li>
        <li>编程</li>
        <li>旅行</li>
    </ul>
</body>
</html>

保存为 hello.html，双击打开即可在浏览器中查看！

案例2：带图片和链接的个人简介页

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人主页</title>
</head>
<body>
    <header>
        <h1>张小明的个人主页</h1>
        <nav>
            <a href="#about">关于我</a> |
            <a href="#skills">技能</a> |
            <a href="#contact">联系我</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <img src="https://via.placeholder.com/150" alt="头像">
            <p>我是一名热爱学习的编程初学者，正在努力掌握前端技术。</p>
        </section>

        <section id="skills">
            <h2>我的技能</h2>
            <ol>
                <li>HTML5</li>
                <li>CSS3（正在学习）</li>
                <li>JavaScript（入门中）</li>
            </ol>
        </section>

        <article id="contact">
            <h2>联系我</h2>
            <p>邮箱：<a href="mailto:burgess@example.com">burgess@example.com</a></p>
            <p>GitHub: <a href="https://github.com" target="_blank">我的GitHub</a></p>
        </article>
    </main>

    <footer>
        <p>&copy; 2025 burgess. 版权所有。</p>
    </footer>
</body>
</html>

说明：

id="about" 配合 <a href="#about"> 实现页面内跳转

target="_blank" 让链接在新标签页打开

mailto: 可以打开邮箱客户端

图片使用了占位图链接（实际使用时替换为真实图片路径）

案例3：语义化新闻文章页

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技新闻 - 前端开发新趋势</title>
</head>
<body>
    <header>
        <h1>科技前沿</h1>
        <nav>
            <a href="#">首页</a> |
            <a href="#">AI</a> |
            <a href="#">前端</a> |
            <a href="#">后端</a>
        </nav>
    </header>

    <main>
        <article>
            <header>
                <h2>前端开发新趋势：2025年值得关注的技术</h2>
                <p>发布于：2025年10月20日 | 作者：科技小编</p>
            </header>

            <section>
                <h3>1. 组件化开发</h3>
                <p>React、Vue等框架让开发更高效。</p>
            </section>

            <section>
                <h3>2. WebAssembly</h3>
                <p>让C++、Rust代码在浏览器中运行，性能飞跃。</p>
            </section>

            <footer>
                <p>本文为原创，转载请注明出处。</p>
            </footer>
        </article>

        <aside>
            <h3>推荐阅读</h3>
            <ul>
                <li><a href="#">JavaScript高级技巧</a></li>
                <li><a href="#">CSS布局完全指南</a></li>
            </ul>
        </aside>
    </main>

    <footer>
        <p>&copy; 2025 科技新闻网. All rights reserved.</p>
    </footer>
</body>
</html>

练习

复制上面的代码。
保存为 .html 文件（如 myweb.html）。
双击文件，用浏览器打开。
修改内容，看效果变化。
尝试添加新标签（如 <video>、<audio>）。

video是视频标签、<audio>是音频标签。

video基本用法：

<video src="movie.mp4" controls width="600">
    这是视频标签
</video>

属性	作用	示例
`src`	视频文件的路径（本地或网络）	`src="video.mp4"`
`controls`	显示播放控件（播放/暂停、音量、进度条）	必加，否则无法操作
`width` / `height`	设置视频尺寸（单位：像素）	`width="800"`
`autoplay`	自动播放（注意：大多数浏览器禁止无声自动播放）	`autoplay`
`loop`	循环播放	`loop`
`muted`	静音（常与 `autoplay` 一起用，绕过自动播放限制）	`muted`
`poster`	视频未播放时的封面图	`poster="cover.jpg"`

<audio>基本用法：

<audio src="music.mp3" controls>
	这是音频标签
</audio>

`src`	音频文件路径	`src="song.mp3"`
`controls`	显示播放控件（必须加）	`controls`
`autoplay`	自动播放	`autoplay`（移动端通常禁止）
`loop`	循环播放	`loop`
`muted`	静音	`muted`

五、下一步学什么？

掌握了HTML5后，你可以继续学习：

CSS3：给网页“穿衣服”（美化样式）。
JavaScript：让网页“动起来”（交互功能）。
响应式设计：让网页在手机和电脑都好看。

总结

你已经学会了：

HTML5是什么。
基本文档结构。
常用标签（标题、段落、图片、链接、列表、表单等）。
语义化标签（<header>, <nav>, <main>, <footer>等）。
如何写出完整的网页。

posted on 2025-10-20 10:54 burgess0x 阅读(43) 评论(0) 收藏举报