第二天：HTML标签学习
在学习开始之前，为大家推荐一个HTML自学网站：https://www.w3school.com.cn/index.html
该网站不仅有HTML的学习，还包含了很多其他热门语言，此外在学习之余还存在练手的空间，可以说是初学者的福音了。但是网站毕竟还是基础偏多，如果学到后期需要练手的话可以去B站找找教程，或者大家可以利用各大电商网站，尝试重构网页。
目录
3.1VS Code创建网页的方法（新建文件快捷键：Ctrl+N）
一.HTML语法规范
1.1标签概述
- HTML 标签是由尖括号包围的关键词，比如 <html></html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>，所以也称为双标签
- 标签对中的第一个标签是开始标签--比如<p>，第二个标签是结束标签--比如</p>
- 开始和结束标签也被称为开放标签和闭合标签
- 有些特殊的标签必须是单个标签，例如<br/>，称为单标签
1.2标签关系
双标签关系可以分为：包含关系和并列关系
包含关系：（父子关系）
<head>
<title> hello world! </title>
</head>并列关系：（兄弟关系）
<head> </head>
<body> </body>二.HTML基本结构标签
注意：HTML页面也叫HTML文档
2.1第一个HTML网页
| 标签名 | 定义 | 说明 |
| <html></html> | HTML标签 | 页面中最大的标签，在标签之间填写文本描述网页 |
| <head></head> | 文档头部 | 定义文档头部，是所有头部元素的容器 |
| <title></title> | 文档标题 | 是head部分唯一必须元素，展示给读者看 |
| <body></body> | 文档内容 | 元素包含网页展示给用户的所有内容，是文档的主体 |
现在可以现在桌面新建文件夹，命名为案例，在文件夹内新建一个文本文档命名为“01-第一个HTML网页.txt”
打开文件，在里面打上代码格式如下：
要注意标签彼此之间的关系
<html>
<head>
<title>第一个页面</title>
</head>
<body>
一入web深如海，从此孤生到白头
</body>
</html>写完后记得保存并将文件扩展名改为.html
如此一来便做好了第一个网页，双击后页面展示如下：
三.前端开发工具
推荐使用VS Code开发工具，其安装路径以及好处和优势在前面文章都有有讲到，这里放上链接，想要了解的朋友们可以去看看：https://blog.csdn.net/weixin_44762145/article/details/117113350?spm=1001.2014.3001.5501
3.1VS Code创建网页的方法（新建文件快捷键：Ctrl+N）
调整好VSC后，点击桌面快捷方式，打开如下界面：
我们可以通过点击界面上的启动下的新建文件，新建HTML界面；
也可以在上方导航栏中，点击文件，下拉列表中第一个就是新建文件
注意：新建好文件后一定要将文件保存为.html 文件
保存好后，便可以在HTML文件中编写网页了
在这里给大家科普一下，VS Code创建网页大框架有一个极其简便又实用的快捷方式：在英文状态下输入“！”，接着按回车键，便可以快速构建网页框架了，如下：
构建好后如图：
接着，我们便可以在这基础上进行修改和添加了！
我做的基础修改如下：
<!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">
<title>使用VS Code创建的第一个页面</title>
</head>
<body>
一入web深如海，从此孤生到白头
</body>
</html>如果大家看完上面链接的文章，或是安装过open in browser插件后，只需要在代码页面右键，点击open in default browser，或是open in other browsers,便可在浏览器打开查看页面
3.2VS Code快捷工具生成框架代码含义
3.2.1 <!DOCTYPE> 标签
<!DOCTYPE> ：文档类型声明标签(doc---document文档) 不是 HTML 标签，作用是指示浏览器关于页面使用哪个HTML版本进行编写的指令，声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
在 HTML 4.01 中有三种 <!DOCTYPE> 声明。在 HTML5 中只有一种：
<!DOCTYPE html>--表示浏览器使用的是最新的HTML5版本显示页面想了解更多：https://www.w3school.com.cn/tags/tag_doctype.asp
3.2.2 lang 语言
<html lang="en">
lang:其实就是language（语言）的缩写，用来定义当前文档显示的语言；
en:是English的缩写，及定义语言为英语（提示英文网站）
zh-CN:定义语言为中文（提示中文网站）
有的浏览器检测到会提示：是否翻译成中文/是否翻译成英文
3.2.3 charset 字符集
<meta charset="UTF-8">
charset : 字符集（char--字符、set--集合），以便于计算机能够识别和存储各种文字。常用的值有GB2312（简体中文）、BIG5（繁体中文）、GBK（包含了简体和繁体中文）和UTF-8。
UTF-8是字符集的一种也被称为万国码，基本包含了全世界所有国家需要用到的字符。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用哪种字符编码
注意：上面语法是必须要写的代码，否则可能引起乱码情况。一般情况下，统一使用“UTF-8”编码，尽量统一，不要写成"UTF8"或"utf8"
四.HTML常用标签
4.1标签语义
标签语义就是标签的含义，在合适的地方添加合适的标签，可以让页面结构更清晰
4.2标题标签<h1>~<h6>
标题标签提供了6个等级的网页标题，并且是双标签，使用方法如下：
h是单词head的缩写，意为头部、标题
标签语义：作为标题使用，依据重要性或根据层次不同字体大小不同
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>Document</title>
</head>
<body>
<h1>我是第一个标题</h1>
<h2>我是第二个标题</h2>
<h6>我是第三个标题</h6>
</body>
</html>网页展示结果如下：
注意：每个标题都是独占一行的
4.3段落和换行标签
4.3.1 段落标签<p></p>
<p>标签用于定义段落，可以将整个网页分为若干个段落。p就是paragraph（段落）的缩写。
使用方式如下：
如果不添加<p>标签，网页不会自动分配，所有文字都挤在同一段中
如果添加了<p>标签，网页会根据你所分配的<p>标签对划分段落
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>Document</title>
</head>
<body>
<p>就海外各界人士以多种方式缅怀追思袁隆平院士，外交部发言人赵立坚5月24日表示，这充分说明袁隆平院士对中国乃至世界杂交水稻事业所作贡献受到广泛认可和高度评价。他的逝世是中国和世界的巨大损失，他将永远为人们所缅怀和铭记。 </p>
<p>赵立坚表示，中国杂交水稻技术的输出与对外开放几乎同步。1979年中方首次对外提供了杂交水稻种子， 40年后，中国杂交水稻已在亚洲、非洲、美洲的数十个国家和地区推广种植，年种植面积达800万公顷。 40年间，袁隆平院士和他的研究人员先后赴印度、巴基斯坦、越南、缅甸、孟加拉国、斯里兰卡、马达加斯加、美国等国为水稻研究人员提供建议和咨询，并通过国际培训班为80多个发展中国家培训超过1.4万名杂交水稻专业技术人才，上述努力为解决世界饥饿和贫困问题作出了巨大贡献。</p>
<p>赵立坚说，袁隆平院士毕生奋斗的梦想，是让杂交水稻覆盖全球， 让所有人不挨饿。中国创造了粮食自给的人间奇迹，也有意愿、有能力继续为全球粮食安全治理作出更大贡献。 “我们相信在各方的携手努力下，袁隆平院士的梦想一定会成为现实。饥饿和贫困终将从地球上消失！”</p>
</body>
</html>
特点：
文本在一个段落中会根据浏览器窗口的大小自动换行
段落与段落之间保留空隙
4.3.2换行标签<br/>
希望某段文本强制换行时使用，br是break的缩写，意为打断、换行
标签语义：强制换行
特点：
1.<br/>是单标签，不需要结束标签
2.<br/>只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的可能
4.4文本格式化标签
网页中有时候需要给文字设置加粗、斜体等样式，这时候就需要用到文本格式化标签，使文字以特殊形式显示。
标签语义：设置字体样式，使页面不单调。
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或者<b></b> | 推荐使用<strong>,文字加粗标签 |
| 倾斜 | <em></em>或者<i></i> | 推荐使用<em>,斜体文字 |
| 删除线 | <del></del>或者<s></s> | 推荐使用<del>,划去文字样式 |
| 下划线 | <ins></ins>或者<u></u> | 推荐使用<ins>标签加粗 |
样式修改如下图所示：
<!DOCTYPE html>
<html lang="zh-CN">
<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">
<title>Document</title>
</head>
<body>
<p>就海外各界人士以多种方式缅怀追思<strong>袁隆平院士</strong>，<del>外交部发言人</del>赵立坚5月24日表示，<em>这充分说明袁隆平院士对中国乃至世界杂交水稻事业所作贡献受到广泛认可和高度评价</em>。他的逝世是中国和世界的巨大损失，<ins>他将永远为人们所缅怀和铭记</ins>。 </p>
</body>
</html>
网页上显示效果如下：
五.练手测试--体育新闻案例
具体素材没有限制，大家可以充分利用互联网上的各种资源做练手，在这里给大家附上新闻链接：https://www.sohu.com/a/468371428_458722
首先，在VS Code里新建文件；
接着，通过感叹号快捷创建HTML框架：
这里可以根据自己的想法进行添加修改
说一下思路：
首先<h1>标签是一级标题标签，所以文章大标题就用<h1>双标签包裹；下面大多是段落，直接复制粘贴的话都会挤在同一段，所以不同段落之间用<p>标签包裹隔开；最后是作者和发表时间，如果用<p>标签将作者和时间隔开的话两段中间会出现空格（上述有说明<p>标签自带属性），所以这里我用了<br/>换行，就不会出现行与行之间的空格 。
<!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">
<title>Document</title>
</head>
<body>
<h1>NBA解释詹姆斯未被停赛：本赛季有许多类似情况 </h1>
<h3>首创统计</h3>
<p>北京时间5月25日，近日，勒布朗-詹姆斯违反了NBA的健康和安全规定， 但他并没有因此在首轮对阵太阳时被停赛。本周早些时候，詹姆斯参加了一个品牌推广活动， 他现身支持一个龙舌兰酒品牌Lobos 1707，这次活动发生在湖人队与勇士队的比赛之前。</p>
<p>联盟和湖人都知悉了这件事，但是詹姆斯没有被停赛，因为这一事件并没有上升到病毒传播的威胁水平。 今天，NBA首席联络官Mike Buss发布声明， 就湖人前锋勒布朗-詹姆斯违反联盟健康与安全协议事件作出解释。
</p>
<p>“为了澄清任何可能存在的误解，詹姆斯上周短暂地参加了一次户外活动， 该项活动的参与者都已经接种了疫苗或者核酸检测呈阴性。在这样的情况下，经咨询医疗专家后， 联盟认为他的出席并不会引发与新冠病毒传播相关的风险，因此不必需要接受隔离。 在这个赛季，已经出现多次类似的违反联盟健康与安全协议的情况， 都采取了与对詹姆斯相似的处理方式。”
</p>
<p>雅虎记者Chris Haynes对这则声明表示：“在詹姆斯身边呆了几年，他一直都是个很注重医疗情况保持隐私的人， 也从来不会危及到他的家人和队友。这份声明表明了一件事：他已经接种了疫苗。”
</p>
<h5>作者：NBA广角 <br/> 2021-05-25 08:13</h5>
</body>
</html>最终呈现效果如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
