从0开始，html5零基础入门教程，快来看看！
html5的出现影响了互联网技术未来的趋势，直到现在前端热度依然不见，因此对于很多开发人员来说，html5技术成为了必备技能。为了帮助更多的零基础学员快速入门学习，为大家整理了从0开始，html5零基础入门教程，感兴趣的同学快来学习吧！
一、什么是HTML5？
广义上的HTML5是HTML最新的修订版本，由万维网联盟(W3C)于2014年10月完成标准制定。目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，使网络标准达到符合当代的网络需求。
但我们在日常中常说的HTML5技术，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
在开发过程中，开发者为了提高开发效率，经常使用各种组件工具如：jQuery、BootStrap、webpack，或者前端框架如：VUE等。工具框架，HTML5的基础知识也需要掌握，有助于更好地理解工具框架的设计和使用。
二、什么样的网页是HTML5网页？
只要html页面的第一行是，浏览器都会按照HTML5标准解析网页，不管页面中是否使用了新的HTML5内容
三、HTML5 有什么新变化？
• 更好的语义标签
结构元素：article、aside、header、hgroup、footer、figure、section、nav。
其他元素：视频、音频、画布、嵌入、标记、进度、仪表、时间、命令、详细信息、数据网格、keygen、输出、源、菜单、ruby、wbr、bdi、对话框。
section、nav等一些语义标签在使用时与传统div并没有太大区别，但这种标签更有利于搜索引擎的索引、智能手机、Pads等小屏设备的适配，方便残疾人使用。
同时，一些标签给浏览器增加了新的功能，比如音频和视频。
• 应用程序编程接口 (API)
1.canvas，可以获取canvas标签元素的context对象，然后使用context对象中的绘图函数进行绘制。
2.音视频，使用音视频元素，浏览器无需安装播放插件，提供播放控制API。
3.地理位置，用户的位置信息可以在用户授权下使用导航器相关的API获取。
4. 新的表单元素，电话、电子邮件、网址、搜索、范围、数字、颜色、日期时间、本地日期时间、时间、日期、星期、月份。有了浏览器支持，许多表单控件将成为过去
5. 新的表单特性和功能：占位符、自动完成、自动对焦、拼写检查、列表功能、数据列表元素、最小值和最大值、步长、必需
6.拖放API：可拖动属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象
7.WebSocket，一种用于浏览器和服务器之间全双工通信的网络技术，可以传输基于信息的文本和二进制数据
8. Web Workers，JavaScript单线程，复制js会导致页面出现假死。如果js操作不需要访问页面窗口，可以在web worker中并行处理。
• 拖放元素
废除一些纯货币化和不兼容的元素如：acronym、applet、basefont、big、center、dir、font、frame、frameset、isindex、noframes、strike、tt。
浏览器支持
IE9开始支持，后来IE10支持更好。
Chrome、Firefox、Safari、Opera 支持更好。
以上是 HTML5 的一些常见新特性。接下来我们来看看HTML5中页面布局的变化。
四、HTML5 页面布局
常见的页面布局方式有很多，比如：最早的静态表格布局、由栅栏分隔的页面的流畅布局、根据屏幕尺寸自动调整内容的响应式布局、融合了流畅和自适应布局的响应式布局。
上面的布局主要是利用css中的display、position和float属性的组合来实现的。在确定位置和清除浮动时，经常会遇到一些棘手的问题(例如：垂直居中、屏幕适配)。
CSS3 提供了更简单的布局 Flex 布局(flexible layout)。
让我们用一个例子来展示Flex布局的易用性。下图是典型的单页应用风格，分为header、aside、footer和main四个部分。 header 和 footer 有自适应宽度，aside 有固定宽度并且可以缩小，主要区域根据剩余空间自动填充。
我们先用自适应布局来实现上图的结构
HTML
CSS
页面分为上、中、下三部分。中间部分容器的高度是使用CALC计算的，当高度变化时，浏览器的高度会自动调整。容器中的 side 是一个宽度为 20% 的浮动元素。 main 根据剩余宽度调整。
这种布局方式存在一些问题，就是当页眉和页脚的高度发生变化时，需要重新设置容器的高度。另外，如果容器中有很多并行元素，浮动也很难控制。
接下来我们看看如何使用Flex布局来实现上述效果：
html：
css：
效果如下：
与自适应布局相比，上述代码具有以下特点：
页面使用HTML5语义标签，页面各部分功能一目了然。
body 的高度设置为 100vh。这里使用了CSS3新的单位vh，即视图高度就是窗口的高度。 100vh相当于html，body的高度是100%，vw也代表窗口的宽度。
body设置flex布局，方向从上到下堆叠
DesignerContainer 设置 flex 1 自动填充页眉和页脚之外的剩余空间
容器内部还是flex布局，designerMain设置flex 1自动填充剩余空间留一边
五、Flex 兼容性说明：
IE9不支持FLEX，推荐IE11
Safari和IOS需要添加-webkit-
最后，希望以上html5零基础入门教程可以帮助更多的小白快速入门，早日摆脱菜鸟身份。其实小编还是建议零基础的同学参加专业的培训机构进行系统的学习，正规的培训机构课程体系契合企业刚需，各个学习阶段目标明确，涵盖丰富的知识和技能，能够培养专业知识和素养，积累工作经验。
IT学习教程http://www.mobiletrain.org/study/
从0开始，html5零基础入门教程，快来看看！相关推荐
- 0基础能学漫画么？漫画零基础入门教程！
漫画零基础入门教程!很多人都喜欢看动漫,同时也会幻想成为动漫里的主角,与此同时也会诞生学漫画的想法.不论是你真的想学习漫画,又或出于个人爱好,或职业需要,或为了具备一项自己喜欢的看家本领.我们都要先清 ...
- python怎么输出浮点数_python 零基础入门教程第 2 章：基本数据类型 (一)
一.什么是数据类型 编程语言通过一些复杂的计算机物理底层机制,创造不同类型的数据,用来表示现实世界中的不同信息,以便于计算机更好的存储和计算. 每种编程语言都会有一些基本的数据类型用来表示现实世界中的 ...
- 视频教程-Python零基础入门教程-Python
Python零基础入门教程 从2012年从事互联网至今有7年软件编程经验,曾任职国内北京互联网公司,中南林业大学授课Python 现任逻辑教育Python课程负责人,精通Python语言,精通人工智能 ...
- 视频教程-ARDUINO零基础入门教程【代码编程篇】-Arduino
ARDUINO零基础入门教程[代码编程篇] 精通各种单片机编程,有十年以上ARDUINO,51单片机/STM32/PIC/AVR编程,硬件设计,绘图,编程经验.熟悉各种常用传感器使用和物联网通讯 赵勇 ...
- sql数据库教程百度云_绘画自学零基础入门教程|五天学会绘画pdf百度云下载！...
绘画自学零基础入门教程|五天学会绘画pdf百度云下载!画画是可以让人留存记忆的事情.我自己就很喜欢画画来记录生活中一些特别的日子.场景还有我的家人朋友们.有时候,比照片更有故事感和纪念意义-有空拿出来 ...
- 初学HTML5--盒子模型,5.1 盒子模型 - Adobe Dreamweaver CC零基础入门教程 - 平面设计学院 - 勤学网...
课时:42节课 时长:13.0小时 课级:基础入门 期待已久的Dreamweaver软件教程终于和大家见面啦!老师一贯的细致全面讲解风格,注重每个专业术语的概念介绍和软件实操相结合,帮助大家全面理解掌 ...
- C语言 const 修饰函数参数 - C语言零基础入门教程
C语言 const 修饰函数参数 - C语言零基础入门教程 目录 一.const 简介 1.const 修饰变量 2.const 修饰指针 3.const 修饰在函数名前面 4.const 修饰在函数 ...
- Python零基础入门教程（ 快速入门）
前言 学无止境,无止境学. 今天要给大家分享的是<Python零基础入门教程01 快速入门>,这是一个系列的教程,从零基础到项目实战.在本教程中,我会给大家介绍Python入门的一些基础知 ...
- C++零基础入门教程：基础篇（一）
前言 嘿嘿,我叕来啦─=≡Σ(((つ•̀ω•́)つ!别问我为什么突然变成了零基础入门教程(一),因为前面那三篇都是基础的不能在基础的教程了.(其实是因为顺序乱了,而且那时候没有单独弄一个专栏,后面我会 ...
- SEO零基础入门教程（外链的发布和软文编写）
seo的作用是众所周知的,对网站进行seo优化,可以给网站带来大量的搜索引擎流量.但是想要做好网站优化也有难度,尤其是对于seo新手来说,因为缺乏理论和实战,所以seo新手需要多加练习.那么具体seo ...
最新文章
- c语言输出三个比值为,请问如何用C语言表示数的比值
- python爬虫高考成绩
- boost::hana::unfold_left用法的测试程序
- 安装memcached服务 和 php 安装memcache扩展
- 【Todo】各种语言里面的for循环 loop
- 哪个Java线程消耗了我的CPU？
- CompletableFuture详解~思维导图
- stl max函数_std :: max_element（）函数以及C ++ STL中的示例
- 基于SkyEye的覆盖率测试
- UINavigationBar UINavigationItem UIBarButtonItem
- Mybatis 单独项目
- drools部署教程
- python中 os._exit() 和 sys.exit(), exit(0)的用法和区别
- uefi装完系统后无法引导_uefi装win7启动不了怎么解决?
- 什么是IP65？仅仅是防水等级吗？看完本文直呼666！
- 第一节 函数与极限——映射与函数
- 关于FPN（特征金字塔网络）层间融合的理解
- html+dom+chm,HTML DOM getElementsByClassName() - JavaScript - 菜鸟学堂-脚本之家
- Requests库常用方法及参数介绍
- 大数据项目篇--电商用户画像