块级和行内标签：
块级标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<title>块级标签div</title>
<!--
div-作用：主要用来css布局
等价于一个容器，里面可以包含其他标签，用来结合css修饰写在它内部其他结构
-->
</head>
<body>
<div style="width: 200px;height: auto;border: 1cap;color: aqua;">hello</div>
<div style="width: 200px;height: auto;border: 1cap;color: rgb(255, 0, 8);">hello</div>
</body>
</html>行内标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>行内标签span</title>
<!--
行内标签----span
作用：
1.作为文本字体的容器，用来结合css修饰文本样式
2.根据行内标签样式，作微小布局
-->
</head>
<body>
<span style="font-size: 80px;color: aquamarine;">hello</span><br>
<span style="font-size: 80px;color: rgb(255, 127, 127);">dasabi</span>
</body>
</html>多媒体标签；
图片标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片标签</title>
<!--
1.绝对路径
从盘地址开始
2.相对路径
从当前位置开始
同级目录./ 上级目录../
3.面试：路径分割符\ / 有什么区别？
面试官我测试过，\ windows系统的分隔符，一般要加转义，存在兼容性问题
Linux系统可能不识别
/ 通用的基本不存在兼容性问题
4.常见图片属性
src：图片地址：1网络路径2绝对路径3相对路径
alt：图片加载失败时的提示信息
width/height：图片的宽和高
title：图片的标题，鼠标放上面的提示语
vspace：垂直边距
hspace：水平边距
-->
</head>
<body>
<!-- 使用网络源 -->
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.66d7b796377883a92aad65b283ef1f84?rik=sQ%2fKoYAcr%2bOwsw&riu=http%3a%2f%2fwww.quazero.com%2fuploads%2fallimg%2f140305%2f1-140305131415.jpg&ehk=Hxl%2fQ9pbEiuuybrGWTEPJOhvrFK9C3vyCcWicooXfNE%3d&risl=&pid=ImgRaw&r=0" alt="">
<hr>
<!-- 使用绝对路径 -->
<img src="D:\web前端\code\01.html\1.3块级和行内标签.html\OIP-C.jpg" alt="">
<hr>
<!-- 使用相对路径 -->
<img src="../1.3块级和行内标签.html/OIP-C.jpg" alt="">
<!-- 测试常用属性 -->
<img src="../1.3块级和行内标签.html/OIP-C.jpg" alt="图片加载失败"
title="可爱小猫"
width="200px"
height="500px"
vspace="200px"
hspace="500px"
>
</body>
</html>视频和音频标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视频和音频</title>
<!--
1.音频
audio
2.视频
video
属性
controls---播放器
src----音频视频播放地址
autoplay---自动播放----浏览器会拦截
muted----静音播放 和自动搭配使用
-->
</head>
<body>
<audio src="../1.4多媒体标签.html/像我这样的人.mp3" controls autoplay muted></audio>
<video src="../1.4多媒体标签.html/eb0d72ba7712c71b9652168a0fb8bef8.mp4" controls autoplay muted></video>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
