html5学习
关注
分享
扫一扫
文章平均质量分 72
学习HTML5新特性
远近2021
这个作者很懒，什么都没留下…
展开
-
16 HTML5矢量图形
文章目录1、什么是SVG?2、SVG的优点3、SVG使用1、什么是SVG?SVG指可伸缩⽮量图形SVG⽤于定义⽤于⽹络的基于⽮量的图形SVG是⼀种基于XML语法的图像格式SVG图像在放⼤的情况下图形不会失真2、SVG的优点SVG是可伸缩的⽂件体积较⼩可⽆限放⼤且不会失真3、SVG使用svg代码直接插⼊⽹⻚，示例如下：SVG 代码也可以写在⼀个独⽴⽂件中，然后⽤ <img> 、 <object> 、 <embed> 、 <ifram原创 2021-09-24 17:21:25 · 320 阅读 · 0 评论 -
15HTML5 文件上传
文章目录1、文件上传获取文件信息限制文件的上传类型在之前我们操作本地文件都是使用 flash、silverlight 或者第三方的 activeX 插件等技术，由于使用了这些技术后就很难进行跨平台、或者跨浏览器、跨设备等情况下实现统一的表现，从另外一个角度来说就是让我们的 web 应用依赖了第三方的插件，而不是很独立。 在 HTML5 标准中，默认提供了操作文件的 API 让这一切直接标准化。有了操作文件的 API，让我们的 Web 应用可以很轻松的通过 JS 来控制文件的读取、写入、文件夹、文件等一系列原创 2021-09-24 16:55:55 · 1402 阅读 · 0 评论 -
14 HTML5 Web Storage
文章目录1、Web Storage 概述2、localStorage 方法设置获取删除示例3、sessionStorage 方法Web Storage 有两种存储数据的新方法，HTML5 Web Storage 的使用可以提高网页的效率，在不影响网站性能的情况下可以存储大量数据。1、Web Storage 概述早些时候，本地存储使用的是 cookie。但是 Web 存储需要更加的安全与快速。这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上。它也可以存储大量的数据，而不影响网站的性能。原创 2021-09-24 16:55:24 · 128 阅读 · 0 评论 -
13HTML5 拖放
文章目录1、拖放概述2、浏览器支持3、拖放使用1、拖放概述拖放操作可以很好的实现与用户的交互，拖放操作会带给用户全新的浏览体验，用户不再是只能对着网页滑动鼠标滚轮，而是可以根据设计，操作网页中的某些元素了。拖放（Drag 和 drop）是 HTML5 标准的组成部分，任何元素都能够拖放，从字面意思上来理解，拖放就是抓取对象后拖到另一个位置上。注：img元素和 a 元素（必须指定 href）默认允许拖放。2、浏览器支持Internet Explorer 9、Firefox、Opera 12、Chr原创 2021-09-24 16:55:01 · 127 阅读 · 0 评论 -
12 HTML5音频
HTML5 规定了一种通过 audio 元素来包含音频的标准方法。音频格式和浏览器支持如下所示：格式浏览器.oggFireFox 3.5+，chrome 3.0+，Opera 10.5+.mp3Safari 3.0+，chrome 3.0+，IE 9.0+.wavFireFox 3.5+，Safari 3.0+，Opera10.5+audio 标签的属性如下所示：1、引入单个音频文件<body> <audio原创 2021-09-24 16:54:26 · 102 阅读 · 0 评论 -
11HTML5视频
文章目录1、video元素引入单个视频文件引入多个视频文件2、字幕的简单使用在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，经常会遇到Flash 插件崩溃的问题。而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观。1、video元素HTML5 规定了一种通过 video 元素来包含视频的标准方法。视频格式和浏览器支持如下所示：格式浏览器.oggFireFox 3.5+ ，chrome 5.原创 2021-09-24 16:54:06 · 338 阅读 · 0 评论 -
10Canvas——图片绘制
文章目录使用 drawImage() 方法在画布上绘制图像、画布或视频。drawImage() 方法也能够绘制图像的某些部分，或增加或减少图像的尺寸。canvas 绘制图片的基本格式为：/创建一个图片对象var image = new Image();//设置图片的路径image.src = 'xxx';//当图片加载完成后image.onload = function () { //绘制图片 ctx.drawImage();};语法 1，在画布上定位图像：ctx.drawI原创 2021-08-10 21:28:51 · 938 阅读 · 0 评论 -
09Canvas——文字绘制
文章目录1、fillText() 方法2、strokeText() 方法3、font属性4、textAlign 属性5、textBaseline 属性1、fillText() 方法使用 fillText() 方法在在画布上绘制实心文本。语法为：ctx.fillText(text, x, y, maxWidth);参数说明：text 规定在画布上输出的文本。x 表示开始绘制文本的 x 坐标位置（相对于画布）。y 表示开始绘制文本的 y 坐标位置（相对于画布）。maxWidth 表示允许的最原创 2021-08-10 20:45:03 · 1820 阅读 · 0 评论 -
08Canvas——填充和渐变
文章目录1、填充`fillStyle` 属性fill() 方法2、渐变线性渐变放射状/环形渐变1、填充fillStyle 属性使用 fillStyle 属性，设置或返回用于填充绘画的颜色、渐变或模式。语法为：ctx.fillStyle = color | gradient | pattern;参数说明：color 表示绘图填充的颜色。默认值是 #000000。gradient 表示用于填充绘图的渐变对象（线性或放射性）。pattern 表示用于填充绘图的 pattern 对象。例子：原创 2021-08-10 20:19:28 · 1240 阅读 · 0 评论 -
07Canvas——直线、矩形、圆绘制
文章目录1、Canvas元素2、绘制简单图形3、直线绘制4、绘制矩形rect() 方法介绍strokeRect() 方法介绍fillRect() 方法介绍clearRect() 方法介绍5、圆和扇形的绘制HTML5 Canvas 是现代浏览器都支持的 HTML5 非插件绘图的功能，Canvas 就是一个画布，主要用于图形表示、图表绘制、游戏制作等。1、Canvas元素canvas 元素的外观和 img 元素相似，但是没有 img 元素的 src 属性和 alt 属性。canvas 的 width 属性原创 2021-08-10 17:19:06 · 796 阅读 · 0 评论 -
06HTML5输入类型
文章目录1、Input 类型 - email2、Input 类型 - url3、Input类型-number4、Input 类型 - range5、Input 类型 - Date Pickers（日期选择器）6、Input 类型 - colorHTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。1、Input 类型 - emailemail 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。<body> <form原创 2021-08-10 16:34:35 · 464 阅读 · 0 评论 -
05 HTML5 表单新增的属性
文章目录1、autocomplete 属性2、autofocus 属性3、form 属性4、multiple属性5、novalidate 属性6、pattern 属性7、placeholder 属性8、required 属性1、autocomplete 属性autocomplete 属性规定表单是否应该启用自动完成功能：自动完成允许浏览器预测对字段的输入，当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。当 autocomplete 属性值为 on 时表示启用自动完成功能，原创 2021-08-10 16:07:05 · 530 阅读 · 0 评论 -
04HTML表单元素（datalist）
表单是一个容器，用来收集客户端要提交到服务端的信息。本节中，我们将来学习 HTML5 的表单元素特性。datalist 元素datalist 元素用于为文本框提供一个可供选择的列表，使用datalist 元素来为表单小部件提供建议的、自动完成的值，并使用一些 option 子元素来指定要显示的值。然后使用 list 属性将数据列表绑定到一个文本域(通常是一个 <input> 元素)。一旦数据列表与表单小部件相关联，它的选项用于自动完成用户输入的文本。通常，这是作为一个下拉框向用户展示的，在原创 2021-08-10 10:15:23 · 1156 阅读 · 3 评论 -
03废除的元素
HTML5 中废除了一些纯表现的元素、只有部分浏览器支持的元素、一些会对可用性产生负面影响的元素。纯表现元素纯表现元素指的是可以用 CSS 代替的元素。例如：basefont、big、center、font、s、strike、tt、u这些元素，他们的功能都是纯粹为页面展示服务的，html5 提倡把页面展示性功能放在 CSS 样式表中统一处理，所以将这些元素废除，用 CSS 样式进行替代。对可用性产生负面影响的元素对于 frameset 元素、frame 元素与 noframes 元素，由于 fram原创 2021-08-10 10:06:54 · 103 阅读 · 0 评论 -
02 H5常用的语义化和结构标签
文章目录1、section标签2、article标签3、nav标签4、header标签5、footer标签6、aside标签HTML5 定义了一组新的语义化标记来描述元素的内容，可以简化 HTML 页面设计，并且使用浏览器搜索网页时，也可以利用这些元素。首先我们来看一个普通的页面的布局方式：以上是很常见的 div+css 布局模式，通过 class 名称来区分不同的结构，包括头部、导航、文章内容、右边栏，还有底部模块。而 HTML5 新标签带来的新的布局则是下面这种情况：代码如下所示：<原创 2021-08-10 10:00:37 · 1846 阅读 · 0 评论 -
01HTML5 与HTML4的区别、代码规范和新特性
文章目录1、HTML5 代码规范HTML5 是 HTML 文档的最新标准，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。它添加了一些新的语法特征，修改或删除了一些旧的属性元素。1、HTML5 代码规范使用正确的文档类型文档类型声明位于 HTML 文档的第一行：可以省略 html 和 body 标签但不推荐在标准 HTML5 中， <html> 和 <body> 标签是可以省略的，比如下面的写法也是正确的：<!DOCTYPE html>&l原创 2021-08-10 00:07:57 · 467 阅读 · 0 评论