十、表单

1 简单的表单示范

2 自动填充表单——autocomplete

3 指定目标显示位置

4 设置默认值——value

5 自动聚焦——autofocus

6 禁用元素——disabled

（1）按钮

（2）文本框

7 禁止修改——readonly

8 将文本包裹起来——label元素

9 label里面的for元素

10 fieldset元素——可以将表单内相关元素进行分组

11 legend元素——为fieldset定义说明文字

12 select和option元素——制作下拉选项框

13 optgroup元素——下拉列表选项分组

14 input元素的type属性

（1）Input实现按钮样式

（2）单选框radio

（3）复选框 -- checkbox

（4）时间和日期

15 input实现搜索框样式

（1）搜索框--search

（2）颜色选择框--color

（3）图像按钮--image

（4）将input元素影藏起来——hidden元素

16 Input实现文件上传

17 限制数字输入

18 文本框输入规范

19 Output元素显示计算结果

20 textarea元素：接收多行文本输入

21 wrap 元素（soft、hard、off）

十一、语义化结构

1.details 和summary元素：

2.article和section元素

十二、网页嵌入

1.网页图片

（1）map元素和area元素：点击图形某区域内可以跳转到另一个链接。

（2）picture和source元素：图像像素适配

（3）figure和figcaption元素：插图

2.网页嵌入视频

3.网页嵌入音频

4.网页嵌入网页

5.网页嵌入地图

十、表单

1 简单的表单示范

get和post的区别

用get提交，输入内容会在URL（地址框）里面。

用post提交，输入的内容不会出现在URL里面。

 <body><!--还需要一个PHP文件结合使用，post/get:get 会把你提交的数据整合到url里面,即网页上地址栏，密码容易被看到，post安全性更高一点，method不写的话，默认method为get--><form action="welcome.php" method="post"> 名字：<input type="text" name="name"><br><br>邮箱：<input type="text" name="email"><br><br>   密码：<input type="password" name="password"><br><br>  <button type="submit">提交</button><button type="reset">重写</button></form></body>

2 自动填充表单——autocomplete

自动填充表单——autocomplete（这个属性默认情况下是允许浏览器对表单的自动填充）

每次在表单输入数据时会显示之前填过的数据。

①如果不想要自动填充，如问卷调查。

在服务器设置<form autocomplete="off">

②如果想表单中只有一个是自动填充，其他都是不要自动填充的。

<form action="welcome.php" method="post" autocomplete="off"> 名字：<input type="text" name="name"><br><br>邮箱：<input type="text" name="email" autocomplete="on"><br><br>   密码：<input type="password" name="password"><br><br>  <button type="submit">提交</button><button type="reset">重写</button>
</form>

3 指定目标显示位置

在另一个页面打开：

点提交按钮会出现一个新的页面

4 设置默认值——value

当要填的数据在大多时候都是一样的，可以设置默认值，表单会默认填好。

性别：<input type="text" name="sex" value="女">

5 自动聚焦——autofocus

不用鼠标点，光标就自动在文本框里。

<input type="text" name="name" autofocus>

6 禁用元素——disabled

使用此元素后按钮或者文本框会变灰掉，没办法点击。

（1）按钮

<button type="submit" disabled>提交</button>

（2）文本框

性别一栏等于废掉，提交后，性别的值不会被提交。

<input type="text" name="sex" value="女" disabled> <!--性别一栏等于废掉，提交后，性别的值不会被提交。-->
<input type="text" name="name" autofocus>

7 禁止修改——readonly

如果有默认值则不能修改，只读。

如下例，在提交后，性别框会把默认值“女”提交上去。

<input type="text" name="sex" value="女" readonly>

8 将文本包裹起来——label元素

隐式关联，鼠标点击文本框前面的字，光标会自动标识到文本框里。

<form action="welcome.php" method="post"> <label>名字：<input type="text" name="name"></label><br><br>邮箱：<input type="text" name="email"><br><br>   密码：<input type="password" name="password"><br><br>  <button type="submit">提交</button><button type="reset">重写</button>
</form>

