HTML基本标签结构
目标：
1.能够说出标签的书写注意规范
2.能够写出HTML骨架标签
3.能够写出超链接标签
4.能够写出图片标签，并说出alt和title的区别
5.能够说出相对路径的三种形式
目录：
1.HTML语法规范
2HTML基本结构标签
3.开发工具
4.HTML常用标签
5.HTML中的注释和特殊字符
1.HTML语法规范
1.1基本语法概述
1.HTML标签是由尖括号包围的关键词，如<html>
- HTML标签通常是成对出现的,例如<html>和</html>我们称为双标签，标签对中的第一个标签是开始标签，第二个标签是结束标签.
-
有些特殊的标签必须是单个标签（极少情况）例如
,我们称为单标签
1.2 标签关系
双标签可以分为两类：包含关系和并列关系。
包含关系
<head>
<title></title>
</head> 相当于父亲与儿子的关系
并列关系
<head></head>
<body></body> 相当于兄弟间的关系
2.HTML 基本结构标签
2.1 第一个HTML 网页
每一个网页都会有一个基本的结构标签，也称为骨架标签，网页内容也是在这些基本标签上书写HTML页面，也称为HTML文档。
<html>
<head>
<title>Long Time No See</title>
</head>
<body>
质变是量变的必然结果！
</body>
</html> 页面的内容是在这些基本的标签上书写的
| 标签名 | 定义 | 说明 |
|---|---|---|
| <html></html> | HTML标签 | 页面中最大的标签，我们称之为根标签 |
| <head></head> | 文档的头部 | 注意在head标签中我们必须设置title标签 |
| <title></title> | 文档的标题 | 让页面拥有一个属于自己的网页标签 |
| <body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
HTML文档的后缀必须是.html或.html.浏览器的作用是读取HTML文档，并以网页的形式显示它们，此时，若用浏览器打开这个网页，我们就可以预览我们所写的HTML文件了。
在桌面创建一个记事本
<head>
<title>Long Time No See</title>
</head>
<body>
质变是量变的必然结果！
</body>
</html> title
body
这些都是HTML基本的结构标签
3.网页开发工具
在编写HTML文件时我们总不能每次都创建一个记事本，写完后，再把文件名改为.html吧，这样做太麻烦，而且在书写时还有可能书写错误，因此引入了下面的开发工具。
Dreamweaver，web storm，visual studio code等
VS Code 工具生成骨架标签新增代码
1.<!DOCTYPE>标签
2.lang语言
3.charset字符集
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Long Time No See</title>
</head>
<body>
质变是量变的必然结果 optimistic！
</body>
</html> 3.1文档类型声明标签
文档类型声，其作用是告诉浏览器使用那种HTML版本来显示网页
<!DOCTYPE html> 这句话的意思是：当前网页采取的是HTML5版本来显示网页.
注意：
1.<！DOCTYPE>声明位于位于文档中最前面的位置，处于HTML标签之前。
2.<！DOCTYPE>不是一个HTML标签，它是文档类型声明标签。
3.2 Lang 语言种类
<html lang="en"> 用来定义当前文档的显示语言。
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页。lang 是language的缩写。其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文。
这个属性对浏览器和搜索引擎（百度，谷歌等）都是有作用的。
3.3字符集
字符集（charset）是多个字符的集合，以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档i应该使用那种字符编码
<meta charset="UTF-8"/> charset常用的值有：GB2312，BIG5，GBK和UTF-8,其中UTF-8也被称为万维码，基本包含了全世界所有国家要用到的字符。
注意：
上面的语法是必须要写的代码，否则可能会引起乱码的情况。一般情况下，统一使用”UTF-8“编码，尽量写成统一标准的“UTF-8”。
3.4总结：
1.以上的三个代码VS code自动生成，不需要我们重写。
2.<！DOCTYPE html>文档类型声明标签，告诉浏览器这个页面采取html5版本来显示。
3.<html lang="en">告诉浏览器或者搜索引擎这是一个英文网站，本页面采取英文来显示
4.<meta charset="UTF-8"/>必须写，采用UTF-8来保存文字，若不写，就会乱码。
4.HTML 常用标签
4.1 标签语义
学习标签是有技巧的，重点是记住每个标签的语义。简单的理解就是指标签的含义，即这个标签有什么用。
根据标签的语义，在合适的地方给一个最为合适的标签，可以让网页结构更清晰。
4.2 标题标签 h1-h6
为了使网页更具语义化，我们会在页面中用到标题标签，HTML提供了6个等级的网页标题。
h 是head的缩写，意思为头部，标题。
标签的语义：作为标题使用，标题的重要性从h1到h6依次递减，记住只到h6。它有以下几个特点：
1.加了标题的文字会加粗，字号从h1到h6依次递减。
2.一个标题独占一行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Time No See</title>
</head>
<body>
<h1>具体的意思请看下面：</h1>
<h1>这是一级标签</h1>
<h2>这是二级标签</h2>
<h3>这是三级标签</h3>
<h4>这是四级标签</h4>
<h5>这是五级标签</h5>
<h6>这是六级标签</h6>
</body>
</html> 4.3 段落标签和换行标签
在网页中，要把文字有条理的显示出来，就需要将这些文字分段显示，在HTML标签中，<p>标签用于定义段落，可以将整个网页分为若干段落。
p是英文单词paragraph的缩写，意思为：段落。
标签语义：可以把HTML文档分割为若干段落。
特点：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落与段落之间保持有空隙。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Time No See</title>
</head>
<body>
<p>半夏、总是觉得、
青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
我们可以不管不顾、高兴了可以大声地笑、难过了可以大声地哭、喜欢的事就
要放手去追逐</p>
<p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
张欣雨、遗忘在旧时光里的青春卡带</p>
</body>
</html> 无论你在HTML文档中打多少个空格，都会被忽略，最终对文档的显示没有影响，你想把文章分为几个段落，就写几个<P></p>标签。
换行标签
在HTML中，一个段落中的文字会从左到右依次排序，直到浏览器窗口的右端，然后才会自动换行。如果需要某段文本强制换行显示，就需要使用换行标签
br 是单词break的缩写，意思为打断，换行。
标签语义：强制换行。
特点：
1.
是个单标签标签
2.
标签只是简单的开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
<br/> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Time No See</title>
</head>
<body>
<p>半夏、总是觉得、青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
我们可以不管不顾、高兴了可以<br/>大声地笑、难过了可以大声地哭、喜欢的事就
要放手去追逐</p>
<p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
张欣雨、遗忘在旧时光里的青春卡带</p>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Time No See</title>
</head>
<body>
<h1>你说的疯狂</h1>
<p>半夏、总是觉得、青春的扉页上就应该、写满张狂写满叛逆、写满笑写满泪、
我们可以不管不顾、高兴了可以大声地笑、难过了可以大声地哭、喜欢的事就
要放手去追逐</p>
<p>欢迎开启我的青春封鉴,谁在青春的时候懂得青春
张欣雨、遗忘在旧时光里的青春卡带</p>
<h1>励志去哪儿了？</h1>
<p> <h4>身边若有对自己好的人，瞬间亦是长生。能被人牢牢牵挂在心，永不忘记，消亡亦是长生—— 童玲 </h4>
<h4>世界上那些最容易的事情中，拖延时间最不费力—— 佚名 </h4>
<h4>一个伟大的人有两颗心，一颗心流血，一颗心宽容—— 纪伯伦 </h4>
<h4>今天太宝贵，不应该为酸苦的忧虑和辛涩的悔恨所消蚀。把下巴抬高，使思想焕发出光彩，像春阳下跳跃的山泉。抓住今天，它不再回来—— 卡耐基
时间，你不开拓它，它就悄悄长出青苔，爬上你生命的庭院，把你一生掩埋—— 佚名</h4></p>
</body>
</html> 4.4 文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或者下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
| 语义 | 标签 | 说明 |
|---|---|---|
| 加粗 | <strong></strong>或者<b></b> | 更推荐使用<strong>标签加粗，其语义更强烈 |
| 倾斜 | <em></em>或者<i></i> | 更推荐用<em>标签，其语义更强烈 |
| 删除线 | <del></del>或者<s></s> | 等推荐使用<del>标签，其语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> | 更推荐使用<ins>，其语义更强烈 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Long Time No See</title>
</head>
<body>
我的功能是使字体<strong>加粗</strong><br/>
我的功能也是使字体 <b>加粗</b>
<br/>
<h1>使字体变<em>倾斜</em></h1>
<h1>也可以变<I>倾斜</I>哦</h1>
<P>
<h1> 你<del>删除</del>我的联系方式吧！</h1>
<h1>我两天后<s>删除</s>吧！</h1>
</P>
<h2>重要的就画<ins>下划线</ins></h2>
<h2>重要的就画<u>下划线</u></h2>
</body>
</html> 4.5 <div>和<span>标签
<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的。
<div>这是头部</div>
<span>你好呀</span> div是diversion的缩写，表示分割，分区。span意为跨度，跨距。
特点：
1.<div>标签用来布局，但一行只能放一个<div>,这相当于一个大盒子。
2.<span>标签用来布局，一行可以放置多个span.。其相当于一个小盒子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>未来你好呀</div>
<div>现在的你还好吗？</div>
<span>数据结构</span>
<span>Mysql</span>
<span>java</span>
</body>
</html> div独占一行，而在一行可以显示多个span
4.6 图像标签和路径
1.图像标签
在HTML标签中，<img>标签用于定义HTML页面中的图像
<img src="图像URL"/> 单词img为image的缩写，意为图像。
src 是<img>标签的必然属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解是就是属于图像标签的特性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h1> <div>未来你好呀</div></h1>
<div>现在的你还好吗？</div>
<p>时间如流水吧一去不复还，以后的你会想念现在的我吗？</p>
<img src="刘亦菲.jpg"/>
</body>
</html> 图片要保存在与当前网页所在的同一个文件夹下。
图像标签的其他属性
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图片不能显示时，提示的文字 |
| title | 文本 | 提示文本，鼠标放在图片上显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图像标签</title>
</head>
<body>
<h1> <div>未来你好呀</div></h1>
<div>现在的你还好吗？</div>
<p>时间如流水吧一去不复还，以后的你会想念现在的我吗？</p>
<p>alt 当图片出问题时，显示所写的注释</p>
<p>title 鼠标悬浮在图片上时，显示注释</p>
<p>width 调节图片的像素，虽然说图片的宽和高都可以调节，
为避免图片过分扭曲，更改其中的一个，另一个则会按照相应的比例变小的</p>
<p>border 给图片加一个边框</p>
<img src="刘亦菲.jpg" alt="这是刘亦菲的图片" title="刘亦菲"
width=300 border=\'16\'/>
</body>
</html> 注意：
1.图像标签可以有多个属性，必须写在标签名的后面。
2.图像的个属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
3.属性采取键值对的格式，即key="value"的格式，属性=“属性值”。alt(属性)=“注释”(属性值)。
4.在图像的标签属性中，src 这个属性必须要写。
5.图像标签中，alt（替换文本）与title（提示文本）的区别：alt是指图片故障，或者图片格式，图片名发生改变后（与HTML文档中的不一致）等故障后，才会显示。而title指的是当人们不知道这个图片是谁时，把鼠标悬浮在图片上会提示的文字。
2.路径（前期铺垫知识）
（1）目录文件夹与根目录：
实际工作中，我们的文件不能随便乱放，否则再用的过程中很难找到它们，因此我们需要建一个文件夹来管理它们。
目录文件夹：就是普通的文件夹，但是里面存放了我们制作网页的相关材料，比如html文件，图片等。
根目录：打开文件夹的第一层就是根目录。
为方便图片的管理我们可以在目录文件夹**下面再创建一个文件叫做imgs,用来存放所有的图片。
路径：在页面的中的图片会非常多，通常我们会新建一个文件夹来存放这些图片文件（imgs），这时再查找图像，就需要采用路径的方式来指定文件的位置。
路径可以分为：相对路径与绝对路径
相对路径：这里简单来说，图片相对于html页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 1.同一级路径 | 图像文件与HTML文档位于同一级 | |
| 2.下一级路径 | / | 图片文件位于HTML文件的下一级 如 |
| 3.上一级路径 | ../ | 图片文件位于HTML文件的上一级 如 |
举例说明：1.
2.
3.
我们的HTML文档刘亦菲.html位于HTML文档下面，而图片始于HTML文档属于同一级的。此时位于HTML文档下面的
刘亦菲.html要插入图片，就要使用../,意思是使刘亦菲.html与HTML文档属于同一级，这是就可以使用图片了。
相对路径：即是图片相对于HTML页面的位置。
绝对路径：找到图片所在的位置，也就是值目录下的绝对位置，直接到达目标位置，即从盘符开始的路径。绝对路径用的较少。
这是以第3种情况来说明的绝对路径，此时不用再写../ 否则，图片出错。
这样写图片会出错。
4.7 超链接标签（重点）
再HTML标签中，<a>标签用于定义超链接，其作用是从一个页面跳转到另一个页面。
#### 1.链接的语法格式： <a href="跳转目标" target="目标窗口的弹出方式">文本图像</a> a 是单词anchor的缩写，意为：锚。
它有两个属性：
| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的url地址，（必须属性）当为href属性时，它就具有了超链接的功能。 |
| target | 用于指定链接页面的打开方式，其中selef为默认窗口打开，blank为在新窗口打开。 |
2.链接的分类：
1.外部链接：http：//+web的网址，如：百度
2.内部链接:网站内部页面之间的相互链接，直接链接内部页面的名称即可。如：刘亦菲
3.空连接：当没有确定链接的地址时，就可以使用空链接，如：空链接
4.下载链接：如果href里面的地址是一个文件或者压缩包，那么会下载这个文件。（下载链接：地址连接的是 文件.exe 或者是 zip 或者是rar等压缩包形式）即当超链接里面我们写入的是压缩包的名字，当形成超链接时，如果我们点击这个链接，就会下载这个文件。
5.网页元素链接：在网页中的各种网页元素，如脚本，图像，音频，表格，视频等都可以添加链接。即把这些元素当成超链接，点击时，跳转到对应的超链接地址的网页。如：
6.锚点链接：当我们点击链接时，可以快速定义到页面中的某个位置。
#.在链接文本的href属性中，设置属性名为#名字的形式，如个人简介
#.找到目标位置标签，里面添加一个id属性=刚才的名字，如<h2 id="six">个人简介介绍</h2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>图片标签</title>
</head>
<body>
<img src="../imgs/刘亦菲.jpg" width=300 />
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>超链接</title>
</head>
<body>
<h3>外部链接</h3>
<a href="https://lady.vip.com/?wq=1" target="_blank">唯品会特卖</a><br>
<a href="https://www.tmall.com/?ali_trackid=2:mm_26632258_3504122_55934697:1579326353_141_220382173&clk1=5af36f3e527aff5c419ff12d0a
d3b6eb&upsid=5af36f3e527aff5c419ff12d0ad3b6eb" target="_self">天猫</a>
<br>
<h3>内部链接</h3>
<a href="刘亦菲1.html" target="_self">刘亦菲</a>
<h3>空链接</h3>
<a href="#">空链接</a>
<h3>下载链接</h3>
<a href="../imgs/刘亦菲.rar">下载刘亦菲的图片</a>
</body>
</html> 锚点链接：在同一个页面中实现快速定位，快速定位到读者想要浏览的地方。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>锚点链接t</title>
</head>
<body>
<h1 id="返回">刘亦菲个人资料</h1>
<a href="#信息">1.个人信息</a><br/>
<a href="#chuming">2.出名之前及其作品：</a><br/>
<a href="#作品">3.主要作品：</a><br/>
<br/>
<br/>
<br/>
<h1 id="信息">1.个人信息</h1>
中文名：刘亦菲
性别：女
身高：170cm
出生地：湖北
出生日期：1987-08-25
毕业院校：北京电影学院
刘亦菲简介：
刘亦菲，国籍：美籍华裔，职业：华语影视女演员、流行音乐歌手，1987年
8月25日出生于湖北武汉，毕业于北京电影学院2002级表演系本科班。<br/>
<a href="#返回">返回顶部</a>
<h2 id="chuming">2.出名之前及其作品：</h2>
2002年，因出演民国剧《金粉世家》踏入演艺圈；同年饰演《天龙八部》崭
露头角。
2004年参演武侠玄幻剧《仙剑奇侠传》获得高人气与关注度。2006年，
因在金庸剧《神雕侠侣》中饰演小龙女再次受到广泛关注；同年，发行了首
张国语专辑《刘亦菲》。2008年起，开始将其演艺事业的重心转向大银幕，
并出演了好莱坞电影《功夫之王》。2011年开始，其主演的《新倩女幽魂》、
《鸿门宴》、《四大名捕》系列等电影票房均过亿，而截止2011年底，刘亦菲
连续七年跻身福布斯中国名人榜前列 。2014年，刘亦菲凭借历史片《铜雀台》
女主人公灵雎一角获得第五届澳门国际电影节最佳女主角奖；同年，主演爱情片
《露水红颜》。
2015年，主演都市爱情片《第三种爱情》，并凭借该片获得第16届华语电影传媒大奖
最受瞩目女演员；同年，在古装玄幻片《三生三世十里桃花》中饰演女主角白浅；此
外，她还主演了动作片《营救飞虎队》。2016年，其主演的文艺片《夜孔雀》入围了
第40届蒙特利尔国际电影节主竞赛单元；同年，主演青春爱情电影《原来你还在这里》
；11月，其主演的由陈国富监制的奇幻片《一代妖精》正式杀青。<br/>
<a href="#返回">返回顶部</a>
<h2 id="作品">3.主要作品：</h2>
刘亦菲演过的电视剧 南烟斋笔录 花开上海滩 好一朵茉莉花 神雕侠侣 黄晓明版
阿宝的故事 仙剑奇侠传1 豆蔻年华 天龙八部 金粉世家 刘亦菲演过的电影 原来
你还在这里 三生三世十里桃花 二代妖精 二代妖精之今生有幸 营救飞虎队 一代
妖精 烽火芳菲 无神 重力反转 三生三世十里桃花2<br/>
<a href="#返回">返回顶部</a>
</body>
</html> 5. HTML中的注释和特殊字符：
#### 5.1注释 如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在网页中的文字，此时就可以使用注释标签。
HTML中的注释以“<!--"开头，以"-->"结束。
添加注释是为了更好的解释代码的功能，便于相关人员理解和阅读代码，程序是不会执行注释内容的。
<!-- 注释标签你好呀！ --> 可以使用快捷键：CTRL+/ 便可快速打出注释标签。再点击一次，则注释撤销。
5.2特殊字符
空格：  ;(分号紧跟后面的，为了能看见，我就这样写)
小于号 < < ;(分号紧跟后面的；lt 是less than的缩写)
大于号 > > ;(分号紧跟后面的;gt是great than的缩写)
了解这几个即可，其余的当要用的时候，查阅即可。
<body>
今年怎么还没有下雪呀，在全面实现小康社会的这一年，作为中国特色社会主义新世代的新青年的我们，将会以蓬勃的朝气来迎接 接下来的每一个挑战。
</body> 在这之前我们所编写的所有关于文字的编辑，段首均没有空两格，在这里我们可以使用 来打空格，后面必须要打上 分号; 每写一个 ；就代表一个空格。
