HTML5完整教程

HTML5培训教程什么是HTML5？HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。HTML5时间表HTML5的八大新特性语义离线存储设备通用连接多媒体三维、图形与特效性能与集成CSS3语义思考：什么是语义化？语义化：是指用合理HTML标记以及其特有的属性去格式化文档内容。通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解.语义化的(X)HTML文档有助于提升你的网站对访客的易用性，比如使用PDA、文字浏览器以及残障人士将从中受益。对于搜索引擎或者爬虫软件来说，则有助于它们建立索引，并可能给予一个较高的权值。简化的文档类型和字符集2020/2/18!DOCTYPE声明位于HTML文档中的最前面的位置，它位于html标签之前。该标签告知浏览器文档所使用的HTML或XHTML规范。在HTML4中，!DOCTYPE标签可以声明三种DTD类型，分别表示严格版本（Strict）、过渡版本（Transitional）和基于框架（Frameset）的HTML文档。HTML5的!DOCTYPE标签2020/2/18!DOCTYPEHTMLHTML5的字符集2020/2/18HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下：metacharset=UTF-8HTML5的字符集2020/2/18HTML5的字符集也得到了简化，只需要使用UTF-8即可，使用一个meta标记就可以指定HTML5的字符集，代码如下：metacharset=UTF-8语义化的文档标签HTML5的设计者们认为网页应该像XML文档和图书一样有结构。通常，网页中有导航、网页体内容、工具栏、页眉和页脚等结构。HTML5中增加了一些新的标记以实现这些网页结构，这些新标记及其定义的网页布局十个常用的新标签列表article定义文章aside定义文章的侧边栏figure一组媒体对象以及文字figcaption定义figure的标题footer定义页脚header定义页眉nav定义导航section定义文档中的区段time定义日期和时间被弃用的标签：acronym、applet、basefont、big、center、dir、font、frame、s、isindex、noframes、frameset、strike、tt、u和xmp。header标签2020/2/18header标签用于定义文档的页眉（介绍信息）。使用header标签的例子。headerh1欢迎光临我的网站/h1p我是黑龙江傲立/p/headerp网页的其他部分.../p2020/2/18nav标签nav标签用于定义导航链接。【例1-17】使用nav标签的例子。headerh1欢迎光临我的网站/h1p我是黑龙江傲立/p/headernavahref=index.asp首页/aahref=intro.asp简介/aahref=contact.asp联系方式/a/navp网页的其他部分.../pfooter本文档创建于2012-10-07/footer2020/2/18nav标签示例section标签2020/2/18section标签用于定义文档中的区段，例如章节、页眉、页脚或文档中的其他部分。使用section标签的例子。sectionh1HTML5/h1pHTML5是最新的HTML标准.../p/sectionarticle标签2020/2/18article标签用于定义文章或网页中的主要内容。使用article标签的例子。article微软在发布WindowsPhone8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。....../articleaside标签2020/2/18aside标签用于定义主要内容之外的其他内容。使用aside标签的例子。p微软在发布WindowsPhone8时曾表示，移动版IE10在HTML5上比起IE9将会有长足的进步，看来他们并没有吹嘘。根据外站WPCentral近日对各大浏览器进行的跑分测试，我们可以看到，IE10的成绩是IE9的两倍有余。/pasideh4HTML5/h4HTML5是最新的HTML标准。目前HTML5的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为W3C推荐标准。HTML5无疑会成为未来10年最热门的互联网技术。/aside2020/2/18aside标签示例2020/2/18figure标签figure标签用于定义独立的流内容（图像、图表、照片、代码等等）。使用figcaption元素为figure添加标题。figurefigcaption黄浦江上的的卢浦大桥/figcaptionp拍摄者：W3School项目组，拍摄时间：2010年10月/pimgsrc=img/shanghai_lupu_bridge.jpgwidth=350height=234//figure2020/2/18figure标签示例2020/2/18footer标签footer标签用于定义区段（section）或文档的页脚。通常，该元素包含作者的姓名、文档的创作日期或者联系方式等信息。使用footer标签的例子。footerpPostedby:W3School/ppContactinformation:ahref=mailto:[e-mail]@example.com/a./p/footer2020/2/18footer标签示例2020/2/18一个综合示例headerh1网页标题/h1h2次级标题/h2h4提示信息/h4/headerdivid=containernavh3导航/h3ahref=#链接1/aahref=#链接2/aahref=#链接3/a/navsectionarticleheaderh1文章标题/h1/headerp文章内容....../pfooterh2文章注脚/h2/footer/article/sectionasideh3相关内容/h3p相关辅助信息或者服务....../p/asidefooterh2页脚/h2/footer/div/body2020/2/182020/2/18HTML5的新增内联元素1．mark标签2．time标签3．meter标签4．progress标签2020/2/18mark标签mark标签用于定义带有记号的文本。使mark标签的例子。p目前markHTML5/mark的标准草案已进入了W3C制定标准5大程序的第1步。预期要到2022年才会成为W3C推荐标准。/p2020/2/18mark标签示例2020/2/18time标签time标签用于定义公历的时间（24小时制）或日期，时间和时区。time标签的属性如下：datetime，用于指定日期/时间。如果不指定此属性，则元素的内容给定日期/时间。其语法格式如下：timedatetime=YYYY-MM-DDThh:mm:ssTZDpubdate，用于指定指示time元素中的日期/时间是文档（或最近的前辈article元素）的发布日期。其语法格式如下：timepubdate=pubdate2020/2/18time标签示例使time标签的例子。p2013年春节是time2013-02-10/time/pp2013年timedatetime=2013-02-10春节/time/pptimepubdate=pubdate/time/p目前所有主流浏览器都不支持time标签。2020/2/18meter标签meter标签用于定义度量衡。仅用于已知最大和最小值的度量。浏览器会使用图形方式表现meter标签。meter标签的属性说明如下：high，定义度量的值位于哪个点，被界定为高的值。low，定义度量的值位于哪个点，被界定为低的值。max，定义最大值。默认值是1。min，定义最小值。默认值是0。optimum，定义什么样的度量值是最佳的值。如果该值高于high属性，则意味着值越高越好。如果该值低于low属性的值，则意味着值越低越好。value定义度量的值。目前IE浏览器不支持meter标签。2020/2/18meter标签meter标签的例子。metermin=0max=20value=5/metermetervalue=0.1/metermetervalue=0.3optimum=1high=0.9low=0.1max=1min=0/meterspan30%/spanmetermin=0max=100value=80/metermetermin=0max=100value=100/meter2020/2/18meter标签示例ChromeIEEdge2020/2/18progress标签progress标签用于定义定义一个进度条。它的属性说明如下：max，定义完成的值。value，定义进度条的的当前值，如果不指定value值，则显示一个动态的进度条。InternetExplorer9以及更早的版本浏览器不支持progress标签。2020/2/18progress标签使用progress标签的例子。下载进度：progressvalue=85max=100/progressspanid=objprogress85/span%br处理中，请稍候：progress/progress2020/2/18progress标签示例2020/2/18支持动态页面1．菜单2．右键菜单3．在script标签中使用async属性4．details标签2020/2/18menu标签在HTML5中，可以使用menu标签定义菜单，多用于表单中组织控件列表。menu标签的常用属性如表1-3所示。属性说明autosubmit如果为true，那么当表单控件改变时会自动提交label文档的背景色type定义显示那种类型的菜单。可选值为context、toolbar和list，默认值是list2020/2/18menu标签示例menutype=toolbarlimenulabel=Filebuttontype=buttononclick=file_new()新建/buttonbuttontype=buttononclick=file_open()打开/buttonbuttontype=buttononclick=file_save(