前端入门：HTML5基础篇｜搭建你的第一个网页

关注

原创 2026-08-28 16:58:09 1.3k 阅读 AI 写同款· GEO 优化 ›

前端基础入门教程之html网页代码大全 html网页代码大全 1)贴图：<imgsrc="图片地址"> 2)加入连接：<ahref="所要连接的相关地址">写上你想写的字</a> 1)贴图：<imgsrc="图片地址"> 2)加入连接：<ahref="所要连接的相关地址">写上你想写的字</a> 3)在新窗口打开连接：<ahref="相关地址"... 阅读详情

文章目录

1. 什么是HTML5？
- 1.1 定义
- 1.2 主要特点
2. 准备工作：编辑器与浏览器
3. HTML5文档结构
4. HTML5常用标签
实用技巧
下一步学习方向

1. 什么是HTML5？

1.1 定义

HTML5（HyperText Markup Language 5） 是HTML（超文本标记语言）的第五次重大修订，也是当前Web标准的核心技术。它不仅仅是HTML标签的更新，更是一整套Web平台技术的集合。

1.2 主要特点

更清晰的语义结构

新增加了一些有实际含义的“标签”，就像文章的标题、段落、章节一样，让网页结构一目了然。
例如：<header>（页眉）、<nav>（导航）、<main>（主要内容）、<footer>（页脚）。

内置音视频播放

以前看网页视频需要安装Flash等插件，现在HTML5可以直接用<video>和<audio>标签播放视频和音乐。

更智能的表单

可以直接选择日期、颜色，或者输入邮箱、电话号码，浏览器会自动进行简单的格式检查。

强大的绘图和动画能力

引入了<canvas>（画布）这个“绘图板”，让开发者可以用JavaScript在上面自由绘制各种图形、图表，甚至制作2D/3D游戏。

适应各种设备（响应式设计）

配合CSS3，HTML5开发的网页可以自动适应不同大小的屏幕，无论是在电脑、平板还是手机上，都能获得良好的浏览体验。

2. 准备工作：编辑器与浏览器

编辑器：写代码的地方

Visual Studio Code（VSCode）（点击链接：Visual Studio Code安装配置教程：下载、汉化、常用组件、基本操作）
Sublime Text（点击链接：Sublime Text 下载教程）
HBuilder X（点击链接：HBuilderX安装入门教程）

浏览器：看效果的地方

Google Chrome（谷歌浏览器），下载地址：https://www.google.com/chrome/
Microsoft Edge：Windows系统自带。

3. HTML5文档结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>

<!DOCTYPE html>：文档类型声明，告诉浏览器这是HTML5文档。
<html>根元素：整个HTML文档的根元素，包含整个页面的内容。
<head>头部区域：包含页面的元数据（不直接显示在页面上）。
<meta charset="utf-8">：设置字符编码为UTF-8，支持中文等特殊字符。
<title>：页面标题（显示在浏览器标签页）。
<body>主体区域：包含所有可见的页面内容。

4. HTML5常用标签

HTML标签就像是搭建网页的积木，每个标签都有特定的功能和意义。下面我们来学习最常用的一些标签。

4.1 文本标签

标题标签：

<!--数字越大，标题越小 -->
<h1>一级标题</h1>  
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

段落与换行：

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<br>  <!-- 换行标签，不需要闭合 -->

文本格式化:

<strong>加粗（重要内容）</strong>
<b>加粗（单纯样式）</b>

<em>斜体（强调内容）</em>
<i>斜体（单纯样式）</i>

<u>下划线</u>
<del>删除线</del>
<sup>上标</sup>  <!-- 如：x² -->
<sub>下标</sub>  <!-- 如：H₂O -->
<mark>高亮标记</mark>

4.2 链接与图像

超链接:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<!-- 基本链接 -->
		<a href="https://www.baidu.com">访问示例网站</a>
		
		<!-- 新窗口打开 -->
		<a href="https://www.baidu.com" target="_blank">新窗口打开</a>
		
		<!-- 链接到页面内锚点 -->
		<a href="#section1">跳转到第一节</a>
		<h2 id="section1">第一节内容</h2>
		
		<!-- 邮件链接 -->
		<a href="mailto:someone@example.com">发送邮件</a>
		
		<!-- 下载链接 -->
		<a href="document.pdf" download>下载文档</a>
	</body>
</html>

图像：

<!-- 基本图像 -->
<img src="image.jpg" alt="图片描述">

<!-- 设置尺寸 -->
<img src="image.jpg" alt="图片" width="300" height="200">

