【温故而知新】HTML元素/属性/标题/注释/段落/文本格式/头部/主体

文章目录

一、概念
二、元素
三、属性
四、标题
五、注释
六、段落
七、文本格式
八、头部
九、主体

一、概念

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它被用来描述网页的结构和内容，并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本，增加了许多新的元素和功能，以适应现代网页开发的需求。

HTML5 提供了许多新的元素和 API，使得开发者可以创建更丰富、更交互式的网页和应用。例如，HTML5 引入了视频和音频元素，使得在网页上直接播放多媒体内容变得简单；还引入了 Canvas 和 SVG 元素，用于绘制图形和动画；另外，HTML5 还提供了地理位置 API、文件 API、Web Storage API 等，使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。

除了新增的元素和 API，HTML5 还改进了一些现有的元素和功能。例如，HTML5 改进了表单元素，提供了更多的输入类型（如 email、number、range 等），使得表单的验证和输入更加方便；还改进了语义元素（如 header、footer、article 等），使得网页的结构更加清晰和易于理解。

二、元素

HTML元素是HTML文档中的构建块，用于定义和组织网页的内容。

常见的HTML元素包括：

<html>：定义整个HTML文档的根元素。
<head>：定义文档的头部，包含了一些关于文档的信息，如标题、样式表等。
<body>：定义文档的主体部分，包含了实际显示在浏览器中的内容。
<h1>到<h6>：定义标题，分别表示从最高级标题到最低级标题。
<p>：定义段落。
<a>：定义链接，可以用于跳转到其他网页或内部锚点。
<img>：定义图像，可以用于显示图片。
<div>：定义一个文档中的块级容器，可以用于组织和样式化内容。
<span>：定义文档中的行内容器，可以用于样式化部分文本。
<ul>：定义无序列表。
<ol>：定义有序列表。
<li>：定义列表项。
<table>：定义表格。
<tr>：定义表格中的行。
<td>：定义表格中的单元格。
<form>：定义表单，用于用户输入和提交数据。
<input>：定义表单中的输入字段，如文本框、复选框、单选钮等。

这只是一小部分HTML元素的例子，HTML有很多其他元素可以用于创建各种不同类型的网页内容。每个元素都有特定的语法和属性，可以通过标签名称、类名、ID等进行选择和样式设置。

HTML 文档实例

<!DOCTYPE html>
<html><body>
<p>这是第一个段落。</p>
</body></html>

三、属性

HTML属性是用于为HTML元素提供附加信息或配置的特性。属性出现在HTML元素的开始标签中，以名称和值的形式表示。以下是一些常用的HTML属性：

id：为元素定义唯一的标识符。
class：为元素定义一个或多个样式类。
style：为元素定义内联样式。
src：指定图像、视频或音频文件的URL。
href：指定链接地址。
alt：为图像定义替代文本。
title：为元素提供额外的说明信息，通常以工具提示的形式显示。
width：定义元素的宽度。
height：定义元素的高度。
disabled：禁用元素。
readonly：将输入字段设置为只读，无法编辑。
required：指定输入字段为必填项。
placeholder：为输入字段提供占位符文本。
rows：定义文本区域的行数。
cols：定义文本区域的列数。
checked：设置复选框或单选钮为选中状态。
selected：设置下拉列表中的选项为默认选中状态。
maxlength：指定输入字段的最大字符数限制。
min和max：指定输入字段的最小值和最大值。

这只是一小部分常用的HTML属性，不同的HTML元素可能具有不同的属性。可以根据具体的需求查阅HTML文档以了解更多的属性和它们的用法。

下面列出了适用于大多数 HTML 元素的属性：

属性	描述
class	为html元素定义一个或多个类名（classname）(类名从样式文件引入)
id	定义元素的唯一id
style	规定元素的行内样式（inline style）
title	描述了元素的额外信息 (作为工具条使用)

四、标题

在HTML中，可以使用标题元素 <h1> 到 <h6> 来定义页面的标题。这些标题元素按照重要性从高到低排列，其中 <h1> 是最高级的标题， <h6> 是最低级的标题。

以下是标题元素的示例：

<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>

使用标题元素的好处是它们不仅用于页面结构，还有助于搜索引擎优化和可访问性。搜索引擎通常会将页面标题视为页面的重要指标，而屏幕阅读器等辅助技术可以利用标题元素帮助用户浏览和理解页面结构。

请注意，不要仅仅通过更改标题元素的字体大小或样式来定义标题。应该根据内容的层次结构和重要性选择正确的标题级别。

五、注释

在HTML中，可以使用注释来在代码中添加注解或说明，这些注释不会在浏览器中被显示出来。注释可以用于提供代码的说明、调试或临时禁用一段代码。

HTML注释使用 结束。在这两个符号之间的内容将被视为注释，不会被浏览器解析或显示。

以下是HTML注释的示例：

<!-- 这是一个HTML注释 -->
<p>这是一个段落元素。</p>
<!-- <p>这是被注释的段落元素</p> -->

