《HTML5揭秘》读书笔记整理（上）

最新推荐文章于 2022-11-07 10:50:00 发布

Haris Ha

最新推荐文章于 2022-11-07 10:50:00 发布

阅读量793

点赞数

分类专栏：前端读书笔记 HTML5 文章标签： HTML5 HTML5探秘 h5 前端html5 html5学习

本文链接：https://blog.csdn.net/weixin_42507756/article/details/83994972

版权

HTML5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

前端读书笔记

1 篇文章 0 订阅

订阅专栏

《HTML5揭秘》并不是一本工具手册，而是一本可以教会你如何使用HTML5的书

这篇文章整理前5章，后5章见读书笔记（下）转载请标明出处

《HTML5揭秘》

第1章从开始到现在

每当web浏览器请求一个页面时，服务器会在发送实际页面之前先发送一些头信息（header），头信息通常不可见。

最重要的头信息是 Content-Type，比如：
Content-Type：text/html

“text/html”就是这个页面的“内容类型”，或者称为“MIME类型”，这个头信息将唯一确定某个资源本质是什么，因而决定其如何被呈现。

JPEG图片的MIME类型：image/jpeg（本质是什么/如何被呈现）
PNG图片的MIME类型：image/png（本质是什么/如何被呈现）

综述：凡是可以用一个URL地址定位的东西，比如HTML，图片，脚本，视频，PDF等等都具有特定的MIME类型。

第2章 HTML5特性检测

HTML5只是一些独立特性的集合，因此你不能检测浏览器是否支持“HTML5”，这样毫无意义，但可以分别检测浏览器是否支持诸如“画布（canvas）”、“视频（video）”、“地理位置（geolocation）”等HTML5特性。

浏览器渲染web页面会构造DOM，用一个对象集来表示页面上的HTML元素。
所有的DOM对象共享一些公共属性，但有些对象会拥有特定属性，从这些特性DOM中寻找特性属性即检测哪些HTML5特性被支持。

四种检测HTML5特性方法

四种基本技术检测是否支持某种HTML5特性，从简到复杂为：

检测全局对象（诸如window或者navigator）是否拥有特定属性，以检测地理位置为例。
创建一个元素，检测该元素的DOM对象是否拥有特定属性，以检测画布特性为例。
创建一个元素，检测该元素的DOM对象是否拥有特定方法，同时调用这个方法并检查它返回值，以检测支持视频格式为例。
创建一个元素，给这个元素的DOM对象设定特定的属性值，然后检查浏览器是否保留了该属性，以检测支持的类型为例。

Modernizr：一个HTML5特性检测库。
Modernizr是自动运行的，运行时会创建一个对应的布尔类型的属性，例如：如果你支持画布，则Modernizr.canvas的属性值是true，反之为flase。

if(Modernizr.canvas){
//开始画吧！
}else{
//浏览器不支持canvas
}

一些HTML5特性的检测

画布（Canvas）

方法2：如果浏览器支持canvas API，那么创建元素对应的DOM对象会拥有getContext()这个方法。

function supports_canvas(){
	return !!document.createElement('canvas').getContext;
}

使用双重否定来强制让这个检测方法返回一个布尔值。

视频（Video）

方法2：如果浏览器支持video，被创建的元素对应的DOM对象会有一个名为canPlayType()的方法。

function supports_video(){
	return !!document.createElement('video').canPlayType;
}

同样可以调用Modernizr库来检测（Modernizr.video）。

视频格式（Formats）

编写视频的语言被称为：编码算法（codec）——将视频编码成比特流的算法。编码算法的分歧已经缩到两种：①Safari和iphone遵循的专利编码算法
②Chromium和Mozilla Firefox开源的编码算法
方法3：如果浏览器支持某种视频格式，被创建的元素对应的DOM对象会有一个canPlayType()的方法，利用该方法可知道是否支持某种视频格式。

