                              HTML基本标签

目录标题

2.1HTML文档头部<head>
2.2网页标题<title>
2.3元信息<meta>
- 2.3.1设置网页关键字
- 2.3.2设置网页说明
- 2.3.3添加作者信息
- 2.3.4规定字符编码
- 2.3.5设置网页的定时跳转
2.4HTML注释 !-- --
2.5HTML标题 h1~h6
2.6HTML段落 p
2.7换行 br
2.8水平线 hr
2.9文本格式化
2.10HTML字符实体
- 2.10.1不间断的空格
- 2.10.2插入特殊符号
2.11练习题

2.1HTML文档头部

head标签：用于定义文档的头部，它是所有头部标签的容器。可以引用脚本，指示浏览器在哪里找到样式表，提供元信息等。
文档的头部：描述了文档的各种属性和信息，包括文档的标题，在Web中的位置以及和其他文档的关系等。

2.2网页标题

title标签:用于显示文档的名字，通常出现在浏览器窗口的标题栏或状态栏中。title标签是head标签中唯一要求包含的东西。

例子1

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>诗词网站</title></head><body></body>
<html>

2.3元信息

meta标签:提供的信息不显示在网页中，一般用来定义网页信息的说明，关键字，刷新频率等。在HTML中，meta标签不需要设置结束标签，在一个尖括号内就是一个meta内容。在一个HTML网页中可以有多个meta标签。

属性	值	描述
content	some_text	定义与http-equiv或name属性相关的元信息
charset	character_set	HTML5新属性：定义文档的字符编码
http-equiv	content-type expires refresh set-cookie	把content属性关联到HTTP头部
name	author description keywords generator revised others	把content属性关联到一个名称
scheme	some_text	（HTML5不支持）定义用于翻译content属性值的格式

2.3.1设置网页关键字

  在搜索引擎中，检索信息都是通过**输入关键字**来实现的。**设置关键字**是最基本也是最重要的一步，是进行网页优化的**基础**。关键字在浏览时是看不到的，它是针对搜索引擎的信息。当用关键字搜索网站时，如果网页中包含该关键字，就可以在搜索结果中列出来。

（1）语法：meta name=“keywords” content=“输入具体的关键字” 前后有<>.
（2）说明：在该语法中，name为属性名称，这里是keywords，也就是设置网页的关键字属性，而在content中则定义具体的关键字。
当网站的网页关键字为"诗词"时，代码如下：
meta name=“keyword” content=“诗词”,前后有<>。

选择关键字的技巧与原则
（1）要选择与网站或网页主题相关的文字作为关键字。
（2）选择具体的词语，避免使用过于行业或笼统的词语。
（3）揣摩用户会用什么作为搜索词，把这些词放在网页上或直接作为关键字。
（4）关键字可以不止一个，最好根据不同的网页，设置不同的关键字组合，这样网页被搜索到的概率将大大增大。

2.3.2设置网页说明

设置网页说明也是为了便于搜索引擎的查找，它用来详细说明网页的内容，网页说明不在网页中显示出来。

（1）语法：
meta name=“description” content=“设置网页说明”，前后有<>.
（2）说明：
在该语法中，name为属性名称，这里设置为description,也就是将元信息属性设置为网页说明，在content中定义具体的描述语言。
当网站的网页说明为"这是一个内容为诗词的网页"时，代码如下:
meta name=“description” content=“这是一个内容为诗词的网页”,前后有<>.

2.3.3添加作者信息

在meta中还可以添加网页制作者的姓名。

（1）语法 ：
meta name=“author” content=“作者的姓名”,前后有<>.
（2）说明：在该语法中，name为属性名称，这里设置为author，也就是设置作者信息，在content中定义具体的信息.
当网站的作者是李白时，代码如下:
meta name=“author” content=“李白”,前后有<>.

2.3.4规定字符编码

charset属性规定HTML文档的字符编码，它是HTML5中的新属性，且替换了meta http-equiv=“Content-Type” content=“text/html;charset=UTF-8”,前后有<>.

（1）语法：
meta charset=“HTML文档的字符编码”，前后有<>.
（2）说明：
从理论上讲，可以使用任何字符编码，但并不是所有的浏览器都能理解它们。使用的字符编码越广泛，浏览器理解它的可能性就越大。当网站的编码方式为"UTF-8"时，其可以支持多种语言，代码如下：
meta charset=“UTF-8”,前后有<>.

2.3.5设置网页的定时跳转

（1）使用meta标签可以使网页在经过一定时间后自动刷新，这可以通过将http-equiv属性值设置为refresh来实现。content属性值可以设置为更新时间。
（2）在浏览网页时经常会看到一些欢迎信息的页面，在经过一段时间后，这些页面会自动转到其他页面，这就是网页的跳转。

