前端基础知识2

---

前言

学习前端第二天总结:
html的标签学习

---

一、排版系列标签

1.标题标签

(1)应用场景:网页的新闻标题,网页的logo部分

(2)代码及含义:

<h1>中间写标题内容</h1>

(3)代码展示效果:

(4)h系列标签特点:

1. 双边标签
2. 文字加粗,文字变大
3. 独占一行
4. 从h1 → h6文字逐渐减小.

2.段落标签

(1) 应用场景:新闻和文章页面中,用于分段显示

(2)代码及含义:

p标签写法：

 <p>中间写段落内容</p>

(3)展示效果:

(4)特点:

1. 双标签
2. 独占一行
3. 段落之间存在缝隙
4. 会根据浏览器窗口大小自动换行显示

3.水平线标签

(1) 应用场景:分割不同主题内容的水平线

(2)代码及含义:

<hr>

(3)展示效果:

(4)特点:

1. 单标签
2. 页面显示一条水平线.

4.换行标签

(1) 应用场景:让文字强制换行显示

(2)代码及含义:

	这是一段文字
	这是一段文字
	<br>
	<!-- <br>换行标签 -->
	这是一段文字
	<br>
	这是一段文字

(3)展示效果:

(4)特点:

1. 单标签
2. 文字强制换行显示

二、文本格式化标签

(1) 应用场景:

需要让文字加粗、下划线、倾斜、删除线等效果

(2)代码及含义:

(代码中加<br>标签是为了表现文本格式化标签效果更加直观)

文本格式化标签分为两类写法：

第二种写法语义更清晰，更重，所以重点记第二种写法

代码：

	<!-- 加粗 -->
    <strong>加粗</strong>
    <b>加粗</b>
    <br>
    <!-- 倾斜 -->
    <em>倾斜</em>
    <i>倾斜</i>
    <br>
    <!-- 删除线 -->
    <del>删除线</del>
    <s>删除线</s>
    <br>
    <!-- 下划线 -->
    <ins>下划线</ins>
    <u>下划线</u>

(3)展示效果:

三、媒体标签

1.图片标签（单标签）

(1) 应用场景:在网页中显示图片

(2)标签及属性:

图片标签是：<img>
必要属性是：（属性在本标签末进行了扩展讲解）
src:路径（在本文第四章中会详细讲解路径这个问题）
非必要常用属性：
alt:提示文本，即当图片不存在或当我们的网络断开时，无法显示该图片时出现的提示

title：是悬停文本，即当我们把鼠标放在网页图片上时会出现的文字
如下图中显示的文字“这是赵丽颖”就是悬停文本

扩展：HTML标签的属性

概念：一个具体事物，总是有许许多多的性质与关系，我们把一个事物的性质与关系，都叫做事物的属性。

在html中，下图框起来的单词都是属性

• 双标签的属性需要写在开始标签中
• 标签上可以同时存在多个属性
• 标签名与属性之间，属性与属性之间以空格隔开

2.音频标签（双标签）

(1) 应用场景:在页面中插入音频

(2)标签及属性:

音频标签是：<audio>
必要属性是：
src:路径
contrls控件：必须要有控件才能播放，类似于空有音乐但没有播放器，也没办法播音乐
非必要常用属性：
loop循环播放
autopaly自动播放（为保护用户大部分浏览器不支持）
例1：不加控件效果

<audio src="./images/1.mp3"></audio>

不加控件页面中无显示

例2：加控件效果

 <audio src="./images/1.mp3" controls ></audio>

注：循环播放无法展示，需要大家自己在vscode当中写代码进行测试
代码如下：

<audio src="./images/1.mp3" controls loop></audio>

src后面的路径需要大家换成自己电脑上的音频路径哦

3.视频标签

(1) 应用场景:在页面中插入视频

(2)标签及属性:

视频标签：<video>
必要属性是：
src:路径
contrls控件
非必要常用属性：
loop循环播放
autopaly自动播放（谷歌浏览器中可以配合muted属性实现自动静音播放）
由于视频标签中src和contrls属性效果与音频效果相同，这里不再展示
例1：谷歌浏览器中可以配合muted属性实现自动静音播放

