HTML5增加的几个新的标签

   HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi....

    so --->支持css3强大的选择器和动画以及javascript的新的函数

先来记录一下吧! 

      1。  <canvas>画布标签 HTML5的新标签

举例:

复制代码
 1 <html>2     <head>3         <title>canvas画布的应用</title>4           <p align="center">画一个矩形<span style="color : #ff0000">龚细军创作</span></p>    </head>5   <body> 6          <canvas id="can" width="400px" height="500px" style="border : 2px solid red"> </canvas>       7     <script type="text/javascript">8         var canvas=document.getElementById("can");9         var cxt = canvas.getContext("2d");
10         //alert(cxt);
11         cxt.style="#FF0000"
12         cxt.fillRect(10,10,30,30);
13     </script>
14      </body>
15 </html>
复制代码

2. 增加了<header> <forder>  这两个标签做到了网页和结构的分离 (使用seo 即搜索引擎)

   格式:    

1 <html>
2   <header>(网页)page的头部</header>
3             你好呀,我是........
4   <footer>网页的尾部</footer>
5 </html>

3.增加了音频<audio>和 音频<video>两个新的标签........。

    <video src"=http://video.baomihua.com/37784322/32372832?ptag=vsogou" poster="C:\Users\Administrato\Desktop\火影Q版人物集\10.jpg"  controls="controls" width="500px" height="400px">呵呵,放不了哦!</video><!--嵌入一段音频-->

效果图:  (注意: 目前html所支持的格式为: mp4/ogg格式)

同理,音频也是一样的...
4. 增加了离线存储功能
    
5. 支持语音识别   6.支持图像识别 7.支持游戏
8.支持强大的css3......(动画和选择器)
(1)
 View Code

以上呈现的是一个字体颜色逐渐变化的样式..

(2) css3代码选器举例:

复制代码
 1 <html>2     <head>3         <style type="text/css">4           p:nth-child(odd) {color:red}5       </style>6     </head>7     <body>8         <p >会是个什么颜色呢</p>9         <p >会是个什么颜色呢</p>
10         <p >会是个什么颜色呢</p>
11         <p >会是个什么颜色呢</p>
12     </body>
13 </html>
复制代码

效果图:

6.支持拖放,跨文档,浏览器历史管理

 

7.各个浏览器的浏览器的兼容性很好....

转载于:https://www.cnblogs.com/goodbeypeterpan/p/3919016.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/407340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue项目结构(未抽离成.vue文件前的结构)

最终效果 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>vue项目结构</title><script type"text/javascript" src"./lib/vue-2.4.0.js"></script><scri…

JS之Boolean的toString方法

作用&#xff1a;toString() 方法可把一个逻辑值转换为字符串&#xff0c;并返回结果 语法&#xff1a;booleanObject.toString() 返回值&#xff1a;根据原始布尔值或者 booleanObject 对象的值返回字符串 “true” 或 “false” 注意1&#xff1a;如果调用该方法的对象不是…

JS之Boolean的valueOf方法

作用&#xff1a;valueOf() 方法可返回 Boolean 对象的原始值 语法&#xff1a;booleanObject.valueOf() 返回值&#xff1a;booleanObject 的原始布尔值 注意&#xff1a;如果调用该方法的对象不是 Boolean&#xff0c;则抛出异常 TypeError 实例&#xff1a;

Git之简介

Git是什么&#xff1f; Git是目前世界上最先进的分布式版本控制系统&#xff08;没有之一&#xff09; 那什么是版本控制系统&#xff1f; 如果你用Microsoft Word写过长篇大论&#xff0c;那你一定有这样的经历&#xff1a;想删除一个段落&#xff0c;又怕将来想恢复找不回…

vue-cli3.0 开发环境构建

一. 若已全局安装vue-cli (1.x 或 2.x)&#xff0c;需先卸载 npm uninstall vue-cli -g 二. 全局安装 vue-cli3.0 npm install -g vue/cli三. node版本要求 Node >8.9,可以使用 nvm 管理多个 Node 版本。 安装nvm https://github.com/coreybutler/nvm-windows/releases安…

