Document

HTML5入门

2023-05-12
dfer
551
html5 javascript 前端

添加浏览器不支持的元素时，可以将HTML5元素定义为块元素

使用如下方法：
在 head 里添加
<style>
myHero{
display:block;
}
</style>
在 body 里添加
<myHero>添加的新元素</myHero>
以上方法可以用于解决 IE 浏览器添加 HTML5 元素问题，但是 Internet Explorer8 及更早的 IE 版本不支持，而是要用HTML5 Enabling JavaScript 、shiv来解决
方法如下：
在head里添加：

该注释可以在IE浏览器版本小于IE9时读取html5.js文件并解析它
html5shivz的作用是不让新元素被IE6-8识别，且不能应用CSS样式

HTML5添加的新元素

标签	描述
<canvas>	标签定义图形（图表等）,该标签基于 JavaScript 的绘图 API
<audio>	定义音频内容
<video>	定义视频(video、movie)
<source>	定义多媒体资源(video、audio)
<embed>	定义嵌入的内容，如插件
<track>	为video和audio等媒介规定外部文本轨道
<datalist>	定义选项列表，与input 配合使用，用来定义input可能的值
<output>	定义不同类型的输出，如脚本的输出
<article>	定义页面独立的内容区域
<aside>	定义页面的侧边栏内容
<bdi>	允许设置一段文本时期脱离父元素的文本方向设置
<command>	定义命令按钮
<details>	描述细节
<dialog>	定义对话框
<summary>	标签包含 details 元素的标题
<figure>	规定独立的流内容（图像，图表，照片，代码等）
<figcaption>	定义 figure 元素的标题
<footer>	定义 section 或 document 的页脚
<header>	定义文档的头部区域
<mark>	定义带有记号的文本
<meter>	定义度量衡，仅用于已知最大和最小值的度量
<nav>	定义导航链接的部分
<progress>	定义任何类型的任务的进度
<ruby>	定义 ruby 注释
<rt>	定义字符的解释或发音
<rp>	在ruby注释中使用，定义不支持ruby元素的浏览器所显示的内容
<section>	定义文档中的节
<time>	定义日期或时间
<wbr>	规定在文本中的何处适合添加换行符

在HTML5中创建一个画布并画图

<canvas id="" width="" height="" style="border: solid ;"></canvas>
首先找到<canvas>元素：
var c=document.getElementById("myCanvas");
然后创建context对象：
var ctx=c.getContext("2d");
对象是内建的HTML5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
ctx.fillStyle="";图像属性
ctx.fillRect();填充方式

Canvas-路径

线段

moveTo(x,y)定义直线段的开始坐标
lineTo(x,y)定义直线段的结束坐标
然后使用 stroke()方法来绘制线条

矩形

ctx.fillRect(0,0,100,100);
（左上角横坐标，左上角纵坐标，右下角横坐标，右下角纵坐标）

圆形

ctx.beginPath();
ctx.arc(20,20,10,0,2*Math.PI);
ctx.stroke();
（圆心横坐标，圆心纵坐标，半径，开始画圆的角度，结束画圆的角度）

Canvas-文本

font-定义字体
fillText(text,x,y)-在 canvas 上绘制实心的文本
strokeText(text,x,y)-在 canvas 上绘制空心的文本

Canvas-渐变

步骤：创建渐变——>填充渐变
创建渐变的两种方法：

createLinearGradient(x,y,x1,y1)-创建线条渐变
grd.addColorStop(0,"color1");
grd.addColorStop(1,"color2");
createRadialFradient(x,y,r,x1,y1,r1)-创建一个径向/圆渐变
grd.addColorStop(0,"color1");
grd.addColorStop(1,"color2");
当使用渐变对象时，必须使用两种或以上的停止颜色
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0～1
设置fillStyle或strokeStyle的值为渐变，然后绘制形状

Canvas-图像

将图像放到画布上方法如下：drawImage(image,x,y)
先设置好图片属性和创建好画布，再进行一下步骤
var image=document.getElementById("scream");
image.onload = function(){
ctx.drawImage(image,10,10);
}
就可以将图片放到画布上了

HTML5 SVG

SVG定义为可缩放矢量图形，用标签<svg>表示，有多种绘制路径、框、圆、文本和图形图像的方法。
SVG与其他的图像格式相比有一下优势：

可通过文本编译器来创建个修改
可被搜索、索引、脚本化或压缩
是可伸缩的
图像可在任何分辨率下被高质量的打印
可在图像质量不下降的情况下被放大

把SVG直接嵌入HTML页面

圆形

五角星

Canvas 和 SVG 的比较

Canvas

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

SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序
复杂度高会减慢渲染速度
不适合游戏应用

HTML5 MathML

