新手应该如何学习HTML5

这篇文章主要讲解了“新手应该如何学习HTML5”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“新手应该如何学习HTML5”吧!

HTML5的发展改变了互联网技术趋势,前端热度依旧不减,所以对于应用开发人员前端技术也成了必备技能之一,本篇文章的目的是为了帮助萌新的入门指导,也同时希望能为老鸟起到一定查漏补缺的作用,那么让我们开始吧。

<强>什么是HTML5 ?

广义上的HTML5是HTML最新的修订版本,由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定4.01的HTML和XHTML 1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求。

但我们在日常中常说的HTML5技术,实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。

开发人员在开发过程中为了提高开发效率,常常会用到各种组件工具例如:jQuery,引导,webpack,或者前端框架,如:VUE等。除了学习各种工具框架的使用,HTML5的基础知识也是需要了解掌握,这样有助于更好的理解工具框架的设计以及使用。

后面我们将结合一系列文章,深入浅出的介绍关于HTML、CSS和JavaScript的常用功能及编程技巧。

那么首先来了解下HTML5都更新了那些内容:

<强>什么样的网页是HTML5网页?

只要HTML页面第一行是& lt; !DOCTYPE html>浏览器就会按照HTML5标准去解析网页,无论页面中是否使用了HTML5新增内容

HTML5新增了哪些内容?

,,,,,,和牛;更好的语义化标签

,,,,,,结构元素:文章中,放在一边,头,hgroup,页脚,图中,部分,nav。

,,,,,,其他元素:视频、音频、帆布、嵌入,马克,进步,米,时间,命令,细节,datagrid,注册机,输出源,菜单,ruby,超级,bdi,对话框。

,,,,,,一些语义化标签如部分,导航在使用时和传统div并无大的区别,但这种标签更有利于搜索引擎的索引整理,利于智能手机、垫等小屏设备适配,以及方便残障人士使用。

,,,,,,同时也有些标签为浏览器增加了新的功能,如音频、视频。

,,,,,,和牛;应用程序接口(API)

,,,,,,,,,,,,, 1。帆布画布,可以获取标签元素的上下文对象,然后使用该上下文对象中的绘图功能进行绘制.北京://www.w3schools.com/html/html5_canvas.asp

& lt; canvas  id=癿yCanvas",宽度=?00“,身高=?00“,风格=氨呔?1 px  solid  # 000000;“比; 　　& lt;/canvas> 　　& lt; script> 　　,,,var  c =, . getelementbyid (“myCanvas"); 　　,,,var  ctx =, c.getContext (“2 d"); 　　,,,ctx.moveTo (0, 0); 　　,,,ctx.lineTo (200,, 100); 　　,,,ctx.stroke (); 　　& lt;/script>

2。音频和视频,使用音频和视频元素,浏览器无需安装播放插件,同时提供了播放控制API。

,,,,,,,,,,,,, 3。地理位置,通过使用导航相关API在用户授权情况下,可以获取用户位置信息。

,,,,,,,,,,,,, 4。新的表单元素、电话、电子邮件、网址,搜索范围,数字,颜色,datetime, datetime-local,时间,日期,星期,月,随着浏览器的支持,很多表单控件将成为历史

,,,,,,,,,,,,, 5。新的表单特性和函数:占位符,自动完成,自动对焦,解释清楚,列出特性,datalist元素,min和max,一步,要求

,,,,,,,,,,,,6. 拖拖放API:属性,拖放事件(dragstart,拖,dragenter dragleave, dragover,滴下,拖动结束),dataTransfer对象

,,,,,,,,,,,,, 7。WebSocket,一种浏览器与服务器间进行全双工通讯(全双工)的网络技术,可以传输基于信息的文本和二进制的数据

,,,,,,,,,,,,8. Web Workers, JavaScript单线程,复制js需算会导致页面出现假死。如果js操作不需要访问页面窗,那么可以放在网络工作者中并行处理。

,,,,,,和牛;废除元素

,,,,,,废除一些纯变现以及兼容性不好的元素如:缩略词,applet, basefont,大,中心,dir,字体,框架,框架集,isindex, noframes,罢工,tt。

<强>浏览器支持

,,,,,,的问世,IE9开始支持后支持较好。

,,,,,,Chrome、Firefox、Safari、Opera支持较好。

,,,,,,以上便是一些常用的HTML5新增的一些特性,接下来,我们一起看一看在HTML5在页面布局方面有什么变化吧。

<强> HTML5页面布局

常用的页面布局方式有很多种,比如

<李>

最早的静态表格布局

<李>

通过栅栏划分页面的流式布局

<李>

根据屏幕大小自动调整内容的自适应布局

<李>

融和流式布局和自适应布局的响应式布局

新手应该如何学习HTML5