HTML常用标签
常用标签（二）
- 超链接标签
-
- 定义超链接标签
- 多媒体标签
-
- progress进度条标签
- img标签
- map标签
- audio标签
- video标签
- embed标签
- source标签
超链接标签
定义超链接标签
1、常用属性
a：常用属性
target :窗口的方式打开
取值： _blank 在新窗口打开
_self 默认。在当前窗口中打开链接的文档。
_top 在框架顶部打开链接的文档（在整个窗口中打开被链接的文档）
href: 用于从一个页面链接到另一个页面。记录需要跳转的地址
b：对应路径
a)绝对路径： 绝对路径要从根目录开始进行查找 需要添加对应的协议 file:///
b) 相对路径： 相对于自己来进行查找，在跳转时不需要添加协议
./ 当前目录
.// 上一级目录
使用a标签来定义锚点。作用：快速找到页面中需要的位置
锚点的实现：
1.需要找到的位置的定义a标签,a标签中添加id属性，属性名自定义
2.在需要跳转的a标签href属性的最后添加#后面跟锚点的名称来实现快速定位
2、代码
<body>
<a href = "https://www.jd.com" target = "_blank">
打开京东
a>
<a href = "file:///F:\VS Code\HTML-workspace\code\day01\html.html" target = " _blank">
绝对路径访问文件
a>
<a href = "../../code/day01/Demo.html" tarfet = "_blank">
相对路径访问文件
a>
多媒体标签
progress进度条标签
1、属性
a:progress属性
<p>
需要配置属性：
min 最小值
max 最大值
value 当前值
p>
b：meter属性
<p>
需要配置属性:
min 最小值
max 最大值
low 优化的最小值 警告的最小值
high 优化的最大值 警告的最大值
optimum 良好值
value 当前值
p>
2、代码
<body>
<progress id = "pro" min = "0" max = "100" value = "20">
进度条标签
progress>
<meter min = 0 max = "100" value = "41">定义范围内的度量meter>
<script>
var obj = document.getElementById("pro");
setInterval(function(){
if(obj.value < 100){
obj.vlue = obj.value + 1;
}else{
obj.value = 0;
}
},100);
script>
body>
img标签
1、属性
<img />
<p>
scr =图像路径
注意:如果图片是绝对路径，那么必须加上协议。
width 设置图像宽度
height 设置图像高度
注意:大小分 等比例大小(只设置高度或者宽度) 和 规定比例大小(同时设置高度和宽度)
ismap 将点击的坐标传送到服务器
usemap 图像定义为客户端图像映射
图像映射:带有可点击区域的图像
映射的实现:
uesmap属性值与<map name = "">map>标签的name属性进行关联，建立img和map标签之间的关系
p>
2、代码
<body>
<img src = "Wechat.jpg" height = "200" alt = "图片加载失败！" title = "傲娇"/>
<a href = "">
<img src = "Wechat.jpg" ismap/>
a>
<hr/>
<a href = "http://www.jd.com" target = "_blank" >
<img src = "Wechat.jpg" alt = "请点击！" usemap = ""/>
a>
body>
map标签
1、属性
<p>
<map name="">map>
定义和护短图像映射
属性:name属性值，属性值自定义，在img标签中用usemap属性值通过#号查找对应name的属性值
<area shape="" coords="" href="" alt="">
定义图像映射图像的区域
shape 定义区域的形状
取值: rect 矩形 cricle 图 poly 多边形 dafault 默认整张图
coords 定义区域的坐标值
rect : 矩形对角的像素坐标值
cricle : 圆心和半径值
href 点击区域跳转的位置
taget 打开的方式
p>
2、代码
<body>
<img src = "Wechat.jpg" usemap = "#name" />
<map name = "name">
<area shape = "circle" coords = "350,300,1090,870" href = "http://www.jd.com" target = "_blank"/>
map>
body>
audio标签
属性
<audio src=""> 加载音频audio>
<p>
autoplay 自动播放
controls 播放控件 不可缺
src 声音地址
loop 循环播放
preload 提前加载准备播放
p>
video标签
属性
<video src="">加载视频video>
<p>
src 视频地址
controls 播放控件
height 视频高度
width 视频宽度
poster 定义视频在点击播放前显示的图像
autoplay 自动播放
p>
embed标签
属性
<embed src="" type="">
<p>
width
height
src
type 文件的mime类型
p>
source标签
属性
<source/>
<p>
src 媒介的地址
type 媒介的类型
p>