一、HTML 基础结构
一个基本的 HTML 页面包含以下结构：
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>网页标题</title>
</head>
<body>
这里是页面内容
</body>
</html>
<!DOCTYPE html>声明文档类型，让浏览器以 HTML5 标准解析页面。<html>标签是页面根元素，lang=”en”指定语言为英语，可按需更改。<head>部分包含页面元信息，如<meta charset=”UTF-8″>定义字符编码，<title>设置页面标题，显示在浏览器标签栏。<body>内放置所有可视化内容。
二、文本排版
标题：
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
标题从<h1>到<h6>，重要性递减，搜索引擎也会参考标题层级理解页面结构。
2. 段落：
<p>这是一个段落，段落之间会自动换行，并且有一定的间距。</p>
<p>标签用于划分段落，使文本布局清晰。
3. 换行：
<br>
<br>是单标签，用于在文本中强制换行，比如诗句排版时常用。
4. 文本格式：
<b>加粗文本</b>
<i>斜体文本</i>
<u>下划线文本</u>
分别用于强调、特殊样式展示等场景，不过在语义化设计中，<strong>比<b>、<em>比<i>更推荐，它们不仅有样式还有语义含义。
三、链接与图像
链接：
<a href=”https://www.example.com”>点击跳转至示例网站</a>
<a>标签的href属性指定目标链接地址，用户点击文本“点击跳转至示例网站”就会访问对应网址。还可以链接到页面内锚点，如：
<a href=”#section2″>跳转到第二部分</a>
配合页面内有id=”section2″的元素使用。
2. 图像：
<img src=”image.jpg” alt=”图片描述”>
src指向图片文件路径，alt属性在图片无法加载时显示替代文本，对搜索引擎优化（SEO）和无障碍访问很重要。
四、列表
无序列表：
<ul>
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
</ul>
<ul>表示无序列表，<li>是列表项，默认以圆点标识。
2. 有序列表：
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
</ol>
<ol>为有序列表，列表项按数字顺序排列。
五、表格
<table>
<tr>
<th>表头 1</th>
<th>表头 2</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
</tr>
</table>
<table>定义表格，<tr>是行，<th>用于表头单元格，默认加粗居中，<td>为普通单元格，可用于数据展示、布局等，但现在 CSS 布局更灵活，表格多用于数据呈现场景。
六、表单
<form action=”submit.php” method=”post”>
<label for=”username”>用户名：</label>
<input type=”text” id=”username” name=”username”>
<br>
<label for=”password”>密码：</label>
<input type=”password” id=”password” name=”password”>
<br>
<input type=”submit” value=”提交”>
</form>
<form>创建表单，action指向处理表单数据的后端脚本，method可选post或get。<input>根据type属性有不同功能，如text输入文本，password隐藏输入内容，<label>关联输入框提升可用性，<input type=”submit”>用于提交表单数据。
七、多媒体
音频：
<audio controls>
<source src=”music.mp3″ type=”audio/mpeg”>
您的浏览器不支持音频播放。
</audio>
controls属性提供播放控制条，<source>指定音频源，浏览器按顺序尝试支持的格式播放。
2. 视频：
<video width=”320″ height=”240″ controls>
<source src=”video.mp4″ type=”video/mp4″>
您的浏览器不支持视频播放。
</video>
类似音频，设置width和height控制尺寸，多种格式适配不同浏览器兼容性。
以上只是 HTML 代码的冰山一角，结合 CSS 样式和 JavaScript 交互能构建出丰富多彩、功能强大的网页。不断实践与探索，才能熟练掌握网页设计制作的精髓。