注意，注释应该在有效的HTML标记内使用，并且不能嵌套在其他注释中。注释也不能包含--，因为它会被解析为注释的结束符。

使用注释可以帮助在代码中添加有关代码目的、作者或修改历史的说明，以便其他开发者可以更好地理解和维护代码。同时，在调试代码时，注释还可以临时禁用一些代码来进行排查错误。

六、段落

在HTML中，段落是一种常用的文本元素，用于显示一段连续的文本。段落元素使用<p>标签来定义，开始标签<p>用于指示段落的开始，结束标签</p>用于指示段落的结束。在段落元素中可以包含任意文本、其他HTML元素或标记。

以下是一个简单的段落示例：

<p>这是一个段落。</p>

段落元素会自动在段落之前和之后添加一些空白间距，以使段落在页面上更易于辨认。这样，每个段落都会单独显示为一行，并且段落之间会有一些间隔。

在段落元素中可以包含其他HTML元素，如链接、强调文本、图片等。例如：

<p>这是一个包含<a href="https://www.example.com">链接</a>的段落。</p>

段落元素是HTML中常用的文字排版元素之一，它被广泛用于结构化和组织文本内容。

七、文本格式

在HTML中，可以使用一些标签来对文本进行格式化和排版。以下是一些常用的HTML文本格式化标签：

<b>：用于加粗文本。例如 <b>加粗文本</b>。
<i>：用于斜体文本。例如 <i>斜体文本</i>。
<u>：用于下划线文本。例如 <u>下划线文本</u>。
<s>：用于删除线文本。例如 <s>删除线文本</s>。
<strong>：用于表示重要文本，一般会呈现为加粗。例如 <strong>重要文本</strong>。
<em>：用于表示强调文本，一般会呈现为斜体。例如 <em>强调文本</em>。
<sup>：用于上标文本。例如 x<sup>2</sup>。
<sub>：用于下标文本。例如 H<sub>2</sub>O。
<small>：用于表示小号文本。例如 <small>小号文本</small>。
<big>：用于表示大号文本。例如 <big>大号文本</big>。

请注意，这些标签只是用来表示文本的样式和意义，并不会直接影响文本在页面上的显示效果。实际的样式和排版效果会受到CSS样式表的影响。

八、头部

在HTML中，头部（）是一个包含元数据（metadata）的部分，它不会直接在浏览器窗口中显示内容，而是提供关于HTML文档的信息。头部通常包含以下元素：

<title>：定义文档的标题，显示在浏览器的标题栏或选项卡上。
<meta>：定义元数据，包括字符编码、关键词、描述等。例如：<meta charset="UTF-8"> 定义文档的字符编码为UTF-8。
<link>：用于在HTML文档中引用外部资源，如CSS样式表或图标文件。
<style>：用于在HTML文档内部定义CSS样式。
<script>：用于在HTML文档内部或外部引入JavaScript脚本。
<base>：用于指定文档中相对URL的基础URL。
<noscript>：指定在不支持或禁用JavaScript的情况下显示的替代内容。

头部标签的结构如下：

<!DOCTYPE html>
<html>
<head><!-- 元数据和其他头部元素放在这里 -->
</head>
<body><!-- 页面内容放在这里 -->
</body>
</html>

头部的内容对于搜索引擎优化（SEO）和网页性能优化非常重要，可以提供有关网页的关键信息，增加搜索引擎索引和用户体验。

九、主体

在HTML中，<body>是一个包含页面实际内容的标签。在<body>标签中，可以包含各种HTML元素，用于构建页面的结构、布局和显示内容。

以下是常见的HTML元素，可以在<body>标签中使用：

标题：<h1>到<h6>标签用于定义页面的标题，其中<h1>是最高级别的标题。
段落：<p>标签用于定义段落，用于按照自然段落将文本分组。
换行：<br>标签用于插入换行符，使文本换行显示。
水平线：<hr>标签用于插入水平线，用于分隔内容。
列表：有序列表使用<ol>标签，无序列表使用<ul>标签，列表项使用<li>标签。
图像：<img>标签用于插入图片，通过指定图片的URL和相关属性来显示图片。
链接：<a>标签用于创建超链接，可以链接到其他页面、文件或位置。
表格：<table>标签用于创建表格，<tr>标签表示表格的行，<th>标签表示表格的表头单元格，<td>标签表示表格的数据单元格。
表单：<form>标签用于创建表单，包含输入字段、按钮、下拉菜单等表单元素。
样式：<div>和<span>标签用于创建块级和行内元素，可以通过CSS样式进行样式定义。
脚本：<script>标签用于插入JavaScript脚本，可以实现交互和动态效果。
视频和音频：<video>和<audio>标签用于嵌入视频和音频内容。
内联框架：<iframe>标签用于嵌入其他网页或文档。

<body>标签的示例结构如下：

<!DOCTYPE html>
<html>
<head><!-- 头部内容 -->
</head>
<body><!-- 页面实际内容 --><h1>标题</h1><p>段落文本</p><img src="image.jpg" alt="图片"><a href="https://example.com">链接</a><!-- 其他HTML元素 -->
</body>
</html>