超链接及HTML5媒体元素

F2022697486

已于 2023-08-25 16:53:33 修改

阅读量358

点赞数 1

分类专栏： HTML+CSS3 文章标签： html5 媒体 html

于 2023-03-22 19:02:33 首次发布

本文链接：https://blog.csdn.net/F2022697486/article/details/129716008

版权

HTML+CSS3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

超链接元素

在HTML中提供了三种路径：绝对路径、相对路径、根路径。

超链接的基本语法

网页中添加a标签是实现超链接的重要方式

<a href="URL">超链接内容</a>

超链接的创建

	<body>
	<a href="1.html">超链接</a>
	</body>

默认情况下，超链接的目标页面在当前窗口打开，可以通过target属性实现在新窗口打开网页

	<body>
	单击<a href="1.html" target ="_blank">超链接</a>在新窗口打开
	</body>

target属性值可以为_self 、 _blank 、 _top 、 _parent

_self 是在当前窗口打开
_top目标窗口会在顶层框架中打开
_parent 目标窗口会在当前框架的上一层打开

锚点链接

网页跳转

基本语法格式

	<a href="#id值"></a>
	<标签  id="名称"></标签>

在网页实现同页面锚点链接跳转

	<body>
	<pre>
		<h1>古诗鉴赏</h1>
		<h3>单击<a href="#cg">春宫怨</a></h3>
		<h3>单击<a href="#dk">登科居</a></h3>
		<h3>单击<a href="#wy">五十言怀诗</a></h3>
		<h2 id="cg">春宫怨</h2>
		<p>
		昨夜风开露井桃，
		未央前殿月轮高。
		平阳歌舞新承宠，
		帘外春寒赐锦袍。
		</p>
		<h2 id="dk">登科居</h2>
		<p>
		昔日齷齪不足夸，
		今朝放荡思无崖。
		春风得意马蹄疾，
		一日看尽长安花。
		</p>
		<h2 id="wy">五十言怀诗</h2>
		<p>
		笑舞狂歌五十年，花中行乐月中眠。
		漫劳海内传名字，谁信腰间没酒钱。
		诗赋自惭称作者，众人疑道是神仙。
		些须做得工夫处，莫损心头一寸天。
		</p>
	</pre>
	</body>

在不同页面下使用锚点链接

基本语法格式

在01_Index.html中设置锚点链接

<a href="02_index.html#d1">锚点链接</a>

在02_index.html中设置锚点

<div id="d1"><p>你成功实现了不同页面锚点链接的使用</p></div>

在a标签中href属性设置定值，给出另一个文件的相对路径+#id值就能完成

不同页面间跳转

	<body>
		<a href="FIRST.html"><button>跳转到第一页</button></a>
		<a href="SECOND.html"><button>跳转到第二页</button></a>
	</body>

按钮标签

图片元素

常见图片格式

.png 格式，常用格式 - 带透明通道的无损图片格式
.gif 格式，常用网页格式 - 带透明通道的（静态、动态）图片格式
.tif 格式，常用图书印刷格式 - 可跨软件进行原图层编辑的图片格式
.bmp 格式，微软格式
.jpeg 格式，常用格式 - 不带透明通道的0-10级压缩图片格式（11级压缩）

图片元素的基本用法

在网页中插入图片元素的基本语法格式

<img src="图像文件路径及图像文件名称"/>

图片元素的常用属性

width/height:设置图片的宽度和高度
border:设置图片边框的宽度，默认为零。
alt:当图片无法加载时，用于替换图片内容的文字。
align:设置图片与文字的对齐方式，可选择效果

热点

HTML 支持将图片的一定区域指定为“热点”，单击不同的热点可以跳转到不同的页面。

HTML5的视频

video标签支持三种视频格式 Ogg、WebM、MPEG4格式

	<body>
	<video src=视频地址" controls="controls"></video>
	</body>

默认情况下，浏览器不会显示任何播放器控件，此时无法对视频播放进行控制

HTML5中定义的video元素属性如下

