HTML【基础标签】

一、HTML的注释

语法:

  • VScode快捷键 Ctrl + /

在这里插入图片描述

二、THML的标签

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

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

三、HTML的属性

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

  • 标签的属性写在开始标签内部
  • 标签上可以同时存在多个属性
  • 属性之间以空格隔开
  • 标签名与属性之间必须以空格隔开
  • 属性之间没有顺序之分

属性的书写格式 :

属性名="属性值"

四、标签的关系

1.父子关系(包含关系)

例如:html 和 head 和 title

2.兄弟关系(并列关系)

例如: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将其取代

十、路径的介绍

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

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

2.相对路径(常用)活路径

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

3.相对路径的分类

​ 同级目录:当前文件和目标文件在一块

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

​ 下级目录:目标文件在当前文件下一个文件夹内

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

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

  • 写法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表示填入跳转地址
# 表示要跳转的链接的地址(网页地址)

s表示显示音频播放的控件属性(不写默认不显示)

autoplay表示自动播放音频的属性(不写默认不自动播放,且部分浏览器不支持)

loop表示循环播放音频的属性 (不写默认不循环)




# 十四、超链接标签

语义:插入超链接
特点:

- 双标签

```html
<a href="#">点击跳转超链接</a>

href表示填入跳转地址
# 表示要跳转的链接的地址(网页地址)

猜你喜欢

转载自blog.csdn.net/weixin_62421736/article/details/139924434