一些常用的HTML结构

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>&copy; 2025 公司名称</p>
</footer>
相关推荐
听风吹等浪起3 小时前
html5:从零构建经典游戏-扫雷游戏
前端·html·html5
代码不行的搬运工3 小时前
HTML快速入门-4:HTML <meta> 标签属性详解
java·前端·html
埃兰德欧神5 小时前
三分钟让你的H5变身‘伪原生’,揭秘H5秒变应用的魔法配置
javascript·html·产品
秋天的一阵风7 小时前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html
2401_890665868 小时前
免费送源码:Java+ssm+HTML 三分糖——甜品店网站设计与实现 计算机毕业设计原创定制
java·python·微信小程序·html·php·课程设计·android-studio
程序员Bears9 小时前
HTML5 新特性详解:语义化标签、表单与音视频嵌入
前端·html·html5·visual studio code
前端大白话10 小时前
揭秘 HTML 可拖动元素及拖放功能:HTML5 API 大起底
前端·javascript·html
yuanyxh12 小时前
过去一年的工作总结
前端·javascript·html
大G哥20 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext20 小时前
html初识
前端·html