9 label里面的for元素

For的值对应id 的值，且id值唯一不可重复。

作用：点击前段文字，光标会自动对齐到文本框。

<form action="welcome.php" method="post"> <label>名字：<input type="text" name="name"></label><br><br><label for="email">邮箱：</label> <input type="text" name="email" id="email"><br><br>   <label for="mm">密码：</label> <input type="password" name="password" id="mm"><br><br>  <button type="submit">提交</button><button type="reset">重写</button>
</form>

10 fieldset元素——可以将表单内相关元素进行分组

<fieldset> xxx </fieldset>里面的内容会被框在一起。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post"> <!--使用fieldset划分不同类型的表单元素--><fieldset><label for="name">名字：</label><input type="text" name="name" id="name"><br><br><label for="sex">性别：</label> <input type="text" name="sex" id="sex"><br><br>  <label for="age">年龄：</label><input type="text" name="age" id="age"></fieldset><p> 为了您提供更好的服务，希望您能抽出几分钟时间，将您的建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与，现在我们马上开始。 </p><fieldset><label for="ql">您是否使用过CSDN：</label> <input type="text" name="age" id="age"><br><br>  <label for="q2">您使用CSDN的目的是：</label> <input type="text" name="age" id="age"><br><br> <label for="q3">您使用CSDN的频率是：</label> <input type="text" name="age" id="age"></fieldset><br><button type="submit">提交</button></form></body> </html>

11 legend元素——为fieldset定义说明文字

……

</fieldset>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post"> <!--使用fieldset划分不同类型的表单元素--><fieldset><legend>基本信息</legend><label for="name">名字：</label><input type="text" name="name" id="name"><br><br><label for="sex">性别：</label> <input type="text" name="sex" id="sex"><br><br>  <label for="age">年龄：</label><input type="text" name="age" id="age"></fieldset><p> 为了您提供更好的服务，希望您能抽出几分钟时间，将您的建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与，现在我们马上开始。 </p><fieldset><legend>调查内容</legend><label for="ql">您是否使用过CSDN：</label> <input type="text" name="age" id="age"><br><br>  <label for="q2">您使用CSDN的目的是：</label> <input type="text" name="age" id="age"><br><br> <label for="q3">您使用CSDN的频率是：</label> <input type="text" name="age" id="age"></fieldset><br><button type="submit">提交</button></form></body> </html>

12 select和option元素——制作下拉选项框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post"> <!--使用fieldset划分不同类型的表单元素--><fieldset><legend>基本信息</legend><label for="name">名字：</label><input type="text" name="name" id="name"><br><br><label for="sex">性别：<select name="sex"><option value="male">男</option><option value="female">女</option></select></label><br><br> <label for="age">年龄：</label><input type="text" name="age" id="age"></fieldset><p> 为了您提供更好的服务，希望您能抽出几分钟时间，将您的建议告诉我们，我们非常重视每位用户的宝贵意见，期待您的参与，现在我们马上开始。 </p><fieldset><legend>调查内容</legend><label for="ql">您是否使用过CSDN：</label> <input type="text" name="age" id="age"><br><br>  <label for="q2">您使用CSDN的目的是：</label> <input type="text" name="age" id="age"><br><br> <label for="q3">您使用CSDN的频率是：</label> <input type="text" name="age" id="age"></fieldset><br><button type="submit">提交</button></form></body> </html>

13 optgroup元素——下拉列表选项分组

</optgroup>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>老师近期更新课程 </p><!--使用optgroup对选项进行分组--><select><optgroup label="《零基础入门学习web开发》"><option value="h5017">第017讲<option><option value="h5018">第018讲<option><option value="h5019">第019讲<option><option value="h5000">……<option></optgroup><optgroup  label="《零基础入门学习scratch》"><option value="sc008">第008讲<option><option value="sc007">第007讲<option><option value="sc006">第006讲<option><option value="sc000">……<option></optgroup><optgroup label="《极客python之效率革命》"><option value="gp002">绘图篇<option><option value="gp001">办公篇<option><option value="gp000">爬虫篇<option></optgroup></select></body>
</html>

