给萌新HTML5 入门指南

BOM485480 2020-11-13 12:21:58
html 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页面第一行是 浏览器就会按照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。

在前端领域混了这几年,总结了一套前端学习的精讲视频和学习路线,如果有对前端开发感兴趣的伙伴,不管你是想转行,或是大学生,还有工作中想提升自己能力的web前端党,欢迎大家的加入我的前端开发交流群:603985993 希望大家诚心交流!,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!也可以关注我的微信公众号:【前端留学生】 每天更新最新技术文章干货。

• 应用程序接口(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>
  1. 音频和视频,使用audio和video元素,浏览器无需安装播放插件,同时提供了播放控制API。

  2. 地理位置,通过使用navigator相关API在用户授权情况下,可以获取用户位置信息。

  3. 新的表单元素,tel、email、url、search、range、number、color、datetime、datetime-local、time、date、week、month。随着浏览器的支持,很多表单控件将成为历史

  4. 新的表单特性和函数:placeholder、autocomplete、autofocus、spellcheck、list特性、datalist元素、min和max、step、required

  5. 拖放API:draggable属性、拖放事件(dragstart、drag、dragenter、dragleave、dragover、drap、dragend)、dataTransfer对象

  6. WebSocket,一种浏览器与服务器间进行全双工通讯(full-duplex)的网络技术,可以传输基于信息的文本和二进制的数据

  7. 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-

完毕:

作者:葡萄城技术团队
链接:给萌新HTML5 入门指南 - 葡萄城技术团队 - 博客园
来源:博客园

版权声明
本文为[BOM485480]所创,转载请带上原文链接,感谢
https://blog.csdn.net/BOM485480/article/details/109255910

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考-&gt;实现-&gt;不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple