范仁义html+css课程---10、其它标签

一、总结

一句话总结：

了解iframe、Figure与Figcaption、address、progress、meter、datalist、fieldset和legend标签的作用即可，遇到这些标签有疑问就百度

1、iframe标签的作用？

在网页中嵌入网页

<iframe src="https://fanrenyi.com" width="400" height="400"></iframe>

2、Figure与Figcaption元素的作用？

figure元素：是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等

figcaption元素：用来给figure元素定义标题

<figcaption>我的网站和博客</figcaption>
<figure>
  <img src="w1.jpg" alt="" width="150"><img src="b1.jpg" alt="" width="150">
</figure>

3、address 标签的作用？

定义文档作者/所有者的联系信息

<address>
  作者：****；邮箱：1223@163.com..........
</address>

4、progress标签的作用？

用来创建一个进度条

<progress value="30" max="100"></progress>

5、meter标签的作用？

定义度量衡：仅用于已知最大和最小值的度量

<meter value="30" min="1" max="100">30%</meter>

6、datalist标签的作用？

用来建立一个选项列表，与input标签配合使用，可以提示选项

<input type="search" name="ss" list="my_list"><br><br>
<datalist id="my_list">
  <option value="html5">html5</option>
  <option value="css3">css3</option>
  <option value="javascript">javascript</option>
  <option value="jquery">jquery</option>
  <option value="bootstrap">bootstrap</option>
  <option value="vue">vue</option>
  <option value="nodejs">nodejs</option>
</datalist>

7、fieldset和legend 标签的作用？

fieldset元素：可将表单内的相关元素分组，分组的效果是加一个边框。

legend元素：为 fieldset 元素定义标题

<fieldset>
  <legend>健康信息：</legend>
  <p><label>身高：<input type="text"/></label></p>
  <p><label>体重：<input type="text"/></label></p>
</fieldset>

二、iframe

博客对应视频位置：10、其它标签
https://fanrenyi.com/video/2/16

一个内联框架被用来在当前 HTML 文档中嵌入另一个文档。

iframe可以在网页中嵌入网页

<iframe src="https://fanrenyi.com" width="200" height="200"></iframe>

height 和 width 属性用来定义iframe标签的高度与宽度。

属性默认以像素为单位, 但是你可以指定其按比例显示 (如："80%")。

iframe小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>iframe小例子</title>
 6 </head>
 7 <body>
 8     <iframe src="https://fanrenyi.com" width="400" height="400"></iframe>
 9     <p>一些旧的浏览器不支持 iframe。</p>
10     <p>如果浏览器不支持 iframes 则不会显示。</p>
11 </body>
12 </html>

三、Figure与Figcaption元素

figure元素

figure/figcaption都是HTML5中新增的元素
figure元素是一个媒体组合元素，也就是对其他的媒体元素进行组合，比如：图像、图表等等

figcaption元素

用来给figure元素定义标题。

Figure与Figcaption元素小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>figure示例</title>
 6 </head>
 7 <body>
 8 <div>
 9     <h2>我是个程序猿........</h2>
10 
11     <figcaption>我的网站和博客</figcaption>
12     <figure>
13         <img src="w1.jpg" alt="" width="150"><img src="b1.jpg" alt="" width="150">
14     </figure>
15 
16     <figcaption>我的逗比卡通头像</figcaption>
17     <figure>
18         <img src="u1.jpg" alt="" width="150"><img src="u2.jpg" alt="" width="150">
19     </figure>
20 </div>
21 
22 </body>
23 </html>

四、address

标签定义及使用说明

<address> 标签定义文档作者/所有者的联系信息。

如果 <address> 元素位于 <body> 元素内部，则它表示该文档作者/所有者的联系信息。

如果 <address> 元素位于 <article> 元素内部，则它表示该文章作者/所有者的联系信息。

<address> 元素的文本通常呈现为斜体。大多数浏览器会在该元素的前后添加换行。

提示和注释

提示：不应该使用 <address> 标签来描述邮政地址，除非这些信息是联系信息的组成部分。

