HTML基础学习（1）——HTML基本标签_规定字符编码的标签-优快云博客

这篇博客介绍了HTML的基础标签，包括<head>定义文档头部，<title>设置页面标题，<meta>用于提供元信息，如关键字和说明。还讲解了HTML注释、标题标签<h1>~<h6>、段落<p>、换行<br>、水平线<hr>以及文本格式化和特殊符号的使用。

完整的HTML文档包含3个部分：

定义的文档版本信息；
标签定义的各项声明的文档头部；
标签定义的文档主体部分。

1. <head>标签

<head>标签用于定义文档的头部，可以在这里引用脚本、指示样式表、提供元信息等。

2. <title>标签

用于显示文档的名字，出现在浏览器窗口的标题或状态栏中。必须包含该标签。

3. <meta>元信息

一般用来定义网页信息的说明、关键字、刷新频率等。一个HTML网页中可以有多个标签

3.1 设置网页关键字

设置网页关键字可以方便搜索引擎发现。

//语法
<meta name="keywords" content="具体关键字">

//具体示例,关键字为“诗词”
<meta name="keyword" content="诗词">

3.2 设置网页说明

网页说明是为了方便搜索引擎查找，用来详细说明网页的内容。

//语法
<meta name="description" content="写入你的网页说明">

//具体示例
<meta name="description" content="一个内容为诗词的网页">

3.3 作者信息

添加网页制作者的姓名。

//语法
<meta name="author" content="作者的姓名">

//具体示例
<meta name="author" content="王维">

3.4 规定字符编码

//语法
<meta charset="HTML文档">

//具体示例
<meta charset="UTF-8">

charset为HTML5中新增属性，来替换：

<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8”>

3.5 设置网页的定时跳转

使得网页在一定时候后自动刷新。

//语法
<meta http-equiv="refresh" content="跳转的时间;url=跳转到的地址">

//具体示例
<meta http-equiv="refresh" content="5;url=target/about.html">

4. HTML注释

<!-- 注释内容 -->

5. 标题<h1>~<h6>

h1标题重要性最高，h6最低

<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>

6. 段落<p>

<p>段落标签可以把文字有条理显示出来，在浏览器中，会在元素p前后创建一些空白。

7. 换行<br>

标签<br> 的作用是在不另起一段的情况下将当前文本强制换行

8. 水平线<hr>

<hr> 标签可以在 HTML 页面中创建一条水平线，在视觉上将文档分隔成各个部分。

9. 文本格式化

标签	描述	备注
<b>	定义粗体文本
<big>	定义大号字
<em>	定义着重文字
<i>	定义斜体字
<small>	定义小号字
<strong>	定义加重语气
<sub>	定义下标
<sup>	定义上标
<ins>	定义插入字
<del>	定义删除字

10. 特殊符号

显示效果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
&	和号	&
“”	引号	"
‘’	单引号	'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 设置网页关键字 -->
    <meta name="keyword" content="诗词">
    <!-- 设置网页说明 -->
    <meta name="description" content="一个内容为诗词的网页">
    <!-- 添加作者信息 -->
    <meta name="author" content="作者的姓名">
    <!-- 规定字符编码 -->
    <meta charset="UTF-8">
    <!-- 设置网页的定时跳转 -->
    <meta http-equiv="refresh" content="5;url=target/about.html">
    <!-- 网页标题 -->
    <title>诗词网站</title>
</head>
<body>
    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

    <hr>
    <b>This text is bold</b>
    <br>
    <strong>this Text is strong</strong>
    <br>
    <big>this text is big</big>
    <br>
    <em>this text is emphasized</em>
    <br>
    <i>this text is italic</i>
    <br>
    <small>this text is small</small>
    <br>
    文本
    <sub>下标</sub>
    文本
    <sup>上标</sup>


    <p>
        举头望明月，&nbsp;&nbsp;低头思故乡。
    </p>
</body>
</html>