完整的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>
举头望明月, 低头思故乡。
</p>
</body>
</html>