HTML5 秘籍

作者:江月迟迟

发表于:2024-12-10

字数统计:3664 字

预计阅读13分钟

语义化元素

结构化（页面级）

文本级

时间

html

The party starts<time>2014-03-21</time>.
The party starts<time datetime="2014-03-21">March 21<sup>st</sup></time>.
Published on<time datetime="2014-03-21" pubdate>March 31, 2014</time>.

解答了一个以前疑惑的点，为什么有的他不用空格，而用一个T，实际是存数据的一种方式

（日期）时间元素 - HTML（超文本标记语言） | MDN (mozilla.org)

输出

通常，这种页面都会采用一个<form>元素。在这个例子中，需要包含3个文本框，以便用户在其中输入信息：
html
<form action="#" id="bmiCalculator">
<label for="feet inches">Height:</label>
<input name="feet"> feet<br>
<input name="inches"> inches<br>
<label for="pounds">Weight:</label>
<input name="pounds"> pounds<br><br>
...
</form>
如果你想让自己的<output>元素变得更聪明一些，可以为它添加form和for属性，前者的值是包含相关控件的表单ID，后者的值是以空格分隔的相关控件的ID。比如，下面就是一个例子：
html
<p>Your BMI:<output id="result" form="bmiCalculator"for="feet inches pounds"></output></p>
这些属性实际上什么也不干，唯一的用处就是表明<output>从哪些控件获取结果这一信息。
不过，你肯定会因为考虑到了语义而获得加分。如果其他人需要编辑你的页面，那这些属性可以帮他们理清思路。

标记

mark，效果和highLight差不多

表单

构造更好的HTML5表单，不过目前表单主要用框架和组件库了，学习组件库就行应该。

音视频

html

<audio src="[文件资源]" controls autoplay preload loop [mediagroup] />
<video src="[文件资源]" controls autoplay preload loop muted poster width="[大小]" height="[大小]" poster='[文件资源]' [mediagroup] />

后备格式
<audio controls>
<source src="rubberduckies.mp3" type="audio/mp3">
<source src="rubberduckies.ogg" type="audio/ogg">
</audio>

js自定义音视频组件，这个自己曾写过

CSS3

开发者前缀

透明

css

background: rgba(r,g,b,a)
opacity: [0,1]

圆角

背景

阴影

渐变

1.线性渐变

有4个渐变函数，第一个函数是linear-gradient()。下面的代码展示了使用这个函数的简单形式，这样会创建一个从上到下，从白到蓝的渐变效果：

.colorBlendBox{

background: linear-gradient(from top, white, blue);

}

from关键字指定了第一个渐变颜色（白色）的起始位置是顶部（top），可以把它换成to，这样渐变就反转为从底部的蓝色到顶部的白色：

background: linear-gradient(to top, white, blue);

类似地，将top修改为left就可以创建从一边到另一边的渐变。或者两个都用，创建从左上角开始的对角线渐变：

background: linear-gradient(from top left, white, lightblue)

如果想多用几种颜色，没问题，只要依次列出颜色值即可。比如，要创建一个红、橙、黄的三色渐变，以红色从顶部开始，这样写就可以了：

background: linear-gradient(from top, red, orange, yellow);

最后，还可以使用渐变点（gradient stop）控制每个颜色的起点。每个渐变点用百分比值表示，0%就是整个渐变的起点，而100%则是整个渐变的终点。下面这个例子把橙色和黄色的范围扩展到了中间：

background: linear-gradient(from top, red 0%, orange 20%, yellow 80%,

violet 100%);

linear-gradient()函数的语法很好掌握。有个坏消息：为保证对Android浏览器和稍旧一点的Safari（Safari 7之前）浏览器的支持，还需要加上开发商前缀-webkit-。更糟糕的是，-webkit-linear-gradient()函数和真正的 linear-gradient()函数有一些细微的差别。与linear-gradient()不同，-webkit-linear-gradient()不使用from来指定方向，而是自动赋值。

下面是一段兼容了稍旧一点浏览器的样式代码，添加了一个带开发商前缀的渐变：

.colorBlendBox{

background: lightblue;

background:-webkit-linear-gradient(top left, white, lightblue);

background: linear-gradient(from top left, white, lightblue);

}

幸运的是，不需要添加其他的开发商前缀（比如-moz-和-o-），除非你想要支持更老版本的Firefox和Opera。

提示：在所有这些例子中，渐变都是通过background属性实现的。实际上，对background-image属性使用同样的渐变函数也能达到相同的目的。唯一的区别是使用background-image属性，可以创建背景图像作为后备。方法相信不说你也知道，即先用background-image属性为那些后进的浏览器指定一个类似的背景图片，然后再对background-image属性应用渐变函数。支持渐变的浏览器一般也很聪明，除非必要，否则它们不会下载后备图片，从而节省带宽。

2.放射性渐变

要创建放射性渐变，使用radial-gradient()函数。我们要为这个函数提供一个圆心颜色和一个圆周颜色，圆周与元素边界接触。下面这个放射性渐变其圆心是白色，然后逐渐过渡到圆周的蓝色：

background: radial-gradient(circle, white, lightblue);