14 input元素的type属性

按钮：submit、button、reset

（1）Input实现按钮样式

将所有的button改成input，input没有结束标签。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post"> 名字：<input type="text" name="name"><br><br>邮箱：<input type="text" name="email"><br><br>   密码：<input type="password" name="password"><br><br>  <input type="submit" value="提交"><input type="reset" value="重写"><input type="button" onclick="msg()" value="点我!"></form><script>function msg() {alert("hello!盆友")}</script></body>
</html>

点击“点我”按钮，会跳出一个页面

（2）单选框radio

只能选一个（即互斥），当选择其中一个的时候，另一个会自动跳转。

name属性必须一致单选框才能互斥，否则会出现两个都选的情况。

<body><form action="welcome.php" method="post"><label><input type="radio" name="sex" value="male">男</label><label><input type="radio" name="sex" value="female">女</label>  <!--name属性必须一致--></form>
</body>

（3）复选框 -- checkbox

<body><form action="welcome.php" method="post"> <p>你最喜欢课程是？</p><input type="checkbox" name="lesson" value="yuwen">语文<input type="checkbox" name="lesson" value="shuxue">数学<input type="checkbox" name="lesson" value="yingyu">英语<input type="checkbox" name="lesson" value="tiyu">体育<input type="checkbox" name="lesson" value="meishu">美术<br><br><input type="submit" value="提交"></form>
</body>

（4）时间和日期

time 、date、month、week 、datetime-local （获取本地的日期和时间）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="get"> <label>时间：<input type="time" name="time"></label><br><br><label>日期：<input type="date" name="date"></label><br><br><label>年月：<input type="month" name="month"></label><br><br><label>星期：<input type="week" name="week"></label><br><br><label>本地日期和时间：<input type="datetime-local" name="datetime-local"></label>                                                                      <br><br><input type="submit" value="提交"></form></body></html>

点文本框最后的按钮可以选择时间

15 input实现搜索框样式

（1）搜索框--search

<body><form action="welcome.php" method="get"> <label>你想看老师哪个课程：<input type="search" name="search"></label><br><br><input type="submit" value="提交"></form>
</body>

（2）颜色选择框--color

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="get"><label>你想选哪个颜色：<input type="color" name="color"></label><br><br><input type="submit" value="提交"></form>  </body>
</html>

（3）图像按钮--image

（4）将input元素影藏起来——hidden元素

disabled和hidden的区别：

使用disabled属性就等于这个元素是废掉了，没有用了。

hidden元素，用于你想偷偷向服务器传递某些东西，但是不想让别人看见，可以yoga这个元素。

一般来说，disabled和hidden不同时使用。

disabled的样式：

加disabled属性，text的框框会灰掉：

<label>看不见的按钮：<input type="text" value="" disabled></label>

hidden的样式：

隐藏元素，啥也看不见

<label>看不见的按钮：<input type="hidden" value="你看不见我哦"></label>

<body><form action="welcome.php" method="get"> <label>看不见的按钮：<input type="hidden" value="你看不到我" disabled></label></form>
</body>

16 Input实现文件上传

Input实现文件上传：

①必须在form中加enctype=”multipart/form-data”才能实现文件传到服务器上不报错。

②且method必须设置成"post"不能“get”。

③accept可以指定上传文件类型。设置这个之后选择文件时，会直接过滤某类型文件给你，但是选择其他类型的文件也可以上传。多个类型之间用英文的逗号隔开。

accept=".jpg,.html"以这些结尾的文件，多个类型用英文逗号隔开。

accept="image/*"表示所有图像类型文件

accept="audio/*"音频

accept="video/*"视频

④用hidden设置一个隐藏字段，规定上传的文件不能超过多少大小。