提示：<address> 元素通常被包含在 <footer> 元素的其他信息中。

address小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>address小实例</title>
 6 </head>
 7 <body>
 8     <address>
 9         作者：****；邮箱：1223@163.com..........
10     </address>
11 </body>
12 </html>

五、progress

progress元素

是HTML5中新增的元素，用来建立一个进度条
通常与JavaScript 一同使用，来显示任务的进度。
使用时注意浏览器的支持情况：Internet Explorer 9 以及更早的版本不支持

progress元素的属性：

max属性：规定当前进度的最大值。
value属性设定进度条当前默认显示值
form属性：规定进度条所属的一个或多个表单。

progress小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>progress小实例</title>
 6 </head>
 7 <body>
 8 
 9 当前下载进度：
10 <progress value="30" max="100"></progress>
11 
12 </body>
13 </html>

六、meter

meter元素

定义度量衡。仅用于已知最大和最小值的度量。

是HTML5中新增的元素，用来建立一个度量条,用来表示度量衡的评定
通常与JavaScript 一同使用，来显示任务的进度。

meter元素的属性：

value属性设定进度条当前默认显示值
max属性：规定范围的最大值，默认值为1.
min属性：规定范围的最小值，默认值为0.
low属性：规定被视作低的标准。
high属性：规定被视作高标准。
form属性：规定所属的一个或多个表单。

meter小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>meter小实例</title>
 6 </head>
 7 <body>
 8 
 9 <div>
10     您当前的排名为：<meter value="30" min="1" max="100">30%</meter><br><br>
11     十分之七：<meter value="7" min="0" max="10">十分之七</meter><br><br>
12     80%：<meter value="0.8">80%</meter>
13 </div>
14 
15 </body>
16 </html>

七、表单相关标签

1、datalist

select元素

用来建立一个下拉菜单选项列表

不仅可以在表单中使用，还可以在其他块元素和内联元素中使用

select只是定义一个下拉菜单列表，其具体列表项要通过option元素建立

option元素可以用来建立一个选项，即下拉列表的一个菜单项
optgroup元素用来对option元素进行组合分组

size用来定义列表中显示的列表项
multiple属性用来定义是否可以多选
可以添加disabled属性和autofocus属性

datalist元素

HTML5新增元素，用来建立一个选项列表

datalist元素的内容不会直接显示在网页上，只是会在用户输入时作为候选项

通常与input元素配合使用

datalist小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>datalist实例</title>
 6 </head>
 7 <body>
 8 
 9 <form action="" autocomplete="on">
10     <h3>查找您要收看的课程</h3>
11     <input type="search" name="ss" list="my_list"><br><br>
12     <datalist id="my_list">
13         <option value="html5">html5</option>
14         <option value="css3">css3</option>
15         <option value="javascript">javascript</option>
16         <option value="jquery">jquery</option>
17         <option value="bootstrap">bootstrap</option>
18         <option value="vue">vue</option>
19         <option value="nodejs">nodejs</option>
20     </datalist>
21 </form>
22 
23 </body>
24 </html>

2、fieldset和legend

fieldset元素：可将表单内的相关元素分组。

当一组表单元素放到fieldset标签内时，浏览器会以特殊方式来显示它们，通常会有一个边框。

legend元素：为 fieldset 元素定义标题

fieldset和legend小实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>fieldset小实例</title>
 6 </head>
 7 <body>
 8 <form>
 9     <fieldset>
10         <legend>用户注册</legend>
11         账号：<input type="text" name="user">
12         密码：<input type="password" name="password"> <br>
13         <input type="submit">
14     </fieldset>
15     <br> <br>
16     <fieldset>
17         <legend>健康信息：</legend>
18         <p><label>身高：<input type="text"/></label></p>
19         <p><label>体重：<input type="text"/></label></p>
20     </fieldset>
21 
22     <p>如果表单周围没有边框，说明您的浏览器太老了。</p>
23 </form>
24 
25 </body>
26 </html>