目标
能够说出标签的书写注意规范
能够写出html骨架标签
能够写出超链接标签
能够写出图片标签并说出alt和title的区别
能够说出相对路径的三种形式
1.HTML语法规范
1.1基本语法概述
1.HTML标签是由尖括号包围的关键词，例如<html>。
2.HTML标签通常是成对出现的，例如<html>和</html>,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有一些特殊的标签必须是单个标签（极少数情况），例如，我们称为单标签。
1.2标签关系
双标签可以分为两类：包含关系和并列关系
包含关系(父子关系）
<head>
<title></title>
</head>
并列关系（兄弟关系）
<head></head>
<body></body>
2.html基本结构标签
2.1第一个HTML网页
每个网页都有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也成HTML文档。
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
键盘敲烂，工资过万。
</body>
</html>
标签名 | 定义 | 说明 |
<html></html> | html标签 | 页面中最大的标签，我们称为根标签 |
<head></head> | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<title></title> | 文档的标题 | 让页面拥有一个属于自己的页面标题 |
<body></body> | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放在body里面的 |
html文档的后缀必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。
此时，用浏览器打开这个网页，我们就可以预览我们写的第一个HTML文件了。
2.2基本结构标签总结
3.开发工具
VSCode工具生成骨架标签新增代码。
3.1.文档类型声明标签
文档类型声明，作用就是告诉浏览器使用那种HTML版本来显示网页。 ``` html ```
这句话的意思是：当前网页采取的是HTML5来显示网页。
注意：
1.<!doctype >声明位于文档中的最前面的位置，处于<html>标签之前
2.<!doctype >不是一个HTML标签，是文档类型声明标签
3.2.lang语言种类
用来定义当前文档显示的语言。
en定义为英语
zh-CN定义为中文
简单来说，定义为en就是英文网页，定义为zh-CN就是中文网页。
其实对于文档显示来说，定义成en的文档也可以显示中文，定义为en的文档也可以显示英文。fr：法语。
这个属性对浏览器和搜索引擎（百度、谷歌）还是有作用的。比如定义为“fr”，显示翻译网页的时候就会出现乱码。
3.3charste字符集
字符集是多个字符的集合。以便计算机能够识别和存储各种文字。
在<head>标签内，可以通过<meta>标签的charset属性来规定HTML文档应该使用那种字符编码。
<metacharset="UTF-8">
charset常用的值有：GB2312简体中文、BIG5繁体中文、GBK繁体简体中文和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。
上面语法是必须要写的代码，否则可能引起源代码乱码的情况。一般情况下，统一使用“UTF-8”编码，尽量统一写成标准的“UTF-8”,不能写成“utf8”或“UTF8”。
3.4总结
1.以上三个代码vscode自动生成基本不需要我们重写
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个等级的网页标题。
<h1>我是一级标题</h1>标题一共六级选
<h2>文字加粗一行显</h2>
<h3>由大到小依次减</h3>
<h4>从重到轻随之变</h4>
<h5>语法规范书写后</h5>
<h6>具体效果刷新见</h6>
特点：
加了标题的文字变粗，字号也会依次变化
一个标题独占一行
4.3段落和换行标签（重要）
在网页中，要把文字有条理的显示出来，就需要将这些文字分段。在HTML标签中，<p>标签用于定义段落。
<p>我是一个段落</p>
单词paragraph的缩写，意为段落。
标签语义：可以把HTML文档分割为若干段落。
特点:
文本在一个段落中会根据浏览器窗口的大小自动换行。
段落和段落之间保有空隙。
在HTML中，一个段落的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签
<br/>
单词break的缩写，意为打断、换行。
标签语义：强制换行
特点：
是一个单标签
此标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
课堂案例：体育新闻
4.4文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
语义 | 标签 | 说明 |
加粗（重点） | <strong></strong>或<b></b> | 都推荐使用第一组标签，语义更强烈 |
倾斜（重点） | <em></em>或<i></i> | |
删除线 | <del></del>或<s></s> | |
下划线 | <ins></ins><或<u></u> |
4.5<div>和<span>标签
<div>和<span>是没有语义的，他们就是一个盒子，用来装内容的
<div>这是头部</div>
<span>今日价格</span>
div是division的缩写，表示分割，分区。span意为跨度、跨距。
特点：
<div>标签是用来布局的，但是现在一行只能放一个</div>大盒子 块级元素：上下布局
<span>标签是用来布局，一行可以放多个。</span>小盒子 行内元素：左右布局
4.6图像标签和路径（重点）
4.6.1.图像标签
在html标签中，<img>标签用于定义HTML页面中的图像。
<imgsrc="图像URL"/>
单词image的缩写，意为图像。
src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的属性：
属性 | 属性值 | 说明 |
src | 图片路径 | 必须属性 |
alt | 文本 | 替换文本。图像不能显示，文字代替。 |
title | 文本 | 提示文本。鼠标放在图片上，显示的文字 |
width | 像素 | 设置图像的宽度 |
height | 像素 | 设置图片的高度 宽度和高度一般修改一个，图像会自动等比例缩放，不会失真 |
border | 像素 | 设置图片的边框粗细， |
图像标签注意点:
图像标签可以拥有多个属性，必须写在标签名的后面
属性之间不分先后顺序，标签名与属性、属性与属性之间均已空格分开
属性采取键值对的格式，即key=“value”的格式，属性=“属性值”
重点掌握：
请说出 图像标签那个属性是必须要写的？
请说出 图像标签中alt和title属性的区别？
4.6.2路径（前期铺垫知识）
1.目录
（1）目录文件夹和根目录：
实际工作中，我们的文件夹不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们。
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层
（1）vscode打开目录文件夹
文件----打开文件夹。选择目录文件夹，后期非常方便管理文件。
2.路径
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这是在查找图像，就需要采用”路径“的方式来指定图像文件的位置。
路径可以分为：
相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
相对路径是从代码所在的这个文件出发，去寻找目标文件的，这里简单来说，上一级、下一级和同一级就是图片相对于html页面的位置
相对路径分类 | 符号 | 说明 |
同一级路径 | 图像文件位于HTML文件同一级 如 | |
下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif“ /> |
上一级路径 | ../ | 图像文件位于HTML文件上一级 如<img src="../baidu.gif“ /> |
绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始路径。
例如：D:\1前端学习\前端学习-HTML\案列\img.png" 或完整的网址 "https://static.firefoxchina.cn/202205/Ej31NtZBxNfWbBN04pWXPo3xK7IHDQig9SjVDKyo.png" 。
4.7超链接标签（重点）
在HTML标签中，<a>标签用于定义超链接，作业是从一个页面连接到另一个页面。
1.链接的语法格式
<ahref="跳转目标"target="目标窗口的弹出方式">文本或图像</a>
单词anchor的缩写，意为：锚。
两个属性的作用：
属性 | 作用 |
href | 用于链接连接目标的地址，（必须属性）当标签应为href属性时，它就具有了超链接功能 |
target（意为目标） | 用于指定链接页面的打开方式，其中下_ self为默认值，_blank为在新窗口中打开方式。 |
2.链接的分类
外部链接：例如
<ahref="http://www.qq.com"target="_blank">腾讯</a>
内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可，例如
<ahref="wangzhanjianjie.html">网站简介</a>
空链接：如果当没有确定性链接目标时
<ahref="#">网站内容</a>
下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
<ahref="img.zip">下载文件</a>
网页元素链接：在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
<ahref="http://huaban.com"target="_blank"><imgsrc="img.png"/></a>
锚点链接：点击链接，可以快速定位到页面的某个位置。
在链接文本的href属性中，设置属性值为#名字的形式，如
<ahref="#one">第1集</a>
找到目标位置标签，里面添加一个id属性=刚才的名字，如
<h3id="one"> 第1集介绍</h3>
返回顶部
<ahref="#top">返回顶部</a>
<ahref="#">返回顶部</a> 空链接
5.HTML中的注释和特殊字符
5.1注释
如果需要在HTML文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--”开头，以“-->”结束
<!--注释语句--> 快捷键ctrl+/
一句话：注释标签里的内容是给程序员看的，这个代码是不执行不显示到页面中的。
添加注释是为了更好地解释代码的功能，便于相关开发人员理解和阅读代码，程序是不会执行注释内容的。
5.2特殊字符
在HTML页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来代替。
特殊字符 | 描述 | 字符的代码 |
空格符(记) | & nbsp; | |
< | 小于号（记） | & lt; |
＞ | 大于号（记） | & gt; |
& | 和号 | & amp; |
￥ | 人民币 | & yen; |
© | 版权 | & copy; |
® | 注册商标 | & reg; |
℃ | 摄氏度 | & deg; |
± | 正负号 | & plusmn; |
× | 乘号 | & times; |
÷ | 除号 | & divide; |
² | 平方（上标2） | & sup2; |
³ | 立方（上标3） | & sup3; |
综合案例
通过综合案例，主要复习：
目标文件夹
今日所学标签
路径
锚点链接
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
