HTML 前端 实例与教程 6

单元4HTML5交互控件HTML5+CSS3+JavaScriptWeb前端开发实例教程（慕课版）【目录】4.1HTML5区块内联4.1.1区块元素4.1.2内联元素4.2HTML5表单4.2.1输入框4.2.2下拉列表框4.2.3单选按钮4.2.4复选框4.2.5文本域4.2.6按钮4.3HTML5音视频控件4.3.1embed控件4.3.2object控件4.3.3audio控件4.3.4video控件【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域任务一编写用户登录模块任务二编写规则与协议、新手上路、付款方式和淘宝特色的

模块说明任务三开发淘宝首页底部区域【综合实训】制作个人信息调查表【单元小结】目录【学习导读】HTML5为网页开发者提供了许多新的交互控件，使得网页更加智能。这些控件包括输入框、下拉列表框、复选框等。通过这些控件，开发者可以轻松地实现各种复杂的交互效果。在学习HTML5交互控件之前，我们需要知道标签有不同的类型，如text、password、checkbox、radio等。这些类型分别对应着不同的输入方式。使用交互控件是搭建多元化网页的重要途径，通过使用交互控件，网页可以与用户进行交互，从而让用户的体验更好。本单元将详细介绍HTML5交互控件的使用方法。的表格、框架和列表的使用方法。学习导读【学习目标】知识目标1．掌握HTML5表单和表单元素的使用。2．掌握HTML5音视频控件的使用。能力目标1．能够独立开发HTML5表单控件。2．能够在网页中嵌入视频和音频。素质目标1．培养学生交互应用的能力。2．培养学生的思维发散能力。学习目标思维导图4.1HTML5区块内联4.1.1区块元素常见的区块元素包括标题标签（<h1>～<h6>）、段落标签（<p>）、<div>标签、列表标签（<ul>、<ol>等）和表格标签（<table>）等。例如定义一些区块元素，代码如下所示（实例位置：单元4/4-1.html）。运行效果4.1HTML5区块内联4.1.2内联元素常见的内联元素包括超链接标签（<a>）、<span>标签、图像标签（<img>）、粗体标签（<strong>）、输入框标签（<input>）和下拉列表框标签（<select>）等。内联元素与区块元素的区别内联元素一般都是基于语义（semantic）的基本元素。内联元素只能容纳文本或者其他内联元素，最原始的内联元素是<span>。属性内联元素区块元素宽度标签内容的宽度和上级元素的宽度一样宽高度标签内容的高度标签内容的高度显示多个内联元素显示在同一行多个区块元素换行显示控制宽高不可控制宽高可控制4.1HTML5区块内联4.1.2内联元素例如定义一些内联元素，代码如下所示（实例位置：单元4/4-2.html）。运行效果4.2HTML5表单表单是一个包含表单元素的区域。表单元素是表单中具体内容的呈现，如输入框（input）、文本域（textarea）、下拉列表框（select）、单选按钮（radio）、复选框（checkbox）等。ABHTML5表单（form）在网页中主要负责数据采集，利用表单可以实现网页与用户的交互，收集不同类型的用户输入，并且提交数据。4.2HTML5表单常用的HTML5表单标签标签描述<form>供用户输入的表单<input

id=""

list="">输入域<textarea>文本域

(一个多行的输入控件)<label

for=""><input>

元素标签的输入标题<fieldset>一组相关的表单元素使用外框包含起来<legend><fieldset>

元素的标题<select>下拉选项列表<optgroup

label="标题">下拉选项列表的选项组<option>下拉选项列表中的选项<button>定义一个点击按钮<datalist

id="">指定一个预先定义的输入控件选项列表4.2HTML5表单<input>标签通过type属性来控制标签展示的具体形式，type属性的默认值为text，也就是输入框，常用的type属性值如表所示。4.2.1输入框值描述button定义可点击的按钮（大多与

JavaScript

使用来启动脚本）checkbox定义复选框。color定义拾色器。date定义日期字段（带有

calendar

控件）datetime定义日期字段（带有

calendar

和

time

控件）datetime-local定义日期字段（带有

calendar

和

time

控件）month定义日期字段的月（带有

calendar

控件）week定义日期字段的周（带有

