html5入门教程,html5入门到精通教程
本文由葡萄城技术团队原创并首发。
作者：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务并赋能。
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浏览器将根据HTML5标准解析网页，而不管页面中是否使用了新的HTML5内容。
5 html 5有什么新功能？
更好的语义标签
元素：文章，旁白，页眉，组，页脚，图，节，导航。
其他元素：视频、音频、画布、嵌入、标记、进度、计量器、时间、命令、细节、数据网格、keygen、输出、源、菜单、ruby、wbr、bdi、对话框。
一些语义标签，如section、nav等，在使用上与传统div并无太大区别，但更有利于搜索引擎的索引，智能手机、pad等小屏幕设备的适配，方便残障人士。
同时，一些标签为浏览器增加了新的功能，比如音频和视频。
应用程序接口
1.Canvas，可以获取canvas标签元素的context对象，然后使用这个context对象中的drawing函数进行绘制。https://www.w3schools.com/html/html5_canvas.asp
canvas id= my canvas width= 200 height= 100 style= border:1px solid # 000000；/canvasscriptvar c=document . getelementbyid( my canvas )；var CTX=c . get context( 2d )；ctx.moveTo(0，0)；ctx.lineTo(200，100)；CTX . stroke()；/script2。音视频，使用音视频元素，浏览器不需要安装播放插件，提供播放控制API。
3.地理位置。通过使用导航器相关的API，可以在用户授权下获取用户的位置信息。
4.新的表单元素，电话，电子邮件，网址，搜索，范围，数字，颜色，日期时间，本地日期时间，时间，日期，周，月。有了浏览器的支持，很多表单控件将成为历史。
5.新的表单特性和功能：占位符、自动完成、自动聚焦、拼写检查、列表特性、数据列表元素、最小值和最大值、步长、必需
6.拖放API:draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象
7.WebSocket是一种浏览器与服务器全双工通信的网络技术，可以传输基于信息的文本和二进制数据。
8.Web工作者，JavaScript是单线程的，复制js需要计算，会导致页面假死。如果js操作不需要访问页面窗口，可以在web worker中并行处理。
废除元素
废除一些纯粹可实现的、不兼容的元素，如：缩略词、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 layout(灵活布局)。
让我们通过一个例子来展示Flex layout的易用性。下图是一个典型的单页应用样式，在结构上分为页眉、旁注、页脚和主页面四个部分。除此之外，主区域会根据剩余空间自动填充。
首先，我们使用自适应布局来实现上图的结构。
html body div class= header /div div class= container div class= aside /div div class= main /div/div div class= footer /div/body CSS html，body { margin:0；填充：0；身高：100%；背景：黑色；}.标题，页脚{高度：80px背景：白色；}.集装箱{高度：CALC(100%-160 px)；背景：粉色；填充：10px 0；}.侧边{宽度：20%；身高：100%；浮动：左；背景：黄金；}.主{宽度：80%；身高：100%；浮动：左；背景：灰色；}页面分为上、中、下三部分。中间部分的容器高度是用CALC计算的，浏览器高度变化时自动调整。容器旁边是一个宽度为20%的浮动元素。Main根据剩余宽度进行调整。
这种布局有一些问题，就是当页眉页脚的高度发生变化时，需要重新设置容器的高度。此外，如果容器中有许多平行元素，浮动很难控制。
接下来，我们来看看如何使用Flex布局来实现上述效果：
欢迎来到HTML5世界！/h1/header section class= designer container aside class= designer side div style= width:180 px aside/div/aside main class= designer main /main/section footer 3 copyright 2020 GrapeCity Inc ./H3/footer/body CSS:html，body { margin:0；填充：0；}身体{身高：100vh显示器：flex伸缩方向：列；}h1，h2，h3 {font-family: Avenir，Helvetica，Arial，sans-serif；文本对齐：居中；颜色：# 2c3e50margin-block-start:0；边距-块-结束：0；填充：15px}.设计器容器{ padding:10px；flex:1；显示器：flex背景：灰色；}.designer side { text-align:center；背景：黄金；}.designer main { display:flex；弹性：1 100%；填充：0 0 0 10px背景：粉色；}效果如下：
与自适应布局相比，上述代码具有以下特点：
有了HTML5的语义标签，页面各部分的功能一目了然。将车身高度设置为100vh，这是CSS3的新单位vh，即视图高度窗口的高度。100vh相当于HTML，体高100%。还有vw代表窗口的宽度。主体设置flex布局，designerContainer从上到下堆叠设置flex 1。自动填充除页眉和页脚以外的剩余空间。容器内部仍在flex布局中，designerMain将flex 1设置为自动填充flex兼容性考虑之外的剩余空间：
IE9不支持FLEX，所以推荐IE11。
L Safari和IOS需要添加-webkit-
我们之前也写过FlexBox教程。更多信息，请查看这篇文章，找出：https://www.cnblogs.com/powertoolsteam/p/10000927.html
稍后我们将向您介绍JavaScript相关的内容。希望大家继续关注。
这是孟新HTML5入门指南的详细内容。有关HTML5入门指南的更多信息，请关注其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。