发布于2021-01-31 15:05 阅读(1135) 评论(0) 点赞(19) 收藏(2)
★文章内容学习来源:拉勾教育大前端就业集训营
接上篇…#目录
五、图像标签
六、音频和视频标签
七、超级链接
1.<img>
标签进行定义;
2.是单标签,本身相当于一个特殊的文本;
3.由于<img>
为单标签,所以它只能通过属性进行相关的图像设置。
<img>
标签的作用是在指定的位置插入一张图片;<img>
常用属性展示:属性名 | 描述 |
---|---|
src | 表示图片的路径 |
width | 表示图片的宽度 |
height | 表示图片的高度 |
border | 边框属性;它的值可以设置边框的厚度 |
title | 设置提示文本 |
alt | 设置图像没有找到时候的替换文本 |
示例 :
<img src="C:\Users\86156\Desktop\damao.jpg"
width="500px" height="500px" border="2"
title="大脸猫" alt="这是一张大脸猫图片">
找的到图片时浏览器效果:
找不到图片时浏览器效果:
如果需要插入一张图片到HTML中,<img>
标签必须设置src
属性。
1.src
:全称source资源,属性值是图片查找的路径。
2.路径:指的是寻找文件时所历经的线路,在HTML中有特殊的书写语法。
3.路径分为相对路径和绝对路径,不同的方式出发点和参考位置不同。
相对路径:
相对路径查找文件时,需要从HTML文件本身出发,根据相对的位置进行查找,包含三种方向。
①同级查找:指目标文件与HTML文件位于同一级,直接书写文件名+后缀格式; <img src="damao.jpg">
②子级查找:指目标文件在与HTML文件同一级的文件夹的内部,需要先查找文件夹名称,然后通过关闭 符号/进入文件夹查找里面的文件;如果有多层文件夹,需要/进入多层。
<img src="images/smile02.png">
<img src="images/tupian/smile03.jpg">
③上级查找:指目标文件在HTML文件所在文件夹的更上一级,需要跳出当前文件夹到上一层,路径写法 利用…/表示跳出一级,如果跳出多级书写多次…/,直到找到文件。
<img src="../../smile04.jpg" />
<img src="../images/smile01.jpg" />
绝对路径
绝对路径查找文件时,不需要从HTML文件出发,而是直接从电脑的盘符出发进行查找,或者使用网址形式查找。
①盘符出发:例如从c盘或者d盘出发查找图片,书写时以c:/开头,后续类似子级查找写法直至找到 目标文件。
<img src="C:/Users/Documents/html/images/smile02.png" />
②网址形式:要查找的文件是来自网络资源,路径写法以http://
开头。
<img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />
★从盘符出发的绝对路径的缺点:
a.盘符出发的路径不可移植,不可移动;
b.盘符出发的路径容易出现中文字符,中文的路径容易出现错误。
路径实际应用
a.建议多使用相对路径,可以适当使用网址形式的绝对路径;
b.使用相对路径必须将图片或文件与HTML同时上传,而且需要保持相对位置不变。
1.宽度和高度
width:图片的宽度;
height:图片的高度;
属性值:以px为单位的数值,或者省略px不写。
如果不设置两个属性,会以图片的原始尺寸加载。
如果设置属性:只设置了其中一个,另一个会等比例变换;
如果两个都设置,按照设置值加载。
参考(三)中示例
2.边框border
border:设置图片的边框。
属性值:数值,数值是几表示边框宽度为几像素。
★注意:border属性可以使用css进行设置,css中的边框有更多的设置效果。
参考(三)中示例
3.提示文本title
title:设置的是鼠标悬停时的提示文本。
属性值:自定义的提示文字内容。
参考(三)中示例
4.替换文本alt
alt:设置的是图片查找错误时,出现的替换文本。
如果能正常找到图片,替换文本是不显示的。
属性值:自定义的替换内容。
参考(三)中示例
<img>
标签最为重要的属性为src
,尽量使用alt
属性对图片进行说明,添加相对关键词可以有利于SEO搜索引擎优化。
其他属性可以根据需求进行设置。
①使用<audio>
标签进行定义;
② <audio>
是双标签;
③同图片一样,需要使用src
属性设置音频查找的路径;
★音频文件支持的格式包括:.mp3
、.ogg
、.wav
。
示例:
<audio src="audio.mp3"> </audio>
①音频控制条属性controls
音频加载后不会自动显示播放器的控制条,需要使用controls
属性进行设置,属性值也是 controls
。
示例:
<audio src="audio.mp3" controls="controls">
显示效果:
视频的设置方法与音频非常类似。
①视频使用<video>
标签进行定义;
② <video>
是双标签。
③ 使用src属性设置视频查找的路径。
视频文件支持的格式包括:.mp4
、.ogg
、.webm
。
示例:
<video src="video.mp4"></video>
①视频控制条属性controls
视频也需要使用controls
属性设置控制条,属性值也是controls
。
示例:
<video src="video.mp4" controls="controls" ></video>
HTML 使用超级链接与网络上的另一个文档相连。
超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
1.在HTML中使用<a>
标签可以创建链接; a全称anchor,锚的意思;
2.<a>
为双标签;
1.在指定的位置添加超级链接,提供用户进行点击和跳转。
2.<a>
标签可以实现两种跳转:跨页面跳转、页面内跳转。
实现跳转的方式需要用到一些标签属性。
示例:
<a>链接内容</a>
属性名 | 含义描述 | 属性值 | 重要性 |
---|---|---|---|
href属性 | hypertext reference,超文本引用,用于规定链接的目标地址。 | 链接目标的路径地址(可以使用:相对路径或网址形式的绝对路径) | 想实现点击跳转,必须设置该属性,拥有这个属性<a> 标签在鼠标移上时才会显示一个小手指针状态 |
target属性 | 定义被链接的文档在何处跳转显示。 | 属性值有两种: • _self :默认值,表示跳转的页面在当前窗口打开,不会打开新的窗口。_blank :空白的,表示跳转的页面在新窗口打开。 | 根据需要设置 |
title属性 | 鼠标悬停时的提示文本,与<img> 标签类似 | 自定义的文字内容 | 用于给用户进行提示,该链接的功能是什么,提高用户的体验 |
实现的是从某个位置跳转到同页面的另一个位置;
制作方法分为两个步骤:
设置跳转目标位置;
两种方法:
①在目标位置找到任意一个标签,给它添加id
属性,id
的属性值必须是唯一的;(相当于确目标的“身份证号”)
★ id
的属性值自定义规则:必须以字母开头,后面可以有字母、数字、下划线和横线,区分大小写。
示例:
<h2 id="mubiao">目标位置</h2>
②在目标位置添加一个空的<a>
标签,只设置一个name
属性,name
属性值设置方式与id
相同,也必须是唯一的。
示例:
<a name="mubiao"></a>
链接到锚点,在需要点击的位置设置<a>
标签,给a
的href
属性设置属性值为#id
属性值或者#加a
的name
属性值。
<a href="#mubiao">点击文本</a>
综合了跨页面跳转和锚点跳转
制作方法也分为两个步骤:
方式与页面内锚点跳转一致,在目标网页的指定位置设置使用id或name 属性
添加超级链接时href属性需要更改,属性值写为页面的路径#id 。
示例:
<a href="new.html#mubiao">点击文本</a>
下篇继续HTML常用标签…
原文链接:https://blog.csdn.net/weixin_47640160/article/details/113437806
作者:我喜欢css
链接:http://www.qianduanheidong.com/blog/article/76/cbe12657bc66c92f6570/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!