HTML的超链接标签、图片、多媒体标签

本文详细介绍了HTML中的超链接、图片、音频和视频等常见标签的使用方法,包括各标签的属性及其作用,如href、src、alt、loop、controls等,帮助初学者快速掌握前端页面元素的嵌入技巧。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前端学习经验(2)

HTML

常用标签

超链接标签:
<a>这是一个链接></a>:此标签定义一个超链接。

例:<a href = "https://www.baidu.com/">百度一下</a>
	   href属性:指示到链接的目标。

例:<a href = "https://www.baidu.com/" target = "_blank">百度一下</a>
	<a href = "https://www.baidu.com/" target = "_self">百度一下</a>
		target = "_blank":在浏览器新窗口打开目标页面。
		target = "_self":在浏览器当前页面打开目标页面。


图片标签:
<img>:此标签向网页中嵌入一张图片。

例:<img src = "http://wx4.sinaimg.cn/mw690/006HJgYYgy1fsskl787t2g3094085dw6.gif" alt= " 罗熙"  width = 300px height = 300px>
	src = " ":目标图片的地址。
	alt = " ":当图片不显示时,给该图片赋予的名称。
	width =  :设置嵌入图片在网页中的宽度。
	height = :设置嵌入图片在网页中的高度。

多媒体标签

音频标签:
<audio>音频标签</audio>:向网页中嵌入一段音频。

例:<audio src = "xxx.mp3"  loop = "loop" controls = "controls"></audio>
	src = " ":目标音频的地址。
	loop:当音乐结束后重新播放,即循环播放。
	controls:显示控件,如播放按钮,音量键等。


视频标签:
<video>视频标签</video>:向网页中嵌入一段视频。

例:<video src = "xxx.mp4" loop = "loop" controls = "controls"  poster = "poster"  width = 500px height = 700px></video> 
	src = " ":目标视频的地址。
	loop:当视频结束后重新播放,即循环播放。
	controls:显示控件,如播放按钮,音量键等。
	poster:规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
	width:设置目标视频在网页中播放页面的宽度。
	height:设置目标视频在网页中播放页面的高度。
可以使用以下正则表达式来匹配HTML超链接: ```html <a\s+(?:[^>]*?\s+)?href=(["'])(.*?)\1 ``` 这个正则表达式匹配`<a>`标签,并且捕获`href`属性的值。可以使用类似以下的代码来提取所有匹配的链接: ```python import re html = '<a href="https://www.example.com">Example</a><a href="https://www.google.com">Google</a>' links = re.findall(r'<a\s+(?:[^>]*?\s+)?href=(["\'])(.*?)\1', html) for link in links: print(link[1]) ``` 这个代码将输出两个链接: ``` https://www.example.com https://www.google.com ``` 同样,可以使用以下正则表达式来匹配HTML图片标签: ```html <img\s+(?:[^>]*?\s+)?src=(["'])(.*?)\1 ``` 这个正则表达式匹配`<img>`标签,并且捕获`src`属性的值。可以使用类似以下的代码来提取所有匹配的图片链接: ```python import re html = '<img src="https://www.example.com/image.jpg"><img src="https://www.google.com/logo.png">' images = re.findall(r'<img\s+(?:[^>]*?\s+)?src=(["\'])(.*?)\1', html) for image in images: print(image[1]) ``` 这个代码将输出两个图片链接: ``` https://www.example.com/image.jpg https://www.google.com/logo.png ``` 对于多媒体标签,可以使用以下正则表达式来匹配`<video>`和`<audio>`标签: ```html <(?:video|audio)\s+(?:[^>]*?\s+)?src=(["'])(.*?)\1 ``` 这个正则表达式匹配`<video>`和`<audio>`标签,并且捕获`src`属性的值。同样,可以使用类似以上例子的代码来提取所有匹配的多媒体链接。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值