萌新的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新增内容
html5新增了哪些内容?
• 更好的语义化标签
结构元素:article、aside、header、hgroup、footer、figure、section、nav。
其他元素:video、audio、canvas、embed、mark、progress、meter、time、command、details、datagrid、keygen、output、source、menu、ruby、wbr、bdi、dialog。
一些语义化标签如section、nav在使用时和传统div并无大的区别,但这种标签更有利于搜索引擎的索引整理,利于智能手机、pad等小屏设备适配,以及方便残障人士使用。
同时也有些标签为浏览器增加了新的功能,如audio、video。
• 应用程序接口(api)
1. canvas,可以获取canvas标签元素的上下文对象,然后使用该上下文对象中的绘图功能进行绘制。
<canvas id="mycanvas" width="200" height="100" style="border:1px solid #000000;"> </canvas> <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.moveto(0, 0); ctx.lineto(200, 100); ctx.stroke(); </script>
2. 音频和视频,使用audio和video元素,浏览器无需安装播放插件,同时提供了播放控制api。
3. 地理位置,通过使用navigator相关api在用户授权情况下,可以获取用户位置信息。
4. 新的表单元素,tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month。随着浏览器的支持,很多表单控件将成为历史
5. 新的表单特性和函数:placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required
6. 拖放api:draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、datatransfer对象
7. websocket,一种浏览器与服务器间进行全双工通讯(full-duplex)的网络技术,可以传输基于信息的文本和二进制的数据
8. web workers,javascript单线程,复制js需算会导致页面出现假死。如果js操作不需要访问页面window,那么可以放在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布局(弹性布局)。
下面我们通过一个例子来展示flex布局的易用性,下图是一个典型的单页应用样式,结构上分为header,aside,footer和main四部分。header和footer自适应宽度,aside固定宽度并可收缩,main区域自动根据剩余空间填充。
我们首先使用自适应布局来实现上图的结构
- 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; padding: 0; height: 100%; background: black; } .header, .footer{ height:80px; background: white; } .container{ height: calc(100% - 160px); background: pink; padding: 10px 0; } .aside{ width: 20%; height: 100%; float: left; background: gold; } .main{ width: 80%; height: 100%; float: left; background: gray; }
页面分为上中下三部分,中间部分container高度通过使用calc计算,浏览器高度变化时自动调整。container中aside为浮动元素,宽度20%。main根据剩余宽度调整。
这样的布局方式存在一些问题,就是当header、footer高度发生变化后,需要重新设置container高度,另外如果container中并列元素较多时,浮动难以控制。
接下来,我们看一下如何使用flex布局实现上面的效果:
- html:
<body> <header><h1>welcome to html5 world!</h1></header> <section class="designercontainer"> <aside class="designeraside"> <div style="width:180px">aside</div> </aside> <main class="designermain"> </main> </section> <footer><h3>copyright © 2020 grapecity inc.</h3></footer> </body>
- css:
html, body{ margin: 0; padding: 0; } body{ height: 100vh; display: flex; flex-direction: column; } h1, h2, h3 { font-family: avenir, helvetica, arial, sans-serif; text-align: center; color: #2c3e50; margin-block-start: 0; margin-block-end: 0; padding: 15px; } .designercontainer{ padding: 10px; flex: 1; display: flex; background: gray; } .designeraside{ text-align: center; background: gold; } .designermain{ display: flex; flex: 1 100%; padding: 0 0 0 10px; background: pink; }
效果如下:
对比自适应布局,上面的代码有以下特点:
- 页面使用html5语义化标签,页面各部分功能清晰。
- body设置高度 100vh, 这里使用了css3 的新单位vh,即 view height 视窗高度,100vh相当于html, body 高度100%,同样还有vw代表视窗宽度
- body设置flex布局,方向从上到下叠放
- designercontainer 设置flex 1,自动充满header和footer之外剩余空间
- container内部依旧flex布局,designermain 设置 flex 1,自动充满aside剩余空间
flex兼容性注意事项:
l ie9不支持flex,建议ie11
l safari 和 ios 需要加 -webkit-
之前我们也写过flexbox教程,更多的内容欢迎大家查看这篇文章了解:
后面我们将会为大家介绍javascript相关的内容,希望大家持续关注。
以上就是萌新的html5 入门指南的详细内容,更多关于html5 入门指南的资料请关注其它相关文章!
上一篇: 那年冬夜