认识HTML及HTML标签（1）

THER1881

已于 2022-04-19 20:51:14 修改

阅读量544

点赞数

文章标签： html5

于 2022-04-14 21:09:19 首次发布

本文链接：https://blog.csdn.net/thwr1881/article/details/124181176

版权

认识HTML

1、什么是HTML

1.1、HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。
1.2、开发环境：
（1）普通文本编辑器（2）VScode软件

2、HTML文件的组成（扩展名为.html）

代码展示

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
     你好
  </body>
</html>

HTML是由html、head、title、body着四种基础标签组成。（在VScode中使用control+！可以快速生成HTML基本标签）

3、HTML标签

3.1、html标签主要分为两个大类：双标签和单标签

3.1.1、双标签由<起始标签>和</结束标签>组成

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>双标签演示</title>
</head>
<body>
    <p>本赛季欧冠冠军会花落谁家？</p>
</body>
</html>

在这段代码中我使用了一个段落标签<p></p>,里面包含了一个起始标签和结束标签，在实际环境中，双标签的起始标签和结束标签缺一不可。并且绝大部分标签都为双标签。

3.1.2、单标签则只有一个标签

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单标签演示</title>
</head>
<body>
    本赛季欧冠冠军会花落谁家？
    <br/>
     会是一支西甲或英超球队
</body>
</html>

效果展示

在这里插入图片描述

在这段代码中我使用了一个换行标签<br/>,可以看到它只有一个标签，而在实际环境中，单标签只需要写一个标签即可，不需要写一个起始标签，一个结束标签。

3.2、HTML常用标签：

3.2.1、常用单标签和双标签

`<p></p>`	段落标签
`<hn></hn>`	标签标签（n的取值为1-6，数字越大字体越小）
`<span><span>`	块级标签，不会自动换行
`</br>`	换行标签
`<hr/>`	水平分割线

文本格式化标签
`<i>内容</i>或 <em></em>`	斜体字体标签
`<b>内容</b> 或 <strong></strong>`	字体加粗标签
`<u>内容</u> 或 <ins></ins>`	下划线标签
`<s>内容</s> 或 <del></del>`	删除线标签

特殊字符
` `	空格
`&copy`	版权符号
`®`	注册商标符号
`°`	摄氏度符号
`±`	正负号
`×`	乘号
`÷`	除号

3.2.2、图像标签

（1）图像格式主要分为三种：

jpg格式：可显示颜色最多（256种真彩色），但体积较大，不利于网络传输

png格式：可显示颜色无法和jpg比拟，但体积小，支持透明，利于网络传输

gif格式：小动画形式，同样体积小、支持透明以及利于网络传输

（2）标签

<img src"" alt=""/>

src:表示图像的全路径

alt:当图像加载异常时，给出的信息

width：图像的宽度

height：图像的高度

（3）路径：

当使用img获取照片的时候，需要使用路径导入照片，而路径也分为两种分别是：绝对路径和相对路径。

绝对路径：从文件夹根目录开始的路径

相对路径：从当前文件夹目录开始的路径

..表示示根目录

.表示当前目录

（4）代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片示例</title>
</head>
<body>
    <img src="./迪巴拉.jpg" alt="dibala" title="球星迪巴拉">
</body>
</html>

效果展示
在这里插入图片描述

3.2.3、列表标签

（1）无序标签

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序标签</title>
</head>
<body>
  欧冠八强球队：
    <ul>
        <li>利物浦</li>
        <li>曼城</li>
        <li>切尔西</li>
        <li>皇家马德里</li>
        <li>马德里竞技</li>
        <li>比利亚雷亚尔</li>
        <li>拜仁慕尼黑</li>
        <li>本菲卡</li>
    </ul>
</body>
</html>

效果展示
在这里插入图片描述

无序标签就是列表前并无任何数字或有关顺序标记符号。就像代码中展示的，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形

（2）有序列表

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序标签</title>
</head>
<body>
    欧冠八强球队：
    <ol>
        <li>利物浦</li>
        <li>曼城</li>
        <li>切尔西</li>
        <li>皇家马德里</li>
        <li>马德里竞技</li>
        <li>比利亚雷亚尔</li>
        <li>拜仁慕尼黑</li>
        <li>本菲卡</li>
    </ol>
</body>
</html>

效果展示
在这里插入图片描述

有序标签则和无序标签相反有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

3.2.4、超链接

（1）作用

当用户点击文字、图像、视频等页面元素时，页面会发生跳转。我们叫这些页面元素为超链接。

（2）标签

<a hrdf="URL">文本/图像/多媒体</a>

a标签中属性	作用
href	值为一个URL地址，用于跳转至链接地址
target	页面显示位置，取值有’_self’和’_blank’

4、标签的属性：

放在起始标签的属性中，以"键=值"方式出现

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性</title>
</head>
<body>
    <p>本赛季欧冠冠军会花落谁家？</p>
    <br>
   <font color="red">会是一支西甲或英超球队</font> 
    
</body>
</html>

5、颜色的使用

（1）使用颜色名：如red、blue、green

（2）使用十六进制颜色：如#rrggbb（#rgb），每一位取值最大为F

（3）颜色函数：rgb（r，g，b），rgba（r,g,b,a)，rgb最大值为225

6、设置页面的背景色或背景图像

（1）背景图像：

使用背景图像则在<body>的起始标签中放入属性 <body background="图像的全路径名">。

（2）背景色：

使用背景颜色则在<body>的起始标签中放入属性 <body bgcolor="颜色值">。（需要注意的是这个属性已经在最新的HTML5中被淘汰，所以不推荐使用）

7、音频标签

<audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性输入URL来进行描述

autoplay属性：音频会尽快自动播放，不会等待整个音频文件下载完成。

controls属性：如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音频标签</title>
</head>
<audio src="#" controls autoplay>
  
</audio>
    
</body>
</html>

效果展示

在这里插入图片描述

8、视频标签

<video> 元素用于在HTML中嵌入媒体播放器，用于支持文档内的视频播放。另外，与标签一样也有autoplay和controls属性，并且功能一致。

代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频标签</title>
</head>
<video src="#" controls autoplay></video>
    
</body>
</html>

效果展示
在这里插入图片描述

THER1881

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
认识HTML及HTML标签（1）

认识HTML1、什么是HTML1.1、HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。1.2、开发环境：（1）普通文本编辑器（2）VScode软件2、HTML文件的组成（扩展名为.html）<!DOCTYPE html><html lang="en"> <head> <title></title> </head> <body>
复制链接

扫一扫