⑤用multiple可以同时上传多个文件。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--①必须在form中加enctype=”multipart/form-data”才能实现文件传到服务器上不报错。--><!--②且method必须设置成"post"不能“get”--><form action="welcome.php" method="post" enctype="multipart/form-data"> <!--用hidden设置一个隐藏字段，规定上传的文件不能超过多少大小。--><input type="hidden" name="MAX_FILR_SIZE" value="1024"> <!--用multiple可以同时上传多个文件--><!--accept可以指定上传文件类型--><label>请选择上传的文件：<input type="file" name="file" accept="image/*" multiple></label><br><br><input type="submit" value="提交"></form></body>
</html>

17 限制数字输入

min最小

max最大

step跨度（即每次增长/减少多少）

name="age" min="1" max="100" step="1"

数值滚动条range

邮箱、电话、网址的输入的大致格式分别用email、tel、url表示。再细分具体格式限制需要用正则表达式，pattern正则表达式。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post" enctype="multipart/form-data"> <label>贵庚：<input type="number" name="age" min="1" max="100" step="1"></label><br><label>贵庚：<input type="range" name="age" value="1" min="1" max="100" step="1"></label><br><br><label>邮箱：<input type="email" name="email" ></label><br><label>电话：<input type="tel" name="tel" ></label><br><label>网址：<input type="url" name="url" ></label><br><br><br><label>邮箱：<input type="email" name="email" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></label><br><label>电话：<input type="tel" name="tel" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$"></label><br><label>网址：<input type="url" name="url" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$"></label><br><br><br><input type="submit" value="提交"></form></body>
</html>

年龄要满足1-100的要求，上部分邮箱要满足email格式的要求

上部分电话满足tel大致格式要求。下半部分加了正则表达式，需要在tel格式基础上再满足正则表达式具体格式要求。

18 文本框输入规范

required属性——规定文本框必须填，不填不给提交。

placeholder属性———文本框提示语句。比如下图“仅限手机号码”等

size——指定文本框长度

maxlength——限制输入字符长度，超过这个长度，多余的字就输入不了。

list的datalist元素——实现数据列表功能，和option搭配。如下图的下拉列表前三项。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="welcome.php" method="post" enctype="multipart/form-data"> <label>邮箱：<input type="email" name="email" pattern="\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*" placeholder="仅限163和126邮箱" required></label><br><label>电话：<input type="tel" name="tel" pattern="^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$" placeholder="仅限手机号码" required></label><br><label>网址：<input type="url" name="url" pattern="^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$" placeholder="仅限http和https开头的网址" required size="30" maxlength="22" list="urllist"></label><br><br><br><input type="submit" value="提交">  </form><datalist id="urllist"><option value="https://www.csdn.net/">CSDN主页</option><option value="https://www.bilibili.com/">B站</option><option value="https://www.baidu.com">百度</option></datalist></body>
</html>

19 Output元素显示计算结果

a的区间在0-100之间，b的区间在0-100之间，output出a+b的值。

<body><form oninput="x.value=parseInt(a.value)+parseInt(b.value)" action="welcome.php" method="get" > 0<input type="range" id="a" value="50" min="0" max="100">100 +<input type="number" id="b"  value="50">=<output name="x" for="a b">100</output>   </form>
</body>

20 textarea元素：接收多行文本输入

接收多行文本输入

rows，cols设置文本框原始大小

<body><form action="welcome.php" method="get" > <textarea name="saysth" rows="5" cols="30">
山一程 水一程 身向榆关那畔行 夜深千帐灯 风一更 雪一更 聒碎乡心梦不成 故园无此声</textarea><br><button>提交</button></form>
</body>

可以调节文本框大小，自动换行：

21 wrap 元素（soft、hard、off）

wrap="off / soft / hard"

wrap="off"：意为不能自动换行

wrap="soft"：和不写wrap元素结果一样。自动软回车换行，换行标记不会传送到服务器中去。当在表单中提交时，textarea 中的文本不换行，为默认值。

wrap="hard" ：自动硬回车换行，换行标记一同被传送到服务器中去。当使用 "hard" 时，必须规定 cols 属性。