MathML元素在HTML5中对应的标签是<math>...</math>
MathML是数学标记语言，大部分的浏览器都支持，如果你的浏览器不支持，请使用最新版的Firefox或Safari浏览器查看
关于MathML的应用，以下为对各运算标签的讲解：
首先开头我们要用<math>...</math>将所有的表达式包含起来,然后再在其中输入我们的表达式

<mrow>-包裹一个或多个表达式
<msup>-包裹上标的表达式
<mi>-包裹字符
<mn>——包裹数字
<mo>——包裹运算符
<msqrt>——开根号
<mfenced open="["colse="]">——包裹矩阵，即先定义外围的括号
<mtable>——类似table
<mtr>——代表矩阵的行
<mtd>——代表每行的每一个值

HTML5拖放（Drag 和 Drop）

任何元素都能拖放

设置元素为可拖放

拖动对象

οndragstart="" setData()
dataTransfer.setData()可以设置被拖动的数据的数据类型和值

放置地点

ondragover规定的是在何处放置被拖动的数据
且，默认数据无法放置到其他元素中，所以，如果需要设置允许放置，必须阻止程序对元素的默认处理
用：event.preventDefault()

进行放置

放置时有以下几个步骤

阻止默认处理
获得被拖数据
追加放置
示例如下（伪代码，请自行填充）：

decoding为解码,设置为async为强制异步解码（可能会造成图片和其他内容不同时显示），设置为auto则让浏览器自己决定，设置成sync则是强制同步解码。
loading属性指定浏览器是立即加载图像还是延迟加载图像，lazy为延迟加载，只用鼠标滚动到图片位置才会显示，设置为eager则为默认值，图像立即加载。

HTML地理定位（Geolocation）

在用户同意的情况下，用户位置信息是可获得的。
可以使用getCurrentPosition()来获得位置
但不是每次获得位置都会成功，因此也要考虑获得失败的情况：

permission denied-用户不允许获取地理位置
position unavailable-无法获取当前位置
timeout-操作超时
对于getCurrentPosition()方法返回的属性

属性	描述
coords.latitude	十进制数的纬度
coords.longitude	十进制数的经度
coords.accuracy	位置精度
coords.altitude	海拔
coords.altitudeAccuracy	海拔精度
coors.heading	方向，正北开始以度计
coord.speed	速度
timetamp	相应的日期/时间

HTML5视频播放-video

标签	描述
<video>	定义一个视频
<source>	定义多种媒体资源
<track>	定义在媒体播放器文本轨迹

HTML5音频播放-audio

<audio controls>
<source src="audio1.ogg" type="audio/ogg">
<source src="audio1.mp3" type="audio/mpeg">
</audio>
control属性是用来添加播放、暂停和音量控件的。
如果浏览器不支持播放，则在audio标签中插入提示文本
audio允许使用多个source元素，可以链接不同的音频文件，浏览器将使用第一个支持的音频文件

HTML的input类型

一般用于表单中收集用户信息
以以下格式编码：
<form action="demo-form.php"> //创建表单
名称：<input type="" name=""> //输入内容
<input type="submit"> //最后提交

color:

data:

datetime:

detetime-local:

month:

email:

number:

<input type="number" name="quantity">
展示结果基本如下：

名称：
color：
data:
datetime:
detetime-local:
month:
email:
number:
对于数字类型的输入，可以使用以下属性来限定输入范围：

属性	描述
disabled	规定输入字段是禁用的
max	规定允许的最大值
maxlength	规定输入字段的最大字符长度
min	规定允许的最小值
pattern	规定用于验证输入字段的模式
readonly	规定输入字段的值无法修改
required	规定输入的字段是必需的
size	规定输入字段中的可见字符数
step	规定输入字段的合法数字间隔
value	规定输入字段的默认值

range:

range应用于有范围的数字型输入域，显示为滑动条。
<input type="range" name="point" min="1" max="10">

search:

用于搜索域
<input type="search" name="googlesearch">

tel:

定义输入电话号码字段：
<input type="tel" name="usrtel">

time:

url:

在提交表单时，会自动验证输入的url域的值
<input type="url" name="homepage">

week:

规定输入域的选项列表，当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项使用,可以使用<input>的列表属性与<datalist>

表单属性

<input>autocomplete属性

autocomplete属性规定form或input有自顶完成功能。

<form>novalidate属性

novalidate属性是一个布尔属性，该属性规定在提交表单时不应该验证form或input域。

<input>autofocus属性

autofocus属性是一个布尔属性，在页面加载时，域自动获得焦点
如输入地址时
<input type="text" name="address" autofocus>

<input>formaction属性

The formaction属性用于描述表单提交的URL地址，会覆盖元素中的action属性，用于type="submit"和type="image"

<input>formenctype属性

