1.内联标签 (少用)
定义:
内联框架iframe
,用于向当前页面中引入一个其他页面,网页嵌套网页
属性:
src
指定要引入的网页的路径
frameborder
指定内联框架的边框
举例
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
2.超链接标签(定义+属性)
2.1定义:
超链接可以让我们从一个页面跳转到其他页面,或者是当前页面的其他的位置
使用a
标签来定义超链接,href
属性指定跳转的目标路径,值可以是一个外部网站的地址,也可以写一个内部页面的地址
超链接是也是一个行内元素,在a
标签中可以嵌套除它自身外的任何元素
2.2超链接类型:
1.外部地址->用绝对路径
- Linking to an absolute URL:链接一个绝对路径
- Linking to an email address:链接一个email地址
- Linking to telephone numbers:链接电话号码
- Using the download attribute to save a
<canvas>
as a PNG:下载图片
<ul>
<li><a href="https://www.baidu.com">Website</a></li>
<li><a href="mailto:example@outlook.com">Email</a></li>
<li><a href="tel:+123456789">Phone</a></li>
</ul>
效果
2.内部地址->用相对路径
当我们需要跳转一个服务器内部的页面时,一般我们都会使用相对路径,会以./
或../
开头
./
表示当前文件所在目录,可以省略不写
../
表示当前文件所在目录的上一级目录
<a href="./test1.html">超链接1</a><br>
<a href="../test2.html">超链接2</a><br>
<a href="./test3/test3.html">超链接3</a><br>
<a href="../test4/test4.html">超链接4</a>
效果
2.3 属性细讲
1.target属性 --设置链接跳转类型
target
属性,用来指定超链接打开的位置可选值:
_self
在当前页面中打开超链接,默认值 (国外)
_blank
在新建页面中打开超链接 (国内)
<a href="./test1.html">超链接1——默认</a><br>
<a href="./test1.html" target="_self">超链接1——当前页面</a><br>
<a href="./test1.html" target="_blank">超链接1——新建页面</a><br>
2.id --设置当前网页锚点跳转
id属性,可以设置当前标签的特殊名字,用于给href页面跳转来标识的,唯一,不可以重复
说明:
可以使用javascript:void(0);
来作为href
的属性,此时点击这个超链接什么也不会发生
可以将#
作为超链接的路径的占位符使用。
可以直接将超链接的href
属性设置为#
,这样点击超链接以后页面不会发生跳转,而是转到当前页面的顶部的位置
可以跳转到页面的指定位置(锚点),只需将href
属性设置#目标元素的id属性值
(唯一不重复)
<p> 汉皇重色思倾国,御宇多年求不得。</p>
<p> 杨家有女初长成,养在深闺人未识。 </p>
<p> 天生丽质难自弃,一朝选在君王侧。 </p>
<p><a id="Anchor1" href="#Anchor2"> 回眸一笑百媚生,六宫粉黛无颜色。</a></p>
<p> 春寒赐浴华清池,温泉水滑洗凝脂。 </p>
<p> 侍儿扶起娇无力,始是新承恩泽时。 </p>
<p> 云鬓花颜金步摇,芙蓉帐暖度春宵。 </p>
<p> 春宵苦短日高起,从此君王不早朝。 </p>
<p> 承欢侍宴无闲暇,春从春游夜专夜。 </p>
<p><a id="Anchor2" href="#Anchor3"> 后宫佳丽三千人,三千宠爱在一身。</a></p>
<p> 金屋妆成娇侍夜,玉楼宴罢醉和春。 </p>
<p> 姊妹弟兄皆列土,可怜光彩生门户。 </p>
<p> 遂令天下父母心,不重生男重生女。 </p>
<p> 骊宫高处入青云,仙乐风飘处处闻。 </p>
<p> 缓歌慢舞凝丝竹,尽日君王看不足。 </p>
<p> 渔阳鼙鼓动地来,惊破霓裳羽衣曲。 </p>
<p> 九重城阙烟尘生,千乘万骑西南行。 </p>
<p> 翠华摇摇行复止,西出都门百余里。 </p>
<p> 六军不发无奈何,宛转蛾眉马前死。 </p>
<p> 花钿委地无人收,翠翘金雀玉搔头。 </p>
<p> 君王掩面救不得,回看血泪相和流。 </p>
<p> 黄埃散漫风萧索,云栈萦纡登剑阁。 </p>
<p> 峨嵋山下少人行,旌旗无光日色薄。 </p>
<p> 蜀江水碧蜀山青,圣主朝朝暮暮情。 </p>
<p> 行宫见月伤心色,夜雨闻铃肠断声。 </p>
<p> 天旋地转回龙驭,到此踌躇不能去。 </p>
<p> 马嵬坡下泥土中,不见玉颜空死处。 </p>
<p> 君臣相顾尽沾衣,东望都门信马归。 </p>
<p> 归来池苑皆依旧,太液芙蓉未央柳。 </p>
<p> 芙蓉如面柳如眉,对此如何不泪垂。 </p>
<p> 春风桃李花开夜,秋雨梧桐叶落时。 </p>
<p> 西宫南苑多秋草,落叶满阶红不扫。 </p>
<p> 梨园弟子白发新,椒房阿监青娥老。 </p>
<p> 夕殿萤飞思悄然,孤灯挑尽未成眠。 </p>
<p><a id="Anchor3" href="#Anchor4"> 迟迟钟鼓初长夜,耿耿星河欲曙天。 </a></p>
<p> 鸳鸯瓦冷霜华重,翡翠衾寒谁与共。 </p>
<p> 悠悠生死别经年,魂魄不曾来入梦。 </p>
<p> 临邛道士鸿都客,能以精诚致魂魄。 </p>
<p> 为感君王辗转思,遂教方士殷勤觅。 </p>
<p> 排空驭气奔如电,升天入地求之遍。 </p>
<p> 上穷碧落下黄泉,两处茫茫皆不见。 </p>
<p> 忽闻海上有仙山,山在虚无缥渺间。 </p>
<p> 楼阁玲珑五云起,其中绰约多仙子。 </p>
<p> 中有一人字太真,雪肤花貌参差是。 </p>
<p> 金阙西厢叩玉扃,转教小玉报双成。 </p>
<p> 闻道汉家天子使,九华帐里梦魂惊。 </p>
<p> 揽衣推枕起徘徊,珠箔银屏迤逦开。 </p>
<p> 云鬓半偏新睡觉,花冠不整下堂来。 </p>
<p><a id="Anchor4" href="#Anchor5"> 风吹仙袂飘飖举,犹似霓裳羽衣舞。 </a></p>
<p> 玉容寂寞泪阑干,梨花一枝春带雨。 </p>
<p> 含情凝睇谢君王,一别音容两渺茫。 </p>
<p> 昭阳殿里恩爱绝,蓬莱宫中日月长。 </p>
<p> 回头下望人寰处,不见长安见尘雾。 </p>
<p> 惟将旧物表深情,钿合金钗寄将去。 </p>
<p> 钗留一股合一扇,钗擘黄金合分钿。 </p>
<p> 但令心似金钿坚,天上人间会相见。 </p>
<p> 临别殷勤重寄词,词中有誓两心知。 </p>
<p> 七月七日长生殿,夜半无人私语时。 </p>
<p><a id="Anchor5" href="#Anchor6"> 在天愿作比翼鸟,在地愿为连理枝。 </a></p>
<p> 天长地久有时尽,此恨绵绵无绝期。 </p>
<!-- Heading to link to -->
<a href="#">回到顶部</a>
3.href --标记超链接到的网页具体路径
href
属性指定跳转的目标路径,值可以是一个外部网站的地址,也可以写一个内部页面的地址
3.图片标签
定义
图片标签用于向当前页面中引入一个外部图片
img
标签是一个自结束标签,这种元素属于替换元素(块和行内元素之间,具有两种元素的特点)
属性
src
:属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt
:图片的描述,这个描述默认情况下不会显示,有些浏览器会在图片无法加载时显示,搜索引擎会根据alt中的内容来识别图片!!!!!!提高代码可读性
width
:图片的宽度(单位是像素)
height
:图片的高度(单位是像素)
- 宽度和高度中如果只修改了一个,则另一个会等比例缩放,都改不变
注意
- 一般情况在pc端,不建议修改图片的大小,需要多大的图片就裁多大
- 但是在移动端,经常需要对图片进行缩放(大图缩小)
举例
<img src="https://gitee.com/vectorx/ImageCloud/raw/master/img/20210513002416.png" alt="蒂姆·伯纳斯·李爵士,万维网的发明人">
<img src="https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210514233853.gif" alt="结构、表现、行为">
图片格式
jpeg(jpg)
- 支持的颜色比较丰富
- 不支持透明效果
- 不支持动图
- 一般用来显示照片
gif
- 支持的颜色比较单一
- 支持简单透明
- 支持动图
png
- 支持的颜色丰富
- 支持复杂透明
- 不支持动图
- 专为网页而生
webp
- 这种格式是谷歌新推出的专门用来表示网页中的图片的一种格式
- 具备其他图片格式的所有优点,而且文件还特别的小
- 缺点:兼容性不好
base64
- 将图片使用base64编码,这样可以将图片转换为字符,通过字符的形式来引入图片
图片格式的选择
- 图片效果一样的,选文件小的
- 图片效果不一样的,选图片效果好的
- 尽可能的兼顾和平衡图片效果和文件大小
4.音视频audio标签
音频定义:
audio
标签用来向页面中引入一个外部的音频文件
音视频文件引入时,默认情况下不允许用户自己控制播放停止
属性:
controls
是否允许用户控制播放
autoplay
音频文件是否自动播放
-
- 如果设置了
autoplay
,则音乐在打开页面时会自动播放
- 如果设置了
-
- 但是目前来讲大部分浏览器都不会自动对音乐进行播放
loop
音乐是否循环播放
<audio src="./source/audio.mp3" controls autoplay loop></audio>
说明:
source
除了通过src
属性来指定外部文件的路径以外,还可以通过<source>
元素来指定文件的路径
<audio controls autoplay loop>
对不起,您的浏览器不支持播放音频!请升级浏览器!
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
</audio>
IE11下,能够正常播放
embed
IE8下不支持audio元素,但是可以使用 <embed> 元素在文档中的指定位置嵌入外部内容。
这个内容是由外部应用程序或其他互动内容的来源提供的,如浏览器插件。
<embed src="./source/audio.mp3">
其他:
通过iframe
和embed
的方式引入视频。以某艺为例,提供了视频链接的HTML代码和通用代码
<iframe
src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=0c53ddd55f262c6d416afa9d1f49dc55&tvId=1008748400&accessToken=2.ef9c39d6c7f1d5b44768e38e5243157d&appKey=8c634248790d4343bcae1f66129c1010&appId=1368&height=100%&width=100%"
frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>
不过,embed需要flash的支持
<embed
src="//player.video.iqiyi.com/0c53ddd55f262c6d416afa9d1f49dc55/0/0/v_19rrcuh1jw.swf-albumId=1008748400-tvId=1008748400-isPurchase=0-cnId=undefined"
allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always"
type="application/x-shockwave-flash"></embed>
5.视频video标签
使用video
标签来向网页中引入一个视频,使用方式和audio
基本上是一样的
参数不细说了
<video controls>
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm">
<source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
<embed src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
</video>
IE11下,能够正常播放