保险起见，还是要加上一条带-webkit-前缀的：

background:-webkit-radial-gradient(circle, yellow, green);

如果要将渐变拉伸成椭圆形的以更好地适配容器，可以将circle修改为ellipse。

和线性渐变一样，我们可以选择很多颜色。可以通过添加百分比来调节从一个颜色渐变到另一个颜色的快慢。下面这个例子中，渐变从黄色开始，缓慢地渐变到绿色，然后在靠近元素边缘的位置，迅速地渐变到蓝色、白色和黑色。

background: radial-gradient(circle, yellow 10%, green 70%, blue, white,

black);

我们也可以用百分比来设置渐变的中心位置。比如，如果想要渐变的中心点靠近元素的右上角，可以用下面这种放射性渐变：

background: radial-gradient(circle at 90% 5%, white, lightblue);

这对百分比告诉浏览器渐变开始的位置为离左边缘90%（这几乎要到右边缘了）和离上边缘5%。

注意 radial-gradient()函数的语法已经和它诞生时不一样了，用以指定渐变中心点位置的at关键字，是一个较新的特性。虽然在radial-gradient()函数中使用at是安全的，但不要试图在有开发商前缀的-webkit-radial-gradient()函数中使用它。

3.循环渐变

CSS3还有两个可以创建绚丽渐变的函数： repeating-linear-gradient()和 repeating-radial-gradient()。linear-gradient()和radial-gradient()只将所设置的颜色渐变一次，而repeating-linear-gradient()和repeating-radial-gradient()函数会以相同的颜色顺序无尽地循环渐变，直到颜色条纹填满了元素。这种醉人的扎染效果会让你恍惚觉得仿佛回到了20世纪70年代。

repeating-linear-gradient()和 repeating-radial-gradient()函数的语法基本上与linear-gradient()和radial-gradient()一样。唯一的不同是，你需要确保限制了渐变的大小，以使其可以循环。

比如，下面这个循环渐变的效果与普通渐变完全一样，因为它没有限制大小，而是从中心开始，以黄色渐变到边缘的绿色：

background: repeating-radial-gradient(circle, yellow, green);

下面的渐变就不同了，它设置中心的颜色为黄色，但设置绿色在10%的位置就结束。然后，渐变循环，又以黄色开始。产生的效果就是混合了黄色到绿色过渡的条纹：

background: repeating-radial-gradient(circle, yellow, green 10%);

循环渐变中你可以设置任意多的颜色。关键在于要确保最后的颜色包含了一个百分比或像素值，这设置了颜色的位置，而不是放在元素的边缘。

除了使用百分比，还可以用像素值，像下面这样：

background: repeating-linear-gradient(to top, red, orange, white, yellow,

red 30px);

这个渐变创建了一个稍微不一样的效果。现在每个条纹都有一样的宽度（30像素），条纹的数量取决于元素内的空间大小。通过比较可以发现，前面的例子中总是有10个按比例划分的条纹，每一个填充了元素空间的10%（确切地说，是条纹宽度与空间最大半径的比例）。

提示有两个关于循环渐变的警示。首先，只能用to关键字，而不能用from，因为一个循环渐变只能向一个方向填充。其次，如果想要渐变的每一个循环过渡得平滑一些，而不是一个生硬的颜色变化，就要确保颜色列表中的最后一个颜色和第一个颜色一样。

过渡

变换

变换的过渡

Web字体

css

// define
@font-face{
    font-family:'ChantelliAntiquaRegular';
    src: url('Chantelli_Antiqua-webfont.eot');
    src: local('Chantelli Antiqua'),
    url('Chantelli_Antiqua-webfont.woff') format('woff'),
    url('Chantelli_Antiqua-webfont.ttf') format('truetype'),
    url('Chantelli_Antiqua-webfont.svg') format('svg');
}

// use
body {
font-family:'ChantelliAntiquaRegular';
}

多栏文本

column-count: number

响应式Web设计

流式布局

媒体查询

写的太多了，不提了

Canvas绘图

介绍了绘制图像的各种方法

数据存储

localStorage

sessionStorage

读取文件

取得文件：

input
隐藏input
拖放

input

<input id="fileInput" type="file" onchange="processFiles(this.files)">

function processFiles(files) {
  var file = files[0]
  var render = new FileReader()
  reader.onload = function (e) {
    var output = document.getElementId('fileOutput')
    output.textContext = e.target.result
}
  reader.readAsText(file)
}

隐藏inpput

。。。display: noen
function buttonClick() {
  const myInput = document.getElementById('input')
  myInput.click()
}

拖放事件

var dropBox;
window.onload= function(){
    dropBox= document.getElementById("dropBox");
    dropBox.ondragenter= ignoreDrag;
    dropBox.ondragover= ignoreDrag;
    dropBox.ondrop= drop;
};

function ignoreDrag(e){
//因为我们在处理拖放，所以应该
//确保没有其他元素会取得这个事件
e.stopPropagation();
e.preventDefault();
}

function drop(e){
//取消事件传播及默认行为
e.stopPropagation();
e.preventDefault();
//取得拖进来的文件
var data= e.dataTransfer;
var files= data.files;
//将其传给真正的处理文件的函数
processFiles(files);
}

