HTML 标签
HTML:超文本标记语言
HTML骨架结构:
html标签:网页的整体
head标签:网页的头部
body标签:网页的身体
HTML的注释
VS code中:ctrl+/
浏览器不会执行注释
HTML标签的构成:
双标签:<开始标签> 内容 </结束标签>
单标签:自成一体 如<br>、<hr>
标签与标签的关系:
父子关系(嵌套关系)
<head>
<title></title>
</head>
兄弟关系(并列关系)
<head></head>
<body></body>
标题标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
1~6级标题,重要程度逐级递减
特点:文字都加粗;文字都变大,从h1~h6文字逐渐减小;独占一行
段落标签
<p>一段文字</p>
特点:段落间存在间隙;独占一行
换行标签
<br>
特点:单标签,让文字强制换行
水平线标签
<hr>
特点:单标签,在页面中显示一条水平线
文本格式化标签
标签 | 说明 | 标签 | 说明 |
b | 加粗 | strong | 加粗 |
u | 下划线 | ins | 下划线 |
i | 倾斜 | em | 倾斜 |
s | 删除线 | del | 删除线 |
右边一列用在突出重要性的强调语境。
媒体标签
图片标签
<img src=” ” alt=” ”>
特点:img标签需要展示对应的效果,需要借助标签的属性进行设置
属性注意点:
- 标签的属性写在开始标签内部
- 标签上可以同时存在多个属性
- 属性之间以空格隔开
- 标签名与属性之间必须以空格隔开
- 属性之间没有顺序之分
图片标签的alt属性
属性名:alt
属性值:替换文本
当图片加载失败时,才显示alt的文本
当图片加载成功时,不显示alt的文本
图片标签的Title属性
属性名:title
属性值:提示文本
当鼠标悬停时才显示的文本
注意点:title属性不仅可以用于图片标签,还可以用于其他标签
图片标签的width、hight属性
属性名:width、height
属性值:宽度和高度
注意点:如果只设置width或height中一个,另一个没设置的会自动等比例缩放(此时图片不会变形) 如果同时设置width和height两个,若设置不当,此图片可能会变形
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
如:盘符开头 完整的网络地址
相对路径(常用):从当前文件开始出发找目标文件的过程
- 同级文件:<img src=” ./目标图片.gif”> <img src=” 目标图片.gif”>
- 下级目录:目标文件在下级目录中 <img src=”文件夹名/目标图片.gif”>
- 上级目录:目标文件在上级目录中 ../
音频标签
<audio src=” ” controls> </audio>
常见属性:
属性名 | 功能 |
src | 音频的路径 |
control | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意点:音频标签目前支持三种格式:MP3,Wav,Ogg
视频标签
<video></video>
属性名 | 功能 |
src | 音频的路径 |
control | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器需要配合muted实现静音播放) |
loop | 循环播放 |
注意点:视频标签目前支持三种格式:MP4、WebM、Ogg
链接标签
<a href=”./目标网页”></a> 实现页面跳转
特点:双标签,内部可以包裹内容 如果a标签点击之后去指定页面,需要设置a标签的href属性
链接标签target属性
属性名:target
属性值:目标网页的打开方式
取值 | 效果 |
-self | 默认值,在当前窗口中跳转(覆盖源网页) |
-blank | 在新窗口中跳转(保留原网页) |