HTML——多媒体语义化标签

最新推荐文章于 2024-05-14 21:28:28 发布
最新推荐文章于 2024-05-14 21:28:28 发布
阅读量546 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Alyson_jm/article/details/113874186
版权

文章目录

标题标签

<h1>至<h6>是标题标签，由1-6标题逐渐降级。

属性

  • align 对齐方式
    • left：居左对齐
    • center：居中对齐
    • right：居右对齐

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
</body>
</html>

效果:

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题

段落标签

HTML的标签被分为文本级标签和容器级标签,

  • 文本级标签只能存放文字、图片、表单等元素（a 标签里不能放a和input）。
p,span,a,b,i,u,em
  • 容器级标签可以放任何东西。
div,h系列,li,dt,dd
1、水平线标签
<hr />

在视觉上用水平线将文档分隔开来

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    段落1
    <hr />   
    段落2
</body>
</html>

效果

段落1

段落2

属性

属性名说明值
align设置线条放置位置left,right,center
size设置线条粗细，单位为像素默认值为2
width设置线条长度绝对值（500）或者相对值（70%）
color线条颜色
noshade不要阴影，设定线条为平面显示没有这个属性则表明线条具阴影或立体
换行标签
<br />

给某段文本强制换行。

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    落霞与孤鹜齐飞<br />秋水共长天一色
</body>
</html>

效果
落霞与孤鹜齐飞
秋水共长天一色

因为HTML 的空白折叠现象(HTML 的文字之间，如果有空格、换行或Tab都将被折叠成一个空格显示),我们只能使用<br />来强制换行。

div 与 span
  • div:把标签的内容分隔为独立的区块,单独占据一行
  • span:把标签的内容分隔为独立的区块,不换行

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>div 块1</div>
    <div>div 块2</div>
    <span>span 块1</span>
    <span>span 块2</span>
</body>
</html>

效果

div 块1
div 块2
span 块1 span 块2

区别

标签是否换行语义区别
div
span
  1. div 换行，span 不换行
  2. div 是一个容器级标签，里面什么都可以放。span 是一个文本级标签，里面只能放文字、图片、表单元素。
内容居中标签
<center></center>

center 标签里面的内容，都会居于浏览器的中间。
到了HTML5里面，center标签不建议使用，建议使用css布局来实现。

预定义（格式化）标签
<pre></pre>

保留标签内部的所有空白字符（空格，换行符），原封不动的输出结果（告诉浏览器不要忽略空格和空行）

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <pre>
        落霞与孤鹜齐飞
        秋水共长天一色
    </pre>
</body>
</html>

效果

    落霞与孤鹜齐飞
    秋水共长天一色

HTML 中元素的嵌套关系

  1. 块元素可以包含内联元素或者块元素，但内联元素不能包含块元素，只能包含其它内联元素
  2. 块级元素不能放在P里面
  3. 有几个特殊的块元素只能包含内联元素，不能包含块元素。

h1,h2,h3,h4,h5,h6,p,dt

  1. 块元素与块元素并列，内联元素与内联元素并列
