当前位置:首页 > 前端技术 > 【6】HTML基础(3)——HTML常用标签②

【6】HTML基础(3)——HTML常用标签②

2022年09月16日 21:07:26前端技术6

【6】HTML基础(3)——HTML常用标签②

接上篇…#目录

  • 五、图像标签
  • 六、音频和视频标签
  • 七、超级链接

五、图像(image)

(一)语法:

  • <img>标签进行定义;
  • 是单标签,本身相当于一个特殊的文本;
  • 由于<img>为单标签,所以它只能通过属性进行相关的图像设置

(二)作用:

  • <img>标签的作用是在指定的位置插入一张图片;
  • 在HTML文件,常用的插入图片的类型有:jpg、png、gif。

(三)<img>常用属性展示:

属性名 描述
src 图片的路径
width 图片的宽度
height 图片的高度
border 边框属性;它的值可以设置边框的厚度
title 提示文本
alt 图像没有找到时候的替换文本
  • 示例 :
<img src="C:\Users\86156\Desktop\damao.jpg"  
width="500px" height="500px" border="2" 
title="大脸猫" alt="这是一张大脸猫图片">
  • 找的到图片时浏览器效果:
    【6】HTML基础(3)——HTML常用标签② _ JavaClub全栈架构师技术笔记
  • 找不到图片时浏览器效果:
    【6】HTML基础(3)——HTML常用标签② _ JavaClub全栈架构师技术笔记

(四)src属性和路径详细介绍

  • 如果需要插入一张图片到HTML中,<img>标签必须设置src属性。
  • src:全称source资源,属性值是图片查找的路径。
  • 路径:指的是寻找文件时所历经的线路,在HTML中有特殊的书写语法。
  • 路径分为相对路径绝对路径 ,不同的方式出发点和参考位置不同。
1.相对路径:
  • 相对路径查找文件时,需要从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" />

2.绝对路径

  • 绝对路径查找文件时,不需要从HTML文件出发,而是直接从电脑的盘符出发进行查找,或者使用网址形式查找。
  • ①盘符出发:例如从c盘或者d盘出发查找图片,书写时以c:/开头,后续类似子级查找写法直至找到 目标文件。
    <img src="C:/Users/Documents/html/images/smile02.png" />
  • ★从盘符出发的绝对路径的缺点:
    a.盘符出发的路径不可移植,不可移动;
    b.盘符出发的路径容易出现中文字符,中文的路径容易出现错误。
  • ②网址形式:要查找的文件是来自网络资源,路径写法以http://开头。
    <img src="http://img3.imgtn.bdimg.com/it/u=1084243323,278941980&fm=26&gp=0.jpg" />

3.路径实际应用

  • 建议多使用相对路径,可以适当使用网址形式的绝对路径;
  • 使用相对路径必须将图片或文件与HTML同时上传,而且需要保持相对位置不变。

(五)图像标签其他属性详细介绍

1.宽度和高度

  • width:图片的宽度;
  • height:图片的高度;
  • 属性值:以px为单位的数值,或者省略px不写。
  • 如果不设置两个属性,会以图片的原始尺寸加载。
  • 如果设置属性:只设置了其中一个,另一个会等比例变换;
  • 如果两个都设置,按照设置值加载。
  • 参考(三)中示例

2.边框border

  • border:设置图片的边框。
  • 属性值:数值,数值是几表示边框宽度为几像素。
  • ★注意:border属性可以使用css进行设置,css中的边框有更多的设置效果。
    参考(三)中示例

3.提示文本title

  • title:设置的是鼠标悬停时的提示文本。
  • 属性值:自定义的提示文字内容。
  • 参考(三)中示例

4.替换文本alt

  • alt:设置的是图片查找错误时,出现的替换文本。
  • 如果能正常找到图片,替换文本是不显示的。
  • 属性值:自定义的替换内容。
  • 参考(三)中示例

(六)图像标签总结

  • <img>标签最为重要的属性为src,尽量使用alt属性对图片进行说明,添加相对关键词可以有利于SEO搜索引擎优化。
  • 其他属性可以根据需求进行设置。



六、音频和视频标签

(一)音频标签

1.语法

  • 使用<audio>标签进行定义;
  • <audio>是双标签;
  • 同图片一样,需要使用src属性设置音频查找的路径;
  • ★音频文件支持的格式包括:.mp3.ogg、.wav
  • 示例:<audio src="audio.mp3"> </audio>

2.常用属性

  • 音频控制条属性controls
    音频加载后不会自动显示播放器的控制条,需要使用controls属性进行设置,属性值也是 controls
  • 示例:<audio src="audio.mp3" controls="controls">
  • 显示效果:
    【6】HTML基础(3)——HTML常用标签② _ JavaClub全栈架构师技术笔记

(二)视频标签

1.语法

  • 视频的设置方法与音频非常类似。
  • 视频使用<video>标签进行定义;
  • <video>是双标签。
  • 使用src属性设置视频查找的路径。
  • 视频文件支持的格式包括:.mp4.ogg.webm
  • 示例:
 <video src="video.mp4"></video>

2.常用属性

  • 视频控制条属性controls
  • 视频也需要使用controls属性设置控制条,属性值也是controls
  • 示例:<video src="video.mp4" controls="controls" ></video>



