《Head Firsh HTML5》学习笔记(总结)

最新推荐文章于 2023-09-02 22:42:10 发布

白菜4220

最新推荐文章于 2023-09-02 22:42:10 发布

阅读量233

点赞数

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_39263663/article/details/80623460

版权

前端开发专栏收录该内容

3 篇文章

订阅专栏

本文深入探讨HTML5的新特性及其与JavaScript的结合使用方法，包括画布绘图、地理位置定位、多媒体处理、Web存储技术及Web工作线程等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介:文章中的知识:CSS3,Web工作线程，本地存储，画布，地理定位，新表单，音频/视频

第一章：认识HTML5

HTML5是最新版本的HTML，它引入了简化的标记，新的语义和媒体元素，另外要依赖一组支持Web应用的JavaScript
Xhtml不在是Web页面的标准，开发人员和W3C决定还是继续扩展和改进HTML
新的，更为简单的HTML5 doctype在较老的浏览器上也得到支持，这些浏览器看到这个doctype时会使用标准模式
<script>标记或指向css的样式表链接中不再需要type属性。现在JavaScript和CSS是默认类型。
用于指定字符集的<meta>标记已经大为简化，只包含字符编码，如<meta charset="utf-8">
UTF-8现在是Web上使用的标准字符集
对doctype和<meta>标记做出修改不会影响页面在较老浏览器上的显示。
HTML5的新元素是HTML 4元素的一个超集，这说明，较老的页面在现代浏览器中仍能正常工作
HTML5中引入了一些新元素，可以向叶面增加新的语义，
HTML5中的很多新特性都需要JavaScript来充分加以利用
通过使用JavaScript，可以与DOM交互，也就是文档对象模型
DOM是Web页面的浏览器内部表示。通过使用JavaScript，你可以访问元素，修改元素，该可以向DOM中增加新元素
JavaScript API是一个应用编程接口。利用API，可以控制HTML5的所有方面，比如绘图，视频回放。
JavaScript是世界上最流行的语义之一，最近几年，JavaScript实现有了显著的改进
可以检测一个浏览器中是否支持某个新特性，如果不支持还能够妥善降级
CSS是HTML5的样式标准，很多用"HTML5"描述创建Web应用所用的技术家族时，都包含CSS。

第二章，介绍JavaScript和DOM

在web中，HTML标记是结构，CSS是表示，JavaScript是行为，JavaScript和DOM之间的知识还是对初学者来说还是很多的。不过我这里就不详细写了，笔记这篇文章的主要作者是写给我自己的. 2333.

undefined和null是两个不同的值，undefined表示一个变量未赋值，null表示这个变量有一个空值。可以将null理解为一个不存在对象的占位符。
数组表达式，布尔表达式和串表达式会分别得到一个书，布尔值或串值。注意空串也是串，而不是NULL
Math.random会返回一1个介于0和1的浮点数，(但不会是1)
Math.floor把一个浮点数小数点后面的所有位去除，将它转换为一个整数

第三章，事件，处理程序

你的浏览器中一直在发生很多事件，如果你想对这些事件做出响应，就要用事件处理程序来处理这些事件
要把一个新元素增加到DOM，首先需要创建这个元素，然后增加这个元素作为某个元素的子元素。document.createElement() >> appendChild()

第四章，JavaScript函数和对象

如果在一个函数局部向一个新变量赋值而且没有使用var关键字。会创建一个全局变量
函数声明可以出现在脚本中的任何位置。因为首先你要加载页面，浏览器会解析页面中(或外部文件中)的所有JavaScript，开始执行代码前它会看到这个函数声明。还可以吧全局变量声明放在脚本中的任何地方，不过一般建议放在文件最前面。
构造函数和析构函数，构造函数用来构造一个对象，析构函数与构造函数相反，当对象结束其生命周期时，析构函数用来做"清理善后"的工作，如:释放内存。
函数和方法真正的差别是什么？根据约定，如果对象有一个函数，我们就称它是一个方法。它们都以同样的方式工作，只不过调用对象的方法时要使用点操作符，而且方法可以使用this来访问这个方法的对象。可以认为函数是一段能调用都独立代码，而方法是与一个特定对象关联的行为。
this在对象方法之外有值吗？没有，如果没有调用一个对象方法，this就算未定义的(undefined)

