HTML5程序设计（第二版）【自用】

午月廿九

已于 2023-12-08 09:51:54 修改

阅读量111

点赞数

文章标签： html5 前端 html

于 2023-12-07 15:16:30 首次发布

本文链接：https://blog.csdn.net/qq_44395586/article/details/134855671

版权

第一章 HTML5概述

1.4 新的认识

1.4.1 兼容性和存在即合理

HTML5不是颠覆性的革新。

HTML5的一个核心理念是：保持一切新特性平滑过渡。

HTML5旨在进化而非革命。

1.4.2 效率和用户优先

在遇到无法解决的冲突时，HTML5规范会把用户放在第一位，其次是页面作者，再次是实现者（或浏览器），接着是规范制定者（W3C/WHATWG）,最后才考虑理论的纯粹性。

1.安全机制的设计

规范中的各个部分都有专门针对安全的章节，并且安全是被优先考虑的。

2.表现和内容分离

清晰的分开表现和内容更为重要，否则会有如下弊端：

可访问性差
不必要的复杂度（所有样式代码都放在页面，代码可读性很差）
文件变大（样式内容越多，文件越大），带来的后果就是页面载入变慢

1.4.3 化繁为简

HTML5做了以下改进

以浏览器原生能力替代复杂的JavaScript代码
新的简化的DOCTYPE
新的简化的字符集声明
简单而强大的HTML5API

1.4.4 通用访问

可访问性、媒体中立、支持所有语种

1.5 无插件范式

HTML5提供了对一些功能的原生支持

1.6 HTML5的新功能

1.6.1 新的DOCTYPE和字符集

使用HTML5的DOCTYPE会触发浏览器以标准兼容模式显示页面

// 原来的
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
// 现在的
<!DOCTYPE html>
<meta charset="utf-8">

1.6.2 新元素和旧元素

内容类型	描述
内嵌	向文档中添加其他类型的内容（audio、video、canvas、iframe等）
流	在文档和应用的body中使用的元素（form、h1、samll等）
标题	段落标题（h1、h2、hgroup等）
交互	与用户交互的内容（音频和视频控件、button、textarea等）
元数据	通常出现在页面的head中，设置页面其他部分的表现和行为（script、style、title等）
短语	文本和文本标记元素（mark、kbd、sub和sup等）
片段	用于定义文档中片段的元素（article、aside、title等）

上述所有类型的元素都可以通过scc设定样式。

HTML5移除了很多在行内设样式的标记元素，如big，center等，鼓励开发人员使用css

1.6.3 语义化标记

元素名	描述
header	标记头部区域的内容
footer	标记脚部区域的内容
section	web页面中的一块区域
article	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

上面所有元素都能用css设定样式。

1.6.4 使用Selectors API简化选取操作

函数	描述
getElementById()	返回指定的id特性值查找并返回元素
getElementByName()	返回所有name特性为指定值的元素
getElementByTagName()	返回所有标签名称与指定值相匹配的元素

css可以基于嵌套（nesting），兄弟节点（sibling）和子模式（child pattern）进行元素选择。css最新版添加了更多对伪类（pseudo-classe）的支持（例如判断一个对象是否被启用，禁用或者被选择等），还支持对属性和层次的随意组合叠加。

函数	实例
a.querySelector（）	querySelector（"input.error"）返回第一个css类名为error的文本输入框
b.querySelectorAll（）	querySelectorAll（"#results td "）返回id值为results的元素下所有的单元格

可以同时指定多个选择规则:

var x = document.querySelector(".heighClass",".lowClass")

// 选择文档中类名heightClass或lowClass的第一个元素

对于a来说，选择的是满足规则中任一条件的第一个元素

对于b来说，页面中的元素只要满足规则中的任何一个条件，都会被返回。

多条规则之间逗号分隔。

1.6.5 JavaScript日志和调试

console.log()比alert()好用，因为他不会阻塞脚本的执行。

1.6.6 window.JSON

JSON.parse() JSON.stringify()

1.6.7 DOM Level 3

addEventListener() dispatchEvent()

1.6.8 Monkeys,Squirrelfish 和其他的JavaScript引擎

第二章 Canvas API

2.1 HTML5 Canvas概述

2.1.1 历史

Canvas本质上是一个位图画布，其上绘制的图形是不可缩放的，不能像svg图像那样可以放大缩小。此外，Canvas绘制出来的图像不属于页面DOM结构或者任何命名空间---这点被认为是一个缺陷。

svg图像可以在不同分辨率下流畅的缩放，并且支持单击检测（能检测到鼠标单击了图像上的哪个点）。