formenctype属性描述了表单提交到服务器的数据编码（只对form的method="post"）
formenctpe属性覆盖了form的enctype,与type="submit"和type="image"配合使用
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交">

<input>formmenthod属性

formmenthod属性重新定义了表单提交的方式
formmenthod属性覆盖了form中的method属性
<input type="submit" formmenthod="post" formaction="demo-post.php" value="使用 POST 提交">

<input>formnovalidate属性

novalidate属性是一个布尔属性，描述了<input>元素在表单提交时无需被验证，会覆盖<form>元素的novalidate属性，与type="submit"一起使用
<form action="demo-form.php">
E-mail:<input type="email" name="userid><br>
<input type="submit" value="提交"><br>
<input type="submit" formnovalidate value="不验证提交">
</form>

<input>formtarget属性

formtarget属性是指定一个名称或一个关键字来指明表单提交数据接受后的展示,会覆盖form的target属性，与type="submit"和type="image"配合使用
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">

<input>list属性

list属性规定输入域的datalist,datalist时输入域的选项列表
<input list="browsers">
<datalist id="browsers">
<option value="">
<option value="">
<option value="">
</datalist>

<input>multiple属性

multiple是一个布尔属性，规定input元素中可以选择多个值，适用于input标签：email和file
<input type="" name="" multiple>

<input>pattern属性

pattern属性描述了一个正则表达式用于验证input元素的值
<input type="" name="" pattern="[]{}" title="">

<input>placeholder属性

placeholder属性提供一种提示(hint),描述输入域所期待的值
<input type="text" name="frame" placeholder="First name">

<input>required属性

required是一个布尔属性，规定必须在提交之前填写输入域（不能为空）。
<input type="text" name="usrname" required>

<input>step属性

规定合法的数字间隔
<input type="number" name="points" step="3">

语义元素

语义元素是有意义的元素的意思，能够清楚的向浏览器和开发者描述其意义。

<section>元素

定义了文档中的节，比如章节，页眉，页脚或文档的其他部分，总的来说，就是包含了一组内容及其标题。
<section>
<h1>标题</h1>
<p>内容</p>
</section>

<article>元素

一般用于

Forum post
Blog post
News story
Comment

<nav>元素

<nav>定义导航链接的部分，但不是所有的链接都需要包含在<nav>元素中

<aside>元素

<aside>标签定义页面主区域内容之外的内容（比如侧边栏），aside标签的内容应与主区域的内容相关。

<header>元素

<header>元素描述了文档的头部区域，主要用于定义内容的介绍展示区域，在页面中可以使用多个<header>
<article>
<header>
<h1>介绍1</h1>
<p>内容1</p>
</header>
<p></p>
</article>

<footer>元素

<footer>元素描述了文档的底部区域，通常包含文档的作者，著作权信息，链接的使用条款，联系信息等，一个文档可以使用多个。

<figure>和<figcaption>元素

<figure>标签规定独立的流内容（图像，图表，照片，代码等等），该元素的内容应该与主内容相关，但如果即使被删除也不会对文档流产生影响。
<figcaption>(不是块元素)标签定义了<figure>的标题，应该被置于<figure>元素的第一个或者最后一个子元素的位置。

Web存储

客户端存储数据的两个对象是：

localStorage-用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。
sessionStorage-用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据。
<div id="result"></div>
<script>
if(typeof(Storage)!=="undefined")
{
//存储
localStorage.setItem("sitename","name");
//查找
document.getElementById("result").innerHTML="网站名:"+localStorage.getItem("sitename");
}
else
{
document.getElementById("result").innerHTML="对不起，您的浏览器不支持 web 存储。";
}
</script>

document.getElementById("id"),是用来获取网页标签的id的，然后通过.innerHTML方法就可以获得到对应标签内的文本内容。

保存数据：localStorage.setltem(key,value);
读取数据：localStorage.getltem(key);
删除单个数据:localStorage.removeltem(key);
得到某个索引的key：localStorage.key(index);

用Web Storage开发网站列表程序

可以输入网站名，网址，以网站名作为key存入localStorage
根据网站名，查找网址
列出当前已保存的所有网站

保存和查找数据：

//保存
function save(){
var siteur1 = document.getElementById("siteur1").value;
var sitename = document.getElementById("sitename").value;
localStorage.setItem(sitename,siteur1);
alert("添加成功");
}
//查找
function find(){
var search_site = decument.getElementByI("search_site").value;
var sitename = localStorage.getItem(search_site);
var find_result = document.getElementById("find_result");
find_result.innerHTML = search_site + "的网址是：" + sitename;
}

Web SQL数据库

核心方法

openDatabase:使用现有的数据库或者新建的数据库创建一个数据库对象
transaction:让我们能够控制一个事务，以及基于这种情况执行提交或者回滚。
executeSql:用于实际的SQL查询

