一些常用的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>
相关推荐
强化生物科研小助手2 小时前
CAS:47623-98-3,DiSBAC2(3)一种慢反应的膜电位敏感探针
django·html·pygame
木木黄木木3 小时前
HTML5图片裁剪工具实现详解
前端·html·html5
FanetheDivine5 小时前
正确使用flex-1
css·html
木木黄木木8 小时前
HTML5重力球动画实现详解
前端·html·html5
hello_simon11 小时前
在线小白工具,PPT转PDF支持多种热门工具,支持批量转换,操作简单,高效适合各种需求
pdf·html·powerpoint·excel·pdf转html·excel转pdf格式
zhougl99612 小时前
html处理Base文件流
linux·前端·html
木木黄木木16 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
计算机毕设定制辅导-无忧学长1 天前
HTML 性能优化之路:学习进度与优化策略(二)
学习·性能优化·html
小旋风012341 天前
封装可拖动弹窗(vue jquery引入到html的版本)
vue.js·html·jquery
前端Hardy1 天前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html