HTML5 与JS学习笔记

时间 2019-11-30

标签 html5 html 学习笔记栏目 HTML5 繁體版

原文原文链接

1999年12月发布的HTML4.01javascript

W3C（World Wide Web Consortium，万维网联盟css

HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性可以帮助咱们实现服务器将数据“推送”到客户端的功能。html

OOP 【Object Oriented Programming】面向对象编程html5

W3C 【World Wide Web Consortium】万维网联盟java

视频音频播放web

上图：浏览器找到合适的视频文件进行播放，如没有显示您的浏览器不支持！下图音频同理编程

//视频/音频  暂停播放代码：
<input type="button" value="播放/暂停" onclick="playq();"/>
function playq(){
  if(aaa.paused)
    aaa.play();
  else{
    aaa.pause();
    }
}

控件的拖放canvas

将任何控件拖放到div中api

Canvas绘图浏览器

1. 方形fillRect（X,Y,width,height）

效果图：

2. 绘制线条stroke()

SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的状况下其图形质量不会有损失
SVG 是万维网联盟的标准

与其余图像格式相比（好比 JPEG 和 GIF），使用 SVG 的优点在于：

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

SVG 可在图像质量不降低的状况下被放大

Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不一样之处。

Canvas

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

SVG

不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（好比谷歌地图）
复杂度高会减慢渲染速度（任何过分使用 DOM 的应用都不快）
不适合游戏应用
HTML5 地理定位
HTML5 Geolocation API 用于得到用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户赞成，不然用户位置信息是不可用的。
1. 获取用户所在的经度和纬度
2. 获取google地图所在的位置
HTML 5 Web 存储

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
- localStorage - 没有时间限制的数据存储
- sessionStorage - 针对一个 session 的数据存储
localStorage 方法

localStorage 方法存储的数据没有时间限制。次日、第二周或下一年以后，数据依然可用。
```
<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>
```
　　

sessionStorage 方法

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

C#后台不能用其建立的对象，C#建立的对象这里也用不了。
```
<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>
```
　　

HTML 5 应用程序缓存

什么是应用程序缓存（Application Cache）？

HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网链接时进行访问。

应用程序缓存为应用带来三个优点：
- 离线浏览 - 用户可在应用离线时使用它们
- 速度 - 已缓存资源加载得更快
- 减小服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
<html manifest="/example/html5/demo_html.appcache">

页面在断网时也能访问。

HTML 5 Web Workers

这是运行在后台的JavaScript,他的运行不会影响页面的性能。

使用
/example/html5/demo_workers.js

注释：web worker 一般不用于如此简单的脚本，而是用于更耗费 CPU 资源的任务。

Web Workers 和 DOM

因为 web worker 位于外部文件中，它们没法访问下例 JavaScript 对象：

window 对象
document 对象
parent 对象

HTML 5 服务器发送事件

服务器后台跟新后自动跟新到前台

HTML5新的输入类型

email -----------只能输入邮箱地址，并加以验证
url -----------只能输入例如:http://www.baidu.com的链接，并加以验证
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color

有点意思的标签

<legend>	定义 fieldset 元素的标题。
<fieldset>	定义围绕表单中元素的边框。
<footer>	定义 section 或 page 的页脚。
<header>	定义 section 或 page 的页眉。
<ins>	定义被插入文本。
<del>	定义被删除文本。
<keygen>	定义生成密钥。
<mark>	定义有记号的文本。
<meter>	定义预约义范围内的度量。
<noframes>	定义针对不支持框架的用户的替代内容。
<noscript>	定义针对不支持客户端脚本的用户的替代内容。
<ol>	定义有序列表。
<optgroup>	定义选择列表中相关选项的组合。
<output>	定义输出的一些类型。
<progress>	定义任何类型的任务的进度。进度条
<q>	定义短的引用。加“”
<source>	定义媒介源。
<audio>	定义声音内容。
<video>	定义视频。
<sup>	定义上标文本。
<track>	定义用在媒体播放器中的文本轨道。