<body><form action="welcome.php" method="get" > <textarea name="saysth" rows="5" cols="30" wrap="off">
山一程 水一程 身向榆关那畔行 夜深千帐灯 风一更 雪一更 聒碎乡心梦不成 故园无此声</textarea><br><button>提交</button></form>
</body>

十一、语义化结构

HTML 5提供的新语义元素定义了网页的不同部分:

header ->定义简介形式的内容

nav ->定义页面主导航功能

main ->定义主内容，主内容中可以有各种子内容区段(比如article、 section、 div等)

article ->定义独立的文章内容，与页面其它部分无关(比如一篇博文)

section ->定义文档中的节，与article类似，但section更适用于组织页面使其按功能分

aside ->定义侧边栏(术语条目、作者简介、相关链接等)

footer ->定义页脚部分的内容

details ->定义额外的细节

summary ->定义details元素的标题

1.details 和summary元素：

summary：<summary> 标签定义 details元素的标题。summary 和 details 元素配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。

details：<details> 标签用于定义用户可见的或者隐藏的需求的补充细节。details 元素的内容对用户是不可见的，除非设置了 open 属性。

details包含一个详情区域，summary对该区域做总结。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><details><summary>《零基础入门学习java》</summary><p>配有同名书籍。</p><p>配有视频教程</p></details><details open> <!--details不用open文字是折叠的，用open默认初始展开.--><p>爆竹声中一岁除，</p><p>春风送暖入屠苏。</p></details><details><p>千门万户曈曈日，</p><p>总把新桃换旧符。</p></details></body>
</html>

鼠标点击可展开：

2.article和section元素

article：<article> 标签用于定义一篇文章，与页面其它部分无关。论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容。

section：<section> 标签用于定义定义文档中的节。与article类似，但section更适用于组织页面使其按功能分。

例article：

<!DOCTYPE html>
<html><head><title></title></head><body><article><h1>长江之歌</h1><p>你从雪山走来，春潮是你的风采；你向东海奔去，惊涛是你的气概。你用甘甜的乳汁，哺育各族儿女；你用健美的臂膀，挽起高山大海。我们赞美长江，你是无穷的源泉；我们依恋长江，你有母亲的情怀。你从远古走来，巨浪荡涤着尘埃；你向未来奔去，涛声回荡在天外。你用纯洁的清流，灌溉花的国土；你用磅礴的力量，推动新的时代。我们赞美长江，你是无穷的源泉；我们依恋长江，你有母亲的情怀。</p></article></body>
</html>

例section：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><section><h1>元日</h1><p>爆竹声中一岁除，</p><p>春风送暖入屠苏。</p><p>千门万户曈曈日，</p><p>总把新桃换旧符。</p></section><br><p>除此之外，还有现代诗：</p><section><h1>长江之歌</h1><p>你从雪山走来，春潮是你的风采；你向东海奔去，惊涛是你的气概。你用甘甜的乳汁，哺育各族儿女；你用健美的臂膀，挽起高山大海。我们赞美长江，你是无穷的源泉；我们依恋长江，你有母亲的情怀。你从远古走来，巨浪荡涤着尘埃；你向未来奔去，涛声回荡在天外。你用纯洁的清流，灌溉花的国土；你用磅礴的力量，推动新的时代。我们赞美长江，你是无穷的源泉；我们依恋长江，你有母亲的情怀。</p></section></body>
</html>

footer：<footer> 标签定义文档或节的页脚。页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。在经典的页面布局中，页面被分为 header、main、aside、footer 四个部分：

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><p>……</p><p>……</p><footer><p>出版于: xxx杂志社 </p>  <!--版权信息--><p>联系方式: xxx@126.com</p>  <!--联系信息--></footer></body>
</html>

十二、网页嵌入

1.网页图片

（1）map元素和area元素：点击图形某区域内可以跳转到另一个链接。

