知识目标
- 熟练掌握HTML5标签和属性的概念和语法
- 掌握页面格式化标签的使用与页面呈现效果
- 掌握文本格式化标签的使用与页面呈现效果
1. HTML结构标签的语法和含义
1.1 标签基本语法概述
- HTML标签是由尖括号（“<>”）包围的关键词，例如;
- HTML标签通常是成对出现的，例如
<html>和</html>，被称为双标签，标签对中的第一个标签是起始标签，第二个是结束标签（多条斜杠）; - 有些特殊的标签必须是单个标签（极少），例如
<br/>。这种我们叫单标签。 - 若需要在HTML文档中添加注释文字，就需要使用注释标签。语法：
<!-- 注释语句 -->
注意事项：
1.标签不区分大小写
2.允许属性值不使用引号
3.允许部分属性值的属性省略
1.2 标签的属性
- 属性为HTML元素提供附加信息，如字体、颜色等；
- 属性定义在起始标签中，以“名称/值”对的方式出现，比如：
name = 'value'。 - HTML5标签设置属性的基本语法格式：
<标签名 属性1="属性值1" 属性2="属性值2" …>内容</标签名>
从语法上看，标签可以拥有多个属性，属性必须写在开始标签中，位于标签名后面。属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
动脑筋：下述示例代码中，哪个是属性？哪个是属性值？
<p align="center">我是居中显示的文本</p>
1.3 标签关系
双标签关系可以分为两类：包含关系和并列关系。
1.3.1 包含关系
<head>
<title> </title>
</head>
1.3.2 并列关系
<head></head>
<body></body>
1.4 HTML基本结构
1.5 第一个HTML
1.5.1 使用记事本创建
步骤：
- 新建一个.txt文件；
- 将html基本结构输入到文件中
- 保存，将后缀改成.html;
- 双击文件，看效果
1.5.2 使用VSCode创建
步骤：1. 新建文件，保存为.html文件；
2. 在文件里输入html基本结构，也可以输入! 加 tab键（英文输入情况，且一定是.html后缀），自动生成html基本结构。
3. 保存，右键运行，可以选1，直接在默认的浏览器打开；也可以选2（安装了Live Server插件），只要保存就会实时刷新。
2. 文本标签
一篇结构清晰的文章通常都会通过标题、段落、分割线等对文章进行结构排列。
网页也不例外。为了使网页中的文字有条理地显示出来，HTML提供了相应的页面格式化标签，如标题标签、段落标签、水平线标签、换行标签。
2.1 标题标签
标题标签用于将文本设置为标题，HTML提供了6个等级的标题标签，即<h1>~<h6>，从<h1>~<h6>标题标签的重要性依次递减。
标题标签的基本语法格式 <h(num) align="对齐方式">标题文本</h(num)>
可选属性，用于指定标题的对齐方式。
2.2 段落标签
在网页中，可以使用<p>标签来定义段落。<p>标签是HTML文档中常用的标签，默认情况下，一个段落中的文本会根据浏览器窗口的大小自动换行.
段落标签的基本语法格式: <p align=“对齐方式”>段落文本</p>
2.3 水平线标签
水平线标签的基本语法格式：<hr 属性="属性值" />
<hr />标签的常用属性
2.4 换行标签
如果想要将某段文本强制换行显示，就需要使用换行显示<br />。
3. 文本格式化标签
3.1 粗体、斜体、下划线等
文本格式化标签用于为文字设置粗体、斜体或下划线等一些特殊显示的文本效果。
font标签在html中已弃用，但还可使用，后续会学可代替的方式。
3.2 <cite>标签
<cite>标签是一个逻辑标签，该标签嵌套的文本是对某个参考文献的引用。例如，书籍或者杂志中的内容。
<cite>标签标签中的文本会以斜体样式显示在页面中。与<i>标签、<em>标签嵌套的文本显示样式相同，它们的差异在于语义不同，<cite>标签着重强调引用内容。
3.2 <time>标签
<time>标签是一个逻辑标签，用于标注时间（24小时制）或日期。被<time>标签标注的时间或日期不会在浏览器中呈现任何特殊效果，但是能够以机器可读的方式进行编码。
<time>标签的两个属性:
datetime：用于定义相应的时间或日期。其属性值必须为一个有效的时间或日期格式，不会显示给用户。
pubdate：用于设置文档的发布日期或时间。取值为 “pubdate”，可以省略属性值。
3.3 <mark>标签
<mark>标签是一个逻辑标签，用于高亮显示文本。
3.4 <font>文本样式标签
文本样式标签可以设置一些文字效果，例如，字体、字号、文字颜色，让网页中的文字样式变得更加丰富。
文本样式标签的基本语法格式：<font 属性="属性值">文本内容</font>
3.5 <div>和<span>标签
<div>和<span>标签是没有语义的，它们是一个盒子，用来装内容的。
div是division的缩写，表示分割、分区、span意为跨度、跨距。
3.5 拓展
一些字符在HTML中拥有特殊含义，例如，尖括号"<“”>"已作为HTML的语法符号。因此，如果希望在浏览器中显示这些特殊字符，就需要在HTML源代码中插入相应HTML代码，这些特殊符号对应的HTML代码被称为字符实体。
4. 综合案例演示
从案例中可以看出：
- 在html中，多个空格和换行无效，只会展示一个空格。需用到换行标签。
- 使用段落标签的属性时，align = 'left’为默认属性，省略的话等价于left(左对齐)。
- div和span的区别，换行和不换行。
更多区别点等着你去探索，试着去练习吧！！！
5. 实训
因还没学到CSS样式，所以接下来的案例题麻烦大家使用以上述学的知识来实现吧！！！可以在评论区上传自己的代码和样例截图哦！！！
