HTML5新手入门教程

2021-07-02 作者:未知   |   浏览(
设计网站的程序多种多样,互联网进步,技术也要相对升级,撰写网站的代码技术典型代表要属HTML代码了,在网站中应用广泛,也比较实用。HTML目前进步到5,HTML5是最新的代码语言。
通常广义而言的HTML5则包含了HTML、CSS和JavaScript三个部分,不单单只不过HTML部分而已,CSS 3和JavaScript也有很多的革新,让整个网页程序功能愈加缤纷。HTML5的技术组成:

1、脱机功能

HTML5透过JavaScript提供了数种不一样的脱机储存功能,相对于传统的Cookie而言有更好的弹性与构造,并且可以储存更多的内容。
WebStorage 比Cookies更大、更有弹性的的储存;Web SQL Database 当地端的SQL数据库;Indexed DB Key-value的当地数据库;Application Cache 将部分常见的网页内容cache起来 实时通讯实时通讯实时通讯实时通讯 以往网站因为HTTP协议与浏览器的设计,实时的互动性相当的受限,只能用一些方法来「仿真」实时的通讯成效,但HTML5提供了健全的实时通讯支持。
WebSocket 实时的socket联机;Web Workers 以往JavaScript都是single thread,透过Worker可以有多个运算;Notifications 原生的提示讯息,类似像OS X的Growl提示。
2、档案与硬件支持
不知晓大伙有没发现,在Gmail等新的网页程序当中,已经可以透过拖拉的方法将档案作为邮件附件,这就是这部份HTML5档案的功能中的Dragn Drop和File API。Dragn Drop HTML元素的拖拉;File API 读取用户本机计算机的内容;Geolocation 地理定位;Device orientation 手持装置的方向;Speech input 语音输入 。
3、语意化
语意化的互联网是可以让计算机可以愈加理解网页的内容,对于像是搜索引擎的优化(SEO)或是推荐系统可以有非常大的帮忙。New tags 新的标签,像是 header、 section等。Application tags 也是新的标签,像是 meter、 progress 等;Microdata 加入语意的数据让搜索引擎等网站可以正确显示;Form type form可以加入的type便多了,包含email和tel等属性,浏览器会帮助进行数据格式的验证。
4、多媒体
Audio、Video的卷标支持与Canvas的功能应该是大伙对于HTML5最熟知的部份了,也是很多人觉得Flash会被取代的重要原因;Audio video 影片和音乐的原生播放支持;Canvas 2D的绘图功能支持;Canvas 3D 3D的绘图功能支持;SVG 向量图支援。
5、CSS 3
CSS3支持了字体的嵌入、版面的排版,与最让人印象深刻的动画功能。
Selector 更有弹性的选择器;Webfonts 嵌入式字体;Layout 多样化的排版选择;Stlying radius gradient shadow 圆角、渐层、阴影;Border background 边框的背景支持;Transition 组件的移动成效;Transform 组件的变形成效;Animation 将移动和变形加入动画支持。
6、JavaScript
在比较JavaScript的基本面也新增了DOM的API、和浏览器上下页的纪录修改。
DOM API 更便捷的查看DOM组件;History API 浏览器的上下页内容修改,便捷AJAX可以保留浏览记录。