前端学习之HTML基础（二）

Autumn_Hibiscus

于 2022-07-08 11:32:45 发布

阅读量426

点赞数 2

文章标签：前端 html 学习

本文链接：https://blog.csdn.net/queen_is_king/article/details/125671440

版权

提示：接着前面的前端学习之HTML基础（一）

文章目录

前言
一、多媒体
- 1、嵌入视频
- 2、嵌入音频
二、框架
总结

前言

提示：前面基本的HTML的大部分讲解其实最基础的已经快结束了，这一部分就是扫个尾

这一节，我们接着上一节最后的表单继续学习前端开发的HTML基础，友友们继续一起加油啊，冲冲冲！

提示：以下是本篇文章正文内容，下面案例可供参考

一、多媒体

1、嵌入视频

video 标签用于定义播放视频文件的标准，它支持三种视频格式,分别为Ogg、WebM和MPEG4。

语法：<video src="视频文件路径” controls="controls"></video>

src 属性用于设置视频文件的路径，controls属性用于为视频提供播放控件，这两个属性是video元素的基本属性。并且<video>和</video>之间还可以插入文字，用于在不支持video元素的浏览器中显示。

这里是一些其他属性：在这里插入图片描述

2、嵌入音频

audio 标签用于定义播放音频文件的标准，它支持三种音频格式，分别为Ogg、MP3和wav。

语法：< audio src="音频文件路径" controls="controls">< /audio>

src 属性用于设置音频文件的路径, controls属性用于为音频提供播放控件，这和video元素的属性非常相似。同样<audio>和</audio>之间也可以插入文字，用于不支持audio元素的浏览器显示。

另外：
为了使音、视频能够在各个浏览器中正常播放，往往需要提供多种格式的音、视频文件。在HTMILS中，运用soure元素可以为ndeo元素或audio元素提供多个备用文件。
语法（source元素添加视频的方法和音频类似，只需要把audio标签换成video标签即可）：

<audio controls="controls">
	<source src=" 音频文件地址”type="媒体文件类型/格式">
	<source src=" 音频文件地址”type="媒体文 件类型/格式">
	···
</audio>

source元素一般设置两个属性：

src:用于指定媒体文件的URL地址。
type:指定媒体文件的类型。

二、框架

框架结构是将两个或两个以上的网页组合起来，在同一个窗口中打开的网页结构，框架把一个网页分成几个独立的区域，每个区域为一个单独的HTML文件，显示时，每一个区域向一个单独的网页，可以有自己的滚动条，背景，标题等。

而目前，HTML5已经不使用frameset，这里就提一提frameset。又由于现在我们学习的是基础，现在我们只了解一种框架——浮动框架。

1、frameset框架

当包含两个或两个以上的html页面，称为frameset标签，称为：框架集。
frameset不能和body共存。

frameset中两个属性：

rows：由上到下，横向划分
clos：由左到右，竖向划分

rows = "20%,*"
<!-- *：通配符（当前横向划分，当前剩余的部分占整个的权重百分比！）-->
clos = "15%,*"

2、iframe浮动框架

2.1、浮动框架基础知识

浮动框架是一种较为特殊的框架，它是在浏览器窗口中嵌套的子窗口，整个页面并不一定是框架页面，但要包含一个框架窗口。

浮动框架通俗来说，是在一个页面嵌入一个或多个子页面。

<iframe>框架可以完全由设计者定义宽度和高度，并且可以放置在一个网页的任何位置，这极大地扩展了框架页面的应用范围。

<frameset>生成的框架结构是依赖上级空间尺寸的，它的宽度或者高度必须有一个和上级框架相同。而<iframe>浮动框架可以完全由指定宽度和高度决定。

语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高"></iframe>

src属性是iframe的必须属性，width和height这2个都是可选属性。

举个例子：

<!DOCTYPE html>
<html xmlns="https://www.gracg.com/user/user49778pHTuOF">
<head>
    <title></title>
</head>
<body>
    <div id="main">
        <h3>涂鸦王国</h3>
        <iframe src="https://www.gracg.com/user/user49778pHTuOF" width="400px" height="300px"></iframe>
    </div>
</body>
</html>

2.2、设置显示滚动条scrolling

对于浮动框架iframe的的滚动条，我们可以使用scrolling属性来控制。scrolling属性有3种情况：根据需要显示、总是显示和不显示。

语法：<iframe src="浮动框架的源文件" width="浮动框架的宽" height="浮动框架的高" scrolling="取值"></iframe>

auto：默认值，整个表格在浏览器页面中左对齐
yes：总是显示滚动条，即使页面内容不足以撑满框架范围，滚动条的位置也预留
no：在任何情况下都不显示滚动条

总结

这一次的博客是对上回的进行一个扫尾，也是HTML基础的结束，下面要加更的是HTML的进阶版内容，希望友友们一起继续学习、交流哎！

Autumn_Hibiscus

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习之HTML基础（二）

这一节，我们接着上一节最后的表单继续学习前端开发的HTML基础，友友们继续一起加油啊，冲冲冲！video 标签用于定义播放视频文件的标准，它支持三种视频格式,分别为Ogg、WebM和MPEG4。语法：这里是一些其他属性：audio 标签用于定义播放音频文件的标准，它支持三种音频格式，分别为Ogg、MP3和wav。语法：另外：为了使音、视频能够在各个浏览器中正常播放，往往需要提供多种格式的音、视频文件。在HTMILS中，运用soure元素可以为ndeo元素或audio元素提供多个备用文件。语法（sourc
复制链接

扫一扫