第二讲HTML5语法、新增标签及智能表单

移动Web开发技术黄增喜内容HTML5语法HTML5标签和属性HTML5智能表单HTML5语法文档类型声明(DTD)<!doctypehtml><!DOCTYPEhtml>等也是正确的，因为HTML语法是不区分大小写的。字符编码代码引入<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>不能混合使用:<metacharset=“utf-8”http-equiv="Content-Type"content="text/html;charset=utf-8"/><metacharset=“utf-8”><scriptsrc="js/juery-1.6.2.js"></script>script

type="text/javascript“src="js/juery-1.6.2.js"></script>

HTML5语法省略标记不允许写结束标记的元素：area、base、br、col、comand、embed、hr、img、input、keygen、link、meta、param、source、track和wbr。可以省略结束标记的元素：li、dt、dd、p、rt、rp、option、thead、tbody、tfoot、tr、td和th。可以省略全部标记的元素：html、head、body、colgroup和tbody。具有布尔值的属性只写属性名不写属性值时，默认为true想要将属性值设定为true，也可以将属性名设定为属性值。HTML5语法具有布尔值的属性只写属性名不写属性值时，默认为true；什么都不写则为false。想要将属性值设定为true，也可以将属性名设定为属性值。省略引号属性值可用双引号或单引号当属性值不含空字符串、<、>、=等字符时，引号可省略<inputtype=“checkbox”checked><inputtype=“checkbox”><inputtype=“checkbox”checked=“checked”><inputtype=“checkbox”checked=“”><inputtype=“checkbox”><inputtype=‘checkbox’><inputtype=checkbox>内容HTML5语法HTML5标签和属性HTML5智能表单HTML5标签和属性新增结构标签语义化的div标签

<article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部

<nav> 标记定义导航链接

<section> 标记定义一个区域

<aside> 标记定义页面内容部分的侧边栏

<hgroup> 标记定义文件中一个区块的相关信息

<figure> 标记定义一组媒体内容以及它们的标题

<figcaption> 标签定义figure元素的标题。 <footer> 标记定义一个页面或一个区域的底部 <dialog> 标记定义一个对话框(会话框)类似微信新的结构标签带来的是网页布局的改变及提升对搜索引擎的友好HTML5标签和属性新增多媒体标签<video>视频标签<audio>音频标签<source>多媒体源文件标签<embed>多媒体标签，插入各类格式多媒体，如MP3、WAV、SWF、AIFF等。<canvas>画布标签。本身没有行为，仅提供一块画布，但它把一个绘图API展现给客户端Javascript，以使脚本能够把想绘制的东西绘制到画布上。注：HTML5的多媒体标签的出现意味着富媒体的发展以及支持不使用插件的情况下即可操作媒体文件，极大地提升了用户体验。HTML5标签和属性新增的其它功能标签<time>日期标签<p>我们在每天早上<time>9:00</time>开始营业。</p><p>我在<timedatetime="2015-02-14">情人节</time>有个约会。</p><meter>状态标签(实时状态显示:气压、气温)<progess>状态标签(任务过程:安装、加载)<metermin="0"max="10"value="5"low="3"high="7"></meter><metervalue="0.6"></meter><progressmax="100"id="pro"></progress>HTML5标签和属性新增的其它功能标签<ruby>标记定义注释或音标<rt>标记定义对ruby的注释内容文本<rp>告诉那些不支持Ruby元素的浏览器如何去显示<mark>标记定义有标记的文本(黄色选中状态)<ruby>夼<rt>kuang

</rt></ruby><ruby>

夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>夼(kuang)HTML5标签和属性新增的其它功能标签<keygen>密匙标签<wbr>软换行标签<email><url><tel><number><range><color>HTML5标签和属性全局属性contentEditable运行用户在线编辑元素中的内容，为true或false<designMode>指定整个页面是否可编辑，属性值只能用javascript脚本改<hidden>通知浏览器不渲染该元素，使其处于不可见状态。<spellcheck>对用户输入的文本内容进行拼写和语法检查。<olcontentEditable="true"><li>一个人生活温岚</li><li>让我爱你胡夏</li><li>在那不远的...孙悦</li></ul>HTML5标签和属性删除的标签纯表现的元素：basefont、big、center、font、s、strike、tt、u；对可用性产生负面影响的元素：Frame、frameset、noframes；产生混淆的元素：acronym、applet、isindex、dir其它：Applet、bgsound、marqueeHTML5重新定义的标签HTML元素HTML5中的意义<b>代表内联文本，通常是粗体，没有传递表示重要的意思<i>代表内联文本，通常是斜体，没有传递表示重要的意思<dd>可以同details与figure一同使用，定义包含文本，dialog也可用<dt>可以同details与figure一同使用，汇总细节，dialog也可用<hr>表示主题结束，而不是水平线，虽然显示相同<menu>重新定义用户界面的菜单，配合commond或者menuitem使用<small>表示小字体，例如打印注释或者法律条款<strong>表示重要性而不是强调符号内容HTML5语法HTML5标签和属性HTML5智能表单HTML5智能表单用户登录收集用户信息HTML5智能表单用户登录提交用户搜索请求网购HTML5智能表单表单处理过程：一、设计表单，并放入一些输入域（input）二、网站访问者在自己的计算机上填写上述输入域，并提交到服务器端三、服务器处理数据并返回确认信息Internet服务器数据库HTML5智能表单表单基本语法<formaction=“”method=“get“> <inputtype="text"name="user"/> <selectname="year"> <optionvalue="1999">1999</option> </select> <inputtype="submit">提交</button></form><formaction=""method=“get“id=”form1”> <inputtype="text"name="user"/> <selectname="year"> <optionvalue="1999"></option> </select></form><inputtype="submit“form=”form1”>提交</button>HTML5智能表单HTML4支持的input类型文本域（text）、密码域（password）、图像域（image）、文件域（file）、隐藏域（hidden）、单选按钮（radio）、复选框（checkbox）、下拉列表（selection与option）、提交按钮（submit）、重置按钮（reset）、普通按钮（button）。HTML5智能表单新增输入类型Input表单的type新属性值Type="email"限制用户输入必须为Email类型Type="url"限制用户输入必须为URL类型Type="number"限制用户输入必须为数字类型Type="range"产生一个滑动条的表单Type="search“产生一个搜索意义的表单Type="color"生成一个颜色选择表单Type="time"限制用户输入必须为时间类型OType="date"限制用户输入必须为日期类型Type="month"限制用户输入必须为月类型OType="week"限制用户输入必须为周类型OHTML5文档结构email类型专门用于输入E-mail地址的文本输入框，在提交表单的时候，自动验证email输入框的值。如果不是有效的邮箱地址，则不允许提交表单。对于不支持email的浏览器，以type=text纯文本的方式输入。语法：<inputtype="email"class="inp"name="user_email"/>HTML5文档结构url类型提供用于输入url地址这类特殊文本的文本框。表单提交时进行校验。number类型提供用于输入数值的文本框。可以规定允许输入的最大、最小值、默认值和数字间隔等。表单提交时进行校验。语法：<inputtype="url"class="inp"name="user_url"/>语法：<inputclass=“inp”type=“number”name=“number1”min=“1”max=“20”step=“4”/>HTML5文档结构range类型提供用于输入包含一定范围内数字值的文本框，在网页中显示为滑动条。语法：<inputclass="inp"type="range"name="range1"min="1"max="30"step="10"/>HTML5文档结构search类型提供用于输入搜索关键词的文本框。形式上与text类型基本一样。只是当输入关键词后，搜索框右侧会出现“╳”，单击其即可清楚输入的搜索词。tel类型提供专门用于输入电话号码的文本框。它并不限定只输入数字，因为很多号码还包括“+、-、（、）”等，如语法：<inputclass="inp"type="search"name="search1"/>语法：<inputclass="inp"type="tel"name="tel1"pattern="\d{11}"/>HTML5文档结构color类型提供专门用于设置颜色的文本框。通过单击文本框，可以快速打开拾色器面板，方便用户可视化选择一种颜色。语法：<inputclass="inp"type="color"name="color1"/>HTML5文档结构日期检出器类型日期检出器（DataPickers）是网页中经常要用到的一种控件，在HTML5之前的版本中，多是采用JavaScript框架来实现，使用麻烦。输入类型HTML代码功能和说明date<inputtype=“date”>选取日、月、年month<inputtype=“month”>选取月、年week<inputtype=“week”>选取周和年time<inputtype=“time”>选取时间（小时和分）datetime<inputtype=“datetime”>选取时间、日、月、年（UTC时间）datetime-local<inputtype=“datetime-local”>选取时间、日、月、年（本地时间）HTML5智能表单新增input属性autocomplete帮助用户在input类型输入框中实现自动完成内容输入。支持的类型包括：email、url、search、tel、range、color、text、password。三种属性值：on、off和空值。autofocusinput用于自动获取光标焦点，为布尔值。placeholder用于为输入框提供提示，提示用户输入内容，当输入框获得焦点后自动消失。支持的类型包括：email、url、search、tel、text、password。语法：<inputtype=“email”name=“user_em”autocomplete=“on”/>语法：<inputtype=“email”name=“user_em”autofocus=“on”/><inputtype=“text”name=“zip_code”placeholder=“请输入6位数字”/>HTML5智能表单required规定输入框不能为空。支持的类型包括：email、url、search、tel、text、password、datepicker、number、checkbox和file等。list属性。用于制定输入框所绑定的datalist元素，可以实现数据列表的下拉效果，外观效果与autocomplete类似。语法：<inputtype=“email”name=“user_em”required=“required”/>语法：<inputclass="inp"type="url"name="user_url"list="urllist"/><datalistid="urllist"><optionlabel="百度"value=""/><optionlabel="谷歌"value=""/></datalist>HTML5智能表单multiple属性。支持email、file等类型一次性输入多个邮箱地址或上传多个文件等。pattern属性。用于验证输入内容是否与自定义的正则表达式匹配。支持的类型包括：text、search、url、email、tel、password等。height和width属性，用于规定image图像的高和宽。语法：<inputtype="file"name="fileselect"multiple=“multiple”/>语法：<inputtype=“text”name=“zip_code”patt