Git之集中式vs分布式

集中式&#xff1a; 集中式版本控制系统&#xff0c;版本库是集中存放在中央服务器的&#xff0c;而干活的时候&#xff0c;用的都是自己的电脑&#xff0c;所以要先从中央服务器取得最新的版本&#xff0c;然后开始干活&#xff0c;干完活了&#xff0c;再把自己的活推送给中…

HDU 1244 Max Sum Plus Plus Plus

虽然这道题看起来和 HDU 1024 Max Sum Plus Plus 看起来很像&#xff0c;可是感觉这道题比1024要简单一些 前面WA了几次&#xff0c;因为我开始把dp[22][maxn]写成dp[maxn][22]了&#xff0c;Orz 看来数组越界不一定会导致程序崩溃&#xff0c;也有可能返回一个错误的结果 dp[…

IDEA控制台乱码

报错情况&#xff1a; 报错原因&#xff1a;Idea的vm用的编码格式不一致&#xff1a;需要修改为UTF-8 你看Tomcat我之前下在后修改果&#xff0c;就没有报错&#xff0c;新人刚下载也有乱码问题 问题解决&#xff1a; 按我步骤来一定对 下面这俩文件打开输入&#xff1a; -D…

Git之创建版本库

什么是版本库呢&#xff1f;版本库又名仓库&#xff0c;英文名repository&#xff0c;你可以简单理解成一个目录&#xff0c;这个目录里面的所有文件都可以被Git管理起来&#xff0c;每个文件的修改、删除&#xff0c;Git都能跟踪&#xff0c;以便任何时刻都可以追踪历史&#…

Leetcode刷题(3)整数反转

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 1题目 给你一个 32 位的有符号整数 x &#xff0c;返回将 x 中的数字部分反…

Git之diff和status

我们已经成功地添加并提交了一个readme.txt文件&#xff0c;现在&#xff0c;是时候继续工作了&#xff0c;于是&#xff0c;我们继续修改readme.txt文件&#xff0c;改成如下内容&#xff1a; 现在&#xff0c;运行git status命令看看结果 git status命令可以让我们时刻查看工…

TCP为何采用三次握手来建立连接,若采用二次握手可以吗

1. TCP简介 TCP&#xff08;Transmission Control Protocol 传输控制协议&#xff09;是一种面向连接&#xff08;连接导向&#xff09;的、可靠的、基于IP的传输层协议&#xff0c;采用三次握手确认建立一个连接。 TCP为了保证报文传输的可靠[1]&#xff0c;就给每个包一个序号…

Leetcode刷题(4)罗马数字转整数

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 罗马数字包含以下七种字符: I&#xff0c; V&#xff0c; X&#xff0c; L&a…

深入理解移动前端开发之viewport

在移动设备上进行网页的重构或开发&#xff0c;首先得搞明白的就是移动设备上的viewport了&#xff0c;只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用&#xff0c;才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。 一、viewport的概念 通…

Git之版本回退

像这样&#xff0c;你不断对文件进行修改&#xff0c;然后不断提交修改到版本库里&#xff0c;就好比玩RPG游戏时&#xff0c;每通过一关就会自动把游戏状态存盘&#xff0c;如果某一关没过去&#xff0c;你还可以选择读取前一关的状态。有些时候&#xff0c;在打Boss之前&…

Leetcode刷题(5)最长公共前缀

最好的种树是十年前,其次是现在。歌谣 每天一个前端小知识 提醒你改好好学习了 知乎博主 csdn博主 b站博主 放弃很容易但是坚持一定很酷 我是歌谣 喜欢就一键三连咯 你得点赞是对歌谣最大的鼓励 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&…

Internal Server Error - http code 500

Eror Example 1 :转载于:https://www.cnblogs.com/shuman/p/3938096.html