一个精美、功能强大的网站能够吸引大量用户，提升品牌知名度和业务价值。而 HTML（HyperText Markup Language，超文本标记语言）作为网页设计的基础语言，掌握其代码是打造优质网站的关键。本文将为你提供一份全面的网页设计制作网站 HTML 代码大全，助你轻松构建出理想的网页。
一、基本网页结构代码
html
<!DOCTYPE html>
<html lang=”zh-CN”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>网页标题</title>
</head>
<body>
<!– 网页主体内容 –>
</body>
</html>
<!DOCTYPE html> 声明文档类型，确保浏览器以标准模式渲染页面。
<html> 元素是网页的根元素，lang 属性指定网页语言为中文。
<head> 包含网页的元数据，如字符编码 <meta charset=”UTF-8″>，视口设置 <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> 用于适配不同设备屏幕，以及网页标题 <title>。
<body> 包裹网页的主体内容，如文本、图片、链接等。
二、文本内容相关代码
1. 标题
html
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<h1> 到 <h6> 用于定义不同级别的标题，数字越小级别越高，字体也越大，通常用于突出显示网页中的重要信息层次。
2. 段落
html
<p>这是一个段落文本。段落是网页中用于组织文本内容的基本单位，可以包含多行文本，浏览器会自动在段落前后添加一些空白空间，使内容更加清晰易读。</p>
<p> 标签用于定义段落，有助于合理划分文本内容，增强可读性。
3. 强调文本
html
<strong>这是加粗文本</strong>
<em>这是斜体文本</em>
<b>这也是加粗文本（语义较弱）</b>
<i>这也是斜体文本（语义较弱）</i>
<strong> 和 <em> 分别用于强调文本，前者表示重要性较高的强调，后者表示语气上的强调，它们在视觉上通常分别呈现为加粗和斜体，同时具有一定的语义价值。
<b> 和 <i> 也能实现加粗和斜体效果，但语义较弱，主要用于纯粹的视觉效果。
4. 列表
无序列表
html
<ul>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ul>
<ul> 表示无序列表，其内部通过 <li>（列表项）标签来定义各个列表项，通常在视觉上会以项目符号（如圆点）来标识每个列表项。
有序列表
html
<ol>
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
</ol>
<ol> 表示有序列表，同样使用 <li> 定义列表项，但列表项会自动按照顺序编号，适用于有先后顺序或重要性等级的内容展示。
5. 分隔线
html
<hr>
<hr> 用于创建一条水平分隔线，常用于在不同内容区块之间进行视觉分隔，使页面布局更加清晰。
三、图片插入代码
html
<img src=”图片路径.jpg” alt=”图片描述”>
<img> 标签用于插入图片，src 属性指定图片文件的路径，可以是本地路径或网络 URL；alt 属性提供图片的替代文本，当图片无法显示时，浏览器会显示这个替代文本，同时也有利于搜索引擎优化和屏幕阅读器读取图片信息。
四、超链接代码
html
<a href=”链接地址”>链接文本</a>
<a> 标签用于创建超链接，href 属性指定链接的目标地址，可以是网页地址、文件下载地址等；链接文本则是用户点击的文本内容，点击后会跳转到指定的链接地址。
五、表格代码
html
<table>
<caption>表格标题</caption>
<thead>
<tr>
<th>表头一</th>
<th>表头二</th>
<th>表头三</th>
</tr>
</thead>
<tbody>
<tr>
<td>单元格一</td>
<td>单元格二</td>
<td>单元格三</td>
</tr>
<tr>
<td>单元格四</td>
<td>单元格五</td>
<td>单元格六</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总计</td>
<td>100</td>
<td>200</td>
</tr>
</tfoot>
</table>
<table> 定义表格，<caption> 用于添加表格标题，位于表格上方。
<thead> 包含表格的头部行，通过 <tr>（表格行）和 <th>（表头单元格）来定义表头内容。
<tbody> 包含表格的主体内容，同样使用 <tr> 和 <td>（表格数据单元格）来填充数据。
<tfoot> 用于定义表格的脚注部分，常用于放置总计、平均值等统计信息，其结构与 <thead> 和 <tbody> 类似。
六、表单代码
1. 基本表单结构
html
<form action=”提交地址” method=”提交方法”>
<!– 表单内容 –>
</form>
<form> 标签定义表单，action 属性指定表单数据提交到的服务器地址，method 属性定义提交方法，常见的有 get 和 post，其中 get 方法会将表单数据附加在 URL 中，适用于简单的查询操作；post 方法则将数据放在请求体中，适用于包含敏感信息或大量数据的提交。
2. 输入框
html
<input type=”text” name=”用户名” placeholder=”请输入用户名”>
<input type=”password” name=”密码” placeholder=”请输入密码”>
<input type=”email” name=”邮箱” placeholder=”请输入邮箱地址”>
<input type=”tel” name=”电话” placeholder=”请输入电话号码”>
<input type=”number” name=”数量” placeholder=”请输入数量”>
<input type=”date” name=”日期”>
<input type=”checkbox” name=”爱好” value=”篮球”> 篮球
<input type=”radio” name=”性别” value=”男”> 男
<input type=”radio” name=”性别” value=”女”> 女
<input type=”file” name=”上传文件”>
<input type=”submit” value=”提交”>
<input type=”reset” value=”重置”>
<input> 标签用于创建各种类型的输入框，type 属性决定输入框的类型，如文本框（text）、密码框（password）、邮箱输入框（email）、电话输入框（tel）、数字输入框（number）、日期选择框（date）等；name 属性为输入框指定名称，用于在服务器端识别该输入框的数据；placeholder 属性提供输入框的提示文本。
单选按钮（radio）和复选框（checkbox）也通过 <input> 标签创建，通过 name 属性关联同一组选项，value 属性指定每个选项的值。
文件上传框（file）允许用户选择文件上传，提交按钮（submit）用于触发表单提交，重置按钮（reset）用于将表单恢复到初始状态。
