前端学习之路html5(01)-特性

最新推荐文章于 2024-04-09 15:36:07 发布

戚继光

最新推荐文章于 2024-04-09 15:36:07 发布

阅读量346

点赞数

分类专栏： web前端文章标签： html5 前端

本文链接：https://blog.csdn.net/weixin_36244867/article/details/61933354

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了html5的主要特性，包括多媒体支持、本地存储、图形绘制、css3结合以及新定义的标签。重点讨论了html5的

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

html5 简介

html5是html的最新修订版，2014年由w3c制定；
html5的设计目的是为了在移动设备上支持多媒体；
html在很多方面都进行了改进，下面我们就大致列举了一些html5改进的地方。

1. html5多媒体
使用html5技术我们可以再网页中播放视频（video）和音频（auto）;

2. html5应用
本地数据存储、访问本地文件、本地sql数据、缓存引用、JavaScript工作者、xhtmlhttprequest2;

3. html5图形
使用html5可以简单地绘制图形，可以使用元素、内联SVG、css 2d(3d)转换；

4. html5使用css3
新选择器、新属性、动画、2D/3D转换、圆角、阴影效果、可下载字体；

5. html5定义新标签
我们可以定义属于自己的自定义标签。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>html图像</title>
<style type="text/css">
    qiStyle{
        color: blue;
        background-color: #f3f3f3
        font-size: 20px;
    }
</style>
</head>

<body>
<qiStyle>我自己的风格</qiStyle>
</body>

</html>

6. html5的浏览器支持
E9以下版本可能对html5支持不好，需要在head中对情况进行处理；

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>渲染 HTML5</title>
  <!--[if lt IE 9]>
  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
  <![endif]-->
</head>

<body>

<h1>我的第一篇文章</h1>

<article>
菜鸟教程 —— 学的不仅是技术，更是梦想！！！
</article>

</body>
</html>

html5 canvas

html5中添加了<canvas>标签来定义图形；
从字面意思上来看我们不难发现，此标签只是定义了图形的载体（画布），而非定义了图形的实现，所以我们需要借助脚本来实现绘制图形。
<canvas>没有绘图能来，需要借助javascript来实现绘图；
这点和android中的canvas意义对等；
javascript实现绘图的基本流程；
1.在页面上创建一个画布；
2.在script中获取<canvas>画布元素；
3.获取内建的getContext(“2d”)html5对象，它具有绘制路径、矩形、圆形、字符等的能力；
4.设置getContext(“2d”)对象的属性；
5.开始绘制图形；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF4200";
    ctx.fillRect(0, 0, 200, 200);
</script>
</body>

</html>

这里写图片描述

1. canvas坐标、路径

由于撸主是做android的，所以这块略过；

2. canvas文本

font定义字体；
fillText(text, x, y)，绘制实心文本；
strokeText(text, x, y)，绘制空心文本；

3. canvas渐变

列表内容

示例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
</head>

<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var grd=ctx.createLinearGradient(0, 0, 150, 0);
    grd.addColorStop(0, "#FF4A00");
    grd.addColorStop(1, "#ffffff");
    ctx.fillStyle=grd;
    ctx.fillRect(0, 0, 200, 200);
    ctx.fillStyle="#000000";
    ctx.font="30px Arial";
    ctx.fillText("戚继光", 0, 100);
</script>
</body>

</html>

这里写图片描述

4. canvas图像
把一副图像放置到画布上，使用以下方法：
drawImage(image,x,y)。

html5 内联SVG

何为SVG

可伸缩矢量图形；
用于网络基于矢量的图形；
使用xml格式定义图形；
图像在放大或者改变尺寸时图形质量不会受影响；

SVG优势

SVG图像可通过文本编辑器来创建和修改；
SVG图像可被搜索、索引、脚本化、压缩等；
SVG是可伸缩的；
SVG图像可在任何分辨率下高质量打印；

SVG和Canvas区别

SVG是通过xml来描述2D图像的语言，Canvas通过JavaScript来描述；
在SVG中，每个绘制的图形都被视为对象。如果SVG对象的属性发生变化，浏览器会自动重现图像，类似于响应式编程；
Canvas是逐像素进行渲染的，一旦绘制完成浏览器不再关注它，属性发生变化需要重新绘制，类似于流程式编程；

Canvas特点

依赖分辨率；
不支持事件处理器；
弱的文本渲染能力；
能够以 .png 或 .jpg 格式保存结果图像；
最适合图像密集型的游戏，其中的许多对象会被频繁重绘；

SVG特点

不依赖分辨率；
支持事件处理器；
最适合带有大型渲染区域的应用程序（比如谷歌地图）；
复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）；
不适合游戏应用；

SVG示例

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

这里写图片描述

html5 MathML

html5可以在文档中使用MathML元素，对应的是<math>…</math>。
MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。
目前还不看清楚如何应用，以后再回来更新吧。

戚继光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路html5(01)-特性

html5 简介html5是html的最新修订版，2014年由w3c制定； html5的设计目的是为了在移动设备上支持多媒体； html在很多方面都进行了改进，下面我们就大致列举了一些html5改进的地方。1. html5多媒体使用html5技术我们可以再网页中播放视频（video）和音频（auto）;2. html5应用本地数据存储、访问本地文件、本地sql数据、缓存引用、JavaSc
复制链接

扫一扫

专栏目录