（3）语法：
meta http-equiv=“refresh” content=“跳转的时间；ur1=跳转到的地址”，前后有<>.
（4）说明：
在该语法中，refresh表示网页的刷新，在content中设置刷新的时间和刷新后的链接地址，时间和链接地址之间用分号相隔。默认情况下，跳转时间以秒（s）为单位。

例子2-1
在进入网页后显示欢迎页面，5s后自动跳转到网页的内容区

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta http-equiv="refresh" content="5;ur1=target/index.html"><title>网页的定时跳转</title></head><body><h1>欢迎来到这个页面，5s后将自动跳转到其他页面</h1></body>
</html>

2.4HTML注释 !-- –

（1）HTML注释是在HTML代码中插入的描述性文本，用来解释该代码或提示其他信息。HTML注释只出现在代码中，在浏览器的页面中并不显示。
（2）语法：!–注释的内容–

例子2-2
在页面中插入注释，注释内容并不显示在网页上

<!DOCTYPE>
<html><head><!--在meta标签中设置网页的自动跳转--><meta http-equiv="refresh" content="10;ur1=page1.html1"><title>网页的定时跳跃</title></head><body><h1>欢迎来到这个页面，10s后将自动跳转到其他页面</h1></body>
</html>

2.5HTML标题 h1~h6

（1）HTML文档中包含有各种级别的标题，由h1~h6标签来定义。h1-h6标签中的字母h是headline的简称。作为标题，它们的重要性是有区别的，其中h1标题的重要性最高，h6的最低。
（2）语法：h1 1级标题 /h1
h2 2级标题 /h2
h3 3级标题 /h3
h4 4级标题 /h4
h5 5级标题 /h5
h6 6级标题 /h6
（3）说明：
在该语法中，有6个级别的标题，h1是一级标题，使用最大的字号表示，h6是6级标题，使用最小的字号表示。

例子2-3
在网页中依次使用h1~h6标题标签，在浏览器中显示出来。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>标题</title></head><body><h1>1级标题</h1><h2>2级标题</h2><h3>3级标题</h3><h4>4级标题</h4><h5>5级标题</h5><h6>6级标题</h6></body>
</html>

2.6HTML段落 p

（1）在网页中如果要把文字有条理地显示出来，离不开段落标签的使用。在HTML中可以通过标签实现段落的效果。p是HTML文档中最常见的标签，用来标记一个段落的开始。
（2）语法：
p 段落标签 /p
（3）说明：
p标签显示在浏览器中时，会自动在生成的元素前后创建一些空白，浏览器会自动添加这些空白。

例子2-4
在网页中创建一个段落，在浏览器中显示出来。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>标签</title></head><body><p>建筑艺术是一种立体艺术形式，是通过建筑群体组织，建筑物的形体，平面布置，立面形式，内外空间组织，结构造型（即建筑的构图，比例，尺度，色彩，质感和空间感）以及建筑的装饰，绘画，雕刻，花纹，庭园，家具陈设等多方面的考虑和处理所形成的一种综合性艺术。</p><p>建筑是技术和艺术相结合的产物。意大利现代著名建筑师奈维认为，建筑是一个技术与艺术的综合体。美国现代著名建筑师赖特认为，建筑是用结构来表达思想的科学性的艺术。优秀的建筑不仅要建筑师去设计，还要由能工巧匠将它建筑出来。</p></body>
</html>

2.7换行 br

（1）换行标签 br的作用是在不另起一段的情况下将当前文本强制换行。
（2）语法：
br
（3）说明：
一个br标签代表一个换行，连续的多个标签可以实现多次换行。

例子2-5
在标签的内部使用换行符实现换行效果

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>静夜思</title></head><body><h2>静夜思</h2><p>李白</p><p>床前明月光，<br>疑是地上霜。<br>举头望明月，<br>低头思故乡。</p></body>
</html>

2.8水平线 hr

（1）在网页中常常看到一些水平线将段落与段落之间隔开，这些水平线可以通过插入图像实现，也可以更简单地通过标签来完成。
（2）hr标签可以在HTML页面中创建一条水平线，在视角上将文档分隔成各个部分。
（3）语法：
hr

例子2-6
在古诗的题目下方通过hr标签插入一条水平线，使题目和内容区分开来，在浏览器中显示。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>静夜思</title></head><body><h2>静夜思</h2><hr><p>李白</p><p>窗前明月光，<br>疑是地上霜。<br>举头望明月，</br>低头思故乡。</p></body>
</html>

2.9文本格式化

（1）HTML中包含许多定义文本格式的标签，比如粗体和斜体字。格式化文本的效果现在已经被CSS样式所取代，只要简单了解即可。

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

说明：
部分标签已经被淘汰了，不赞成使用。

例子2-7
文本格式化标签在浏览器中的显示效果。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title></head><body><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><br>文本<sup>上标</sup></body>
</html>

