前端学习笔记--HTML标签（上）
1.1基本语法概述
1.HTML标签是由尖括号包围的关键词，例如。
2.HTML标签通常是成对出现的，例如 ,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
3.有些特殊的标签必须是单个标签（极少情况），例如
,我们称为单标签 。
1.2标签关系
双标签可以分为两类：包含关系和并列关系。
包含关系——父子关系
2.1第一个HTML网页
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。
HTML页面也称为HTML文档
2.2基本结构标签总结
html最大标签——根标签
DW Webstorm
VisualStudioCode：
打开软件
新建文件
一定要先保存为.html网页文件
输入 ! 就可以出现框架
VSCode 的使用
1、双击打开软件
2、新建文件（Ctrl + N)
3、保存（Ctrl + S),注意移动要保存为html文件
4、Ctrl + 加号键，Ctrl + 减号键可以放大缩小视图
5、生成页面骨架结构
输入! 或者按下Tab键 就可以生成骨架
3.1文档类型声明标签
文档类型声明——作用：告诉浏览器使用哪种HTML版本来显示网页这句代码的意思是：当前页面采用的是HTML5版本来显示网页
注意：
1.声明位于文档中的最前面的位置，处于标签之前。
2.不是一个HTML标签，它就是文档类型声明标签。
3.2lang语言种类——定义为中文
用来定义当前文档显示的语言
1.en定义语言为英语
2.zh-CN定义语言为中文
简单来说定义为en就是英文网页，定义为zh-CN就是中文网页
其实对于文档显示来说，定义成en的文档也可以显示中文，定义成zh-CN的文档也可以显示英文
这个属性对浏览器和搜索引擎（百度、谷歌）还是有作用的
3.3字符集
字符集（Characterset)是多个字符的集合，以便计算机能够识别和存储各种文字
在标签内，可以通过标签的charset属性来规定HTML文档应该使用哪种字符编码。
4.1安装方法
点击软件左下角按钮（正方形状）
4.2推荐需要安装的插件
（1）Chinese(Simplified)Language Pack for VS Code——中文（简体）语言包
（2）Open in Browser——右击选择浏览器打开html文件
（3）JS-CSS-HTML Formatterb——每次保存，都会自动格式化js css 和html代码
（4）Auto Rename Tag——自动重命名配对的HTML/XML标签
（5）CSS Peek——追踪至样式
注意：JS-CSS-HTML这个插件不要安装，非常不好用
插件安装之后一定要重启软件或者重新加载。
5.1标签语义
简单理解标签的含义——即标签是干什么的
根据标签的语义，在合适的地方给一个最合理的标签，可以让页面结构更加清晰。
5.2标题标签
-
（重要）
HTML提供了6个等级的网页标题
即
-
.
我是一级标题
单词head的缩写，意为头部，标题 标签语义：作为标题使用，并且依据重要性递减。 特点： 1.加了标题的文字会变的加粗，字号也会依次变大 2.一个标题独占一行标题一共六级选，
文字加粗一行显。
由大到小依次减，
从重到轻随之变。
语法规范书写后，
具体效果刷新见。
--------pick老师5.3段落和换行标签（重要）
标签用于定义段落，它可以将整个网页分为若干个段落
我是一个段落标签
单词paragraph的缩写，意为段落。 标签语义：将文字分成若干段落。 特点： 1.文本在一个段落中会根据浏览器窗口的大小自动换行。 2.段落和段落之间保有空隙。 在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行，如果希望某段文本强制换行显示，就要使用换行标签.
单词break的缩写，意为打断、换行。 标签语义：强制换行 特点： 1.
是个单标签。 2.
标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
5.4文本格式化标签
在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字更重要。
加粗： 或者 ——更推荐使用标签加粗，语义更强烈
倾斜：或者——更推荐使用
删除线：或者——更推荐使用
下划线：
b=bold,i=incline,s=strikethrough,u=underline
5.5
和 标签——都是布局用的
5.6图像标签和路径（重点）
1.图像标签
在HTML标签中，标签用于定义HTML页面中的图像
单词image的缩写，意为图像。
src是标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
图像标签的其他属性：
src:图片路径——必须属性
alt:文本——替换文本，图像不能显示的文字
title:文本——提示文本，鼠标放到图像上，显示的文字
width:像素——设置图像的宽度
height:像素——设置图像的的高度
boder:像素——设置图像的边框粗细
图像标签属性注意点：
（1）图像标签可以拥有多个属性，必须写在标签名的后面。
（2）属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开。
（3）属性采取键值对的格式，即key="value"的格式，属性=“属性值”。
重点掌握点
·请说出图像标签哪个属性是必须要写的？ src
·请说出图像标签中alt和title的属性区别？
alt是替换文本、title是提示文本。
2.路径（前期铺垫知识）
（1）目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，否则用起来很难快速地找到他们，因此我们需要一个文件夹来管理他们
目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如html文件、图片等。
根目录：打开目录文件夹的第一层就是根目录
（2）VSCode打开目录文件夹
方法一：文件–打开文件夹，选择目录文件夹，后期非常方便管理文件。
方法二：直接将目录文件夹拽进VSCode
路径（重点 ）
页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。
路径可以分为：
1.相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。
这里简单来说，图片相对于HTML页面的位置
同一级路径——符号./ ——图像文件位于HTML文件同一级 如
下一级路径——符号/——图像文件位于HTML文件下一级 如
上一级路径——符号…/——图像文件位于HTML文件上一级 如
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级，下一级和同一级就是图片相对HTML页面的位置
2.绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如: “D:\web\img\logo.gif"或完整的网络地址"http://www.itcast.cn/images/logo.gif”。
5.7超链接标签（重点）
在HTML标签中，标签用于定义超链接，作用是从一个页面链接到另一个页面。
1.链接的语法格式
文本或图像
单词anchor的缩写，意为：锚。
两个属性的作用如下：
href:用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target:用于指定链接页面的打开方式，其中_self为默认值在当前窗口打开页面，_blank为在新窗口中打开方式。
2.链接分类：
（1）外部链接：例如:百度。
腾讯
（2）内部链接：网站内部页面之间的相互链接，直接链接内部页面名称即可，例如：首页
公司简介
（3）空链接：如果当时没有确定链接目标时，首页
公司地址
（4）下载链接：如果 href里面地址是一个 .exe文件或者 zip压缩包，会下载这个文件
下载文件
（5）网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接。
(6)锚点链接：当我们点击链接就可以快速定位到页面中的某个位置。
·在链接文本的href属性中，设置属性值为#名字的形式，如第2集
·找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：
第2集介绍
6.1注释
注释标签：
快捷键：ctrl + / （可能是ctrl+k+u)
注释标签里面的内容是给程序员看的，这个代码是不执行不显示到页面中的
6.2特殊字符
综合案例：
主要复习：1.目录文件夹
2.今日所学标签
3.路径
4.锚点链接