window对象中的几个重要的属性和方法:

location：包含页面的url，如果改变这个属性，浏览器就会访问新URL
status：包含将在浏览器状态区显示的一个串
onload：包含了页面完全加载时要调用的函数
document：包含DOM
alert：显示一个提醒
prompt：显示一个带对话框的提醒
open：打开一个新的浏览器窗口
close：关闭窗口
setTimeout：指定的时间间隔后调用一个处理程序
setInterval：以一个指定的时间间隔反复调用一个处理程序

document对象的几个重要属性和方法

domain：提供文档的服务器的域，
title：
URL：文档的URL
getElementById：
getElementByTagName：
getElementByClassName：
createElement

第五章，实现HTML位置感知

第六章，与Web交流

1，一个使用XMLHttprequest请求的例子:

window.onload = function(){
	var url = "127.0.0.1/xiaobaicai";
	var request = new XMLHttpRequest();
	request.onload = function(){
		if(request.status == 200){
			//operation code
		}
	};
	request.open("GET",url);
	request.send(null);
}

2，使用JSON

JSON.stringify(object)：将json对象转换成字符串
JSON.parse(string)：将json字符串对象装换会JSON对象

有关XMLHttpRequest的一些介绍:

要从服务器得到HTML文件或数据，浏览器会发出一个HTTP请求
HTTP响应包括一个响应码，指示请求是否有错误
HTTP响应码200表示请求没有错误
要从JavaScript发出一个HTTP请求，需要使用XMLHttpRequest对象
XMLHttpRequest对象的onload处理程序从服务器获取响应
XMLHttpRequest的JSON响应放在请求的responseText属性中
要把responseText串转换为JSON，可以使用JSON.parse方法
应用中可以使用XMLHttpRequest更新内容，如地图和email，而无需重新加载页面
XMLHttpRequest可以获取任何类型的文本内容，如XML，JSON等。
要使用XMLHttpRequest，必须从一个服务器提供文件和请求数据。可以在你自己的机器上建立一个本地服务器进行测试，也可以使用一个托管解决方案

3，使用JSONP

JSONP介绍:

除了提供HTML和JavaScript的服务器外，XMLHttpRequest不允许从其他不同服务器请求数据。这是一个浏览器安全策略，专门设计用来避免恶意的JavaScript访问你的Web页面和用户的cookie。
要访问Web服务托管的数据，除了XMLHttpRequest外，令一种候选方法是JSONP
如果HTML和JavaScript与数据在同一个机器上，就可以使用XMLHttpRequest
如果需要访问由远程服务器上的一个Web服务托管的数据，则要使用JSONP
JSONP是一种使用<script>元素获取数据的方法
JSONP就算JSON数据包装在JavaScript中，通常会包装在一个函数调用中
将JSON数据包装在JSONP中的函数调用称为"回调"
将回调函数指定为JSONP请求中的一个URL查询参数
如果做出多次请求，可以在JSONP请求URL的末尾使用一个随机数，使浏览器不会缓存这个响应
replaceChild方法会用另一个元素替换DOM中的一个元素
setInterval是一个定时器以指定的间隔调用一个函数。可以使用setInterval向服务器做出重复的JSONP请求来获取新数据

第七章，画布

第八章，视频

视频中相关的属性，方法和事件:

属性:videoWidth videoHeight currentTime duration ended error loop muted paused readyState seeking volume

方法:play pause load canPlayType

事件:play pause progress error timeupdate ended adort waiting loadeddate loadedmetadata volumechange

关于视频的一些介绍:

可以使用<video>元素和一简单的属性播放视频
autoplay属性在页面加载时就开始播放，不过只应在适当的情况下使用
controls属性会使浏览器提供一组播放控件
可以用poster属性提供你自己的海报图像
src属性包含要播放的视频的URL
对于视频和音频格式有很多"标准"
3种常用的格式包括WebM，MP4/H.264和Ogg/Theora
使用<source>标记来指定候选的视频格式
在<source>标记中使用完全限定类型可以节省浏览器的工作和时间
视频对象提供了一组丰富的属性，方法和事件
视频支持播放，暂停，加载，循环和静音方法及属性来直接控制视频的播放
可以利用ended事件了解视频播放何时结束
可以使用scratch缓冲区，在将视频复制到表面之前先对视频进行处理。
可以使用setTimeout处理程序来处理视频帧。尽管没有直接链接到视频的每一帧，但这是目前最好的方法。
可以使用一个URL作为视频来播放网络视频
有些浏览器对视频有一个同源策略，要求同源页面同样的来源提供视频

