一、标签结构
1.标签由<、>、 /、英文单词或字母组成。并且把标签中< >包括起来的英文单词或字母称为标签名
2.常见标签由两部分组成,我们称之为:双标签。前部分叫开始标签,后部分叫结束标签,两部分之间包裹内容
3.少数标签由一部分组成,我们称之为:单标签。自成一体,无法包裹内容。
二、标签关系
1.父子关系(嵌套关系)
<head>
<title></title>
</head>
2.兄弟关系(并列关系)
<head>
</head>
<body>
</body>
三、排版标签
1.标题标签——文字加粗,文字逐渐变小,独占一行
h1标签:一级标题
h2标签:二级标题
h3标签:三级标题
h4标签:四级标题
h5标签:五级标题
h6标签:六级标题
2.段落标签——段落之间存在间隙,独占一行
<p>我是一段文字</p>
3.换行标签——单标签,让文字强制换行
br:换行
4.水平线标签——单标签,在页面中显示一条水平线
<hr>:分割不同主题内容的水平线
四、文体格式化标签——需要让文字有加粗、下划线、倾斜、删除线等效果
突出重要性的强调语境用右侧标签
五、媒体标签
1.图片标签——单标签,显示效果需要设置标签属性
<img src="图片路径 " alt="当图片加载失败时,才会显示alt文本(替换文本) "
title=“当鼠标悬停时才显示的文字”width="宽度" height="高度">
注意事项:
1.如果只设置width或height中的一个,另一个没设置的会自动等比例缩放(此时图片不会变形)
2.如果同时设置了width和height两个,若设置不当此时图片可能会变形
路径问题——页面需要加载图片,需要先找到对应的图片
1.绝对路径——目录下的绝对路径,从盘符开始的路径
盘符开头: D:\dley01\images\1.jpg
完整的网络地址:https://home.firefoxchina.cn/
2.相对路径(常用)——从当前文件开始出发找目标文件的过程
1.同级目录——直接写目标文件名字即可
<img src="目标图片.jpg"> <img src="./目标图片.jpg">
2.下级目录——目标文件在下级目录
<img src="文件夹名字/目标图片">
3.上级目录——目标文件在上级目录中
到上一级目录 : ../ 上上一级 : ../../
2.音频标签
<audio src="路径" controls autoplay loop></audio>
<video src="路径" controls autoplay muted loop></video>