HTML基础结构
Web开发
|
本文最后更新于 100 天前，其中的信息可能已经有所发展或是发生改变。

HTML基础结构

一个标准的 HTML 页面有以下结构：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基础页面</title>
</head>
<body>
    <h1>这是一个简单的 HTML 页面</h1>
    <p>HTML 是网页的基础构建块。</p>
</body>
</html>

各部分详解

1. 文档声明：<!DOCTYPE html>

  • 告诉浏览器当前使用 HTML5 标准。
  • 必须位于文件的第一行。

2. 根标签：<html>

  • 包含所有页面内容。
  • 常用属性：
    • lang="zh"：指定语言为中文，有助于 SEO 和无障碍辅助。

3. 头部标签：<head>

包含页面的元信息（metadata），如字符编码、标题、视口设置等。

  • 常见元素：
    • <meta charset="UTF-8">：定义字符集为 UTF-8，支持多语言。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">：适配移动设备。
    • <title>：定义页面标题。

4. 主体标签：<body>

  • 放置所有可见内容，包括文字、图片、链接等。

常见标签简介

以下是一些常用 HTML 标签及其功能：

标题：<h1> – <h6>

  • 定义标题层级，<h1> 最大，<h6> 最小。
<h1>主标题</h1>
<h2>副标题</h2>

段落：<p>

  • 定义段落文本。
<p>这是一个段落。</p>

链接：<a>

  • 创建超链接。
<a href="https://example.com">访问示例网站</a>

图像：<img>

  • 插入图片。
<img src="image.jpg" alt="图片描述">

一个完整的HTML页面

结合上面内容，创建一个简单的网页：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的第一个HTML页面</title>
</head>
<body>
    <h1>你好，世界！</h1>
    <p>这是我第一次尝试 HTML 页面。</p>
    <a href="https://example.com">点击访问示例网站</a>
    <img src="example.jpg" alt="示例图片">
</body>
</html>

效果：

  1. 页面标题：“我的第一个HTML页面”。
  2. 页面内容包括标题、段落、链接和图片。

html
下一篇