第九章，web存储

web存储可以使用localStorage 对象对象常用的方法有 setItem(key) getItem(key) .length

web存储相关介绍：

web存储是浏览器中的一个存储库，也是一个API，可以用来从这个本地存储库保存和获取数据项
大多数浏览器都为每个元提供了至少5MB的存储空间
Web存储包括本地存储和会话存储
本地存储是持久的，即使你关闭浏览器窗口或退出浏览器，本地存储仍然保留
会话存储中的数据项会在你关闭浏览器窗口或退出浏览器是删除。会话存储很适合临时数据项，而不是长期存储
本读存储和会话存储使用完全相同的API
Web存储按源(或者称域)来组织。源就是Web上文档的位置
每个域有一个单独的存储空间，所以存储在一个源的数据项对另一个源中的Web页面是不可见的。
使用localStorage.setItem(key)可以向本地存储增加一个值
使用localStorage.getItem(key)可以从本地存储获取一个值
可以使用与关联数组相同的语法在本地存储中设置和获取数据项。可以使用localStorage[key]来完成
可以使用localStorage.key()方法列出localStorage中的键
localStorage.length是一个给定源localStorage中的数据项数
使用浏览器中的控制台可以查看和删除localStorage中的数据项
可以从localStorage直接删除数据项，只需右键点击一个数据项，并选择delete
可以在代码中使用removeItem(key)方法和clear方法删除localStorage中的数据项，注意，clear方法会删除你完成这个情况操作时源所在localStorage中的所有内容
每个localStorage数据项的键必须是唯一的。如果使用与一个现有数据项相同的键，会覆盖这个数据项的值
要生成一个唯一的键，一种方法是使用当前时间，并使用Date对象的getTime()方法
要为你的Web应用创建一个合适的命名机制，使得即使数据项从本地存储删除，或者技术数据项从本地存储删除，或者如果从另一个应用在本地存储中创建了数据项，也能正常工作
Web存储目前只支持存储字符串作为对应键的值。
可以使用parseInt或parseFloat将localStorage中作为字符串存储的数字转换回真正的数字。
如果需要存储更复杂的数据，可以使用JavaScript对象，在存储之前会使用JSON.stringify把它们转换为字符串，在获取之后会使用JSON.parse再将其转换回对象
本地存储对移动设备尤其有用，可以用来降低带宽需求
会话存储类似于本地存储，只不过浏览器存储库中保存的内容不会持久存储。会话存储对于短期会话很有用，如购物会话。

第十章，web工作线程

一个web工作线程的例子:

html:

<!doctype html>
<html>
	<head>
		<title>Ping Pong</title>
		<meta charset="utf-8">
		<script src="static/js/manager.js"></script>
	</head>
	<body>
		<p>看，下面是输出</p>
		<p id="output"></p>
		<time></time>
	</body>
</html>

manager.js

window.onload = function(){
	var worker = new Worker("/static/js/work.js");
	
	worker.postMessage("ping");
	
	worker.onmessage = function(event){
		var message = "Worker says " + event.data;
		document.getElementById("output").innerHTML = message;
	};
}

work.js

onmessage = pingpong;

function pingpong(event) {
	if (event.data == "ping") {
		postMessage("pong");
	}
	else {
		// intentionally make an error!
		1/x;
	}
}

关于web工作线程的几个问题

1，创建工作线程时能不能直接传递一个函数，而不是利用一个JavaScript文件？这样看起来更容易，而且与JavaScript通常的做法更一致：

答：不，不能这样做。因为工作线程的要求之一就是它不能访问DOM，处于同样的原因，也不能访问主浏览器线程的任何状态。如果可以向worker构造函数传入一个函数，这个函数可能好包含DOM或主JavaScript代码的引用，这就会违反这个要求。所以，为了避免这个问题，Web工作线程的设计者选择的做法是只能传递一个JavaScript url。

2，工作线程可以访问localStorage或做出XMLHttpRequest请求吗？

答：可以

web工作线程介绍：