HTML5 入门教程学习摘要笔记

最新推荐文章于 2021-05-13 07:33:50 发布

抓更够

最新推荐文章于 2021-05-13 07:33:50 发布

阅读量1.5k

点赞数

分类专栏：学习笔记文章标签： HTML5 入门学习笔记前端

本文链接：https://blog.csdn.net/weixin_43451006/article/details/98580667

版权

学习笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

以下为个人认为有必要记录的笔记不喜勿喷

介绍
新特性
缺点
HTML5 <!DOCTYPE>
已移除元素
HTML5浏览器支持
HTML5语义元素
HTML5元素
写在后面

介绍

HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。

新特性

淘汰过时的或冗余的属性
Indexed DB本地存储功能
脱离Flash 和Silverlight直接在浏览器中显示图形或动画
一个HTML5文档到另一个文档间的拖放功能
提供外部应用和浏览器内部数据之间的开放接口

缺点

欧洲网络信息安全机构已经发出警告，HTML5可能并不够安全。
HTML5还没有被各大浏览器所支持
HTML5要求技术必须全部开放，而这可能触及到一些大公司的利益

HTML5 <!DOCTYPE>

<!doctype> 声明必须位于 HTML5 文档中的第一行,使用非常简单：
<!DOCTYPE html>

已移除元素

以下的 HTML 4.01 元素在HTML5中已经被删除:
<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>、<command>。

HTML5浏览器支持

最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。
Internet Explorer 9 将支持某些 HTML5 特性。

<!–[if lt IE 9]>
<script src=“http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js”></script>
<![endif]–>

html5shiv.js 引用代码必须放在元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

HTML5语义元素

Web页面不同部分

section

对文档中的内容进行分块或分段。

定义了文档的某个区域。比如章节、头部、底部或者文档的其他区域。

article

定义独立的内容。

定义的内容本身必须是有意义的且必须是独立于文档的其余部分。
潜在来源：论坛帖子、博客文章、新闻故事、评论。

nav

定义导航链接的部分。

不是所有的链接都需要包含在 nav 元素中。

aside

定义页面主区域内容之外的内容（比如侧边栏）。

不要将 aside 元素去标记括号内的文本，因为这种类型的文本（即括号内的文本）被认为是其内容流的一部分。

header

描述了文档的头部区域。

在一个文档中，可以定义多个 header 元素。
不能被放在 footer、address 或者另一个 header 元素内部。

footer

描述了文档的底部区域。

一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。
在一个文档中，您可以定义多个 footer 元素。

figure

规定独立的流内容（图像、图表、照片、代码等等）。

内容的纲要是被文档的主纲要排除在外的。

figcaption

用来表示 figure 标签的标题。

应该被置于
元素的第一个或最后一个子元素的位置。

HTML5元素

<!DOCTYPE> 声明

是HTML5文档的起始点，必须位于HTML5文档的第一行。

HTML5 不是基于 SGML（Standard Generalized Markup Language 标准通用标记语言），不要求引用 DTD。
没有结束标签，不区分大小写。

a

<a href=""></a>;

如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。

Canvas

在网页中绘制所需图形。

标签只是图形容器，必须使用脚本绘制图形。
默认情况下元素没有边框和内容。
是一个二维网格，左上角坐标为 (0,0)。
在canvas上画线：
- moveTo(x,y) 定义线条开始坐标。
- lineTo(x,y) 定义线条结束坐标。
绘制圆形：arc(x,y,r,start,stop);
绘制线条最后要加上：stroke();
定义矩形当前的填充方式：fillRect(x,y,width,height);
绘制文本：
- font - 定义字体
- fillText(text,x,y) - 在 canvas 上绘制实心的文本
- strokeText(text,x,y) - 在 canvas 上绘制空心的文本
绘制渐变：
- createLinearGradient(x,y,x1,y1) - 创建线条渐变
- createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
- 必须使用两种或两种以上的停止颜色。
- addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1。
- 使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
drawImage(image,x,y) - 把一幅图像放置到画布上。

内联SVG

表示可缩放矢量图形，是基于可扩展标记语言（标准通用标记语言的子集），用于描述二维矢量图形的一种图形格式。

使用 XML 格式定义图形。

MathML

是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

对应的标签是 <math>…</math> 。

拖放（Drag和Drop）

将某个对象放置到想要放置的位置。

设元素为可拖放

把 draggable 属性设置为 true 即可。

ondragstart属性和dataTransfer.setData() 方法

拖动什么。

ondragover属性

放到哪里。

ondrop属性

进行放置。

input

input元素是空的,它只包含标签属性。
新输入类型：
color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。
color：选取颜色。
date：从日期选择器中选择一个日期。
datetime：选择一个日期（UTC 时间）。
datetime-local：选择一个日期和时间 (无时区)。
email：包含 e-mail 地址的输入域，会自动验证。
month：选择一个月份。
number：在设定数值域中选择数字。
- max- 规定允许的最大值；
- min - 规定允许的最小值；
- step - 规定合法的数字间隔（如果 step=“3”，则合法的数是 -3,0,3,6 等）；
- value - 规定默认值。
range：在一定数值域范围的滑动条。
- 属性和number相同。
search：搜索域。
tel：电话号码字段。
time：选择一个时间。
url：自动验证url输入域的值。
week：选择年和周。

表单元素

datalist

需要与 <input> 标签配合使用，用来表示可选的列表。

不能控制 datalist 的位置，并且不能将其与服务器的数据进行绑定。

keygen（已废弃）

output

定义不同类型的输出。

作为计算结果输出显示(比如执行脚本的输出)。

表单属性

<form>新属性：
autocomplete、novalidate
<input>新属性：
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height and width、list、min and max、multiple、pattern (regexp)、placeholder、required、step。

