Download presentation
Presentation is loading. Please wait.
1
HTML5简介 WEB前端三剑客之一
2
什么是HTML5 Web Applications 1.0 (WHATWG, 2004) HTML5(W3C, 2007)
被多个浏览器所支持 与HTML4规范兼容 引入了新的WEB开发的新技术和新规范
3
HTML新特性 新增拥有具体含义的标签 新增智能表单类型 更加独立，减少了对第三方插件的依赖 本地离线存储的支持 JS多线程的支持
div+css <artilcle>, <footer>, <header>, <nav>, <section> 新增智能表单类型 文本框、文本域、下拉列表 calendar, date, time, , url, search 更加独立，减少了对第三方插件的依赖 音频、视频、画布的支持 本地离线存储的支持 JS多线程的支持 WebSocket技术的引入支持跨域请求、长连接、数据推送 更好的异常处理 文件API
4
HTML5中标签的变化 <font>, <center>被CSS所替代 其他取消属性 新增元素
acronym, applet, basefont, big, dir, font, frame, frameset, isindex, noframes, strike, tt 新增元素 表单元素：date, , url 其他标签：<section>, <video>, <progress>, <nav>, <meter>, <time>, <aside>, <canvas>
5
HTML5的页面布局 X
6
HTML5布局 <!DOCTYPE html> <html> <head> <title>my page</title> </head> <body> <header>header</header> <nav>nav</nav> <article> <section>section</section> </article> <aside>aside</aside> <footer>footer</footer> </body> </html>
7
<section> 定义文档中的节 用来表现普通文档内容或应 用区块 专题性内容 <section>
<h1>section是什么？</h1> <h2>一个新章节</h2> <article> <h2>关于section</h2> <p>section的介绍</p> ... </article> </section>
8
<article> 特殊的section标签 代表一个独立的，完整的 内容块 包含标题（fheader） 也可包含footer
可以嵌套，内层的article 对外层的article具有隶属 关系 <article> <header> <hgroup> <h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup> <time datetime=" "> </time> </header> <p>文章内容详情</p> </article>
9
<nav> 页面导航的链接组 <nav> <ul>
<li><a href=" <li><a href=" <li><a href=" </ul> </nav>
10
<header> 定义文档页眉 包含引导和导航信息 通常包含至少一个标题标记 h1-h6 hgroup标签 表格内容 标识
搜索表单 nav导航等 <header> <hgroup> <h1>网站标题</h1> <h1>网站副标题</h1> </hgroup> </header>
11
<footer> 定义section或document的页脚 文章作者、日期等 与header相似 <footer>
页脚信息 </footer>
12
<hgroup> 对网页或区段section 的标题元素（h1-h6） 进行组合 <hgroup>
<h1>这是一篇介绍HTML 5结构标签的文章</h1> <h2>HTML 5的革新</h2> </hgroup>
13
<figure> 多用于图片与图片描述组合 <figure>
<img src="img.gif" alt="figure标签" title="figure标签" /> <figcaption>这儿是图片的描述信息</figcaption> </figure>
14
增强型表单标签 Jquery：
15
number类型input标签 name: 标识表单提交时的key min：最小值 max：最大值 step：增大/减小的步长
<input type="number" name="demoNumber" min="1" max="100" step="1"/> name: 标识表单提交时的key min：最小值 max：最大值 step：增大/减小的步长
16
email类型input标签 自动校验是否符合邮箱的正则表达式
<input type=" " name=" " placeholder="请输入注册邮箱"/> 自动校验是否符合邮箱的正则表达式
17
URL类型的input标签 <input type="url" placeholder="请输入网址" name="url"/>
18
tel类型的input标签 <input type="tel" placeholder="输入电话" name="phone"/>
19
range类型的input标签 <form oninput="output.value=parseInt(range.value)"/> <input type="range" min="0" max="100" step="5" name="range" value="0"/> <output name="output">0<output/> </form>
20
日期、时间、月份、星期input标签 month time week datetime-local datetime
<input type="date" name="datedemo"/>
21
颜色选择input标签 <input type="color" name="colordemo"/>
22
input标签自动完成功能 <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" /> <datalist id="autoNames"> <option value="UNIX" ></option> <option value="WINOWS" ></option> <option value="MACOS" ></option> </datalist>
23
<fieldset> <legend>表单演示</legend> <form action="" method="POST" id="form1" oninput="output.value=parseInt(range.value)"> <input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填项测试" /> <input type="number" name="demoNumber" min="1" max="100" step="2" /> <input type=" " placeholder="请输入邮箱" name="mail" /> <input type="url" name="url" placeholder="输入正确的网址" /><br /> 日期：<input type="datetime" name="time" /> 颜色：<input type="color" name="color" /><br /> <br /> <input type="range" min="0" max="50" step="5" name="range" value="0" /> <output name="output">0</output> <input type="submit" value="提交表单" /> </form> 表单外的input标签：<input type="text" form="form1" name="demo" /> </fieldset>
Similar presentations
