HTML5学习笔记

HTML5学习笔记（入门）一、新增的结构元素1、主体结构元素article元素(独立内容)articleheaderh1苹果/h1p发表日期：timepubdate=pubdate2010/10/09/time/p/headerpb苹果/b,植物类水果，多次花果.....(苹果文章正文)/pfooterpsmall著作版权###公司所有。/small/p/footer/articlearticle元素是可以嵌套使用的，内层的内容再原则上需要与外层的内容相关联。例如，一篇博文，针对该文章的评论就可以使用嵌套article。(pubdate代表发布时间)....pb苹果/b,植物类水果，多次花果.....(苹果文章正文)/psectionh2评论/h2articleheaderh3发表者：lucy/h3ptimepubdatedatetime=2010-10-10T19:00-08:001小时前/time/pheader/articlearticle.../article/section/articlearticle元素也可以用来表示插件，它的作用是使插件看起来好像内嵌在页面中。articleh1MyFruitSpinner/h1objectparamname=allowFullScreenvalue=trueembedsrc=#width=600height=395/embeb/object/articlesection元素(内容分段)section元素用于对网站或应用程序中页面上的内容进行分块。section元素由内容和标题组成。但section元素是一个特殊的容器元素，当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用div而非section元素。通常不推荐位那些没有标题的内容使用section元素。nav元素bodyh1技术资料/h1navulliahref=/主页/a/liliaherf=/events开发文档/a/li/ul/navarticleheaderh1HTML5与CSS3的历史/h1navulliahref=#HTML5HTML5的历史/a/liliahref=#CSS3CSS3的历史/a/li/ul/nav/headersectionid=HTML5h1HTML5的历史/h1p讲述HTML5的历史的正文/p/sectionsectionid=CSS3h1CSS3的历史/h1p讲述CSS3的历史的正文/p/section..。footerpahref=?edit编辑/a|ahref=?delete删除/a|ahref=?rename重命名/a/p/footer/articlefooterpsmall版权所有.../small/p/footer/bodynav元素可以用于以下这些场合传统导航条侧边栏导航页内导航翻页操作aside元素aside元素用来表示当前页面或文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条time元素有些机器编码过程会对时间产生歧义，HTML5增加了一个新的元素来无歧义地、明确地对机器的日期和时间进行编码，并且以让人易读的方式来展示它timedatetime=2010-11-132010年11月13日/timetimedatetime=2010-11-13T20:00我生日的晚上8点/time编码时机器读到的部分在datetime属性里，而元素的开始标记和结束标记中间的部分显示在网页上。2、非主体结构元素header元素headerhgrouph1IT新技术/h1ahref=://blog.sina.com.cn/itnewtech/a ahref=#[订阅]/aahref=#[手机订阅]/a/hgroupnavulli首页/liliahref=#博文目录/a/liliahref=#图片/a/liliahref=#关于我/a/li/ul/nav/headerhgroup元素hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组，譬如一个内容区块的标及其子标题算一组。headerhgrouph1主标题/h1h2子标题/h2/hgroup/headerfooter元素footer元素可以作为其上层父级内容区块或者根区块的脚注。footer通常包括其相关区块的脚注信息，如作者、相关阅读链接及版权信息等。address元素address元素用来在文档呈现联系信息，包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。addressahref=#lucy/aahref=#lily/aahref=#cecil/a/address结构元素大体用div也可以实现，只是如果使用结构元素的话，那么网页代码的可读性则会大大加强。纯HTML5结构的网页实例：://二、表单和文件1、新增元素和属性form属性在HTML4中，表单内的从属元素必须书写在表单内部，但是在HTML5中，可以把它们书写在页面上任何地方，然后给该元素指定一个form属性，属性值为该表单的id，这样就可以声明该元素从属于指定表单了。formid=testforminputtype=text/formtextareaform=testform/textareaformaction属性在HTML4中，一个表单内的所有元素都只能通过表单的action属性统一提交到另一个页面，而在HTML5中可以给所有的提交按钮，诸如inputtype=submit、inputtype=image、buttontype=submit都增加不同的formaction属性formid=testformaction=serve.jspinputtype=submitname=s1value=v1formation=s1.jsp提交到S1inputtype=submitname=s2value=v2formation=s2.jsp提交到S2inputtype=submitname=s3value=v3formation=s3.jsp提交到S3inputtype=submit/formPS:目前尚没有浏览器支持这一属性placeholder属性placeholder是指当文本框(input、textarea)处于未输入状态时文本框中显示的输入提示。inputtype=textplaceholder=inputme/autofocus属性给文本框、选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点inputtype=textautofocus/list属性在HTML5中，为单行文本框(inputtype=text)增加了一个list属性，该属性的值为某个datalist元素的id。datalist元素也是HTML5新增的元素，改元素类似于选择框，但是当用户想要设定的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。为了避免在没有支持该元素的浏览器显示，可以用CSS将其隐藏。inputtype=textname=greetinglist=greetings/!--使用style=display:none;将datalist元素设定为不显示--datalistid=greetingsstyle=display:none;optionvalue=GoodMorningGoodMorning/optionoptionvalue=HelloHello/optionoptionvalue=GoodAfternoonGoodAfternoon/option/datalistautocomplete属性辅助输入所用的自动完成inputtype=textname=greetinglist=greetingsautocomplete=on/PS：chrome20不支持大幅度地增加与改良了input元素的种类search、tel、url、email等，可参照：元素output元素必须从属于某个表单，也就是说，必须将它书写在表单内部，或者对它添加form属性formid=testform请选择一个值inputname=range1type=rangemin=0max=100step=5/outputonforminput=value=range1.value50/output/formPS:目前只有Opera支持得比较好2、表单验证2.1、自动验证require属性、pattern属性formmethod=postinputname=texttype=textrequiredpattern=^\w.*$/inputtype=submit//formmin属性与max属性min与max这两个属性是数值类型或日期类型的input元素的专用属性step属性step属性控制input元素中的值增加或减少时的步幅2.2、显示验证form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法，可以显示地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。scriptlanguage=javascriptfunctioncheck(){varemail=document.getElementById(email);if(email.value==){alert(请输入Email地址);returnfalse;}...}/scriptformid=testformonsubmit=returncheck();Email:inputname=emailtype=emailid=email/br/inputtype=submit//form3、增强的页面元素figure元素与figcaption元素figure元素用来表示网页上一块独立的内容，可以是图片、统计图或代码示例，甚至是音频插件、视频插件等。figcaption元素表示figure元素的标题，从属figure元素，必须写在figure元素内部。figureimgsrc=lufu.jpgalt=lufu/imgsrc=lufu2.jpgalt=lufu/figcaption路飞/figcaption/figuredetails元素提供了一种替代JavaScript的、将画面上局部区域进行展开或收缩的方法。summary元素从属于details元素，用鼠标点击summary元素中的内容文字时