calendar

控件）time定义日期字段的时、分、秒（带有

time

控件）email定义用于

e-mail

地址的文本字段file定义输入字段和

"浏览..."

按钮，供文件上传hidden定义隐藏输入字段值描述image定义图像作为提交按钮number定义带有

spinner

控件的数字字段password定义密码字段。字段中的字符会被遮蔽。radio定义单选按钮。range定义带有

slider

控件的数字字段。reset定义重置按钮。重置按钮会将所有表单字段重置为初始值。search定义用于搜索的文本字段。submit定义提交按钮。提交按钮向服务器发送数据。tel定义用于电话号码的文本字段。text默认。定义单行输入字段，用户可在其中输入文本。默认是

20

个字符。url定义用于

URL

的文本字段。4.2HTML5表单例如定义输入框控件，代码如下所示（实例位置：单元4/4-3.html）。4.2.1输入框<!--单行输入框--><inputtype="text"/>在网页中打开的效果如下所示。4.2HTML5表单<select>标签表示下拉列表框，用<option>标签定义下拉列表中的选项。例如定义一个国家下拉列表框，代码如下所示（实例位置：单元4/4-4.html）。4.2.2下拉列表框<selectname="contry"><optionvalue="none">--选择国家--</option><optionvalue="usa">美国</option><optionvalue="en">英国</option><optionvalue="cn"selected="selected">中国</option></select>运行效果4.2HTML5表单将type属性的值设置为radio时展示出来的元素为单选按钮，使用单选按钮时必须定义name属性，用来表示哪些选项属于同一个分组，否则不能单选。例如定义一组单选按钮，代码如下所示（实例位置：单元4/4-5.html）。4.2.3单选按钮<inputtype="radio"name="a"/>选项1<inputtype="radio"name="a"/>选项2<inputtype="radio"name="a"/>选项3<inputtype="radio"name="a"/>选项4运行效果4.2HTML5表单将type属性的值设置为checkbox时展示出来的元素为复选框，使用复选框时必须定义name属性，用来表示选项属于同一个分组或属于不同分组。例如定义一组复选框，代码如下所示（实例位置：单元4/4-6.html）。4.2.4复选框<inputtype="checkbox"name="b"/>选项1<inputtype="checkbox"name="b"/>选项2<inputtype="checkbox"name="b"/>选项3<inputtype="checkbox"name="b"/>选项4运行效果4.2HTML5表单文本域也称为多行文本框，支持输入多行文字内容，并且可以通过设置属性或者拖曳改变文本域的大小。HTML5中一般使用<textarea>标签来定义文本域，代码如下所示（实例位置：单元4/4-7.html）。4.2.5文本域<textarea></textarea>运行效果4.2HTML5表单将type属性的值设置为button时展示出来的元素为按钮，在HTML5中也可以使用<button>标签来定义按钮。下面使用两种不同的方式来定义按钮（实例位置：单元4/4-8.html）。4.2.6按钮<button>按钮</button><inputtype="button"value="按钮"/>运行效果4.3HTML5音视频控件HTML5音视频控件提供了一种方便且高效的方式来将音频和视频内容嵌入Web网页中。这些控件基于HTML5的<audio>和<video>标签，它们使得开发者可以轻松地控制音频和视频的播放、暂停、音量等。HTML5音视频控件还支持字幕、封面图等，进一步提升了用户体验。由于HTML5音视频控件具有良好的跨平台性，因此它们已经成为Web开发中的重要组成部分。0102034.3HTML5音视频控件常用的音视频控件标签说明<embed>音视频，支持单一视频个数<object>音视频，支持单一视频个数<audio>音频，支持多种视频个数<video>