2.10HTML字符实体

在HTML中，一些字符是预留的，比如说小于号“<”和大于号“>”在网页中被识别为HTML标签。想要正确地显示预留字符，就需要使用该字符对应的字符实体。

2.10.1不间断的空格

不管在HTML文档中输入多少空格，浏览器只会显示一个空格。当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体。
语法：
&nbsp
说明：
在网页中可以有多个空格，&nbsp 代表一个半角空格，多个空格则可以多次使用这一符号。

例子2-8
在《静夜思》的最后一句前面插入4个&nbsp，在浏览器中显示。

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><title>静夜思</title></head><body><h2>静夜思</h2><p>窗前明月光，疑是地上霜。</p><p>举头望明月，&nbsp;&nbsp;&nbsp;&nbsp;低头思故乡。</p></body></html>

2.10.2插入特殊符号

常见字符实体

显示结果	描述	实体名称
	空格	&nbsp
<	小于号	&lt
>	大于号	&gt
&	和号	&amp
“	引号	&quot
‘	单引号	&apos
*	乘号	&times
/	除号	&divide

2.11练习题

1.填空题

（1）一个完整的HTML文档必须包含3个部分：第一部分是由**!DOCTYPE html标签定义的文档版本信息**，第二部分是由head标签定义的各项声明的文档头部，第三部分是由body标签定义的文档主体部分。
（2）使用meta标签可以使网页在经过一定时间后自动刷新。自动刷新可以通过将http-equiv属性值设置为refresh来实现。
（3）br标签在HTML中的含义是换行，HTML文档中用来插入水平线的标签是hr。
（4）当网页需要连续空格的时候，需要在文档中连续地插入空格对应的字符实体**&nbsp**。

2.简答题

请写出HTML文档的基本结构。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body></body>
</html>

3.编程题
请完成如图所示的网页。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>静夜思</title></head><body><h2>孟浩然</h2><p>孟浩然（689-740年），字浩然，号孟山人，襄州襄阳（今湖北襄阳）人，唐代著名的山水田园派诗人，世称"孟襄阳"。因他未曾入仕，又称为"孟山人"。</p><hr><p>春晓</p><p>春眠不觉晓，</p><p>处处闻啼鸟。</p><p>夜来风雨声，</p><p>花落知多少。</p></body>
</html>

第02章 HTML基本标签相关推荐

Xcode江湖录－第02章纵观全局——布局探索
第02章纵观全局--布局探索 2.1 工作区 Xcode工作区:由上到下,由左到右依次有:工具栏-［导航器区域-编辑器区域-工具区域］-调试区域: 1:工具栏从左到右依次有: 1.1:运行按钮(可以 ...
第02章 PyTorch基础知识
文章目录第02章 Pytorch基础知识 2.1 张量 2.2 自动求导 2.3 并行计算简介 2.3.1 为什么要做并行计算 2.3.2 CUDA是个啥 2.3.3 做并行的方法补充:通过股票数 ...
第02章_MySQL环境搭建
第02章_MySQL环境搭建 1. MySQL的卸载步骤1:停止MySQL服务在卸载之前,先停止MySQL8.0的服务.按键盘上的"Ctrl + Alt + Delete"组合 ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
c语言创造线性表储存复数,《c语言数结构》第02章线性表.ppt
<c语言数结构>第02章线性表第1章回顾数据结构课程-- 数据结构+算法＝程序,涉及数学.计算机硬件和软件. 数据结构定义--指互相有关联的数据元素的集合,可用data_Struct ...
C语言笔记第02章：三大基本结构
文章目录 :star: 第02章:三大基本结构 0.什么是语句 1.顺序结构 2.选择结构(分支语句) 2.1 if 语句 2.1.1 单分支 2.1.2 多分支 2.1.3 两个经典问题的思考 2. ...
PTA第02章练习题（Python）
PTA第02章练习题本篇内容所用到的函数概览: 函数作用 split() 空格内为空白默认以空格分割,(,)以逗号分割 map(a,b) 将括号内的第二项作为自变量,第一项作为函数做映射 ceil ...
《Python自然语言处理（第二版）-Steven Bird等》学习笔记：第02章获得文本语料和词汇资源
第02章获得文本语料和词汇资源 2.1 获取文本语料库古腾堡语料库网络和聊天文本布朗语料库路透社语料库就职演说语料库标注文本语料库在其他语言的语料库文本语料库的结构载入你自己的语料 ...
c语言中用temp程序,e__temp_c语言第02章作业.doc
e__temp_c语言第02章作业 C语言程序设计第02章作业单选题 1.假定有以下变量定义:int k=7,x=12; 则能使值为3 的表达式是_______. A)x%=(k%=5) B)x%= ...

第02章 HTML基本标签