<!-- 响应式图像（推荐） -->
<img src="image.jpg" alt="图片" style="max-width: 100%; height: auto;">

4.3 列表

有序列表：

<ol>
  <li>第一项</li>
  <li>第二项</li>
  <li>第三项</li>
</ol>

运行效果：
在这里插入图片描述

无序列表：

<ul>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

运行效果：
在这里插入图片描述

4.4 表格

<table border="1">
  <caption>学生成绩表</caption>
  <tr>  <!-- 表格行 -->
    <th>姓名</th>  <!-- 表头单元格 -->
    <th>语文</th>
    <th>数学</th>
  </tr>
  <tr>
    <td>张三</td>  <!-- 数据单元格 -->
    <td>90</td>
    <td>85</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>88</td>
    <td>92</td>
  </tr>
</table>

运行效果：
在这里插入图片描述

4.5 表单

<form action="/submit" method="POST">
  <!-- 表单控件放在这里 -->
</form>

action：数据提交的地址
method：：提交方式（GET或POST）

常用表单元素：

<!-- 文本输入框 -->
<label for="username">用户名：</label>
<input type="text" id="username" name="username" placeholder="请输入用户名">

<!-- 密码框 -->
<label for="password">密码：</label>
<input type="password" id="password" name="password">

<!-- 邮箱 -->
<input type="email" name="email">

<!-- 数字 -->
<input type="number" name="age" min="0" max="120">

<!-- 日期 -->
<input type="date" name="birthday">

<!-- 单选按钮 -->
<label><input type="radio" name="gender" value="male"> 男</label>
<label><input type="radio" name="gender" value="female"> 女</label>

<!-- 复选框 -->
<label><input type="checkbox" name="hobby" value="reading"> 阅读</label>
<label><input type="checkbox" name="hobby" value="music"> 音乐</label>

<!-- 下拉选择 -->
<select name="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

<!-- 多行文本 -->
<textarea name="message" rows="4" cols="50"></textarea>

<!-- 按钮 -->
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">普通按钮</button>

HTML5新增表单类型：

<input type="color" name="color">        <!-- 颜色选择 -->
<input type="range" name="volume" min="0" max="100">  <!-- 滑块 -->
<input type="search" name="search">      <!-- 搜索框 -->
<input type="url" name="website">        <!-- URL输入 -->
<input type="tel" name="phone">          <!-- 电话号码 -->
<input type="time" name="time">          <!-- 时间选择 -->

4.6 HTML5语义化标签

<!-- 网页头部 -->
<header>
  <h1>网站标题</h1>
  <nav>
    <a href="#home">首页</a>
    <a href="#about">关于</a>
  </nav>
</header>

<!-- 主要内容区域 -->
<main>
  <!-- 独立文章内容 -->
  <article>
    <h2>文章标题</h2>
    <p>文章内容...</p>
  </article>
  
  <!-- 区块内容 -->
  <section>
    <h2>章节标题</h2>
    <p>章节内容...</p>
  </section>
  
  <!-- 侧边栏 -->
  <aside>
    <h3>相关链接</h3>
    <ul>
      <li>链接1</li>
      <li>链接2</li>
    </ul>
  </aside>
</main>

<!-- 网页底部 -->
<footer>
  <p>© 2023 版权所有</p>
</footer>

4.7 多媒体标签

视频：

<video controls width="640">
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
</video>

音频：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  <source src="audio.ogg" type="audio/ogg">
</audio>

4.8 容器标签

<!-- 通用容器（最常用） -->
<div>这是一个区块容器</div>

<!-- 行内容器 -->
<span>这是一个行内容器</span>

区别：

<div>：块级元素，单独占一行
<span>：行内元素，不换行

4.9 特殊符号

&lt;    <!-- 小于号 < -->
&gt;    <!-- 大于号 > -->
&amp;   <!-- 和号 & -->
&quot;  <!-- 双引号 " -->
&nbsp; <!-- 空格 -->
&copy;  <!-- 版权符号 © -->

实用技巧

标签分类记忆

文本类：<h1>-<h6>、<p>、<span>
结构类：<div>、<header>、<footer>、<section>
媒体类：<img>、<video>、<audio>
交互类：<a>、<form>、<button>

常用属性快速参考

属性	用途	示例
`id`	唯一标识	`<div id="header">`
`class`	样式类名	`<p class="intro">`
`style`	内联样式	`<div style="color: red;">`
`src`	资源路径	`<img src="image.jpg">`
`href`	链接地址	`<a href="page.html">`
`alt`	替代文本	`<img alt="描述">`