打开数据库

var db = openDatabase('mydb','1.0','Test DB',210241024);

openDatabase()的五个参数说明：

数据库名称
版本号
描述文本
数据库大小
创建回调

执行查询操作

database.transaction()函数
var db=openDatabase('mydb','1.0','Test DB',210241024);
db.transaction(function(tx){
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');});
以上语句执行后会在mydb数据库中创建一个名为LOGS的表

插入数据

var db = openDatabase('mydb','1.0','Test DB',210241024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "内容")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "网址")');
});
也可以使用动态值来插入数据：

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});

读取数据

var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);

db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "网站名称")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "网址")');
});

db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "

查询记录条数: " + len + "

";
document.querySelector('#status').innerHTML += msg;

  for (i = 0; i < len; i++){
     alert(results.rows.item(i).log );
  }

}, null);
});

删除记录

db.transaction(function (tx){
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
删除数据id也可以是动态的：
db.transaction(function(tx){
tx.executeSql('DELETE FROM LOGS WHERE id=?',[id]);
});

更新记录

db.transaction(function(tx){
tx.executeSql('UPDATE LOGS SET log='www.w3cshool.cc' WHERE id=2');
});
动态更新：
db.transaction(function(tx){
tx.executeSql('UPDATE LOGS SET log='www.w3cschool.cc'WHERE id=?',[id]);
});

应用程序缓存（Application Cache）

程序缓存的三个优势：

离线浏览-用户可在应用离线时使用它们
速度-已缓存资源加载得更快
减少服务器负载-浏览器将只从服务器下载更新过或更该过的资源

Cache Manifest基础

<!DOCTYPE HTML>
<html mainfest="demo.appcache">
</html>
只有指定了manifest的页面在用户对其访问时才会被缓存，除非在manifest文档中直接指定了该页面，manifest文件的扩展名为：".appcache".

Manifest文件

manifest文件是简单的文本文件，他告知浏览器被缓存的内容。
manifest文件可分为三个部分：

CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存
NETWORK-在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK-在此标题下列出的文件规定当前页面无法访问时的会退页面（如404页面）

CACHE MANIFEST

CACHE MANIFEST
/theme.css
/logo.gif
/main.js
当manifest文件加载后，浏览器会从网站的根目录下载这三个文件，无论是否断网，资源都是可用的。

NETWORK

NETWORK：
login.php
此处，NETWORK规定文件login.php不会被缓存，因此离线不可用
NETWORK:
*
使用星号表示资源离线不可用

FALLBACL

FALLBACK：
/html/ / offline.html
规定离线时，用offline.html替代html目录中的文件
第一个URL是资源，第二个是替补

更新缓存

当资源被缓存后，除非

用户清空缓存
manifest文件被修改
有程序来更新应用缓存
否则，缓存会保持原样

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

NETWORK:
login.php

FALLBACK:
/html/ /offline.html

Web Workers

Web Workers是运行在后台的JavaScript,独立存在，不会影响页面的性能

创建 web worker 文件

var i=0;
function ...(){
...
postMessage();
...
};

创建 Web Worker 对象

首先检测是否存在worker，如若无,则创建一个新的
if(typeof(w)=="undefined"){
w=new Worker("demo_worker.js");
}
然后就可以从 web worker 发送和接收信息了
向 web worker 添加一个 onmessage 事件监听器
w.onmessage=function(event){
document.getElementById("result").innerHTML=event.data;
};
终止 Web Worker
w.terminate();

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

SSE事件-单项消息传递
server-sent事件指的是网页自动获取来自服务器的更新。

接收server-sent事件通知

创建一个eventSource对象，然后规定发送更新的页面的URL,当接收到更新的时候，就会发生 onmessage 事件，将已接收的数据推入id为"result"的元素。
如下：
var source=new EventSource("demo_sse.php);
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data+"
";
};

检测Server-Sent事件支持

if(typeof(EventSource)!=="undefined")
{
...
}
else
{
//提示浏览器不支持
}

发送事件流

报头设为Content-Type设置为text/event-stream
规定不对页面进行缓存
输出发送日期（始终以data:开头
向网页刷新输出结果
PHP
<?php header('Content-Type:text/event-stream');
header('Cache-Control:no-cache');
time = date('r'); echo "data:The server time is:\{time=date(′r′);echo"data:Theservertimeis:{time}\n\n";
flush();
?>
ASP
<%>
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: "& now())
Response.Fluse()
%>

EventSource对象

事件	描述
onopen	当通往服务器的连接被打开
onmessage	当接收到消息
onerror	当发生错误

上一篇：常用HTML标签及属

下一篇：如何使用PHP和高德