function processFiles(files){
var file= files[0];
//创建FileReader
var reader= new FileReader()
//告诉它在准备好数据URL之后做什么
reader.onload= function(e){
//使用图像URL来绘制dropBox的背景
dropBox.style.backgroundImage="url('"+ e.target.result+"')";
};
//读取图片
reader.readAsDataURL(file);
}

描述文件缓存资源

应用在创造一个离线应用

创建描述文件
修改网页，引用描述文件
配置web服务器

创建描述文件

CACHE MANIFEST （缓存描述文件）
# pages
PersonalityTest.html
PersonalityTest_Score.html

# styles & scripts
PersonalityTest.css
PersonalityTest.js

# pictures & fonts
Images/emotional_bear.jpg
Fonts/museo_slab_500-webfont.eot
Fonts/museo_slab_500-webfont.woff
Fonts/museo_slab_500-webfont.ttf
Fonts/museo_slab_500-webfont.svg

使用描述文件

html

<!DOCTYPE html>
<html lang="en" manifest="PersonalityTest.manifest">
...

配置web服务器

与时俱进

实用缓存技术

还是在描述文件里面添加一些内容：

NETWORK：必须联网才缓存

FALLBACK：在线文件名后背文件名

与服务器通信

XMLHttpRequest

WebSocket

var socket = new WebSocket('ws://localhost/socketServer.php')

socket.onopen= connectionOpen;
socket.onmessage= messageReceived;
socket.onerror= errorOccurred;
socket.onopen= connectionClosed;

比如，连接成功后，需要向服务器发送一条消息。发送消息要使用WebSocket对象的send()方法，这个方法接收纯文本内容作为参数。下面就是处理onOpen事件并发送消息的函数：

function connectionOpen(){
socket.send("UserName:jerryCradivo23@gmail.com");
}

可想而知，服务器在收到这条消息后，会发回一条新消息。

利用onError或onClose事件，可以向用户发出通知。不过，最重要的事件还是onMessage，每当Web服务器发来新数据时，都会触发这个事件。同样，响应这个事件的JavaScript代码也非常好理解，主要是从事件对象的data属性中取得消息内容：

function messageReceived(e) {
  alert('You received a message: ' + e.data)
}

如果网页认为通信可以结束了，可以调用close()方法关闭连接：

socket.close();

但是，一旦socket关闭，就不能再发送消息了，除非重新创建WebSocket对象。重建socket对象和第一次创建一样——用new关键字，传入URL，并绑定所有的事件回调函数。如果需要频繁地连接与断开，可以把这些代码封装到独立的函数里以方便调用。

如你所见，WebSocket对象惊人地简单。事实上，我们已经介绍完它所有的方法和事件了。经过以上简单介绍，我们知道使用其他人写好的Web Socket服务器并不费事，只要知道发送什么消息，以及服务器会发回什么消息即可。

注意：建立Web Socket连接时，后台其实会执行很多处理工作。首先，网页要使用常见的HTTP标准与服务器建立联系，然后再把连接“升级”到Web Socket连接，以便浏览器与服务器能够双向通信。此时，如果计算机与服务器之间有代理服务器（比如在公司网络中），可能会遇到问题。代理服务器可能会拒绝请求并断开连接。对于这种问题，可以检测失败的连接（通过WebSocket对象的onError事件），然后使用http://tinyurl.com/polyfills中的Socket“腻子脚本”来作为后备。这些脚本会使用轮询来模拟Web Socket连接。

参考资料

Can I use... Support tables for HTML5, CSS3, etc

HTML5 秘籍 ​

语义化元素 ​

结构化（页面级） ​

文本级 ​

时间 ​

输出 ​

标记 ​

表单 ​

音视频 ​

CSS3 ​

开发者前缀 ​

透明 ​

圆角 ​

背景 ​

阴影 ​

渐变 ​

过渡 ​

变换 ​

变换的过渡 ​

Web字体 ​

多栏文本 ​

响应式Web设计 ​

流式布局 ​

媒体查询 ​

Canvas绘图 ​

数据存储 ​

localStorage ​

sessionStorage ​

读取文件 ​

取得文件： ​

input ​

隐藏inpput ​

拖放事件 ​

描述文件缓存资源 ​

创建描述文件 ​

使用描述文件 ​

配置web服务器 ​

实用缓存技术 ​

与服务器通信 ​

XMLHttpRequest ​

WebSocket ​

参考资料 ​

HTML5 秘籍

语义化元素

结构化（页面级）

文本级

时间

输出

标记

表单

音视频

CSS3

开发者前缀

透明

圆角

背景

阴影

渐变

过渡

变换

变换的过渡

Web字体

多栏文本

响应式Web设计

流式布局

媒体查询

Canvas绘图

数据存储

localStorage

sessionStorage

读取文件

取得文件：

input

隐藏inpput

拖放事件

描述文件缓存资源

创建描述文件

使用描述文件

配置web服务器

实用缓存技术

与服务器通信

XMLHttpRequest

WebSocket

参考资料