视频，支持多种视频个数4.3HTML5音视频控件4.3.1embed控件<embed>标签用于定义外部（非HTML）内容的容器。这是一个HTML5标签，在HTML4.01中无此标签，但是在所有浏览器中都有效。使用方法是将文件地址赋给src属性，如下所示。<embedheight="50"width="100"src="media/music.mp3">例如通过<embed>标签分别引入一个音频和视频文件，代码如下所示（实例位置：单元4/4-9.html）。4.3HTML5音视频控件4.3.1embed控件<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>音视频播放</title></head><body><embedheight="70"align="center"src="./media/music.mp3"/><br/><br/><embedsrc="./media/video.mp4"/></body></html>运行效果4.3HTML5音视频控件4.3.2object控件使用<object>标签也可以定义外部（非HTML）内容的容器。<object>标签用于包含对象，比如音频、视频、JavaApplet、ActiveX、PDF以及Flash文件等。使用方法是将文件地址赋给data属性，如下所示。<objectheight="50"width="100"data="media/music.mp3"/>例如通过<object>标签分别引入一个音频和视频文件，代码如下所示（实例位置：单元4/4-10.html）。4.3HTML5音视频控件4.3.2object控件运行效果<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>音视频播放</title></head><body><objectheight="70"data="media/music.mp3"></object><br/><br/><objectdata="media/video.mp4"></object></body></html>4.3HTML5音视频控件4.3.3audio控件audio控件只能用于播放音频文件，即使播放视频文件也是没有画面的。音频文件的格式非常多，而<audio>标签并不全部支持，当前<audio>标签支持3种音频格式。不同浏览器对音频文件的支持情况格式IE9Firefox3.5Opera10.5Chrome3.0Safari3.0OggVorbis

✅✅✅

MP3✅

✅✅Wav

✅✅

✅4.3HTML5音视频控件4.3.3audio控件使用方法是将音频文件地址赋给src属性，如下所示。<audioheight="50"width="100"src="media/music.mp3"/>为了兼容不同浏览器，可以利用<source>标签准备多种格式的音频文件，这样浏览器就可以选择它所支持的格式的音频文件进行播放。例如在<audio>标签下使用<source>标签准备多个格式的音频文件，代码如下所示（实例位置：单元4/4-11.html）。运行效果4.3HTML5音视频控件4.3.4video控件video控件只能用于播放视频文件，在HTML5中通过<video>标签来完成视频的插入。基本语法如下所示。不同浏览器对视频文件的支持情况<videosrc="文件地址"controls="controls"></video>格式IEFirefoxOperaChromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No4.3HTML5音视频控件4.3.4video控件同音频控件audio一样，为了兼容不同浏览器，可以事先准备多种格式的视频文件，例如在<video>标签下使用<source>标签准备多种格式的视频文件，代码如下所示（实例位置：单元4/4-12.html）。运行效果<videowidth="320"height="240"controls> <sourcesrc="./media/video.mp4"type="video/mp4"> <sourcesrc="./media/video.ogg"type="video/ogg">

您的浏览器不支持video标签。</video>【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块01OPTION结构分析从图中我们可以发现用户登录模块主要由3个部分组成：登录表单；微博和支付宝登录的快捷入口；忘记密码、忘记账号名及免费注册的链接导航。可以用<div>标签作为用户登录模块的容器。使用<form>表单标签设置登录表单，表单标签中用两个<input>标签分别作为用户名和密码的输入框，用<button>标签定义“登录”按钮。“微博登录”和“支付宝登录”可以使用<div>标签包裹，里面放两个<a>标签定义链接。使用<div>标签作为“忘记账号名”“忘记密码”“免费注册”的外层容器，里面使用<a>标签定义导航链接。表单上方还有一个提示登录信息错误的隐藏布局，使用<div>标签进行布局，当登录失败时将提示信息展示在表单上方。【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务一编写用户登录模块02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务二编写规则与协议、新手上路、付款方式和淘宝特色的模块说明01OPTION结构分析从图中我们可以发现布局主要分成4列，每一列中的布局都是上下结构，上面由一个图标和文字标题组成，下方为导航链接列表。可以用<div>标签作为整个模块的容器，在里面分别定义4个卡片，使用<div>标签定义卡片区域，里面使用一个<div>标签定义头部区域，内部使用<i>标签定义图标，使用<span>标签定义文字标题。使用<ul>和<li>标签定义导航链接列表，内部使用<a>标签作为链接容器。【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务二编写规则与协议、新手上路、付款方式和淘宝特色的模块说明02OPTION编写代码【商业实例】“仿写淘宝首页”项目——开发登录表单和底部区域本任务三开发淘宝首页底部区域01OPTION