HTML【第一节：基础标签】

目录

一、HTML的注释

二、THML的标签

三、HTML的属性

四、标签的关系

五、标题标签

六、段落标签

七、换行标签

八、水平分割线标签

九、文本装饰标签

十、路径的介绍

十一、插入图片标签

十二、插入音频标签

十四、超链接标签

---

一、HTML的注释

语法：<!-- 注释内容 -->

VScode快捷键 Ctrl + /

二、THML的标签

HTML的标签由 < > / 关键字组成

• 双标签 : 由开始标签和结束标签组成< 关键字> </ 关键字>

• 单标签 : 只有 开始标签组成< 关键字>

三、HTML的属性

属性是html标签里面的东西，属性有属性所对应的属性值 属性的注意事项:

• 标签的属性写在开始标签内部

• 标签上可以同时存在多个属性

• 属性之间以空格隔开

• 标签名与属性之间必须以空格隔开

• 属性之间没有顺序之分

属性的书写格式 :

   属性名="属性值"

四、标签的关系

父子关系(包含关系)

• 例如:html 和 head 和 title

兄弟关系(并列关系)

• 例如:head 和 body

五、标题标签

语义：1~6级标题，重要程度依次递减 特点:

• 默认加粗

• 文字变大

• 独占一行

<h1>一级标题标签</h1>
<h2>二级标题标签</h2>
<h3>三级标题标签</h3>
<h4>四级标题标签</h4>
<h5>五级标题标签</h5>
<h6>六级标题标签</h6>

六、段落标签

语义：段落文字 特点:

• 段落与段落之间存在间隙

• 独占一行

<p>这是段落标签</p>
<p>段落之间存在间隙</p>

七、换行标签

语义：换行 特点：

• 单标签

• 强行换行

<br>

八、水平分割线标签

语义：主题的分割 特点：

• 单标签

• 在页面中显示一条线

<hr>

九、文本装饰标签

语义：突出强调

特点：

• 双标签

<b>加粗标签</b>  <strong>加粗标签</strong>
​
<u>下划线标签</u>  <ins>下划线标签</ins>
​
<i>斜体标签</i>  <em>斜体标签</em>
​
<s>删除线标签</s>  <del>删除线标签</del>

温馨提示：该类标签基本不用，因为CSS将其取代

十、路径的介绍

路径就是设置的一条路，可以通这条路可以寻找到所需要的东西 绝对路径(了解)死路径

指目录下的绝对位置，也就是固定位置，可直接达到目标位置，通常是从盘符开始的路径 例如:D:day01\images\1.jpg

相对路径(常用)活路径

指从该文件(当前文件)开始出发找目标文件的过程，也就是说，相对于当前文件所在的位置

相对路径的分类

1.同级目录：当前文件和目标文件在一块

• 写法1:文件名.后缀

• 写法2: ./文件名.后缀

2.下级目录：目标文件在当前文件下一个文件夹内

• 写法:文件夹名/文件名.后缀

3.上级目录:目标文件在当前文件上一个文件夹内 或者 在当前文件上一个文件夹内的下一个文件夹

• 写法1: ../文件名.后缀

• 写法2：../文件夹名/文件名.后缀

十一、插入图片标签

语义：插入图片 特点:

• 单标签

• img标签需要展示对应的效果，需要借助标签的属性进行设置!

<img src="1.jpg" alt="显示不了图片时，显示我" title="悬停时显示我" width="100" height="100"> 
​
src表示图片路径的属性 
​
alt表示当图片替换文本的属性（也就是图片显示不了，替换成该属性的属性值）
​
title表示图片提示文本的属性（也就是当鼠标悬停到图片上所显示的文本）
​
width表示图片宽度的属性      
height表示图片高度的属性    
温馨提示：当两个出现一个时，的另一个会等比例缩放

十二、插入音频标签

语义：插入音频 特点:

• 双标签

<audio src="2.mp3" controls autoplay loop></audio>
​
src表示音频路径的属性
​
controls表示显示音频播放的控件属性(不写默认不显示)
​
autoplay表示自动播放音频的属性(不写默认不自动播放，且部分浏览器不支持)
​
loop表示循环播放音频的属性 (不写默认不循环)

十四、超链接标签

语义：插入超链接 特点:

• 双标签

<a href="#">点击跳转超链接</a>
​
href表示填入跳转地址
# 表示要跳转的链接的地址(网页地址)