autocomplete

规定 form 或 input 域应该拥有自动完成功能。

有可能在 form元素中是开启的，而在input元素中是关闭的。
适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

novalidate

规定在提交表单时不应该验证 form 或 input 域。

是一个Boolean值。

autofocus

规定在页面加载时，域自动地获得焦点。

是一个Boolean值。

form

规定输入域所属的一个或多个表单。

如需引用一个以上的表单，请使用空格分隔的列表。

formaction

用于描述表单提交的URL地址。

会覆盖 form 元素中的action属性。
用于 type=“submit” 和 type=“image”。

formenctype

描述了表单提交到服务器的数据编码 (只对form表单中 method=“post” 表单)。

会覆盖 form 元素的 enctype 属性。
与 type=“submit” 和 type=“image” 配合使用。

formmethod

定义了表单提交的方式。

会覆盖了 form 元素的的method 属性。
与 type=“submit” 和 type=“image” 配合使用。

formnovalidate

描述了元素在表单提交时无需被验证。

会覆盖元素的novalidate属性。
与type="submit"一起使用。
是一个Boolean值。

formtarget

指定一个名称或一个关键字来指明表单提交数据接收后的展示。

会覆盖 form元素的target属性。
与type=“submit” 和 type="image"配合使用。

height 和 width

规定用于 image 类型的 input 标签的图像高度和宽度。

只适用于 image 类型的 input 标签。

list

规定输入域的 datalist。

datalist 是输入域的选项列表。

min、max 和 step

用于为包含数字或日期的 input 类型规定限定（约束）。

min、max 和 step 属性适用于以下类型的 input 标签：date pickers、number 以及 range。

multiple

规定 input 元素中可选择多个值。

适用于以下类型的标签：email 和 file。: email, and file。

pattern

描述了一个正则表达式用于验证 input 元素的值。

适用于以下类型的标签: text, search, url, tel, email, 和 password。
是用来全局 title 属性描述了模式。

placeholder

提供一种提示（hint），描述输入域所期待的值。

简短的提示在用户输入值前会显示在输入域上。
适用于以下类型的 input 标签：text, search, url, telephone, email 以及 password。

required

规定必须在提交之前填写输入域（不能为空）

是一个 boolean 属性。
适用于以下类型的标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

step

为输入域规定合法的数字间隔。

可以与 max 和 min 属性创建一个区域值。
与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。

地理位置

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私，除非用户同意，否则用户位置信息是不可用的。

检测是否支持地理定位
如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
showPosition() 函数获得并显示经度和纬度
getCurrentPosition() 方法的第二个参数用于处理错误。它规定当获取用户位置失败时运行的函数。
- 错误代码：
  - Permission denied - 用户不允许地理定位
  - Position unavailable - 无法获取当前位置
  - Timeout - 操作超时
watchPosition() - 返回用户的当前位置，并继续返回用户移动时的更新位置（就像汽车上的 GPS）。
clearWatch() - 停止 watchPosition() 方法

Video(视频)

提供了播放、暂停（play() 和 pause()）和音量控件来控制视频
控制视频的尺寸
元素支持多个元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。
注意以下track标签——文本轨迹

Audio(音频)

和video差不多。

Web 存储

localStorage

没有时间限制的数据存储
本地存储的API

sessionStorage

针对一个 session 的数据存储

键/值对通常以字符串存储，可以按自己的需要转换该格式。
当用户关闭浏览器窗口后，数据会被删除。

Web SQL数据库

在浏览器上模拟数据库，可以使用JS来操作SQL完成对数据的读写。

openDatabase()方法

打开已存在的数据库，如果数据库不存在，则会创建一个新的数据库。

五个参数：数据库名称、版本号、描述文本、数据库大小、创建回调。

transaction

控制一个事务，以及基于这种情况执行提交或者回滚。

executeSql

用于执行实际的 SQL 查询。

应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，在文档的<html> 标签中包含 manifest 属性，可以轻松地创建 web 应用的离线版本。

三大优势：
- 离线浏览 - 用户可在应用离线时使用它们。
- 速度 - 已缓存资源加载得更快。
- 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 “text/cache-manifest”。必须在 web 服务器上进行配置。

Manifest 文件

三个部分：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存（必需的）。
- NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存。
- FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）。第一个 URI 是资源，第二个是替补。
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

Web Workers

运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。
在创建 web worker 之前，请检测用户的浏览器是否支持它。
postMessage() 方法 - 它用于向 HTML 页面传回一段消息。
检测是否存在 worker，如果不存在，创建一个新的 web worker 对象，然后运行外部js中的代码。
向 web worker 添加一个 “onmessage” 事件监听器，收到传递的消息会执行事件监听器中的代码。
如需终止 web worker，并释放浏览器/计算机资源，请使用 terminate() 方法。

SSE服务器发送事件(Server-Sent Events)

基于 WebSocket 协议的一种服务器向客户端发送事件和数据的单向通讯。

服务器端事件流的语法是非常简单的。把 “Content-Type” 报头设置为 “text/event-stream”。

Server-Sent 事件 - 单向消息传递

网页自动获取来自服务器的更新。

接收 Server-Sent 事件通知

EventSource 对象用于接收服务器发送事件通知。

检测 Server-Sent 事件支持

检测SS事件支持

WebSocket

是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

本质上是一个基于 TCP 的协议。
在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
获取 Web Socket 连接后，可以通过 send() 方法来向服务器发送数据，并通过 onmessage 事件来接收服务器返回的数据。
创建 WebSocket 对象：var Socket = new WebSocket(url, [protocal] );
- 第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的，指定了可接受的子协议。