iframe
iframe
用于嵌套一个页面新开一个窗口,默认新开窗口高度50px宽度100px,它的src是支持相对路径的,它是一个容器元素,如果浏览器不支持<iframe>
,就会显示内部的子元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<iframe src="http://qq.com" frameborder="0"></iframe>
</body>
</html>
![3fa32f8db919ed34e22ec2c44931dc0b.png](https://i-blog.csdnimg.cn/blog_migrate/f82b945183ee9fa48834864069a0ddc4.png)
<iframe>
的属性如下。
allowfullscreen
:允许嵌入的网页全屏显示,需要全屏 API 的支持frameborder
:是否绘制边框,0
为不绘制,1
为绘制(默认值)。尽量少用这个属性,而是在 CSS 里面设置样式。src
:嵌入的网页的 URL。width
:显示区域的宽度。height
:显示区域的高度。sandbox
:设置嵌入的网页的权限。importance
:浏览器下载嵌入的网页的优先级,可以设置三个值。high
表示高优先级,low
表示低优先级,auto
表示由浏览器自行决定。name
:内嵌窗口的名称,可以用于<a>
、<form>
、<base>
的target
属性。referrerpolicy
:请求嵌入网页时,HTTP 请求的Referer
字段的设置。
iframe
与a
a的target属性可以在iframe里打开的,给iframe指定name属性为xxx,a的target=xxx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
iframe{
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<iframe name=xxx src="#" frameborder="0"></iframe>
<a target=xxx href="http://qq.com">QQ</a>
<a target=xxx href="http://baidu.com">百度</a>
</body>
</html>
当点击QQ时,a的链接就在iframe里打开
![975071341a77214bd8ce41d063623598.png](https://i-blog.csdnimg.cn/blog_migrate/482be0e3e2b0512d5dfe0988c3fb5f88.jpeg)
点击百度就在iframe里打开百度
![bb06153c5221d4a97e56a682d96c5321.png](https://i-blog.csdnimg.cn/blog_migrate/fcbd5358317096d8388db6ef913e9458.png)
a
链接通过<a>
标签表示,用户点击后,浏览器会跳转到指定的网址
<a href="http://qq.com">QQ</a>
,点击QQ后:
![5193c46b944cc8b0e43e3629d82510ed.png](https://img-blog.csdnimg.cn/img_convert/5193c46b944cc8b0e43e3629d82510ed.png)
<a>
标签内部不仅可以放置文字,也可以放置其他元素,比如段落、图像、多媒体等等。
<a>
标签有如下属性:
href
href
属性给出链接指向的网址。它的值是一个 URL 或者锚点。
上面已经给出了完整 URL 的例子,下面是锚点的例子。
<a href="#demo">示例</a>
上面代码中,href
属性的值是#
加上锚点名称。点击后,浏览器会自动滚动,停在当前页面里面demo
锚点所在的位置。
<a href="javascript:;"><a>
上面a链接点击后什么也不做!!!会在页面左下角显示javascript:;
title
title
属性给出链接的说明信息。鼠标悬停在链接上方时,浏览器会将这个属性的值,以提示块的形式显示出来。
<a
href="https://www.example.com/"
title="hello"
>示例</a>。
上面代码中,鼠标停留在链接上面,会出现文字提示hello
。
target
target
属性指定如何展示打开的链接。它可以是在指定的窗口打开,也可以在<iframe>
里面打开,上面已经说明过
target
属性的值也可以是以下四个关键字之一。
_self
:当前窗口打开,这是默认值。_blank
:新窗口打开。_parent
:上层窗口打开,这通常用于从父窗口打开的子窗口,或者<iframe>
里面的链接。如果当前窗口没有上层窗口,这个值等同于_self
。_top
:顶层窗口打开。如果当前窗口就是顶层窗口,这个值等同于_self
。
<a
href="https://qq.com"
target="_blank"
>示例链接</a>
上面代码点击后,浏览器会新建一个窗口,在该窗口打开链接,并且新窗口没有名字。
注意,使用target
属性的时候,最好跟rel="noreferrer"
一起使用,这样可以避免安全风险。
download
download
属性表明当前链接用于下载,而不是跳转到另一个 URL。
<a href="demo.txt" download>下载</a>
上面代码点击后,会出现下载对话框。
download
属性只在链接与网址同源时,才会生效。也就是说,链接应该与网址属于同一个网站。
如果download
属性设置了值,那么这个值就是下载的文件名。
<a
href="foo.exe"
download="bar.exe"
>点击下载</a>
上面代码中,下载文件的原始文件名是foo.exe
。点击后,下载对话框提示的文件名是bar.exe
。
注意,如果链接点击后,服务器的 HTTP 回应的头信息设置了Content-Disposition
字段,并且该字段的值与download
属性不一致,那么该字段优先,下载时将显示其设置的文件名。
download
属性还有一个用途,就是有些地址不是真实网址,而是数据网址,比如data:
开头的网址。这时,download
属性可以为虚拟网址指定下载的文件名。
<a href="data:,Hello%2C%20World!">点击</a>
上面链接点击后,会打开一个虚拟网页,上面显示Hello World!
。
<a
href="data:,Hello%2C%20World!"
download="hello.txt"
>点击</a>
上面链接点击后,下载的hello.txt
文件内容就是“Hello, World!”。
form
<form>
标签用来定义一个表单,所有表单内容放到这个容器元素之中,默认是GET请求,一般都用POST请求。
<form>
<!-- 各种表单控件-->
</form>
上面代码就是表单的基本形式。
下面是一个比较常见的例子。
<form action="https://example.com/api" method="post">
<label for="POST-name">用户名:</label>
<input id="POST-name" type="text" name="user">
<input type="submit" value="提交">
</form>
![2d52409ff77568a7f2d7ddd45477f0c0.png](https://i-blog.csdnimg.cn/blog_migrate/04fe722c9ae3afc7f950961d598d2a87.png)
上面代码就是一个表单,一共包含三个控件:一个<label>
标签,一个文本输入框,一个提交按钮。其中,文本输入框的name
属性是user
,表示将向服务器发送一个键名为user
的键值对,键值就是这个控件的value
属性,等于用户输入的值。
用户在文本输入框里面,输入用户名,比如foobar
,然后点击提交按钮,浏览器就会向服务器https://example.com/api
发送一个 POST 请求,发送user=foobar
这样一段数据。
<form>
有以下属性。
accept-charset
:服务器接受的字符编码列表,使用空格分隔,默认与网页编码相同。action
:服务器接收数据的 URL。autocomplete
:如果用户没有填写某个控件,浏览器是否可以自动填写该值。它的可能取值分别为off
(不自动填写)和on
(自动填写)。method
:提交数据的 HTTP 方法,可能的值有post
(表单数据作为 HTTP 数据体发送),get
(表单数据作为 URL 的查询字符串发送),dialog
(表单位于<dialog>
内部使用)。enctype
:当method
属性等于post
时,该属性指定提交给服务器的 MIME 类型。可能的值为application/x-www-form-urlencoded
(默认值),multipart/form-data
(文件上传的情况),text/plain
。name
:表单的名称,应该在网页中是唯一的。注意,如果一个控件没有设置name
属性,那么这个控件的值就不会作为键值对,向服务器发送。novalidate
:布尔属性,表单提交时是否取消验证。target
:在哪个窗口展示服务器返回的数据,可能的值有_self
(当前窗口),_blank
(新建窗口),_parent
(父窗口),_top
(顶层窗口),<iframe>
标签的name
属性(即表单返回结果展示在<iframe>
窗口)。
input
<input>
标签是一个行内元素,用来接收用户的输入。它是一个单独使用的标签,没有结束标志。
它有多种类型,取决于type
属性的值,默认值是text
,表示一个输入框。
<input>
<!-- 等同于 -->
<input type="text">
上面代码会生成一个单行的输入框,用户可以在里面输入文本。
type="button"
type="button"
是没有默认行为的按钮,通常脚本指定click
事件的监听函数来使用。
<input type="button" value="点击">
建议尽量不使用这个类型,而使用<button>
标签代替,一则语义更清晰,二则<button>
标签内部可以插入图片或其他 HTML 代码。
type="submit"
type="submit"
是表单的提交按钮。用户点击这个按钮,就会把表单提交给服务器。
<input type="submit" value="提交">
如果不指定value
属性,浏览器会在提交按钮上显示默认的文字,通常是Submit
。
type="checkbox"
type="checkbox"
是复选框,允许选择或取消选择该选项。
<input type="checkbox" name="agreement" checked>
<label for="agreement">是否同意</label>
![3a50a6c06f374e0ed9bc72a7d22097c7.png](https://i-blog.csdnimg.cn/blog_migrate/223d5fb3a99c8232a9df3ee138be806f.png)
上面代码会在文字前面,显示一个可以点击的选择框,点击可以选中,再次点击可以取消。上面代码中,checked
属性表示默认选中。
value
属性的默认值是on
。也就是说,如果没有设置value
属性,以上例来说,选中复选框时,会提交agreement=on
。如果没有选中,提交时不会有该项。
多个相关的复选框,可以放在<fieldset>
里面。
<fieldset>
<legend>你的兴趣</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding">
<label for="coding">编码</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">音乐</label>
</div>
</fieldset>
![0cad109df9fc5babbf9f77be54e62089.png](https://i-blog.csdnimg.cn/blog_migrate/ef09b78f6751e8a03bf2cd6445857621.png)
上面代码中,如果用户同时选中两个复选框,提交的时候就会有两个name
属性,比如interest=coding&interest=music
。
type="radio"
type="radio"
是单选框,表示一组选择之中,只能选中一项。单选框通常为一个小圆圈,选中时会被填充或突出显示。
<fieldset>
<legend>性别</legend>
<div>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
</div>
<div>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
</div>
</fieldset>
![b9efc2076fd403534bb3050857b009b5.png](https://i-blog.csdnimg.cn/blog_migrate/e56181d62afd34c4685718edcac0c8c0.png)
上面代码中,性别只能在两个选项之中,选择一项。
注意,多个单选框的name
属性的值,应该都是一致的。提交到服务器的就是选中的那个值。
该类型的配套属性如下:
checked:布尔属性,表示是否默认选中当前项。
value:用户选中该项时,提交到服务器的值,默认为on'。
type="password"
type="password"
是一个密码输入框。用户的输入会被遮挡,字符通常显示星号(*
)或点(·
)
<input type="password" id="pass" name="password"
minlength="8" required>
![ea5b48e9d33b2b25759f00b49e06a2e2.png](https://i-blog.csdnimg.cn/blog_migrate/90748870fbcd6313339601bbd9732b7a.png)
浏览器对该类型输入框的显示,会有所差异。一种常见的处理方法是,用户每输入一个字符,先在输入框里面显示一秒钟,然后再遮挡该字符。
如果用户输入内容包含换行符(U+000A
)和回车符(U+000D
),浏览器会自动将这两个字符过滤掉。
type="file"
type="file"
是一个文件选择框,允许用户选择一个或多个文件,常用于文件上传功能。
<input type="file"
id="avatar" name="avatar"
accept="image/png, image/jpeg">
该类型有以下属性。
accept
:允许选择的文件类型,使用逗号分隔,可以使用 MIME 类型(比如image/jpeg
),也可以使用后缀名(比如.doc
),还可以使用audio/*
(任何音频文件)、video/*
(任何视频文件)、image/*
(任何图像文件)等表示法。capture
:用于捕获图像或视频数据的源,可能的值有user
(面向用户的摄像头或麦克风),environment
(外接的摄像头或麦克风)。multiple
:布尔属性,是否允许用户选择多个文件。
table
<table>
是一个块级容器标签,所有表格内容都要放在这个标签里面。
<table>
... ...
</table>
<caption>
<caption>
总是<table>
里面的第一个子元素,表示表格的标题。该元素是可选的。
<table>
<caption>示例表格</caption>
</table>
<thead>
、<tbody>
、<tfoot>
<thead>
、<tbody>
、<tfoot>
都是块级容器元素,且都是<table>
的一级子元素,分别表示表头、表体和表尾。
<table>
<thead>... ...</thead>
<tbody>... ...</tbody>
<tfoot>... ...</tfoot>
</table>
这三个元素都是可选的。如果使用了<thead>
,那么<tbody>
和<tfoot>
一定在<thead>
的后面。如果使用了<tbody>
,那么<tfoot>
一定在<tbody>
后面。
大型表格内部可以使用多个<tbody>
,表示连续的多个部分。
<colgroup>
,<col>
<colgroup>
是<table>
的一级子元素,用来包含一组列的定义。<col>
是<colgroup>
的子元素,用来定义表格的一列。
<table>
<colgroup>
<col>
<col>
<col>
</colgroup>
</table>
上面代码表明表格有3列。
<col>
不仅是一个单独使用的标签,没有结束标志,而且还是一个空元素,没有子元素。它的主要作用,除了申明表格结构,还可以为表格附加样式。
<table>
<colgroup>
<col class="c1">
<col class="c2">
<col class="c3">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
上面代码中,<colgroup>
声明表格有三列,每一列有自己的 class,可以使用 CSS 针对每个 class 设定样式,会对整个表格生效。
<col>
有一个span
属性,值为正整数,默认为1
。如果大于1,就表示该列的宽度包含连续的多列。
<tr>
<tr>
标签表示表格的一行(table row)。如果表格有<thead>
、<tbody>
、<tfoot>
,那么<tr>
就放在这些容器元素之中,否则直接放在<table>
的下一级。
<table>
<tr>...</tr>
<tr>...</tr>
<tr>...</tr>
</table>
上面代码表示表格共有3行。
<th>
,<td>
<th>
和<td>
都用来定义表格的单元格。其中,<th>
是标题单元格,<td>
是数据单元格。
<table>
<tr>
<th>学号</th><th>姓名</th>
</tr>
<tr>
<td>001</td><td>张三</td>
</tr>
<tr>
<td>002</td><td>李四</td>
</tr>
</table>
![bdebe48b3c5962692ecf5cd3aa656569.png](https://i-blog.csdnimg.cn/blog_migrate/aa4a9700a5ef2b636b958b1b74a21cdd.png)
上面代码中,表格一共有三行。第一行是标题行,所以使用<th>
;第二行和第三行是数据行,所以使用<td>
。
colspan
属性,rowspan
属性
单元格会有跨越多行或多列的情况,这要通过colspan
属性和rowspan
属性设置,前者表示单元格跨越的栏数,后者表示单元格跨越的行数。它们的值都是一个非负整数,默认为1。
<table>
<tr>
<td colspan="2">A</td><td>B</td>
</tr>
<tr>
<td>A</td><td>B</td><td>C</td>
</tr>
</table>
![c679ca6d9cc4be499668f5ecebd50529.png](https://i-blog.csdnimg.cn/blog_migrate/daf66281867cec84f9a1c86c564f157a.png)
上面代码中,第一行的第一个单元格会跨两列。
headers
属性
如果表格很大,单元格很多,源码里面会看不清,哪个单元格对应哪个表头,这时就可以使用headers
属性。
<table>
<tr>
<th id="no">学号</th><th id="names">姓名</th>
</tr>
<tr>
<td headers="no">001</td><td headers="names">张三</td>
</tr>
<tr>
<td headers="no">002</td><td headers="names">李四</td>
</tr>
</table>
上面代码中,标题栏的<th>
设置了id
属性,后面的<td>
单元格的headers
属性就对应这些id
属性的值,因此就能看出来这些单元格对应哪个标题栏。
headers
属性的值总是对应<th>
标签的id
属性的值。由于一个单元格可以对应多个标题栏(跨行的情况),所以headers
属性可以是一个空格分隔的字符串,对应多个id
属性的值。
scope
属性
scope
属性只有<th>
标签支持,一般不在<td>
标签使用,表示该<th>
单元格到底是栏的标题,还是列的标题。
<table>
<tr>
<th scope="col">姓名</th>
<th scope="col">学号</th>
<th scope="col">性别</th>
</tr>
<tr>
<th scope="row">张三</th>
<td>001</td>
<td>男</td>
</tr>
<tr>
<th scope="row">李四</th>
<td>002</td>
<td>男</td>
</tr>
</table>
![b9a7ab4fdd269200d5cb4ead621670de.png](https://i-blog.csdnimg.cn/blog_migrate/e422faedbcb4036d6695cc9a1c75b93f.png)
上面代码中,第一行的标题栏都是列标题,所以<th>
的scope
属性为col
,第二行和第三行的第一列是行标题,所以<th>
标签的scope
属性为row
。
scope
属性可以取下面这些值。
row
:该行的所有单元格,都与该标题单元格相关。col
:该列的所有单元格,都与该标题单元格相关。rowgroup
:多行组成的一个行组的所有单元格,都与该标题单元格相关。colgroup
:多列组成的一个列组的所有单元格,都与该标题单元格相关。auto
:默认值,表示由浏览器自行决定。