图片标签
1.img标签用来在网页中插入图片,=“”是图片的存储名录和完整文件名。
<img src="images/gugong.jpg">
<!-- img是image的缩写,src是source(来源)的缩写 -->
2.img标签的alt属性
alt属性是“alternet替代品”的缩写,是对图像的文本描述,不是强制性的
<img src="images/gugong.jpg" alt="故宫角楼">
<!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>Document</title>
</head>
<body>
<h1>北京景点</h1>
<p>
<img src="images/gugong.jpg" alt="故宫角楼">
</p>
<p>
<img src="images/1.jpg" alt="还是故宫">
</p>
</body>
</html>
作用1:如果由于某种原因无法加载图像,浏览器会在页面显示alt属性中的备用文本(例如网络不好或图片不小心被服务器删除时,此时网页上就会直接显示alt这个文字);
作用2:供视力不方便的朋友使用的网页朗读器,也会朗读alt中的文本
3.img标签的width、height属性
width、height属性分别设置宽度和高度,单位是像素,但不需要写单位,如果省略其中一个属性,则表示按原始比例缩放图片
<img src="images/gugong.jpg" alt="故宫角楼" width="300">
4.5.相对路径与绝对路径(重点)
1)相对路径
描述从网页出发,如何找到图片,eg“前面路口左转,直走100米后右转就到了”
随着网页和图片的位置关系不同,插入图片的代码随之改变
如果需要退回层级,使用“../”这样的写法,回退两级则“../../”
2)绝对路径
描述图片精确地址,eg“北京市海淀区西三环北甲路3号院中关村国防科技园2号楼”
<img src="https://www.123.com/staic/img/index/logo-recommendend.png">
不管网页在哪里,绝对路径不需要改变
超级链接
超级链接是将网页和网页连接到一起的方法,是互联网成“网”的愿意
1)<a>标签
使用<a>标签制作超级链接,a是ancher(锚)的首字母,href:hypertext reference 超文本引用
<a href="2.html">去第二个网页<a>
需创建两个html文档,文档名称不能为中文(此刻是为了便于我们学习,所以title为中文)
<!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>
<a href="lvyou.html">去看我的旅游分享</a>
</p>
</body>
</html>
a标签的title属性:用于设置鼠标的悬停文本
<a href="2.html" title="很好看哦~">去第二个网页</a>
2)href属性支持绝对路径和相对路径,用来设置链接指向的页面的url
<a href="web/2.html">去第二个网页</a>
<a href="../web/2.html">去第二个网页</a>
<a href="http://www.123.com">去123</a>
3)如何在新窗口中打开网页
将a标签中的target属性设置为blank,即可在新标签页打开网页,target规定在何处打开网页
<a href="2.html" target="blank">去第二个网页</a>
4)如何给图片设置超级链接
只需要用a标签包裹img标签
<a href="2.html" target="blank">
<img src="images/xxx.png" >
</a>
5)页面内锚点
较长的页面,可以适当的给h系列标签添加id属性,它将成为页面的锚点
<h1 id="wuxi">无锡美景</h1>
当网址后面添加 # 号键时,页面将自动滚动到锚点的位置
其他页面的超级链接也可以链接到指定锚点
<a href="#锚名">是设置锚点链接的语法,即跳转到具体锚位置
<a href="lvyou.html#wuxi">看无锡美景</a>
6)下载链接
指向exe、zip、rar等文件格式的链接,将自动成为下载链接
<a href="1.zip">下载</a>
7)邮件、电话链接
有mailto:前缀的链接是邮件链接,系统将自动打开相关邮件
<a href="mailto:1186467591@qq.com">给小陶发邮件</a>
有tel:前缀的链接是电话链接,系统将自动打开拨号盘
音频和视频
1.音频
(1)<audio></audio>标签
<audio src="音频地址" controls(显示播放组件) autoplay(自动播放) loop(循环播放) width="" height=""> 抱歉,您的浏览器不支持。。。,请升级浏览器。(当播放器不能正常显示时,会用这段文字代替</audio>
(2)常用音频格式:mp3 ogg
2.视频
(1)视频:<video></video>标签
同上
(2)常用视频格式:mp4 ogv webm