<video src="./images/2.mp4" controls autoplay muted ></video>

展示效果：

视频标签配合静音播放muted属性可以实现自动播放，这里只可以放图片，大家可以自己试一下

四、路径

1.绝对路径

（1）绝对路径概念：

指目录下的绝对位置，可直接到达目标位置(能够直接定位)，通常从计算机盘符开始的路径

（2）分类：

• 盘符开头的绝对路径：D:\桌面\day01\04-作业
• 完整的网络地址：https://www.baidu.com（也是绝对路径，因为可以直接定位）

2.相对路径

（1）相对路径概念：

从当前文件开始出发找目标文件的过程,简单的来说相对HTML页面的位置

（2）分类：

• 同级目录：
  概念：当前文件和目标文件在同一目录中
  

书写方式 : ./目标文件名字，如<img src="./目标图片.gif">

• 下级目录：
  概念：目标文件在下级目录中(当前文件与目标文件的文件夹在同一个目录下面)
  

书写方式 : ./目标文件的文件夹/目标文件，如：<img src="./img/目标图片.gif">

• 上级目录：
  概念：目标文件在当前文件的上一级目录或者上N级目录
  

书写方式：上一级:…/ 上两级:…/…/，如，<img src="../../目标图片.gif>

五、链接标签(双标签)

1.简介

(1) 作用:

鼠标点击后,一个页面跳转到另一个页面

(2)标签及属性:

标签：<a></a>
必要属性：herf:链接
非必要常用属性：target
target目标网页打开方式:两个值
1. target=“ _self”覆盖原网页(默认值)
2. target=“ _blank”不覆盖原网页,新窗口打开

（3）特点：

• 唯一自带颜色的标签：
  链接颜色:
  紫色:已访问
  蓝色:未访问过
• 一行可放多个
• 文字下方会有一条杠，后期通过CSS可以去除

2.分类：

• 外部链接
• 内部链接
• 空链接
• 死链接
• 锚点链接

3.各分类的作用、代码及展示效果

（1）外部链接

(1) 作用:鼠标点击后,一个页面跳转到另一个外部页面
(2)写法：在href属性中填入入你需要跳转的外部页面

 <a href="https://www.baidu.com/">百度一下</a>

(3)展示效果：
由于不能动态展示这里只显示点击前和点击后效果，大家可以自己试一下，注意代码不要敲错

1. 打开网页显示效果

2. 点击后效果：
   点击后链接会变成紫色，代表已经浏览过该网页，清理浏览器缓存可以重新变会蓝色

2.内部链接

(1) 作用:鼠标点击后,一个页面跳转到另一个本电脑内部页面
(2)写法：在href属性中填入入你需要跳转的目标页面

 <a href="demo.html">内部标签</a>

(3)展示效果：由于展示效果与外部链接相同，这里不再展示

3.空链接

(1) 作用：点击之后回到网页顶部
(2)写法：在href属性中填入#

 <a href="#">内部标签</a>

4.死链接

(1) 作用：让a链接失去跳转功能,配合JS实现交互功能.
(2)代码：在href属性中填入javascript;

<!-- 如网页中左右滑动功能 -->
    <a href="javascript:;">死链接</a>

5.锚点链接

(1) 作用：定位到当前页面某个点，类似于当你看到这篇文章目录时，你想直接看第四章，你点击“第四章”便自动滑动到该章节
(2)写法：

1. 在目录页建立一个空链接 ，如：<a href="#">第2章</a> <br>
2. 在目标点，即第2章详细内容的标题上写上id属性，如：<h4 id="two">第2集</h4>
3. 在刚刚目录页的空链接上加上id的值，如：<a href="#two" >第2集</a>

---

总结

今天主要讲的内容是html的标签，其中比较难一点的是链接标签，需要大家自己多多练习。
有不对的地方请大家多多指正。