上一篇
html网站基本框架
HTML网站基本框架含DOCTYPE声明、html标签、head（meta、title）及
HTML 网站基本框架详解
整体结构
HTML（超文本标记语言）是构建网页的基础语言，一个基本的 HTML 网站框架主要由以下几个部分组成：
- DOCTYPE 声明：位于文档最开头，告知浏览器使用何种 HTML 标准来解析网页。
<html>：整个 HTML 文档的根元素，所有内容都包含在其中。<head>：包含网页的元数据，如标题、字符编码设置、链接到外部样式表或脚本文件等，这些信息通常不会直接显示在网页内容区域，但对网页的呈现和功能有重要影响。<body>：网页的主体内容部分，包含文本、图像、链接、表单等各种可见元素，是用户在浏览器中直接看到的部分。
解析
解析（一）DOCTYPE 声明
（一）DOCTYPE 声明DOCTYPE 是文档类型声明的缩写，它告诉浏览器当前网页所遵循的 HTML 规范版本，在 HTML5 中，常见的 DOCTYPE 声明为：
<!DOCTYPE html>这一行代码简洁明了,让浏览器知道按照 HTML5 的标准来渲染页面，不同的 HTML 版本有不同的 DOCTYPE 写法，但在现代网页开发中，HTML5 已成为主流，其 DOCTYPE 声明简单且具有向后兼容性，能很好地适配各种浏览器和设备。
（二）<html><html>标签是整个 HTML 文档的容器，它包含了 <head>和 <body>两个主要部分，在 <html>标签中，还可以设置一些全局属性，如 lang属性用于指定网页的语言，这有助于搜索引擎和浏览器对网页内容进行正确的语言处理和排序。
<html lang="zh CN">
表示该网页的语言为简体中文,虽然 lang属性不是必需的，但对于提高网页的可访问性和搜索引擎优化（SEO）具有一定意义。
（三）<head> <meta>： - 用于设置网页的元信息,其中最重要的是字符编码的设置。
<meta charset="UTF 8">
这行代码确保网页使用 UTF 8 字符编码，能够正确显示各种语言的字符，包括中文、英文、日文、韩文以及其他特殊符号等，如果没有正确设置字符编码，可能会出现乱码问题，影响用户体验。
- 还有其他一些
<meta>标签用于设置网页的描述、关键词等，这些信息主要用于搜索引擎优化。 <meta name="description" content="这是一个关于HTML网站基本框架的示例页面">
<meta name="keywords" content="HTML,网站框架,网页开发">
description元标签的内容通常会在搜索引擎结果页面中作为网页的简要描述显示，而 keywords元标签则帮助搜索引擎了解网页的主题关键词，但需要注意的是，搜索引擎已经逐渐降低对 keywords元标签的依赖，更注重网页内容本身的质量和相关性。
<title>： - 定义网页的标题,该标题会显示在浏览器的标签栏上，并且当用户将网页添加到收藏夹或进行搜索时，也会使用这个标题。
一个清晰、准确的标题对于吸引用户点击和提高网页在搜索引擎中的排名都非常重要。
<link>： - 主要用于链接外部资源,最常见的是链接外部 CSS 样式表。
<link rel="stylesheet" href="styles.css">
这行代码告诉浏览器从同一目录下的 styles.css文件中加载 CSS 样式，用于对网页进行样式设计，如设置字体、颜色、布局等，通过将样式表与 HTML 文档分离，可以实现多个网页共享同一套样式，便于维护和管理。
<script>： - 用于引入外部 JavaScript 文件或在网页中直接编写 JavaScript 代码。
<script src="script.js"></script>
这将从同一目录下的 script.js文件中加载 JavaScript 代码，JavaScript 可以用于实现网页的各种交互功能，如菜单展开收缩、表单验证、动画效果等，如果在 <head>部分引入外部 JavaScript 文件，建议将其放在 <link>标签之后，以确保样式表先于脚本加载，避免可能出现的样式冲突问题。
（四）<body> - ：
- 可以直接在
<body>标签内输入文本内容，浏览器会按照默认的样式显示这些文本。 <body>
<p>欢迎来到我的网页！</p>
</body>
这里使用了 <p>标签来定义一个段落，段落中的文本会按照一定的行高和间距显示，除了段落标签，还有标题标签 <h1><h6>用于定义不同级别的标题，<strong>标签用于加粗文本，<em>标签用于斜体文本等，这些标签可以帮助组织和强调网页中的文本内容。
- 图像：
- 使用
<img>标签可以在网页中插入图像。 <img src="image.jpg" alt="描述图像内容">
src属性指定图像的文件路径，alt属性用于在图像无法加载时显示替代文本，这对于提高网页的可访问性和 SEO 都非常重要，如果图像是一个公司的标志，alt属性可以设置为“公司标志”，这样当图像因网络问题或其他原因无法显示时，用户仍然能够知道该图像的大致内容。
- 链接：
- 通过
<a>标签可以创建超链接，链接到其他网页、文件或资源。 <a href="https://www.example.com">访问示例网站</a>
href属性指定链接的目标地址，当用户点击链接文本“访问示例网站”时，浏览器会跳转到指定的网址，链接可以是绝对路径（如上述示例中的完整网址），也可以是相对路径（如链接到本网站内的其他页面）。
- 列表：
- 有序列表使用
<ol>标签定义，列表项使用 <li>标签。 <ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
这将显示一个带有数字编号的列表,无序列表则使用 <ul>标签，列表项同样用 <li>标签。
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
列表在展示一组相关的项目或步骤时非常有用,可以使内容更加清晰有条理。
- 表格：
- 使用
<table>标签创建表格，表格由 <thead>（表头）、<tbody>（表体）和 <tfoot>（表尾）部分组成（可选）。 <table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
</table><tr>标签定义表格行，<th>标签定义表头单元格（通常加粗显示），<td>标签定义表体单元格，表格可用于展示结构化的数据，如财务报表、产品列表等。
- 表单：
- 使用
<form>标签创建表单，表单用于收集用户输入的信息，如登录表单、搜索表单等。 <form action="/submit" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
action属性指定表单提交的目标地址，method属性指定提交方法（post或get），表单内包含各种输入控件，如文本框（<input type="text">）、密码框（<input type="password">）、复选框（<input type="checkbox">）、单选按钮（<input type="radio">）等，以及标签（<label>）用于关联输入控件和文本说明，提高表单的可访问性。
常见 HTML 标签汇总表
功能描述 示例 <p>定义段落 <p>这是一个段落。</p> <h1><h6>，<h1>，依次类推 <h1>主标题</h1> <strong>加粗文本 <strong>重要内容</strong> <em>斜体文本 <em>强调内容</em> <img>插入图像 <img src="image.png" alt="图像描述"> <a>创建超链接 <a href="https://www.example.com">链接文本</a> <ol>定义有序列表 <ol><li>第一项</li><li>第二项</li></ol> <ul>定义无序列表 <ul><li>项目一</li><li>项目二</li></ul> <table>创建表格 <table><tr><th>表头</th></tr><tr><td>表体</td></tr></table> <form>创建表单 <form action="/submit" method="post">...</form> <input>输入控件（多种类型） <input type="text" name="username"> <label>关联输入控件与文本说明 <label for="username">用户名：</label><input id="username" type="text">
相关问题与解答
问题 1：如何在网页中嵌入外部 CSS 文件？
解答：在 HTML 文档的 <head>部分使用 <link>标签来链接外部 CSS 文件，假设外部 CSS 文件名为 styles.css且与 HTML 文件在同一目录下，代码如下：
<head>
<link rel="stylesheet" href="styles.css">
</head>这里的 rel="stylesheet"表明链接的资源是样式表，href属性指定了 CSS 文件的路径，浏览器在解析 HTML 文档时，会按照此链接加载并应用外部 CSS 文件中的样式规则，从而实现对网页外观的统一设计和控制，通过这种方式，可以将样式与内容分离，便于多个网页共享相同的样式，提高开发效率和维护性。
问题 2：如何创建一个简单的超链接？
解答：使用 <a>标签可以创建超链接，基本语法为：
<a href="目标网址">链接文本</a>
要创建一个指向百度首页的超链接,代码如下：
<a href="https://www.baidu.com">百度</a>
在这个例子中,href属性的值是目标网址 https://www.baidu.com，当用户点击链接文本“百度”时，浏览器会跳转到该网址，链接文本可以是任意文本内容，根据实际需求进行设置，以清晰地提示用户该链接的作用，还可以在其他标签内嵌套 <a>标签，如在图片上添加链接，使图片也具有超链接功能。
<a href="https://www.example.com">
<img src="image.jpg" alt="示例图片">
</a>这样,当用户点击图片时，也会跳转
（二）<html><html>标签是整个 HTML 文档的容器，它包含了 <head>和 <body>两个主要部分，在 <html>标签中，还可以设置一些全局属性，如 lang属性用于指定网页的语言，这有助于搜索引擎和浏览器对网页内容进行正确的语言处理和排序。
<html lang="zh CN">
表示该网页的语言为简体中文,虽然 lang属性不是必需的，但对于提高网页的可访问性和搜索引擎优化（SEO）具有一定意义。
（三）<head> <meta>： - 用于设置网页的元信息,其中最重要的是字符编码的设置。
<meta charset="UTF 8">
这行代码确保网页使用 UTF 8 字符编码，能够正确显示各种语言的字符，包括中文、英文、日文、韩文以及其他特殊符号等，如果没有正确设置字符编码，可能会出现乱码问题，影响用户体验。
- 还有其他一些
<meta>标签用于设置网页的描述、关键词等，这些信息主要用于搜索引擎优化。 <meta name="description" content="这是一个关于HTML网站基本框架的示例页面">
<meta name="keywords" content="HTML,网站框架,网页开发">
description元标签的内容通常会在搜索引擎结果页面中作为网页的简要描述显示，而 keywords元标签则帮助搜索引擎了解网页的主题关键词，但需要注意的是，搜索引擎已经逐渐降低对 keywords元标签的依赖，更注重网页内容本身的质量和相关性。
<title>： - 定义网页的标题,该标题会显示在浏览器的标签栏上，并且当用户将网页添加到收藏夹或进行搜索时，也会使用这个标题。
一个清晰、准确的标题对于吸引用户点击和提高网页在搜索引擎中的排名都非常重要。
<link>： - 主要用于链接外部资源,最常见的是链接外部 CSS 样式表。
<link rel="stylesheet" href="styles.css">
这行代码告诉浏览器从同一目录下的 styles.css文件中加载 CSS 样式，用于对网页进行样式设计，如设置字体、颜色、布局等，通过将样式表与 HTML 文档分离，可以实现多个网页共享同一套样式，便于维护和管理。
<script>： - 用于引入外部 JavaScript 文件或在网页中直接编写 JavaScript 代码。
<script src="script.js"></script>
这将从同一目录下的 script.js文件中加载 JavaScript 代码，JavaScript 可以用于实现网页的各种交互功能，如菜单展开收缩、表单验证、动画效果等，如果在 <head>部分引入外部 JavaScript 文件，建议将其放在 <link>标签之后，以确保样式表先于脚本加载，避免可能出现的样式冲突问题。
（四）<body> - ：
- 可以直接在
<body>标签内输入文本内容，浏览器会按照默认的样式显示这些文本。 <body>
<p>欢迎来到我的网页！</p>
</body>
这里使用了 <p>标签来定义一个段落，段落中的文本会按照一定的行高和间距显示，除了段落标签，还有标题标签 <h1><h6>用于定义不同级别的标题，<strong>标签用于加粗文本，<em>标签用于斜体文本等，这些标签可以帮助组织和强调网页中的文本内容。
- 图像：
- 使用
<img>标签可以在网页中插入图像。 <img src="image.jpg" alt="描述图像内容">
src属性指定图像的文件路径，alt属性用于在图像无法加载时显示替代文本，这对于提高网页的可访问性和 SEO 都非常重要，如果图像是一个公司的标志，alt属性可以设置为“公司标志”，这样当图像因网络问题或其他原因无法显示时，用户仍然能够知道该图像的大致内容。
- 链接：
- 通过
<a>标签可以创建超链接，链接到其他网页、文件或资源。 <a href="https://www.example.com">访问示例网站</a>
href属性指定链接的目标地址，当用户点击链接文本“访问示例网站”时，浏览器会跳转到指定的网址，链接可以是绝对路径（如上述示例中的完整网址），也可以是相对路径（如链接到本网站内的其他页面）。
- 列表：
- 有序列表使用
<ol>标签定义，列表项使用 <li>标签。 <ol>
<li>第一步</li>
<li>第二步</li>
<li>第三步</li>
</ol>
这将显示一个带有数字编号的列表,无序列表则使用 <ul>标签，列表项同样用 <li>标签。
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
列表在展示一组相关的项目或步骤时非常有用,可以使内容更加清晰有条理。
- 表格：
- 使用
<table>标签创建表格，表格由 <thead>（表头）、<tbody>（表体）和 <tfoot>（表尾）部分组成（可选）。 <table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>25</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
</table><tr>标签定义表格行，<th>标签定义表头单元格（通常加粗显示），<td>标签定义表体单元格，表格可用于展示结构化的数据，如财务报表、产品列表等。
- 表单：
- 使用
<form>标签创建表单，表单用于收集用户输入的信息，如登录表单、搜索表单等。 <form action="/submit" method="post">
<label for="username">用户名：</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码：</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
action属性指定表单提交的目标地址，method属性指定提交方法（post或get），表单内包含各种输入控件，如文本框（<input type="text">）、密码框（<input type="password">）、复选框（<input type="checkbox">）、单选按钮（<input type="radio">）等，以及标签（<label>）用于关联输入控件和文本说明，提高表单的可访问性。
常见 HTML 标签汇总表
功能描述 示例 <p>定义段落 <p>这是一个段落。</p> <h1><h6>，<h1>，依次类推 <h1>主标题</h1> <strong>加粗文本 <strong>重要内容</strong> <em>斜体文本 <em>强调内容</em> <img>插入图像 <img src="image.png" alt="图像描述"> <a>创建超链接 <a href="https://www.example.com">链接文本</a> <ol>定义有序列表 <ol><li>第一项</li><li>第二项</li></ol> <ul>定义无序列表 <ul><li>项目一</li><li>项目二</li></ul> <table>创建表格 <table><tr><th>表头</th></tr><tr><td>表体</td></tr></table> <form>创建表单 <form action="/submit" method="post">...</form> <input>输入控件（多种类型） <input type="text" name="username"> <label>关联输入控件与文本说明 <label for="username">用户名：</label><input id="username" type="text">
相关问题与解答
问题 1：如何在网页中嵌入外部 CSS 文件？
解答：在 HTML 文档的 <head>部分使用 <link>标签来链接外部 CSS 文件，假设外部 CSS 文件名为 styles.css且与 HTML 文件在同一目录下，代码如下：
<head>
<link rel="stylesheet" href="styles.css">
</head>这里的 rel="stylesheet"表明链接的资源是样式表，href属性指定了 CSS 文件的路径，浏览器在解析 HTML 文档时，会按照此链接加载并应用外部 CSS 文件中的样式规则，从而实现对网页外观的统一设计和控制，通过这种方式，可以将样式与内容分离，便于多个网页共享相同的样式，提高开发效率和维护性。
问题 2：如何创建一个简单的超链接？
解答：使用 <a>标签可以创建超链接，基本语法为：
<a href="目标网址">链接文本</a>
要创建一个指向百度首页的超链接,代码如下：
<a href="https://www.baidu.com">百度</a>
在这个例子中,href属性的值是目标网址 https://www.baidu.com，当用户点击链接文本“百度”时，浏览器会跳转到该网址，链接文本可以是任意文本内容，根据实际需求进行设置，以清晰地提示用户该链接的作用，还可以在其他标签内嵌套 <a>标签，如在图片上添加链接，使图片也具有超链接功能。
<a href="https://www.example.com">
<img src="image.jpg" alt="示例图片">
</a>这样,当用户点击图片时，也会跳转