如下图，点击图片区域1圆形部分，可以跳转到苹果的百度百科网址，点击区域2矩形部分，可以跳转到猫的百度百科网址，点击区域3的五边形部分，可以跳转到橘猫的百度百科网址。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><img src="tu3.jpg" alt="两只猫咪" usemap="#mao">  <!--记得加#号--><map name="mao"><!--circle需要提供圆心坐标和圆的半径--><area shape="circle" coords="409,152,40" alt="苹果" href="https://baike.baidu.com/item/苹果" target="_blank"><!--poly需要提供多边形每个点的坐标--><area shape="poly" coords="146,180,223,156,304,202,286,278,151,273" alt="橘猫" href="https://baike.baidu.com/item/橘猫" target="_blank"><!--rect需要提供矩形左上角和右下角的坐标--><area shape="rect" coords="371,199,529,583" alt="猫" href="https://baike.baidu.com/item/猫" target="_blank"></map></body>
</html>

（2）picture和source元素：图像像素适配

开始显示tu1背景，逐渐放大页面，显示tu2背景，再放大页面，显示tu3背景。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><picture><source media="(min-width: 1024px)" srcset="tu1.jpg">    <!--像素大于1024时--><source media="(min-width: 520px)" srcset="tu2.jpg">    <!--像素大于520小于1024时--><img src="tu3.jpg" alt="彩色背景图" style="width:auto;">  <!--其余--></picture></body>
</html>

（3）figure和figcaption元素：插图

figure元素用于定义独立的流内容(图像、图表、照片、代码等)，一般指一个单独的单元。figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。figcaption元素用于为figure元素组添加标题，一个figure元素内最多允许使用一个figcaption元素，该元素应该放在figure元素的第一个或者最后一个子元素的位置。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>背景图片：泛指在视觉图像中与人所看到的视觉前景相对应的起到衬托前景、协调色调等作用的独立图像，一般用在视觉深远效果的平面或实物前景之后。电脑屏幕所使用的各种背景图片，可以根据大小和分辨率来做相应调整。壁纸让我们的电脑看起来更好看，更有个性。彩色背景图非常好看。</p><figure><figcaption>背景图</figcaption><img src="tu4.jpg" alt="背景图" > </figure></body></html>

2.网页嵌入视频

（1）在网页中嵌入视频video：<video src=”” width=”” height=””... >

播放控件controls：停在初始画面，需要手动播放。

自动播放autoplay：点开网页视频自动播放，有声音。

静音播放muted：自动播放，静音

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--将视频01.MP4视频嵌入网页--><video src="视频01.mp4" width="1920" height="1080" controls autoplay muted>抱歉，本视频无法播放</video></body>
</html>

（2）视频预加载preload：metadate就是只把视频的一些主要信息预加载出来，不浪费流量，如视频长度、视频长宽等。打开后停在初始画面。None就是不预加载，和controls搭配打开时是黑色的界面。loop视频循环播放。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><video src="视频01.mp4" width="1920" height="1080" preload="metadata" controls loop>抱歉，本视频无法播放</video></body>
</html>

（3） poster属性设置视频封面

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><video src="视频01.mp4" width="1920" height="1080" preload="metadata" controls loop poster="tu7.jpg">抱歉，本视频无法播放</video></body>
</html>

3.网页嵌入音频

audio元素：在网页中嵌入音频

<body><audio src="..\music\稻香.mp3"  controls >抱歉，本音频无法播放</audio>
</body>

注：有的浏览器支持的视频类型不同，未了适配各种浏览器，用source将多个后缀不同的视频全部留作备选。

4.网页嵌入网页

Iframe:在网页中嵌入另一个网页

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>在网页中嵌入CSDN</p><iframe src="https://www.csdn.net"  width="1024px" height="800px">抱歉，您的浏览器不支持iframe</iframe></body>
</html>

5.网页嵌入地图

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><!--在网页中嵌入百度地图，坐标，@12989872.35,2658432.29,12z--><p>我在这个城市，你呢？</p><iframe src="http://map.baidu.com/@12989872.35,2658432.29,12z"  width="1024px" height="800px">抱歉，您的浏览器不支持iframe</iframe></body>
</html>