autoplay(自动播放）:告诉浏览器，视频一但下载完就开始播放
controls(控件)：显示浏览器原生的内置控件。基本控件包括：播放/暂停按钮、定时器按钮、尽量控制以及时间刷等
crossringin(跨资源共享)：允许或禁止使用CORS对视频进行跨域共享
height(高)：视频的高度
loop(循环)：视频播放结束后循环播放
poster(贴画)：规定视频正在加载时显示的图像，直到用户单击播放按钮

为了兼容在使用时可以添加source元素 会自动选择可以识别的格式

	<video controls="controls">
		<source src="1.mp4" type="video/mp4"/>
		<source src="1.webm" type="video/vp8"/>
		<source src="1.ogv" type="video/ogg"/>
	</video>

HTML5的音频

HTML5中的audio元素是用来播放音频文件

<audio> src="dmxy.mp3" controls="controls"></audio>

audio元素的使用与video元素十分相似，并且共享一些相同的特性和API

	<audio controls="controls">
		<source src="1.mp3" type="audio/mp3"/>
		<source src="1.aac" type="audio/aac"/>
		<source src="1.ogg" type="audio/ogg"/>
	</audio>

不需要在HTML中指定音频的宽度和高度

其他常用元素

1.内嵌元素<span>

<span>元素常用来修饰行内的文字、图像等内容

2.块级元素<div>

<div>元素可以包含其他代码（如段落、超链接、图像等，也包括div元素自身），用于将多个元素组织在一起，通过样式表可以修饰这些元素的外观。<div>元素在显示时会在前后添加换行

3.div与span标记的区别

1）div是块标记

2）div标记可以包含span标记但span不可以包含div标记

4.上标<sup>与下标<sub>.

使用上标、下标标签实现特殊字体的效果设置

	<body>
	<p>X<sub>1</sub><sup>2</sup>+X<sub>2</sub><sup>3</sup>=Y<sup>2</sup></p>
	<p>Windows<sup>&reg;</sup>是微软公司<sup>①</sup></p>
	<hr />
	<p>① 微软公司即Microsfot Corporation</p>
	</body>

5.滚动字幕<marquee>

<marquee>元素用来滚动显示文字或图片，通过设置其属性可以控制滚动方向和速度

<marquee>元素常用属性如下

width/height:设置字幕的宽度和高度。
direction:设置字幕的滚动方向，可以为left、right、up、down
scrollamount:设置字幕的滚动速度，值越大，滚动速度越快
bgcolor：设置字幕的背景色

	<body>
	<marquee>默认滚动字幕</marquee><br />
	<marquee direction="right">
		<img src="1.jpg" width="120" height="120">
		<img src="2.jpg" width="120" height="120">
		<img src="3.jpg" width="120" height="120">
		<img src="4.jpg" width="120" height="120">
		<img src="5.jpg" width="120" height="120">
	</marquee>
	</body>

小型案例实训

<body>
	课程介绍：
	<ul>
		<li><a href="#1">平面广告设计</a></li>
		<li><a href="#2">网页设计与制作</a></li>
		<li><a href="#3">Flash互动广告动画设计</a></li>
		<li><a href="#4">用户界面(UI)设计</a></li>
		<li><a href="#5">Javascript与JQuery网页特效</a></li>
	</ul>
	<h3 id="1">平面广告设计</h3>
	<p>课程涵盖ps图像处理、Illustrator 图形设计、平面广告创意设计、字体设计与标记设计。</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h3 id="2">网页设计与制作</h3>
	<p>课程涵盖DIV+CSS实现Web标准布局、Dreamweaver 快速网页建设、网页格式构图与设计技巧、网页配色理论与技巧</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h3 id="3">Flash互动广告动画设计</h3>
	<p>课程涵盖Flash动画基础、Flash高级动画、Flash互动广告设计、Flash商业网站设计</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h3 id="4">用户页面UI设计</h3>
	<p>课程涵盖实用美术基础、手绘基础造型、图标设计与实战演练、界面设计与实战演练</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<h3 id="5">Javascript与JQuery网页特效</h3>
	<p>课程涵盖Javascript编程基础、Javascript网页特效制作、JQuery编程基础、JQuery网页特效制作</p>
	<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
	<a href="01.html"><img src="1.png"/></a>
	</body>

F2022697486

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
超链接及HTML5媒体元素

默认情况下，超链接的目标页面在当前窗口打开，可以通过target属性实现在新窗口打开网页。target属性值可以为_self _blank _top _parent。在a标签中href属性设置定值，给出另一个文件的相对路径+#id值就能完成。在HTML中提供了三种路径：绝对路径、相对路径、根路径。_parent 目标窗口会在当前框架的上一层打开。在01_Index.html中设置锚点链接。在02_index.html中设置锚点。_top目标窗口会在顶层框架中打开。_self 是在当前窗口打开。
复制链接

扫一扫