<h1/2/3/4/5/6>标题
从大h1
到小h6
,块元素,有6级标题。是一种标题类语义标签,内置了字体、边距样式。
- 合理使用h标签,主要用于标题,不要为了加粗效果而随意使用。
-
h1
用于最重要的标题内容,会被搜索引擎使用,用得太多影响SEO效果。
<h1 align="center">标题标签h1/2/3/4/5/6:一级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
属性 | 描述 | 值 |
---|---|---|
align | 标题的水平对齐方式 | left、center、right |
<p>段落元素
段落元素<p>内容</p>
(**paragraph **/ˈpærəɡrɑːf/ 段落、分段)块元素,表示一个内容段落,前后自动换行,段落之间会有间隙(默认margin上、下=1em),比<br>
的行间距更大。
<p align="left">段落文字1</p>
<p align="center">段落文字2<br/>012</p>
普通文字1,用br换行<br>普通文字1
<br>换行
换行元素(Break):<br>
,单标签,默认行间距。HTML中不识别输入的回车换行,需用<br>
标签换行。
<hr>水平线
水平线元素:<hr>
,单标签,有颜色color
、长度width
、粗细size
、对齐align
等属性,CSS中可用border设置样式。
<br>
<hr width="80%" color="green" align="left" size=1 />
<hr width="80%" color="green" />
<hr width="300px" color="red" size="3" />
属性 | 描述 | 值 |
---|---|---|
color | 线颜色 | 颜色 |
width | 宽度 | 像素、百分比 |
size | 线粗细 | 整数,像素 |
align | 水平对齐方式, | left、center、right |
<ul-li/ol-li>列表标签
列表都是块元素,li
中可以放任何东西,常用来组织列表相关内容,如商品列表、树形结构、导航等。
-
无序列表
<ul><li></li></ul>
:unordered list,li
为列表项,属性type
可定义符号样式,默认disc(实心圆)。 -
有序列表
<ol><li></li></ol>
:ordered list,li
为列表项,属性type
可定义排序样式,默认1(数字)。
属性 | 描述 | 值/示例 |
---|---|---|
type | 序号类型 |
无序列表:disc =实心圆、square =方块、circle =空心圆有序列表: 1 =数字、a/A =字母、i/I =阿拉伯数字 |
start | 有序列表:序号开始的值,默认1 | <ol type="1" start="4"> |
reversed | 有序列表:倒序排列 | <ol type="1" reversed > |
<li> 的属性value
|
有序列表:设置序号值,会影响后面 | <li type="I" value="5"> |
<ul type="disc"> <!-- type可定义符号样式,默认disc=实心圆,可自定义样式取代-->
<li type="square">l1 <!--square=方块-->
<ul><li>l1的嵌套子节点</li></ul>
</li>
<li type="circle">l2</li> <!--circle=空心圆-->
<li>l3</li>
</ul>
<ol type="1"> <!-- type可定义排序样式,默认1=数字-->
<li type="a">l1</li> <!-- a=小写字母排序-->
<li type="A">l2</li> <!-- A=大写字母排序-->
<li type="i">l3</li> <!-- i=小写阿拉伯字母排序-->
<li type="I">l4</li> <!-- I=大写阿拉伯字母排序-->
<li>l5</li>
</ol>
- 无序标签、有序标签可以多层(相互)嵌套。
- 列表项中的内容可以是文本,也可以是其他标签,如图片img、a标签。
- 使用场景:新闻列表,导航按钮。
- list-style-type:在css中设置列表符号样式,如
ul li{list-style-type:disc} ``ol li{}
,枚举值-菜鸟教程。
- disc、circle...:实心、空心符号
- decimal...:数字
⌨️快捷键(VSCode):
标签名*数量>子标签名*数量
,快速输入多组父子标签,加大括号则为标签中内容。ul>li*3
:快速输入ul标签+3组子li标签。
<dl/dt/dd>语义化描述列表
作用同<ul/li>
类似,通常用于展示词汇表或者元数据 (键 - 值对列表),块元素。JD首页的分类导航就是用的<dl/dt/dd>
结构。
元素/属性 | 描述 |
---|---|
<dl> | description list,描述列表,包含多组<dt> 、<dd>
|
<dt> | description term( /tɜːrm/ 术语,项 )描述术语(标题),<dl> 的子元素 |
<dd> | description definition(/ˌdefɪˈnɪʃn/,定义)描述内容,<dl> 的子元素,放到<dl> 后面,用来描述<dt> 。默认样式左缩进:margin-inline-start: 40px
|
<dl>
<dt>人物简介:</dt>
<dd>一代诗仙</dd>
<dt>代表作:</dt>
<dd>仰天大笑出门去,下楼排队做核酸</dd>
</dl>
<blockquote>/<q>引用元素
语义化引用元素,代表其中的文字是引用内容。
元素/属性 | 描述 |
---|---|
<blockquote> 块元素 |
块级引用元素(quote /kwoʊt/ 引用、引文),默认会增加缩进,一般都会加上额外的自定义样式。 |
cite | (/saɪt/ 引用)标注引文相关资源的url地址或相关解释信息,但并不会显示 |
<q> 行内元素 |
行内引用行内元素,默认样式是用伪元素添加了引号“”
|
cite | 同上块引用 |
⚠️注意:默认样式不同浏览器不同,所以最好通过css统一样式。
<style>
blockquote {
font-size: 1rem;
color: #999;
border-left: .2rem solid #dfe2e5;
margin: 1rem 0;
padding: .25rem 0 .25rem 1rem;
}
</style>
<div>
<blockquote>
块引用blockquote文本<q>行内引用q</q>
</blockquote>
<q>行内引用q</q>
</div>
<span/font/b/i/u/del>文本元素
针对文本内容的常规元素。除了pre
是块元素,其他都是行内元素。文本标签一般会嵌套在<p>
标签中使用,实现不同语义/效果。
元素/属性 | 描述 | 值/示例 |
---|---|---|
<span> | ( /spæn/)无特定含义,是用来组织文档的行内元素(行内容器),外观取决于css | <span>span内容</span> |
<font> | 设置文本字体样式的文本元素,文本在标签里 | |
face | 字体类型,值为字体名称 | face="楷体" |
|
字体大小,从 1 到 7 的数字,默认3。不同于字号,已废弃不推荐使用。 | 推荐css代替 |
color | 字体颜色 | 颜色 |
<pre>块元素 | 预格式的文本(predefine /ˈpriːdɪˈfaɪn/ 预定义),保留空格、换行符,默认等宽字体。只能包含文本/行内元素,不能再包含其他块元素了。 | |
<b> |
粗体样式(Bold),单纯样式效果 | |
<strong> | 粗体效果,加重语气,更强调语义,语义在搜索引擎、语音阅读时有效 | |
<i> |
_斜体_样式,单纯样式效果 | |
<em> | _斜体_效果(emphasis/ˈemfəsɪs/强调),着重语气,和i相比强调的语义 | |
<u> |
下划线 | |
<del> | 删除线 | |
<sub> | 下标(字体小) | |
<sup> | 上标(字体小) |
<span style="color:blue">span内容</span>
<font size="4" color="red" face="楷体">font标签内容</font>
<pre style="color:yellowgreen;font-family:'楷体'; font-size: 18px;">pre字体内容 ,
支持回车和空 格</pre>
<b>粗体b</b>
<strong>粗体strong</strong>
<i>斜体i</i>
<em>em标签</em>
<u>下划线u</u>
<del>删除线del</del>
<sub>下标sub</sub>
<sup>上标sup</sup>
<abbr/address/code...>语义元素
表示特点语义的元素,默认提供了一些样式(吃藕丑)。
元素/属性 | 描述 |
---|---|
<abbr>行内元素 | 缩略语或缩写(abbreviation /əˌbriːviˈeɪʃn/ 缩略),默认样式:下划线(虚线) |
title | 用title解释其含义,鼠标提示显示 |
<address>块元素 | 联系方式的元素,如地址、URL,邮箱等。默认样式:斜体+块元素 |
<code>行内元素 | 计算机代码,默认样式:等宽字体 |
<var>行内元素 | 变量名称:数学表达式或编程中的变量,默认样式:斜体 |
<kbd>行内元素 | 键盘、用户输入,默认样式:monotype 字体 |
<samp>行内元素 | 计算机程序输出,(sample,样本)默认样式:monotype 字体 |
<time>行内元素,IE???? | 时间日期,用于根据不同的语言输出不同的格式 |
datetime | 合法的日期时间值 |
<div >
<p>我们使用 <abbr title="超文本标记语言(Hyper text Markup Language)">HTML(abbr缩写)</abbr> 来组织网页文档。</p>
<p>欢迎光临怡红院!联系方式(address):<address>长安南路 <a href="">发送邮件</a></address></p>
<code>code代码</code>
<var>var变量</var>
<kbd>键盘kbd </kbd><kbd>Fn</kbd>+<kbd>R</kbd>
<samp>计算机输出samp</samp>
<time datetime="2016-01-20">2016 年 1 月 20 日</time>
</div>
<div>及语义<header/footer...>
<div>
是一个容器元素,是一个“纯粹的”、“无任何语义的”容器块元素,用来把不同的内容分区管理。本身无任何表现效果,配合css使用。
在HTML5中增加了和div
相同作用的语义化块布局元素标签,这些元素定义了一个大概的语义范围,并没有一个严格的界限,同样也么有任何样式。语义块元素可读性更好,也更有利于SEO。
元素/属性 | 描述 |
---|---|
<div> | 块级无语义元素(division 分区) |
|
内部内容的对齐方式,已废弃 |
<header>IE9 | 页眉:文档头部相关区域 |
<nav> | 导航栏:主导航相关区域 |
<footer> | 页脚:底部相关区域,如页面下面的版权信息、文章后面的申明信息等 |
<aside> | 侧边栏:页面内容以外的区域,如侧边栏、呼出框等 |
<main> | 主内容:文档主内容区域 |
<article> | 文章,表示一个独立的、可重复的内容块,如一篇博客、一条评论、一篇帖子 |
<section> |
段落部件,文档中的章节、页眉、页脚,把article 分为多个section
|
⚠️注意:语义化块元素在_一些古老_的浏览器存在兼容性问题,如IE8。
<h2>div布局</h2>
<div style="height: 280px;">
<div class="header">div class="header" </div>
<div class="nav">div class="nav"</div>
<div style="height: calc(100% - 140px);">
<div class="left">div class="left"</div>
<div class="right">div class="right"</div>
</div>
<div class="footer">div class="footer"</div>
</div>
<h2>语义布局</h2>
<div style="height: 280px;">
<header class="header">header class="header" </header>
<nav class="nav">div class="nav"</nav>
<main style="height: calc(100% - 140px);">
<aside class="left">aside class="left"</aside>
<article class="right">article class="right"</article>
</main>
<footer class="footer">footer class="footer"</footer>
</div>
<!--样式-->
<style>
.header,
.footer {
background-color: antiquewhite;
height: 40px;
text-align: center;
line-height: 40px;
float: none;
}
.nav {
background-color: aquamarine;
height: 40px;
line-height: 40px;
text-align: center;
}
.left {
background-color: rgb(201, 223, 215);
float: left;
width: 150px;
height: 100%;
text-align: center;
}
.right {
background-color: rgb(238, 252, 206);
float: left;
height: 100%;
width: calc(100% - 150px);
text-align: center;
}
</style>
<a>超链接
元素是最常用的超链接标签,主要属性是href
这是网络互联的重要特性。行内元素,不会换行。双标签:标签内可以放其他内容,如文字、图片。
属性 | 描述 | 值/备注 |
---|---|---|
href | 超链接(hypertext reference),要跳转的目标链接地址,除了http地址,还支持页面内部的锚点跳转。 | ???? 相对路径或网络路径,资源路径。 ???? 锚点/文档片段:页面内部跳转,用 # 号标识, 作为文档片段使用,跟在url后面● href="#",或不设置,跳转到头部 ● 用 <a> 标签的name 属性作为锚点,href="#name" :http://url#id ● 用其他标签的 id 属性作为锚点,href="#id" :http://url#name ???? 电子邮件连接:href="mailto:URL" ???? 电话:href="tel:号码" |
name | 元素名称,可作为锚点 | 设置锚点<a name="p1"/> ,跳转到锚点<a href="#p1"/>
|
target | 告诉浏览器用什么方式来打开目标页面 | - _self:在同一个网页中显示(默认值) - _blank:在新的窗口中打开。 - _parent:在父窗口中显示;_top:在*窗口中显示。 |
rel | 与目标对象的关系 | |
download | 指示这是一个下载地址 | 值为本地保存文件名 |
⚠️当不希望a标签执行跳转,用来执行其onclick事件时,需设置
href="javascript:void(0)"
,申明不执行跳转。
<a href="http://www.baidu.com" target="_self" title="鼠标悬停提示的内容">显示的内容=a标签=百度</a>
<a href="../ftest/html.md">相对地址</a>
<!-- 页面内#锚点跳转 -->
<a href="#">默认#-跳转到头部</a>
<a href="#m1">a标签的name属性作为锚点</a> <!--a name="m1"-->
<a href="#hp">任意元素的id属性作为锚点</a>
<a href="javascript:void(0)">不执行a标签跳转</a>
当a
标签设置了href
属性后,就是一个可以点击操作的超链接了,鼠标样式为小手形状(pointer),同时有三种显示模式(默认样式),都可以通过css样式(伪元素选择器)调整。
- 未点击时,显示为蓝色字体+下划线
- 点击访问过,显示为紫色字体+下划线
- 鼠标点击链接时,显示为红色字体+下划线
<a>
元素标签的样式应该遵循上面的基本逻辑,基本原则就是让人容易分辨出这是一个超链接。
02、<table>表格
<table>是一个嵌套组合的复合元素,块元素,一个表格table,有多个行,每行有多个单元格组成,常用于展示集合数据。<table>
包含多种特有的子元素,构成表格的各个部分。
表格元素结构/顺序:<table>
►<caption>
►<colgroup>
►<thead>
►<tbody>/<tr>
►<tfoot>
元素/属性 | 描述 | 值/备注 |
---|---|---|
<table> | 定义表格元素 | |
border | 表格外边框粗细,>=1,会同时开启单元格边框(1),通过css合并 | 像素 |
align | 整个表格相对于父容器的对齐方式 | right、center、left |
width、height | 表格宽度、高度,table/tr/td/th都支持 | 像素、百分比 |
bgcolor | 背景色,table/tr/td/th都支持 | bgcolor="#F5F5F5" |
<tr> |
表格行(table row),包含多个th或td | |
align | 行内(单元格)内容的水平对齐方式,默认left | right、center、left |
valign | vertical,垂直对齐默认middle,对应的css属性为vertical-align
|
top、middle、bottom |
rowspan | 行(水平)单元格合并,合并下面的单元格,需去掉对应的单元格 | 合并单元格的数量 |
<td> |
基本单元格(table data cell),<tr> 的子元素 |
|
align | 单元格内容的对齐方式 | right、center、left |
width | 单元格宽度,一列中多个高度设置则取最大值。 | |
colspan | 列(垂直)单元格合并,合并右边的单元,需去掉对应的单元格 | 合并单元格的数量 |
其他语义化子元素 | 让表格结构更清晰,也更容易进行样式管理 | |
<thead> |
表头,1个可选,包0或多个<tr> 元素 |
|
<th> |
表头单元格(table header cell),同<td> ,默认样式:居中、加粗 |
|
scope | 表头类型,(/skoʊp/范围)row=行表头,col=列表头。 | 便于阅读器理解表格 |
<caption> | 表格标题,1个可选,可用css的caption-side设置位置 | |
<colgroup> |
表格列分组,0个或多,包含多个<col> 。目的是统一列样式管理 |
|
span | 横跨的列数,还有width、class、style用于管列样式 | css支持的样式好像不多 |
<col>
|
列:<colgroup> 子元素,并不能创建列,只是管理样式 |
|
<tbody> |
表格主体数据区域,零个或多个 <tbody> ,包含多个<tr> 元素 |
DOM中一直都会有的 |
<tfoot> | 汇总行,1个可选,包含0 或多个<tr> 元素 |
⌨️快捷键(VSCode):
多组标签文本输入:标签名*数量{文本内容}
,后面加上花括号,自动补充标签内容。如table>tr*2>td*4{单元格}
<table border="2" width="500px" bgcolor="#F5F5F5" align="center"
style="border-collapse:collapse;font-size: large;">
<colgroup>
<col>
<col width="30%" style="background-color: azure;">
<col class="col" span="2">
</colgroup>
<thead height="40px">
<tr>
<th width="30%">name</th>
<th>age</th>
<th colspan="2">birthday</th>
</tr>
</thead>
<tr align="center"> <!--数据行-->
<td align="right" bgcolor="lightblue" rowspan="2">zhangsan</td>
<td>22</td>
<td colspan="2">2000-12-12</td>
</tr>
<tr align="left"> <!--数据行-->
<td align="center">23</td>
<td>2000-12-12</td>
<td>多了一格</td>
</tr>
</table>
<style>
.col{
border: 2px solid red;
width: 200px;
}
</style>
03、多媒体与嵌入
像<img>
和<video>
这样的元素被称之为替换元素,因为这些元素的内容和尺寸由外部资源所定义,而不是元素自身。
<img>图片
图片标签<img>(image)单标签、行内元素,最核心属性src
指向图片地址,可以是网络路径、文件地址。行内元素,不会自动换行,可嵌套在a标签
里面,实现图片点击跳转效果。
元素/属性 | 描述 | 值/备注 |
---|---|---|
src | 图片资源的地址,支持网络路径、文件路径。 | 资源路径说明 |
alt | 图片无效时的占位文字,建议填写有意义内容(或空),阅读器会读 | 这是一个充满人性化的属性! |
height、width | 高宽,只设置一个属性会自动等比缩放,所以一般设置一个即可 | 尺寸,图片无效时尺寸也无效了 |
srcset | 候选图像:图像url 宽度w/像素密度x ,多个逗号分割,优先于src。根据屏幕密度,和 sizes 的设置来选择(下载)图像。 |
配合sizes 实现响应式图片 |
sizes | 资源的大小:媒体条件 尺寸值 ,多个逗号隔开。基于媒体查询选择最合适图像(srcset)及设置图像显示大小 |
sizes="(max-width: 600px) 200px, 50vw |
边框粗细,已废弃,由css的border代替 | 像素 | |
相对于父容器内的对齐排列方式。已废弃 | top、bottom、middle、left、right |
新的srcset
、sizes
属性可用来更好的实现响应式图片,以适应不同分辨率的设备。不过老旧的浏览器并不支持,所以仍需保留src
,以便更好的兼容。
⚠️注意:在调试srcset、sizes的时候,img会缓存图片,手动调整浏览器窗口大小并不会立即生效,需清除缓存(或禁用缓存)。而
<picture>
不会有这个困扰!
<img src="../res/sk (13).png" width="50px" title="鼠标悬停显示文字" border=3 ></img>
<img src="" alt="图片不存在" />
<img src="../res/sk (19).png" align="left" width="50px" height="40px" />
<a href="http://www.baidu.com"><img src="../res/sk (2).png" height="60px" /></a>
<img src="../static/images/128.png"
srcset="../static/images/128.png 350w,
../static/images/256.png 750w,
../static/images/512.png 900w,
../static/images/1024.png 1000w"
sizes="(max-width: 320px) 100px,
(max-width: 450px) 200px,
(max-width: 700px) 300px,
(max-width: 800px) 400px,
(max-width: 900px) 500px,
1024px">
<img srcset="/res/head-48.gif 300w, /res/qq.png 600w"
sizes="(min-width: 500px) 600px,300px" src="/res/head-48.gif" alt="">
<picture>现代图片
<picture>图片,由多个媒体资源<source>
组成,<picture>
元素标签内部依然需要包含一个<img>
元素,<picture>
不支持或没有匹配到合适的<source>
时,则会显示内部<img>
。
元素/属性 | 描述 | |
---|---|---|
<source> |
媒体资源 |
<picture> 的子元素 |
srcset | 资源url | |
media | 媒体查询 |
media="(min-width: 800px)" 大于800px时命中 |
type | 资源的MIME 类型 | type="image/svg+xml" |
在图片格式上,推荐多用新的图形,如.svg
、.webp
、.jpeg
,可以在有高质量的同时有较低的文件大小。
<picture>
<source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
<source media="(min-width: 800px)" srcset="elva-800w.jpg">
<img src="elva-800w.jpg" alt="">
</picture>
<picture>
<source srcset="/res/qq-128.png" media="(min-width: 500px)">
<img src="/res/head-48.gif" alt="">
</picture>
<figure>内容块语义元素
为了更好的展示图片内容,可使用 HTML5 的 <figure> 和 <figcaption> 元素,专门用来展示图形内容的语义化容器元素,不过本身并没有什么特别的样式,需css。
元素/属性 | 描述 |
---|---|
<figure>块元素 | 可附标题内容元素(figure /ˈfɪɡə(r)/ 图形),代表一段独立的内容。不一定要是一张图片,可以是几张图片、一段代码、音视频、方程、表格或别的。默认样式:缩进 |
<figcaption>块元素 | 描述了 <figure> 元素的说明/标题(caption /ˈkæpʃ(ə)n/ 说明、字幕、标题) |
<figure>
<img src="https://file03.16sucai.com/2017/1100/16sucai_P591F9E071.JPG" alt="晚霞">
<figcaption>洗一洗,那是我逝去的青春!</figcaption>
</figure>
<style>
figure{
display: flex;
flex-flow: column;
max-width: 250px;
}
figure figcaption{
text-align: center;
background-color: #2221;
padding: 4px;
}
</style>
<video>视频/<audio>音频
元素/属性 | 描述 |
---|---|
<video> | 媒体播放器,除了属性,还有很多JS方法事件用于视频播放控制 |
src | 视频资源url,MP3 (音频) 和 MP4/H.264 (视频) 是被广泛支持的两种格式,MP4专利到2027 |
controls | 启用视频控制功能 |
width、height | 宽高 |
autoplay | 启用自动播放,一般不建议使用 |
loop | 启用循环播放( /luːp/ 循环) |
muted | 开启静音(muted /ˈmjuːtɪd/) |
poster | 默认显示的海报图片URL(/ˈpəʊstə(r)/ 海报) |
<source> |
媒体资源,代替src,可以放多个,提升浏览器对媒体格式的兼容性。<video> 、<audio> 、<picture> 的子元素 |
<track> |
时序字幕,<video> 、<audio> 的子元素 |
标签内的内容 | 当浏览器不支持<video> 时会显示,降级方案 |
<audio> | 音频播放器( /ˈɔːdiəʊ/ ) |
同<video>
|
和<video> 基本相同,除了没有width、height、poster属性 |
<video width="300px" autoplay controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<audio controls src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/viper.mp3"></audio>
<iframe>内联框架
<iframe>内联框架,嵌入一个完整的HTML页面,iframe 元素会创建其文档的内联框架,有自己的会话历史记录 (session history)和DOM 树。<iframe>
嵌入的文档会被包含在 window.frames,通过脚本可以访问其contentDocument。同时在框架内部,脚本可以通过 window.parent 引用父窗口对象。
元素/属性 | 描述 |
---|---|
<iframe> | 内联框架 |
src | url地址 |
height/width | 高度、宽度(默认300px) |
frameborder | 是否显示边框,1(yes),0(no),推荐用css设置border |
sandbox | 安全性相关设置,支持很多参数 |
srcdoc | 可以被渲染到iframe的HTML 代码 |
name | 名称,window.frames.name
|
<frame> |
HTML 4 中用来定义窗口(框架),H5已不支持 |
<iframe>
的上下级可以相互访问,这的确很方便,但这同样非常危险,因为你的网页可被人任何人嵌入。脚本访问框架内容必须遵守同源策略(协议、端口、IP地址(域名)都相同),并且无法访问非同源的 window 对象的几乎所有属性。跨域的<iframe>
通信可以通过 Worker.postMessage() 来实现。
⚠️因此被嵌入,和嵌入其他网页,都需要格外谨慎小心,注重安全防范。
- 使用HTTPS。
- 使用 sandbox 属性控制权限。
- 配置 CSP 指令,在meta中配置CSP 安全策略。
- 需重视安全问题,只有在必要时嵌入。
<embed/object> 过时的嵌入元素
<embed>
和<object>
元素用来嵌入多种外部内容的通用嵌入工具,如 Java 小程序、Flash、PDF、浏览器插件,甚至视频,SVG 和图像等类型。现代的WEB技术已比较成熟了,就像IE一样,插件也将逐步称为历史。
元素/属性 | 描述 |
---|---|
<embed> 单标签 | ( embed /ɪmˈbed/ 嵌入)将外部内容嵌入文档 |
src | 资源url地址 |
type | 资源的 MIME 类型 |
height/width | 高度、宽度 |
<object> | 嵌入一个外部资源 |
data | 资源url地址 |
type | 资源的 MIME 类型 |
height/width | 高度、宽度 |
<object type="application/pdf" width="500" height="800" data="https://mdn.github.io/learning-area/html/multimedia-and-embedding/other-embedding-technologies/mypdf.pdf">
<p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>
©️版权申明:版权所有@安木夕,本文内容仅供学习,欢迎指正、交流,转载请注明出处!原文编辑地址