HTML- 标准文档结构2

1- HTML 文档的骨架：核心组成

一个 HTML 文档如同人的身体，由两个主要部分构成：

<head> (文档头部): 包含了关于 HTML 文档的元数据，这些信息通常不会直接显示在网页上，而是给浏览器和搜索引擎使用的。
<body> (文档主体): 包含了网页上所有可见的内容，例如文本、图片、链接等。

2- 深入了解 `<head>`：文档的幕后英雄

<head> 元素就像网页的幕后管理者，它包含了许多关键信息，让浏览器能正确解析和展示你的网页。

<title>：网页的标题
- <title> 标签定义了网页的标题，它会显示在浏览器的标签页或标题栏上。
- 示例: <title>我的个人网站</title>
<meta>：元数据标签
- <meta> 标签提供了关于 HTML 文档的各种元数据，例如字符编码、页面描述、作者信息等。
- 常见的 <meta> 属性:
  - charset (字符编码): 指定文档的字符编码，通常使用 UTF-8。
    - 什么是字符编码？计算机只能理解数字，字符编码就是将字符（例如字母、汉字）映射到数字的 " 字典 "。
    - 为什么选择 UTF-8？ UTF-8 是一种通用的字符编码，能够支持世界上大多数语言的字符，推荐使用。
    - 示例: <meta charset="UTF-8">
  - name (元数据名称) 与 content (元数据内容):
    - description: 页面描述，用于搜索引擎结果页的展示。
      - 示例: <meta name="description" content="这是一个关于我的个人网站。">
    - keywords: 页面关键词，用于搜索引擎优化。
      - 示例: <meta name="keywords" content="个人网站，博客，前端开发">
    - author: 作者信息。
      - 示例: <meta name="author" content="你的名字">
  - viewport (视口设置): 用于控制移动设备上的网页显示，确保网页在不同设备上都能正确显示。
    - width=device-width: 设置视口宽度为设备的宽度。
    - initial-scale=1.0: 设置初始缩放比例为 1，即不缩放。
    - 示例: <meta name="viewport" content="width=device-width, initial-scale=1.0">
    - 其他属性: maximum-scale, minimum-scale 可以设置用户缩放的最大最小值，一般不推荐设置，因为会影响用户体验。

3- 深入了解 `<body>`：内容的主舞台

<body> 元素是网页内容的主舞台，所有用户可见的内容都会放在这里。

常见的内容元素:
- 标题 (<h1> - <h6>): 用于定义网页中的标题，<h1> 是主标题， <h6> 是最小的标题。
- 段落 (<p>): 用于定义段落文本。
- 链接 (<a>): 用于创建超链接。
  - 示例: <a href="https://example.com">点击这里</a>
- 图片 (<img>): 用于显示图片。
  - 示例: <img src="image.jpg" alt="图片描述">
- 列表 (<ul> 和 <ol>): 用于创建无序列表 (unordered list) 和有序列表 (ordered list)。
  - 无序列表示例:
```
<ul>
	<li>第一项</li>
	<li>第二项</li>
</ul>
```
  - 有序列表示例:
```
<ol>
    <li>第一项</li>
    <li>第二项</li>
</ol>
```
- HTML5 语义化标签:
  - <header>: 定义网页或 section 的头部。
  - <nav>: 定义导航菜单。
  - <main>: 定义网页的主要内容。
  - <article>: 定义文章内容。
  - <aside>: 定义侧边栏内容。
  - <footer>: 定义网页或 section 的底部。
示例 (结合多个标签):

<body>
	<header>
		<h1>欢迎来到我的网站</h1>
		<nav>
			<a href="#">主页</a>
			<a href="#">关于</a>
		</nav>
	</header>
	<main>
		<article>
			<h2>我的第一篇文章</h2>
			<p>这是我的第一篇文章，我在这里介绍一些内容。</p>
			<img src="my_image.jpg" alt="文章配图">
		</article>
		 <aside>
			<h3>相关链接</h3>
			<ul>
				<li><a href="https://example.com">链接一</a></li>
				 <li><a href="https://example.com">链接二</a></li>
			</ul>
		 </aside>
	</main>
	<footer>
		<p>版权所有 © 2024</p>
	</footer>
</body>

4- 标准 HTML 文档结构

一个完整的 HTML 文档结构如下：

<!DOCTYPE html>
<html>
	<head>
	    <meta charset="UTF-8">
	    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <title>我的网页标题</title>
	    <meta name="description" content="这是一个关于我的个人网站">
	    <meta name="keywords" content="个人网站，博客，前端开发">
	    <meta name="author" content="你的名字">
	</head>
	<body>
	    <!-- 网页内容写在这里 -->
	</body>
</html>

5- 代码格式化与可读性

虽然 HTML 对代码格式不敏感，但为了提高可读性，我们应该：

使用缩进，清晰地表达代码结构。
在标签和属性之间添加空格。
使用空行分隔不同的代码块。
多行编辑快捷键:
- Mac: Option + Shift + 鼠标拖动 (或单击)
- Windows: Alt + Shift + 鼠标拖动 (或单击)

6- 练习与挑战

创建一个简单的 HTML 页面，包含标题、段落、链接和图片。
尝试添加 meta 标签，定义页面描述和关键词。
修改已有的 HTML 代码，尝试不同的标签和属性。
使用在线编辑器 (CodePen, JSFiddle, Glitch) 尝试运行你的代码。

7- 总结

掌握 HTML 文档的结构是成为一名优秀前端开发者的基础。希望本教程能帮助你快速入门，并为你未来的学习打下坚实的基础。

#course #css #html

#course #html #css

html-语义化上一篇

html-标准文档结构下一篇