htmledit_views">
1. 页面基本结构
- DOCTYPE 声明：
- 作用：告知浏览器使用哪种 HTML 版本进行解析。
- 示例：
html"><!DOCTYPE html>
<html>标签：- 作用：作为整个 HTML 文档的根元素，包含文档的头部和主体。
- 示例：
html"><html lang="en"><!-- 文档头部和主体内容 -->
</html>
<head>标签：- 作用：包含文档的元数据，如标题、字符编码、样式表链接、脚本链接等，这些信息不会在页面中直接显示。
- 示例：
html"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>页面标题</title><link rel="stylesheet" href="styles.css">
</head>
<body>标签：- 作用：包含文档的可见内容，如文本、图像、链接、表单等。
- 示例：
html"><body><h1>这是一个标题</h1><p>这是一段文本。</p>
</body>
2. 文本结构
- 标题标签（
<h1>-<h6>）：- 作用：用于定义文档的标题，从
<h1>（最重要的标题）到<h6>（最不重要的标题），字号通常依次减小。 - 示例：
- 作用：用于定义文档的标题，从
html"><h1>主标题</h1>
<h2>副标题</h2>
<h3>三级标题</h3>
- 段落标签（
<p>）：- 作用：用于定义段落文本。
- 示例：
html"><p>这是一个段落，包含一些文本信息。</p>
- 列表标签（
<ul>、<ol>、<li>）：- 作用：
<ul>用于创建无序列表，<ol>用于创建有序列表，<li>用于定义列表项。 - 示例：
- 作用：
html"><ul><li>无序列表项 1</li><li>无序列表项 2</li>
</ul>
<ol><li>有序列表项 1</li><li>有序列表项 2</li>
</ol>
3. 链接结构
- 锚标签（
<a>）：- 作用：用于创建超链接，可以链接到其他页面、文件或页面内的特定位置。
- 示例：
html"><a href="https://www.example.com">这是一个链接到外部网站的链接</a>
<a href="#section1">跳转到页面内的特定部分</a>
4. 图像结构
- 图像标签（
<img>）：- 作用：用于在页面中插入图像。
- 示例：
html"><img src="image.jpg" alt="图像描述">
5. 表单结构
- 表单标签（
<form>）：- 作用：用于创建表单，收集用户输入的数据，并将其提交到服务器进行处理。
- 示例：
html"><form action="submit.php" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>
- 输入标签（
<input>）：- 作用：用于创建各种类型的输入字段，如文本框、密码框、复选框、单选按钮等。
- 示例：
html"><input type="text" placeholder="输入文本">
<input type="password" placeholder="输入密码">
<input type="checkbox" id="agree" name="agree">
<label for="agree">同意协议</label>
- 下拉列表标签（
<select>、<option>）：- 作用：用于创建下拉列表，用户可以从多个选项中选择一个。
- 示例：
html"><select name="country"><option value="china">中国</option><option value="usa">美国</option>
</select>
6. 表格结构
- 表格标签（
<table>、<tr>、<td>、<th>）：- 作用：用于创建表格，
<table>是表格的容器，<tr>定义表格行，<td>定义表格单元格，<th>定义表头单元格。 - 示例：
- 作用：用于创建表格，
html"><table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>20</td></tr>
</table>
7. 语义化结构（HTML5 新增）
<header>标签：- 作用：用于定义文档或节的页眉，通常包含标题、导航等内容。
- 示例：
html"><header><h1>网站标题</h1><nav><ul><li><a href="#">首页</a></li><li><a href="#">关于我们</a></li></ul></nav>
</header>
<nav>标签：- 作用：用于定义导航链接的容器。
- 示例：见上面
<header>标签示例中的<nav>部分。
<main>标签：- 作用：用于定义文档的主要内容区域。
- 示例：
html"><main><article><h2>文章标题</h2><p>文章内容...</p></article>
</main>
<article>标签：- 作用：用于定义独立的、可自包含的文章内容。
- 示例：见上面
<main>标签示例中的<article>部分。
<section>标签：- 作用：用于定义文档中的节或区域，通常包含相关的内容。
- 示例：
html"><section><h2>产品介绍</h2><p>产品详情...</p>
</section>
<aside>标签：- 作用：用于定义与主要内容相关的侧边栏或补充信息。
- 示例：
html"><aside><h3>相关链接</h3><ul><li><a href="#">相关文章 1</a></li><li><a href="#">相关文章 2</a></li></ul>
</aside>
<footer>标签：- 作用：用于定义文档或节的页脚，通常包含版权信息、联系方式等。
- 示例：
html"><footer><p>© 2025 公司名称</p>
</footer>