HTML5新标签

<bdi>	定义文本的文本方向，使其脱离其周围文本的方向设置。
<mark>	定义有记号的文本。
<meter>	定义预约义范围内的度量。
<progress>	定义任何类型的任务的进度。
<rp>	定义若浏览器不支持 ruby 元素显示的内容。
<rt>	定义 ruby 注释的解释。
<ruby>	定义 ruby 注释。
<time>	定义日期/时间。
<wbr>	定义视频。
<datalist>	定义下拉列表。
<keygen>	定义生成密钥。
<output>	定义输出的一些类型。
<canvas>	定义图形。
<figcaption>	定义 figure 元素的标题。
<figure>	定义媒介内容的分组，以及它们的标题。
<audio>	定义声音内容。
<source>	定义媒介源。
<track>	定义用在媒体播放器中的文本轨道。
<video>	定义视频。
<nav>	定义导航连接。
<command>	定义命令按钮。
<header>	定义 section 或 page 的页眉。
<footer>	定义 section 或 page 的页脚。
<section>	定义 section。
<article>	定义文章。
<aside>	定义页面内容以外的内容。
<details>	定义元素的细节。
<dialog>	定义对话框或窗口。
<summary>	为 <details> 元素定义可见的标题。
<embed>	为外部应用程序（非 HTML）定义容器。

新属性

1.<input type="number" name="points" step="3" />// step 属性规定输入字段的合法数字间隔,（假如 step="3"，则合法数字应该是 -三、0、三、6，以此类推）
2.<input type="email" name="email" autocomplete="off/on" />//是否启用输入记忆，和自动完成输入功能.off（打开）
3.<input type="text" name="lname" autofocus>//页面加载时自动获取焦点
4.<input type="url" list="url_list" name="link" />//将html5的下拉框<datalist id="url_list">绑定到文本框中。
5.<input type="search" name="user_search" placeholder="Search W3School" />//以灰色背景字提示该输入的数据。
6. <input type="text" name="usr_name" required="required" />//不为空的检验
-------------以上是input 相关的属性
7. <p contenteditable="true">这是一段可编辑的段落。</p>//在网页上能够直接编辑该文字。
8. <p draggable="true">这是一个可拖动的段落。</p>//设置能够拖动的段落
9. <element dropzone="copy|move|link">//拖动时产生一个复制副本或其余。
10. #div_1{text-transform:capitalize;}//这个样式可以使全部单词首字母以大写开头

11.css中 !important的用法。 !important表明这重要的意思若有有相同的样式会与这条执行剩下的不执行，ie6除外。

   #box {
           color:red !important;//ie6中不会执行改行，由于ie6不认识 !important，其余浏览器会执行。
           color:blue;//ie6会运行这一行。
          }

---------------如下是JS面向对象---------------

封装

以下图是一个javascript构造函数（constructor ）（其实就是一普通的方法，可是在面向对象时理解成构造函数），其中封装了Cat这个原型对象的属性和方法。

Prototype模式，上图已是封装，下面是更好的封装

Prototype原型的意思，做用是，如上例子中cat的type 属性和eat方法是同样的全部的实例对象都是同样的，这样会占用内存，使用prototype会节省内存使用，全部的实例都指向同一个内存的位置。
继承

方法：

Math.ceil()//方法执行的是向上取整

例如：

Math.ceil(12.2)//返回13

Math.ceil(12.7)//返回13

Math.ceil(12.0)// 返回12

Math.random()//获取随机数

Math.ceil(Math.random()*30)//30之内的整数

Math.ceil(Math.random()*(38-8)+8)//8至38之间的整数

HTML5 与JS学习笔记

在客户端存储数据

localStorage 方法

sessionStorage 方法

HTML 5 服务器发送事件

Math.ceil()//方法执行的是向上取整