没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
HTML5
第一章第一章 HTML5概述概述
H5是下一代的web开发的基础.
1.1 web技术发展时间线技术发展时间线
1. 1991 HTML 就是用标记表示一些比普通文本更丰富的文本,文本的超集,有多个版本,没有图片传递。
2. 1994 HTML2 作为HTML1(+)的后续发展,但从未成为标准
3. 1995 HTML3 提供了很多新特性,例如文字环绕,表格,但是由于兼容性问题停止开发.
4. 1996 CSS+Javascript 用层叠样式表修改样式 最基本的交互alert
5. 1997 HTML4 把一些标签标记为废弃 互联网公司的博弈
6. 1998 CSS2 Web技术停滞 1999 ES3
7. 2000 环境混乱,提出 XHTML 更严格的HTML 去除大写的标签 不闭合的标签等 是XML的实现 (2001 ie6)
8. 2002 Tableless Web Design 表格布局
9. 2005 AJAX 中国到2006年还没有使用ajax的技术
10. 2009 HTML5 移动端的推动
11. 2014 HTML5 Finalized
1.2 HTML5概念概念
HTML5并不是单纯的超文本的第五次版本,而是定义为Web Application,改变web开发的传统模式.
W3C将H5定义为HTML,CSS,Javascript API的升级语言,是新一代开发Web富客户端客户端应用的整体解决方案.
1.3 应用场景应用场景
网页应用程序
PC端: iCloud , 百度脑图 ,Office365...
APP端:淘宝 , 京东 ,美团
WeChat端:微信小程序,淘宝,京东等
混合本地式应用
PC端:网易云音乐 , 有道词典
APP端:淘宝,手机百度,京东
简单的游戏
1.4 HTML5新增特性新增特性
HTML:
标签
语义化标签
应用程序标签
属性
链接关系描述
结构数据标记
自定义属性
智能表单
网页多媒体
音频
视频
字幕
Canvas
2D
3D (WebGL)
Javascript API:
核心平台提升
新的选择器 QuerySelector
访问历史
全屏
网页存储
Application Cache
localStorage
sessionStorage
设备信息访问
网络状态
硬件访问
设备方向
地理围栏
拖放操作
网页内拖放
桌面拖入
桌面拖出
文件
文件系统API
FileReader
网络访问
Ajax
WebSocket
桌面通知
CSS :
一些CSS3的新特性
第二章第二章 语义化标签语义化标签
语义化标签能够让HTML代码更符合内容的结构化,标签的语义化
以前我们可能是这样的:
<div class="header"></div>
<div class="nav"></div>
<div class="content">
<div class="article"></div>
</div>
<div class="sidebar">
<div class="widget"></div>
</div>
<div class="footer"></div>
以后我们肯定是这样的:
<header></header>
<nav></nav>
<section>
<article></article>
</section>
<aside>
<div class="widget"></div>
</aside>
<footer></footer>
形成统一的规范,更易于人和机器的无障碍读取网页内容.
语义化标签能够便于开发者阅读和写出更优雅的代码
能够让浏览器或者网络爬虫可以更好的进行解释,从而更好的分析其中的内容,更好的搜索引擎优化
切记
HTML的职责是描述一块区域的内容或意义是什么的职责是描述一块区域的内容或意义是什么 ,而不是它长得是什么样子而不是它长得是什么样子 ,网页的外观应该由网页的外观应该由CSS来决定来决定
一些常见的语义化标签 http://blog.csdn.net/coco379/article/details/52938071
HTML5的新的语义化标签 http://www.cnblogs.com/zjf-1992/archive/2016/12/16/6182406.html
第三章第三章 应用程序标签应用程序标签
应用程序标签主要由 DataList(数据列表),Progress(进度条),Meter(数值显示器),Menu(右键菜单),Detail(明细)等组成,其中后两种标签兼容性不好,
我们只对前三种进行讨论.
DataList
是input标签的一种补充,类似于自动完成的一种样式,帮助我们匹配查找列表中的内容
文档格式无法访问,需要HTTP形式访问
<pre>
数据列表呈现需要一个载体 input
</pre>
<input type="text" list='input_list' name="">
<datalist id="input_list">
<option value="lisi"></option>
<option value="wangwu"></option>
</datalist>
</body>
</html>
不仅可以呈现列表,还可以进行自动匹配查找
不能修改样式,基本上用jquery
进度条进度条
进度条默认长度是1,可以用value和max控制
progress
<progress></progress>
<progress value="10" max="100">
当我们修改进度条的颜色的时候,发现并不是我们所期待的颜色,并且我们不能对进度和总体样式进行修改.
在谷歌开发者工具中可以打开Show user agent shadow DOM 选项
在控制台可以看到progress 的具体配置
自定义进度条样式 http://www.hongkiat.com/blog/html5-progress-bar/
shadow-dom http://www.cnblogs.com/coco1s/p/5711795.html
meter
<pre>
定义的是数值,不是进度,例如销量等.
</pre>
<meter max="100" value="90" high="60" low="30"></meter>
http://www.w3school.com.cn/tags/tag_meter.asp meter标签
第四章第四章 数据结构数据结构
随着互联网网站和应用的增多,爬虫的负担也变得越来越大,数据结构标签即是帮助爬虫快速提取和检索网站信息的新增标记,需要特定的工具
<div itemscope itemtype="http://example.com/hello">
<p>我叫<span itemprop="主人">whitsats</span>。</p>
<p>
我养了一条叫
<span itemprop="狗名">旺财</span>的
<span itemprop="品种">金毛</span>犬。
</p>
</div>
是一个包含键值对信息的html代码块,便于抓取.因为对于'我养了一条叫'这些字段对于我们来说是没有意义的.
https://search.google.com/structured-data/testing-tool 谷歌的结构数据读取工具
剩余13页未读,继续阅读
资源评论
programhh
- 粉丝: 8
- 资源: 3838
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功