function supports_h264_baseline_video(){
	if(!supports_video){return false;}
	var v = document.createElement('video');
	return v.canPlayType('video/mp4;codecs="avc1.42Eo1E,mp4a.40.2);
}

本地存储（Local Storage）

cookie大小受限，每次请求新页面，cookie信息都会被发送回服务器，而HTML5本地存储，在用户计算机上，网站可以在页面加载完毕后通过Javascript获取。
方法1：如果浏览器支持本地存储，全局对象会有一个localStorage属性，反之，window对象的该属性值为undefined。

function supports_local_storage(){
	return ('localStorage' in window)&&window['localStorage'] !== null;
}

web Workers

提供了一种标准的方式让浏览器能在后台运行JavaScript，通过web Worker可以产生“多线程”，这些“后台线程”可以在页面响应用户的滚屏、点击或输入时同时做一些诸如复杂数学运算、发送网络请求等事情。
方法1：全局对象window会有一个Worker属性，反之，该属性为undefined。

function supports_web_workers(){
	return !!window.Worker;
}

离线web应用（Offline Web Applications）

一旦浏览器下载了第一次访问的具有离线访问功能的web站点时的必须文件后，下次在没有网络的情况下，浏览器会使用下载的离线文件来访问该页面。
方法1：如果浏览器支持离线web应用，全局对象window回拥有一个名为applicationCache的属性，反之，该属性为undefined。

function supports_offline(){
	return !!window.applicationCache;
}

地理位置（Geolocation）

定位的方法：
①IP地址
②利用基站获取手机无线网络的接入位置
③通过能利用卫星定位系统获得经纬度信息的GPS设备。
方法1：如果浏览器支持地理位置API，全局对象navigator会有一个geolocation属性，反之，该属性为undefined。

function supports_geolocation(){
	return !!navigator.geolocation;
}

输入框类型（Input Types）

HTML5中定义了很多新输入框(input)类型：

    <input type = "search">搜索框</br></br>
	<input type = "number">数字类型输入框</br></br>
	<input type = "range">范围选择滑块</br></br>
	<input type = "color">颜色选择器</br></br>
	<input type = "tel">电话号码输入框</br></br>
	<input type = "url">网址输入框</br></br>
	<input type = "email">地址输入框</br></br>
    <input type = "date">日期选择器</br></br>
    <input type = "month">月份输入框</br></br>
    <input type = "week">星期输入框</br></br>
    <input type = "time">时间戳输入框</br></br>
    <input type = "datetime">精确日期/时间戳输入框</br></br>
    <input type = "datetime-local">当地日期和输入框</br></br>

在这里插入图片描述
方法4：创建一个虚拟的<input>元素，然后将input类型设置为要检测的类型，如果浏览器支持特定的输入框类型，那么设置的type属性会被保留，反之，浏览器会忽略设置的值，type属性依然为默认的text。

var i = document.createElement("input");
i.setAttribute("type","color");
return i.type !== "text";

占位文本（Placeholder Text）

当输入框为空或失去焦点的时候显示出来，一旦用户点击输入框（或者使用Tab键使其获得焦点），占位文本就会消失。
方法2：如果浏览器支持占位文本，创建的<input>元素对应的DOM对象会有一个placeholder属性，反之，该DOM对象没有该属性。

function supports_input_placeholder(){
var i = document.createElement('input');
return 'placeholder' in i;
}

第3章从这一切的含义

文档类型（doctype）

!DOCTYPE html
PUBLIC “_//W3C//DTD XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd

HTML5的doctype：

!DOCTYPE html

一个页面的根元素始终是<html>元素
根元素的第一个元素通常是<head>元素，包含元数据——关于网页本身的信息，而不是网页主体。

朋友和（链接）关系

链接关系（link relationship）提供一种解释为什么链接到那个页面。
两种类别的链接可以由link元素创建，外部资源链接引入那些用于加强当前文档的资源，超链接则指向其他文档。
①rel = "stylesheet"
②rel = “alternate”（该type属性值是Rss或者Atom等媒介类型，由此开启“聚合内容自动发现机制”）
③rel = “archives” 表示所引用文档描述了一组收藏，包括记录，文档或者有价值的材料
④rel = “author” 表示链接到该页面作者的相关信息
⑤rel = “external” 表示该链接指向一个和当前文档不同的，并不属于站点一部分的文档（访客留言中所含有的链接加上这个属性）
⑥rel = “start”，rel = “prev”，rel = “next” 表示一篇文章或博客的不同位置章节
⑦rel = “icon” ，通常和shortcut一起使用，它们将页面与一个小图标相关联，通常这个小图标会显示在地址栏的网址旁边，或者浏览器的标签卡上，或者两处都显示。

浏览器如何处理未知元素

如果IE不识别一个元素，它就会在DOM中插入一个没有子节点的空节点，所有原本定义在其内的子元素，将全部转为它的兄弟元素，为此在使用IE不认识的标签之前，先用Js创建一个虚假的该元素，它并没有真正插入到DOM中，就可以为其设定样式了。
实现如下：

<!--[if It IE 9]>
<script>
	var e = ("abbr,article,aside,audio,canvas,details,figure,footer,header,hgroup,"+
	   "mark,menu,meter,nav,output,progress,section,time,video").split(',');
	for (var i = 0;i<e.length;i++){
		document.createElement(e[i]);
	}
</script>
<![endif]-->

HTML5语义元素

页头（Headers）

问题引发？HTML4并没有提供方法来标注副标题，它们无法避免地会被加入到文档大纲里。
解决方法：使用hgroup将两相关俩标题打包

<header>
	<hgroup>
		<h1>My weblog</h1>
		<h2>A lot of balabala...</h2>
	</hgroup>
</header>

文章（Articles）

每个<article>中都可包含<h1>元素，这并不构成问题，所有东西都位于一个<article>容器内，该<article>元素定义了一个自包含的页面大纲节点，<h1>元素给这个节点提供了标题，页面上已有的章节元素也会保持其原有嵌套层级。

日期（Dates and Times）

HTML5中<time>元素由三部分组成：

一个机器可识别的时间戳
人可识别的文本内容
一个可选的pubdate标记

如果还想包含时间，在日期后面加上T，然后跟24消逝以及时区偏移量

<time datetime = "2018-11-13T10:48:10-04:00" pubdate>November 13，2018 10:48am
</time>

pubdate是一个布尔属性，需要写上即可，意义是如果该<time>位于一个<article>里，它表示该时间戳是文章发表的时间，如果不在<article>里，表示为整个文档发布时间。

导航（Navigation）

导航语义性考虑情况：
①残障人士
②盲人（阅读器）

第4章 Canvas绘图

HTML5中定义<canvas>元素为：“它是依赖分辨率的位图画布，可以在canvas上绘制任意图形，甚至加载图片”。

canvas是一块布，它什么都没有，需要用javascript来绘制图形。

创建一个canvas，并给它一个id

<canvas id = "a" width = "300" height = "225"></canvas>

创建canvas后就有了绘图上下文（包含了所有绘制方法和属性的定义），我们调用它的getContext()方法，并传递一个“2d”参数给它。

画个矩形吧：

function draw_b(){
	var b_canvas = document.getElementById("a");
	var context = b_canvas.getContext("2d");
	context.fillRect(50,25,150,100);
	context.strokeRect(50,150,150,100);
}

在这里插入图片描述
fillstyle可以设置css颜色、一个图案或种颜色渐变，fillstyle默认是纯黑色。
fillRect（x，y，width，height）（实心填充）
strokeRect（x，y，width，height）（描边绘制）
clearRect（x，y，width，height）（清除指定矩形区像素）

canvas小案例：网格坐标轴

window.onload = function startCanvas(){
	var d_canvas = document.getElementById("d");
	var context = d_canvas.getContext("2d");
	for(var x=0.5;x<500;x+=10){
		context.moveTo(x,0);
		context.lineTo(x,375);
	}
	for(var y=0.5;y<375;y+=10){
		context.moveTo(0,y);
		context.lineTo(500,y);
	}
	context.strokeStyle = "#eee";
	context.stroke();

    context.beginPath();
    context.moveTo(0,40);
    context.lineTo(240,40);
    context.moveTo(260,40);
    context.lineTo(500,40);
    context.moveTo(495,35);
    context.lineTo(500,40);
    context.lineTo(495,45);
    context.moveTo(60,0);
    context.lineTo(60,153);
    context.moveTo(60,173);
    context.lineTo(60,375);
    context.moveTo(65,370);
    context.lineTo(60,375);
    context.lineTo(55,370);
    context.strokeStyle = "#000";
    context.stroke();
    context.font = "bold 12px sans-serif";
    context.fillText("x",248,43);
    context.fillText("y",58,165);
    context.textBaseline = "top";
    context.fillText("(0,0)",8,5);
    context.textAlign = "right";
    context.textBaseline = "bottom";
    context.fillText("(500,375)",492,370);
    context.fillRect(0,0,3,3);
    context.fillRect(497,372,3,3)
}

在这里插入图片描述

备注：

moveTo（x，y）把铅笔移到指定点并作为线条开始点
lineTo（x，y）绘制线条到指定的结束点

这些都是“铅笔”方法，其实并没有真正花到canvas上，还需要一个“画笔”方法，把图案绘制到canvas上去：

context.strokestyle = "#eee";
context.stroke();

文本（Text）

canvas文本：没有浮动，没有边距，没有留白，也没有自动换行。
绘制上下文有一些字体属性：

font包括字体样式、字体变种（font variant）、字体大小、字体粗细、行高和名称
textAlign控制文字对齐方式，它类似于css中的text-align。可能的取值有start、end、left、right和center
textBaseline控制文本相对于起点的位置。可能有top、hanging、middle、alphabetic和bottom

对于简单的英文字母：放心使用top，middle和bottom作为文本基线

颜色渐变（Gradients）

createLinearGradient(x0,y0,x1,y1) 沿着（x0，y0）至（x1，y1）绘制渐变
createRadialGradient(x0,y0,r0,x1,y1,r1) 沿着两个圆之间的锥面绘制渐变。前三个参数代表开始的圆，圆心为（x0，y0），半径为r0。最后三个参数表示结束的圆，圆心为（x1，y1），半径为r1.

图片（Images）

canvas绘图上下文定义了几种绘制图片的方法：

drawImage(image,dx,dy) dx,dy代表图片左上角
drawImage(image,dx,dy,dw,dh) 将其缩放为宽dw，高dh位置
drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 通过参数（sx，sy，sw，sh）指定裁剪后缩放再放到dx，dy

第5章视频

视频文件通常包含多个轨道：一个视频轨（无音频），加上一个或多个音频轨（无视频），轨道互联，音轨包含一些标记，辅助音频同步。

流行视频容器格式
MPEG-4、Flash、ogg、webM，音视频交错。

视频编解码器

实际上就是一个算法，当想要观看一个视频时，播放器会做以下工作：

解析容器格式以找出可使用的视频和音频轨道，并分析其存储结构
对视频流解码，并在屏幕上显示一幅幅图像
对音频流解码，同时给扬声器传输声音信号

H.264为MPEG-4高级视频编码

音频编解码器

实际上也是一个算法，同视频一样，包括有损和无损两种。
音频流解码：对音频流解码并转换为电子波形，扬声器将电子波形转换为声音，大部分通用音频播放器解码器可以处理两个声道。
MP3歌曲可以最多包含两个声道，它们可以解码为不同的比特率：64kps、128kps以及192kps等中间一种

高级音频编码AAC由苹果制造，目的是在相同比特率下提供比MP3更好的音质，它可以按任意比特率编码

视频兼容

为了获得最大兼容性，处理视频流程大概是：

制作一个ogg容器中使用Theora视频和Vorbis音频版本
制作另外一个版本，使用webM视频容器（VP8+Vorbis）
再制作一个版本，使用MP4视频容器，并使用H2.64基本和AAC低配音频
链接3个文件到同一<video>元素，并向后兼容基于flash的视频容器

Haris Ha

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
《HTML5揭秘》读书笔记整理（上）

《HTML5揭秘》并不是一本工具手册，而是一本可以教会你如何使用HTML5的书《HTML5揭秘》读书笔记整理（上）《HTML5揭秘》第1章从开始到现在第2章 HTML5特性检测四种检测HTML5特性方法《HTML5揭秘》第1章从开始到现在每当web浏览器请求一个页面时，服务器会在发送实际页面之前先发送一些头信息（header），头信息通常不可见。最重要的头信息是 Content-...
复制链接

扫一扫