Canvas两个优势：1.执行性能非常好。2.在其他编程语言现有的二位绘图api的基础上实现Canvas API 相对简单。

2.1.2 canvas 是什么

在网页上使用canvas元素时会创建一块矩形区域。默认宽300px高150px。可以自定义具体的大小或者设置canvas元素的其他特性。

2.1.3 canvas 坐标

左上角为原点，x轴水平向右延伸，y轴垂直向下延伸

2.1.5 替代内容

浏览器不支持canvas元素的时候，开发人员最好提供一份替代代码。

<canvas>
    Update your browser to enjoy canvas!
<canvas>

2.1.6 css 和 canvas

canvas可以通过应用css的方式增加边框，设置内边距，外边距等。一些css属性可以被canvas内的元素继承。

2.2 使用HTML5 canvas API

2.2.1 检测浏览器的支持情况

可以判断是否支持canvas元素，但不判断具体支持canvas的那些特性。

2.2.2 在页面加入canvas

<canvas height="200" width="200"> </canvas>

对于任何canvas对象来说，id特性都是特别重要的，因为对canvas元素的所有操作都是通过脚本代码控制的，没有id的话，找到canvas元素会很难

方法moveTo和lineTo实际上不画线，而是在结束canvas操作的时候，通过调用context.stroke()方法完成线条的绘制

canvas中所有操作都是通过上下文对象来完成的

对上下文的很对操作都不会立即反应到页面上，beginPath，moveTo以及lineTo这些函数都不会直接修改canvas的展示结果。canvas中很多用于设置样式和外观的函数也同样不会直接修改显示结果。只有当对路径应用绘制（stroke）或者填充（fill）方法时，结果才会显示出来。否则，只有在显示图像，显示文本或者绘制，填充和清除矩形框的时候，canvas次啊会马上更新。

2.2.3 变换

通过id找到并访问canvas对象
通过调用canvas对象的getContext函数获取上下文对象
保存尚未修改的context，这样即使进行了绘制和变换操作，亦可以恢复到初始状态。如果不保存，在进行平移和缩放等操作后，其影响会带到后续的操作中，在变换之前保存context状态可以方便以后恢复
在context调用translate函数，当平移行为发生时，就是将要绘制的对角线移动到了新的位置。对角线呈现在canvas上是在绘制操作结束之后
应用平移后，就可以使用普通的绘制操作来画对角线。绘制的起点是（0，0）而不是（70，140）
线条勾画之后，调用stroke将其显示在canvas上
恢复context至原始状态，后续canvas操作不会被刚才的平移操作影响。
新绘制的对角线看起来和前面的一模一样

2.2.4 路径

不论开始绘制何种图形，第一个调用的就是beginPath。通知canvas将要开始绘制一个新图形了。对于canvas来说，beginPath函数最大的作用是canvas需要据此来计算图形的内部和外部范围，一边完成后续的描边和填充。

路径会跟踪当前坐标，默认是原点。

moveTo（x，y）：不绘制，只移动当前位置到新的目标坐标（x，y）

lineTo（x，y）：将当前位置移动到新的目标坐标（x，y），且在两个坐标之间画一条直线。

这两个都不会真正的画出图形，因为没有调用stroke或者fill函数

closePath（）将路径的起始坐标自动作为目标坐标。还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，对将来的填充和描边都非常有用。

此时可以在已有的路径中继续创建其他的子路径，或者调用beginPath重新绘制新路径并完全清楚之前的所有路径。

2.2.5 描边样式

// 加宽线条
context.lineWidth = 4

// 平滑路径的接合点
context.lineJoin = 'round'

// 将颜色改成棕色
context.strokeStyle = '#663300'

// 绘制树冠
context.stroke()

lineCap属性指定线条末端的样式。

2.2.6 填充样式

// 将填充色设置为绿色
context.fillStyle = '#339900'
context.fill()

先描边后填充，填充会覆盖一部分描边路径。如果想看到完整的描边路径，可以在绘制路径之前填充。

2.2.7 填充矩形区域

// 将填充色设为棕色
context.fillStyle = '#663300'

// 填充用作树干的矩形区域
context.fillRect(-5,-50,10,50)

不用lineTo显示画树干的边角，用fillRect并设置x,y两个位置参数和宽高两个参数

strokeRect：基于给出的位置和坐标画出矩形的轮廓

clearRect：清楚矩形区域内的所有内容并将他恢复到初始状态，即透明色。

canvas的清楚举行功能是创建动画和游戏的核心功能。

2.2.8 绘制曲线

午月廿九

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5程序设计（第二版）【自用】

HTML5程序设计（第二版）笔记
复制链接

扫一扫