注：sandbox：沙盒。这个属性默认为空时，可以限制iframe网页内容为静态，防止嵌入的第三方网页被非法攻击后篡改iframe程序。嵌入的网站进一步点不了。比如嵌入CSDN的网页后，可以看CSDN的主页和各模块，但是点击具体博文就进不去了。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><p>在网页中嵌入CSDN</p><iframe src="https://www.csdn.net"  width="1024px" height="800px" sandbox="">抱歉，您的浏览器不支持iframe</iframe></body>
</html>

整理完方便忘记后查询~

Web前端开发—html基础（3）相关推荐

web前端开发-html5基础（含代码）
文章目录前言一.小白应该如何入门Web前端开发? 二.HTML5-第一天 a-认识HTML(阿巴阿巴...) 1.什么是HTML? 2.HTML和CSS的关系? 3.网页的结构.表现.行为? b- ...
web前端开发零基础入门教程
端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动端 ...
【WEB前端开发】基础知识大总结（HTML5+CSS3）
本文共一万七千字,十六个内容点,七十个知识点目录一.转义字符二.表单标签 1.form标签 2.input元素 3.label 标签 4.select 标签 5.button 元素三.语义化标 ...
Web前端开发JavaScript基础(3)
JavaScript 一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,并且是被广泛用于客户端的脚本语言,JavaS ...
设计与实现Web前端开发的基础
1 概要对于前端的学习内容,应该从如下几个方面进行从而对整体的业务以及技术的定义.作用.相互之间的关系,以及在各个阶段使用什么样的技术有一个简单的了解以及认知. 2 知识列表 2.1 什么是程序? ...
web前端开发入门基础教程系列
前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色.从狭义上讲,前端工程师使用 HTML.CSS.JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品,涵盖用户PC端.移动 ...
Web前端开发CSS基础(2)
CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...
Web前端开发css基础样式总结
颜色和单位的使用颜色用颜色的名字表示颜色,比如:red 用16进制表示演示比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255之间一般都用16进制表示颜色单 ...
web前端开发必备基础单词整理
class 命名参考 #导航类导航:nav 标题:title 摘要:summary 菜单:menu 子菜单:submenu 主导航:mainbav 子导航:subnav 顶导航:topnav 边导航 ...
零基础怎么学习web前端开发
零基础怎么学习web前端开发?web前端在移动互联网行业的运用是非常广泛的,而且web前端开发技术所涵盖的知识有很多,具体要怎么学习,来看看小编下面的详细介绍吧. 零基础怎么学习web前端开发?对零基 ...

Web前端开发—html基础（3）

十 、表单

1 简单的表单示范

2 自动填充表单——autocomplete

3 指定目标显示位置

4 设置默认值——value

5 自动聚焦——autofocus

6 禁用元素——disabled

（1）按钮

（2）文本框

7 禁止修改——readonly

8 将文本包裹起来——label元素

9 label里面的for元素

10 fieldset元素——可以将表单内相关元素进行分组

11 legend元素——为fieldset定义说明文字

12 select和option元素——制作下拉选项框

13 optgroup元素——下拉列表选项分组

14 input元素 的type属性

（1）Input实现按钮样式

（2）单选框radio

（3）复选框 -- checkbox

（4） 时间和日期

15 input实现搜索框样式

（1）搜索框--search

（2）颜色选择框--color

（3）图像按钮--image

（4）将input元素影藏起来——hidden元素

16 Input实现文件上传

17 限制数字输入

18 文本框输入规范

19 Output元素显示计算结果

20 textarea元素：接收多行文本输入

21 wrap 元素（soft、hard、off）

十一、 语义化结构

1.details 和summary元素：

2.article和section元素

3.footer元素

十二、网页嵌入

1.网页图片

（1）map元素和area元素：点击图形某区域内可以跳转到另一个链接。

（2）picture和source元素：图像像素适配

（3）figure和figcaption元素：插图

2.网页嵌入视频

3.网页嵌入音频

4.网页嵌入网页

5.网页嵌入地图

Web前端开发—html基础（3）相关推荐

最新文章

热门文章

十、表单

14 input元素的type属性

（4）时间和日期

十一、语义化结构