2021-07-17第二天学习HTML

一、常用标签

1、标题标签

有6个等级的网页标题

<h1>一级标签</h1>

标签语义：作为标题使用，并且依据重要性递减

2、段落标签

<p>段落标签</p>

标签语义：可以吧html文档分割成若干段落

3、换行标签

<br /> 
单标签；强制换行

4、文本格式化标签

为文字设置粗体、斜体、下划线等效果
标签语义：突出重要性，比普通文字
语义说明：

5、div标签和span标签

没有语义，就是一个盒子，用来装内容

<div>这是头部</div>（大盒子）
<span>今日价格</span>（小盒子）

6、图像标签

（1）<img src="图像URL" />
src是标签的必须属性，它用于指定图像的文件的路径和文件名
（2）属性说明：

（3）图像标签属性注意点：
01.图像标签可以有多个属性，必须写在标签名的后面
02.属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开
03.属性采取键值对的格式，即key= “value”的格式，属性=“属性值”
04.图像标签的src属性是必须要写的

7、路径

（1）目录文件夹与根目录
目录文件夹：就是普通文件夹，里面存放了我们做网页所需的相关素材，比如html文件、图片等
根目录：打开目录文件夹的第一层就是根目录
（2）VScode打开目录文件夹
文件->打开文件夹->选择目录文件夹即可
（3）相对路径：以引用文件所在位置为参考基础，而建立出的目录路径（图片相对于HTML页面的位置）
相对路径分类：

（4）绝对路径：指目录下的绝对位置，直接到达目标位置，通常从盘符开始的路径
例如：“D:\web\img\logo.gif”
或者完整的网络地址“http://www.itcast.cn/images/logo.gif”

8、超链接标签

（1）链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像</a>

两个属性的作用：

（2）链接的分类
01.外部链接

<a href="http://www.baidu.com" target="_blank">百度</a>

02.内部链接

<a href="gongsijianjie.html" target="_blank>公司简介</a>

03.空链接

<a href="#">公司地址</a>

04.下载链接

<a href="img.zip">下载文件</a>

05.网页元素链接（点开元素就可以打开链接）

<a href="http://www.baidu.com"><img src="img.jpg"/></a>

二、总结

利用VScode写的案例：

代码：