七、超级链接标签

  • HTML 使用超级链接与网络上的另一个文档相连
  • 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

(一)语法

  • 在HTML中使用<a>标签可以创建链接; a全称anchor,锚的意思;
  • <a>为双标签;

(二)作用

  • 在指定的位置添加超级链接,提供用户进行点击和跳转。
  • <a>标签可以实现两种跳转:跨页面跳转、页面内跳转。
  • 实现跳转的方式需要用到一些标签属性。
  • 示例:<a>链接内容</a>

(三)常用属性

属性名 含义描述 属性值 重要性
href hypertext reference,超文本引用,用于规定链接的目标地址。 链接目标的路径地址(可以使用:相对路径或网址形式的绝对路径) 想实现点击跳转,必须设置该属性,拥有这个属性<a>标签在鼠标移上时才会显示一个小手指针状态
target 定义被链接的文档在何处跳转显示。 属性值有两种: • _self:默认值,表示跳转的页面在当前窗口打开,不会打开新的窗口。_blank:空白的,表示跳转的页面在新窗口打开。 根据需要设置
title|鼠标悬停时的提示文本,与<img>标签类似 自定义的文字内容 用于给用户进行提示,该链接的功能是什么,提高用户的体验

(四)锚点跳转

1.页面内锚点跳转

  • 实现的是从某个位置跳转到同页面的另一个位置;
  • 制作方法分为两个步骤:
(1)设置锚点:
  • 设置跳转目标位置;
  • 两种方法:
  • ①在目标位置找到任意一个标签,给它添加id属性,id的属性值必须是唯一的;(相当于确目标的“身份证号”)
    id的属性值自定义规则:必须以字母开头,后面可以有字母、数字、下划线和横线,区分大小写。示例:<h2 id="mubiao">目标位置</h2>
  • ②在目标位置添加一个空的<a>标签,只设置一个name属性,name属性值设置方式与id相同,也必须是唯一的。
    示例:<a name="mubiao"></a>
(2)添加链接
  • 链接到锚点,在需要点击的位置设置<a>标签,给ahref属性设置属性值为#id属性值或者#加aname属性值。<a href="#mubiao">点击文本</a>

2.跨页面锚点跳转

  • 综合了跨页面跳转和锚点跳转
  • 制作方法也分为两个步骤:
(1)设置锚点
  • 方式与页面内锚点跳转一致,在目标网页的指定位置设置使用idname 属性
(2)链接到锚点
  • 添加超级链接时href属性需要更改,属性值写为页面的路径#id 。
  • 示例:<a href="new.html#mubiao">点击文本</a>



下篇继续HTML常用标签…

作者:倏存
来源链接:https://blog.csdn.net/weixin_47640160/article/details/113437806

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/42135.html

标签: HTML
分享给朋友:

“【6】HTML基础(3)——HTML常用标签②” 的相关文章

Markdown中使用html标签

有时候,我们会在笔记中使用一些HTML标签,但是Markdown中直接使用html标签会被解析为格式.该怎么书写,可以直接显示为html的标签呢. <h1>这是一个标题</h1> //其中的<h1&g...

HTML5 速查列表

HTML 速查列表 HTML 速查列表. 你可以打印它,以备日常使用。 HTML 基本文档 <!DOCTYPE html> <html> <head> <title>文档标题<...

HTML5 自动聚焦autofocus属性

原文:https://davidwalsh.name/autofocus 翻译:http://blog.csdn.net/renfufei/article/details/9797419   HTML5 推出了一大堆精彩的东西给我们。 过去我们要...

超链接a标签的属性target的可选值有哪些以及区别

超链接a标签的属性target的可选值有哪些以及区别 1、<a target="_blank"></a> 2、<a target="_parent"></a> 3、<a targ...

HTML表单标签常用属性及其常见子标签

表单标签 通过form来定义 <form> //1.input类型 //2.select类型 //3.textarea类型 </form> 常用属性 ​ action:提交路径,默认是当...

HTML-列表标签list与表格标签table

HTML-列表标签list与表格标签table

目录   列表标签 表格标签 列表标签      <ul>无序列表             ...

HTML中input标签的alt属性和title属性的比较

经常用到这两个属性,但是一直没有总结他们的区别。现在我对他们两个的用法做一下总结: 相同点:他们都会飘出一个小浮层,显示文本内容。 不同点: 1.alt只能是元素的属性,而title即可以是元素的属性也可以是标签,例如:<title>标题&l...

HTML5 data-* 自定义属性及其注意点

在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,命名可以用驼峰命名方式,但取值是必需全部使用小写(后面会说),使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。 1.&nbs...

HTML rel属性的作用

rel与rev属性相同,它们都是属于LinkTypes属性. rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系, rel是relationship的英文缩写. rev 属性 -- rev属性,描述了href所指定文档与当前页面的关系, rel是revers...

html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法

html中cellpadding属性作用,table标签cellpadding属性的作用及使用方法

在html中制作表格,需要用到table标签,而该标签中的cellpadding属性可设置单元格边距大小,下面我们就一起学习一下cellpadding属性的作用及使用方法。 cellpadding属性指定单元格边框和单元格内容之间的空白部分(以像素为单位)。...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。