HTML5知识整理

最新推荐文章于 2021-01-12 16:40:32 发布

菜根花小宝贝

最新推荐文章于 2021-01-12 16:40:32 发布

阅读量252

点赞数

分类专栏：网页学习文章标签： html5

本文链接：https://blog.csdn.net/qq_45493915/article/details/105791606

版权

本文深入介绍了HTML5的核心特性，包括语义化和结构元素，如<header>, <nav>, <main>, <article>等，图形绘制的<canvas>标签，矢量图形SVG，以及媒体播放的<video>和<audio>标签。此外，还探讨了HTML5新增的input类型和表单属性，以及Web本地存储的localStorage和sessionStorage。" 80110904,5656699,Spring与Quartz实现定时任务的两种方法,"['spring', 'quartz', '定时任务']

摘要由CSDN通过智能技术生成

HTML5知识点

（一）初识HTML5

什么是HTML5
HTML5 是HTML的最新版本，它是W3C与WHATWG合作的结果。HTML5继承了原先HTML的部分特征，添加了许多新的语法特征，比如语义特性、本地存储特性、设备兼容特性、连接特性、网页多媒体特性等。
HTML5与HTML4的区别
HTML4中元素不能把文档结构表示清楚，在HTML5中增加了与结构相关的元素，使得⽂档结构更加清晰，结构更加语义化。
HTML4在Web应⽤程序的功能受到限制，⽐如：不允许同时上传多个⽂件，HTML5提供了web应用程序使⽤的API。
DOCTYPE声明变化：HTML4中需要指明是HTML的哪个版本，HTML5不需要，只需要< !DOCTYPE html>即可。
HTML5优势
实时更新离线缓存跨平台视频和⾳频的支持

（二）HTML5常用的语义化和结构元素

header标签：通常被放置在页⾯或者页⾯中某个区块元素的顶部,用来介绍内容或者当做导航链接栏，在一个文档中，您可以定义多个< header>元素。
nav标签：通常表示页面的导航
main标签：⽂档主要内容
article标签：使用在相对比较独立、完整的内容模块，一般使用在博客、论坛帖子、新闻报道、
用户评论
section标签：一般用来做内容的分组，比如文章的章节
aside标签：包含的内容不是页面的主要内容、具有独立性，是对页面的补充。
aside标签一般使用在页面、文章的侧边栏、广告、友情链接等区域。
footer标签：一般放在页面或页面中某个区块的底部，包含版权信息、联系⽅方式等。

其他元素
ruby标签：定义ruby注释(中文或字符)
将< ruby>标签与< rt>和< rp>标签一起使用。
< rp>标签可选，该标签定义的是当浏览器器不支持"ruby元素"时显示的内容
progress标签：定义进度条
mark标签：用来标记文本embed标签,用来嵌入指定的内容，比如插件

（三）HTML5图形绘画标签canvas

canvas定义
canvas标签用来定义图形，是一个图形容器，常用来进行绘图操作，要与js搭配使用。
实例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
	//指定画布大小
  <canvas id="myCanvas" width="500" height="400" style="border: 1px solid #000"></canvas>
  	//canvas本身没有绘图的能力，绘图要在js中进行
  <script>
    //获取canvas元素
    var canvas = document.getElementById("myCanvas");
    //context对象拥有多种绘制方法，一般通过以下方法获取
    var ctx = canvas.getContext("2d");
    // 开始一段路径
    // ctx.beginPath();
    // ctx.lineWidth = 10;
    // 将画笔指定初始坐标点
    // ctx.moveTo(100, 100);
    // 添加一个点，画一条线条到这个点
    // ctx.lineTo(300, 100);
    // ctx.lineTo(100, 200);
    // ctx.lineTo(100, 100);
    // 关闭路径，闭合从起始坐标点到结束坐标点的路径
    // ctx.closePath();
    // 进行绘制操作
    // ctx.stroke();


    // ctx.beginPath();
    // 绘制正方形 （横纵坐标，宽，高）
    // ctx.rect(100, 100, 200, 200);
    //