HTML5的发展改变了互联网技术的趋势，前台的热度依然不减。因此，前台技术成为了应用开发者的必备技能之一。本文旨在帮助孟新入门，同时希望能对老鸟查漏补缺起到积极作用。让我们开始吧。 HTML5是什么？广义的HTML5是HTML的最新修订版，由万维网联盟(W3C)于2014年10月制定。 目标是取代1999年制定的HTML 4.01和XHTML 1.0标准，以使网络标准满足互联网应用快速发展的当代网络要求。 但我们日常生活中常说的HTML5技术，其实指的是包括HTML、CSS、JavaScript在内的一套技术组合。 为了提高开发效率，开发人员经常使用各种组件工具，如jQuery、BootStrap、webpack或前台框架，如VUE。 除了学习各种工具框架的使用，HTML5的基础知识也需要了解，这有助于更好地理解工具框架的设计和使用。 后面我们会结合一系列文章，深入浅出的讲解HTML、CSS、JavaScript的常用功能和编程技巧。 那么我们先来了解一下HTML5升级了什么:HTML5网页是一个什么样的网页？只要html页面的第一行是<！DOCTYPE html & gt浏览器将根据HTML5标准解析网页，而不管页面中是否使用了HTML5新内容。HTML5增加了哪些新内容？更好的语义标签结构元素:文章、旁白、页眉、组、页脚、图表、部分、导航 其他元素:视频、音频、画布、嵌入、标记、进度、计量器、时间、命令、细节、数据网格、keygen、输出、源、菜单、ruby、wbr、bdi、对话框 section、nav等少数语义标签在使用上与传统div没有太大区别，但更有利于搜索引擎的索引、智能手机、pad等小屏幕设施的适配以及残障人士的便利。 同时，一些标签为浏览器增加了新的功能，比如音频和视频。 应用程序接口1。Canvas，可以获取canvas标签元素的context对象，然后使用context对象中的drawing函数进行绘制。 W3schools.com/html/html2.和视频，使用音频和视频元素，浏览器不需要安装播放插件，并提供播放控制API。 3.地理位置。通过使用与导航器相关的API，您可以在客户获得授权时获取客户位置信息。 4.新的表单元素，电话，电子邮件，网址，搜索，范围，数字，颜色，日期时间，日期时间-本地，时间，日期，周，月 有了浏览器的支持，很多表单控件将成为历史。5.新的表单特性和功能:占位符、自动完成、自动聚焦、拼写检查、列表特性、数据列表元素、最小值和最大值、步长、必需6。拖放API:拖放属性，拖放事件(dragstart，drag，Dragenter，dragleave，dragover，drap，dragend)，dataTransfer对象7。WebSocket是一种用于浏览器和服务器之间全双工通信的网络技术，可以传输基于信息的文本和二进制数据8。Web工作者，JavaScript是单线程的，复制js会导致页面装死。 如果js操作不需要访问页面窗口，可以在web worker中并行解决。 废除元素废除一些纯粹可实现的和不兼容的元素，如:缩略词，小程序，基本字体，大，中心，目录，字体，框架，框架集，IsIndex，无框架，罢工，TT。 浏览器支持IE9，也开始支持了，但是IE10以后更好了。 Chrome、Firefox、Safari和Opera支持更好。 这只是常用的HTML5的几个新功能。接下来，我们来看看HTML5中页面布局的变化。 HTML5页面布局有很多常用的页面布局方法。比如最早的静态表格布局，用栅栏划分页面的流式布局，自适应布局根据屏幕大小自动调整内容。以上布局主要是利用css中的display、position、float属性实现的。在确定位置和清理浮动时，经常会遇到热点问题(比如垂直居中和屏幕适配)。 CSS3提供了一个更简单的布局，Flex布局(灵活布局)。 让我们通过一个例子来展示Flex layout的易用性。下图是一个典型的单页应用样式，在结构上分为页眉、旁注、页脚和主页面四个部分。 此外，根据剩余空间自动填充主区域。 首先，我们用自适应布局来实现上图的结构。HTMLCSS页面分为三个部分:顶部、底部和中间。中间部分的容器高度是用CALC计算的，浏览器高度变化时自动调整。 容器旁边是一个宽度为20%的浮动元素 Main根据剩余宽度进行调整 这种布局有几个问题，即当页眉和页脚的高度改变时，容器的高度需要重新设置。此外，如果容器中有许多平行元素，浮动很难控制。 接下来，我们来看看如何使用Flex布局来实现上述效果:HTMLCSS效果如下。在前端领域混了几年，总结了一套前端学习的强化讲座视频和学习路线。如果有对前端开发感兴趣的伙伴，无论是想转行的还是大学生，或者是想在工作中提升能力的web前端党，欢迎大家加入我的前端开发交流群:603985993。希望大家真诚交流！，与企业需求同步。 朋友在里面学习交流。大牛每天定时讲解前台技术！也可以关注我的微信微信官方账号:【前台学员】每天更新最新技术文章和干货。 与自适应布局相比，上述代码具有以下特点:页面使用HTML5语义标签，页面各部分功能清晰。 将车身高度设置为100vh，这是CSS3的新单位vh，即视图高度窗口的高度。100vh相当于HTML，体高100%。还有vw代表窗口的宽度。主体设置flex布局，designerContainer从上到下堆叠设置flex 1。自动填充除页眉和页脚以外的剩余空间。容器的内部仍然以flex布局。designerMain将flex 1设置为自动填充除flex兼容性之外的剩余空间。注意:l IE9不支持Flex。建议IE11l Safari和IOS需要添加-webkit- over:
