本文由葡萄城技术团队原创并首发

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

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标签元素的上下文对象，然后使用该上下文对象中的绘图功能进行绘制。https://www.w3schools.com/html/html5_canvas.asp

<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教程，更多的内容欢迎大家查看这篇文章了解：https://www.cnblogs.com/powertoolsteam/p/10000927.html

后面我们将会为大家介绍JavaScript相关的内容，希望大家持续关注。

　　

给萌新HTML5 入门指南的更多相关文章

  1. 给萌新HTML5 入门指南（二）

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上一篇我们已经为大家介绍了HTML5新增的内容和基础页面布局,这篇会继续向大 ...

  2. HTML5入门指南

    1.HTML5到底是什么? HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定.目标是取代1999年所制定的HTML 4.01和XHTML 1.0标准,以期能在互联 ...

  3. 萌新java入门笔记

    首先声明以下内容只是散乱笔记,如果有误还望大侠指出!不胜感激! 基本数据类型: 大体和C语言类似: boolean truth = true;//逻辑型 //文字型 char c; String st ...

  4. HTML5 Plus移动App(5+App)开发入门指南

    HTML5 Plus移动App,简称5+App,是一种基于HTML.JS.CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和 ...

  5. HTML5入门以及新标签

    HTML5 学习总结(一)--HTML5入门与新增标签   目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 ...

  6. 萌新web前端从零开始（1）——计算机入门

    前言:这是一个萌新从零开始的学习之路,与大家分享自己的看法与见解,还请指出错误与遗漏点方便改正. 1.认识计算机. 计算机语言常见的有C,PHP,Ruby,Java,C#,Basic,JS,C++等, ...

  7. 萌新--关于vue.js入门及环境搭建

    十几天闭关修炼,恶补了html跟css以及JavaScript相应的基础知识,恰巧有个群友准备做开源项目,愿意带着我做,但是要求我必须懂vue.js,所以开始恶补vue.js相关的东西. 在淘宝上买了 ...

  8. jmeter正则表达式，萌新入门篇

    @@@@@@@@@@@@ 透过现象看本质 jmeter中正则表达式对我们来说,就是一个工具,他可以帮助我们做的事就是从一堆数据中截取出我们想要的字段,比如从setcookie:DERF12456DAS ...

  9. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

随机推荐

  1. Vue Render自定义tabled单元格内容

    解决问题 只举一个例子(我正好需要用到的) 在写中后台时, 如果对 表格组件 再度封装了, 比如这样的 以element-ui 为例: <template> <el-table :d ...

  2. MongoDB入门(介绍、安装、增删改查)

    文章作者公众号bigsai,已收录在回车课堂,如有帮助还请不吝啬点个赞赞支持一下! 课程导学 大家好我是bigsai,我们都学过数据库,但你可能更熟悉关系(型)数据库例如MySQL,SQL SERVE ...

  3. Unity 如何在窗口大小可以随意改变的情况下让游戏世界完整的显示在镜头中

    当我们开发游戏时,如果是开发手机游戏,屏幕窗口的比例是固定的,不会说在运行时改变的. 但是,PC端的游戏就不一定,我希望它能被用户随意拉扯,但完整的内容还是能显示出来,这里我直接放例子: 请注意黑色的 ...

  4. 使用监听器来启动spring -------使用监听器初始化上下文参数

    问题: 数据初始化监听器要注入spring容器的对象,必须先启动spring容器才能使用监听器初始化数据. 解决: 使用监听器来启动spring框架 问题:spring框架启动需要哪些参数? 1.需要 ...

  5. java中的几种基础排序

    import java.util.Random;import java.util.Arrays; public class Puppy {     public static void main(St ...

  6. MATLAB 安装

    参考:  链接1    链接2 重要: 1.秘钥:09806-07443-53955-64350-21751-41297 2.在安装目录下替换 bin

  7. （转载）Tomcat 7集群浅析

    本文转载自:http://blog.csdn.net/wangyangzhizhou. 如有侵权,请联系处理!   简介 每个节点都要维护一份集群节点信息列表,集群组通知的默认实现是在使用 UDP 数 ...

  8. java安全编码指南之:死锁dead lock

    目录 简介 不同的加锁顺序 使用private类变量 使用相同的Order 释放掉已占有的锁 简介 java中为了保证共享数据的安全性,我们引入了锁的机制.有了锁就有可能产生死锁. 死锁的原因就是多个 ...

  9. 实验 2:Mininet 实验——拓扑的命令脚本生成

    一.实验目的 掌握 Mininet 的自定义拓扑生成方法:命令行创建.Python 脚本编写 二.实验任务 通过使用命令行创建.Python 脚本编写生成拓扑,熟悉 Mininet 的基本功能. 三. ...

  10. Activity常用方法

    setContentView(r.layout.xxxx);//设置布局文件 getViewById(r.id.xxxx);//获取指定控件 getString(r.string.xxxx);//获取 ...