Alyson_jm
关注
专栏目录
HTML 基础标签——多媒体标签＜img＞、＜object＞ 与 ＜embed＞
Allen-
11-01 450
在现代网页设计中，多媒体内容的使用变得越来越重要，因为它能够有效增强用户体验、吸引注意力并传达信息。HTML 提供了一系列多媒体标签，允许开发者在网页中嵌入图像、音频、视频以及其他外部资源。本文将详细介绍常用的多媒体标签，包括 ``、`` 和 `` 标签，阐述它们的用途、属性、使用示例和注意事项。
HTML5——HTML5多媒体标签
流楚丶格念的博客
07-15 4952
多媒体标签 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体 embed（会使用） embed可以用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径或绝对路径。 因为兼容性问题，我们这里只讲解 插入网络视频， 后面H5会讲解 audio 和video 视频多媒体。 <embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIw
H5多媒体标签
ayhg1的博客
06-04 474
H5多媒体标签 在 HTML5 之前，如果想在网页上播放音频和视频，则需要安装第三方插件，常用的是 Flash 。使用插件有以下几方面缺点：第一，比较繁琐；第二，容易出现安全性问题；第三，大部分情况下只能在计算机上使用。传统的HTML在播放 HTML5 DOM 为 和 元素提供了方法、属性和事件。这些方法、属性和事件允许使用 JavaScript 来操作 和 元素。下面对这两个标签分别讲解。 audio标签（音频播放） 本标签主要在页面中加载音频，进行播放，但是播放格式是有限制的。如下表：
html多媒体标签
dayexiaofan的博客
01-14 1615
三种多媒体标签的使用 embed：标签定义嵌入的内容 audio：播放音频 video：播放视频 多媒体embed embed可以可以用来插入各种多媒体，格式可以是Midi、Wav、AIFF、AU、MP3等等。url为音频或视频文件及其路径，可以是相对路径也可以是绝对路径。 因为兼容性问题，我们这里只讲解插入网络视频，下面会讲到audio和video视频多媒体。 &amp;lt;embed src=&quot;...
HTML之多媒体标签
lzsan_的博客
04-11 361
<video> 属性; src 视频播放地址 muted 静音 controls 视频播放器的控制条 autoplay 自动播放(google浏览器禁用了) loop 循环播放 preload: 缓冲视频文件，没有设置autoplay才会有效。 none就是不缓冲； metadata 缓冲视频文件的元数据 ；auto 缓冲整个视频文件。 poster : 视频封面图片。 里面的p标签当视频无法加载时才显示 <video src="https://haokan.b
html5新增标签——新增语义化标签、新增表单控件 、多媒体
ranran0306的博客
03-14 1279
1、html5 HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。 2、 新增语义化标签 块元素：1、<header></header> 2、<nav></nav> 3、<sect...
HTML5的新特性——语义化标签、多媒体标签（video、audio）、input类型、表单属性
qq_43623147的博客
12-15 689
HTML5新增的语义化标签 <header>：头部标签 <nav>：导航标签 <article>：内容标签 <setion>：定义文档某个区域 <aside>：侧边栏标签 <footer>：尾部标签 注意： 这种语义化标准主要是针对搜索引擎的 这些新标签页面中可以使用多次 在IE9，需要把这些元素转换为块级元素 移动端更喜欢使用这些标签 HTML5新增的多媒体标签 新增的多媒体标签主要包含两个： 音频：&l.
html5语义化标签 加粗,html5标签 H5标签
weixin_32868705的博客
05-31 683
html>h5文本元素1.文本元素2.加粗文字 b 3.倾斜文字 i 4.删除文字 del 5.加粗文字2 strong 6.安全换行 wbr~~~7.强调 倾斜元素 em 8.删除线2 s元素9998 9.下划线 u 10.下划线2 ins元素 11.小号字体small元素 12.下标 sub：CH4COOH ; 上标sup：20平方米=20m213.倾斜 dfn 14.代表缩写 并没...
HTML5新增特性——新的多媒体标签
weixin_47481102的博客
06-15 465
新增的多媒体标签主要包含两个：使用他们可以很方便的在页面中嵌入音频和视频，而不是去使用flash和其他浏览器插件。HTML5在不适用插件的情况下，也可以原生的支持视频格式文件的播放，当然，支持的格式是有限的。当前元素支持三种视频格式：尽量使用MP4格式YES从Firefox21版本开始Linux系统从Firefox30开始YES从Opera25版开始语法：preload（预加载）auto（预先加载视频）none（不应加载视频） 2.音频 当前元素支持三种音频...
关于HTML的多媒体标签
drinkingcode
10-10 950
代码示例如下： ===================================================               多媒体标签         bgsound: 背景音乐  embed: 播放多媒体文件. marquee: 移动 属性：direction 移动目标方向 left,right ,up,down ,up，
Python：自动解包
WebHub--Facilitating Web Development
08-04 201
[flash=300,300]http://player.youku.com/player.php/sid/XNzQ2OTMyMzIw/v.swf[/flash]
【HTML 基础】多媒体标签
好久不见的流星
02-02 939
以上是一些基本的 HTML 多媒体标签，通过它们，你可以在网页中嵌入音频、视频、其他网页，甚至实现动态图形的绘制。这些标签提供了极大的灵活性，使得开发者能够创建更为生动和交互的用户体验。在实际应用中，结合 CSS 和 JavaScript，你可以进一步掌握多媒体标签的强大功能，为用户提供更出色的网页体验。
HTML 常用的多媒体标签
LAin的博客
11-23 2490
1.<video> 标签 1）<video> 标签：块级标签，用于放置视频。 2）src 属性——视频文件网址。 width、height 属性——播放器宽、高，单位像素。 poster 属性——封面图片URL。 preload 属性——规定是否在页面加载后载入视频。如果设置了 autoplay 属性，则忽略该属性。（auto - 当页面加载后载入整个视频、meta - 当页面加载后只载入元数据、none - 当页...
《HTML标准》解读：详解语义类标签
weixin_44384265的博客
11-21 521
本文主要基于《HTML标准》4.3-4.5节讲解HTML的语义类标签，主要包括区域类标签、组合内容类标签、文本级标签。
html语义化标签
abc630727719的博客
03-20 129
语义化标签不要在意它的显示效果，要注重它的语义 浏览器在解析网页时，会对不符合规范的元素进行修正 h1-h6标题标签 h1标签最大，h6标签最小 一般一个网页只设置一个h1标签 通常我们只会使用到一级标题到三级标题<h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题...
HTML常用标签-多媒体标签（图片、音频、视频）
最新发布
weixin_44201223的博客
05-14 448
图片标签 音频标签 视频标签
HTML-多媒体标签
小石头
02-19 4268
HTML-多媒体标签
详解HTML-04-语义化标签
东东爱编码博客
04-19 163
文章目录一、区块标签1. HTML5区块标签2. 一些常见的语义化标签 一、区块标签 以前我们会借助div标签来分割文档区块，为了区分每个div的功能，会借助div标签的class属性 1. HTML5区块标签 2. 一些常见的语义化标签 span标签 span标签是文本中的“区块”标签，本身没有任何特殊的显示效果，可以结合CSS来丰富样式 <b>、<u>、<i>标签充满浓浓的“样式”意味，已被CSS替代，但是在网页中也可以表示需要强调的文本 <s
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值