- [HTML 基础](#HTML 基础)
- [HTML 标题](#HTML 标题)
- [HTML 段落](#HTML 段落)
- [HTML 链接](#HTML 链接)
- [HTML 图片](#HTML 图片)
- [HTML 元素](#HTML 元素)
- [HTML 注释](#HTML 注释)
- [HTML 属性](#HTML 属性)
- [HTML 文本格式化](#HTML 文本格式化)
- [HTML 头部](#HTML 头部)
- [HTML css](#HTML css)
- [HTML 表格](#HTML 表格)
- [HTML 列表](#HTML 列表)
- [HTML 自定义列表](#HTML 自定义列表)
- [HTML 区块](#HTML 区块)
- [HTML 表单](#HTML 表单)
- [HTML 框架](#HTML 框架)
- [HTML 颜色](#HTML 颜色)
- [HTML 脚本](#HTML 脚本)
- [HTML 事件](#HTML 事件)
- [HTML 实体](#HTML 实体)
- [HTML url](#HTML url)
- [HTML5 新元素](#HTML5 新元素)
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新表单元素
- 新元素
- [uotput 新属性](#uotput 新属性)
- 新的语义和结构元素
- SVG
- 新元素
- 新元素
- 新元素
- 新元素
- [MathML 新元素](#MathML 新元素)
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- 新元素
- [HTML5 拖放](#HTML5 拖放)
- Geolocation(地理定位)
- [新的 Input 类型](#新的 Input 类型)
- 新的表单元素
- 表单属性
- [HTML5 语义元素](#HTML5 语义元素)
- [Web 存储](#Web 存储)
- [localStorage 和 sessionStorage](#localStorage 和 sessionStorage)
- [Web SQL 数据库](#Web SQL 数据库)
- [Web Workers](#Web Workers)
- [HTML5 服务器发送事件(Server-Sent Events)](#HTML5 服务器发送事件(Server-Sent Events))
- [HTML5 WebSocket](#HTML5 WebSocket)
HTML 基础
HTML 是一种用于创建网页的标记语言,它使用标签来定义网页的结构和内容。
HTML 标题
HTML 标题是通过 <h1>
到 <h6>
六个标签来定义的,<h1>
标签定义了网页的最重要的标题,<h6>
标签定义了网页的最低级标题。
html
<h1>网页标题</h1>
<h2>副标题</h2>
<h3>小标题</h3>
HTML 段落
HTML 段落是通过 <p>
标签来定义的,<p>
标签定义了网页的正文内容。
html
<p>这是一个段落。</p>
<p>这是一个另一个段落。</p>
HTML 链接
HTML 链接是通过 <a>
标签来定义的,<a>
标签定义了网页的超链接。
html
<a href="https://www.baidu.com">百度</a>
HTML 图片
HTML 图片是通过 <img>
标签来定义的,<img>
标签定义了网页的图片。
html
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">
HTML 元素
HTML 元素是 HTML 代码的基本单位,它由开始标签、内容和结束标签组成。
html
<标签名 属性名="属性值">内容</标签名>
HTML 注释
HTML 注释是通过 <!-- -->
来定义的,<!-- -->
之间的内容不会被显示在网页上。
c
<!-- 这是一个注释 -->
HTML 属性
HTML 属性是标签的附加信息,它可以用来设置标签的各种属性,如:
class
:设置标签的类名,可以为标签添加多个类名。id
:设置标签的唯一标识符,可以为标签添加唯一标识符。style
:设置标签的样式,可以为标签添加 CSS 样式。title
:设置标签的提示信息,当鼠标悬停在标签上时,会显示提示信息。
HTML 文本格式化
HTML 文本格式化是指通过 HTML 标签来控制文本的显示方式,如:
<b>
标签定义粗体文本。<i>
标签定义斜体文本。<u>
标签定义下划线文本。<strike>
标签定义删除线文本。<sup>
标签定义上标文本。<sub>
标签定义下标文本。
html
<p><b>粗体文本</b></p>
<p><i>斜体文本</i></p>
<p><u>下划线文本</u></p>
<p><strike>删除线文本</strike></p>
<p>H<sub>2</sub>O</p>
<p>X<sup>2</sup></p>
HTML 头部
HTML 头部是指网页的元信息,它包含网页的标题、描述、关键字、作者、和其他信息。
html
<!DOCTYPE html> //声明文档类型
<html> //html 根元素
<head>
<title>网页标题</title> //网页标题
<meta charset="UTF-8"> //网页编码
<meta name="description" content="网页描述"> //网页描述
<meta name="keywords" content="网页关键字"> //网页关键字
<meta name="author" content="作者"> //作者
</head>
<body>
</body>
</html>
HTML css
HTML 样式表是一种用来控制 HTML 元素外观的语言,它可以让网页的布局、字体、颜色等都可以被定义。
html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
<style>
body {
background-color: #f2f2f2; //背景颜色
font-family: Arial, sans-serif; //字体
font-size: 16px; //字体大小
line-height: 1.5; //行高
color: #333; //字体颜色
}
h1 {
font-size: 36px; //标题字体大小
color: #333; //标题字体颜色
margin-top: 20px; //标题顶部外边距
margin-bottom: 10px; //标题底部外边距
}
p {
margin-top: 10px; //段落顶部外边距
margin-bottom: 10px; //段落底部外边距
}
</style>
</head>
<body>
<h1>网页标题</h1>
<p>这是一个段落。</p>
<p>这是一个另一个段落。</p>
</body>
</html>
HTML 表格
HTML 表格是通过 <table>
标签来定义的,<table>
标签定义了网页的表格。
colgroup 和 col 标签定义表格的列,row 和 td 标签定义表格的行和单元格。
caption 标签定义表格的标题,thead 标签定义表格的表头,tfoot 标签定义表格的脚注,tbody 标签定义表格的主体。
border 属性定义表格边框的宽度,cellspacing 属性定义单元格之间的间距,cellpadding 属性定义单元格内容与单元格边框之间的间距。
colspan 属性定义单元格横跨的列数,rowspan 属性定义单元格纵向跨越的行数。
html
<table border="1" cellpadding="5" cellspacing="0">
<caption>表格标题</caption>
<colgroup>
<col span="2" style="background-color:yellow;">
<col style="background-color:pink;">
</colgroup>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">总计</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>女</td>
<td>25</td>
</tr>
<tr>
<td>王五</td>
<td>男</td>
<td>30</td>
</tr>
</tbody>
</table>
HTML 列表
HTML 列表是通过 <ul>
和 <ol>
标签来定义的,<ul>
标签定义无序列表,<ol>
标签定义有序列表。
li 标签定义列表项,type 属性定义列表的类型,start 属性定义列表的起始值。
html
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
<ol type="1" start="3">
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
HTML 自定义列表
HTML 自定义列表是通过 <dl>
标签来定义的,<dl>
标签定义定义列表。
dt 标签定义定义项,dd 标签定义定义描述。
html
<dl>
<dt>自定义列表1</dt>
<dd>定义1</dd>
<dt>自定义列表2</dt>
<dd>定义2</dd>
</dl>
HTML 区块
HTML 区块是通过 <div>
标签来定义的,<div>
标签定义了网页的区块。
html
<div>
<h2>区块标题</h2>
<p>这是一个区块。</p>
</div>
span 标签定义了网页的行内元素。
html
<p>这是一个<span style="color:red;">红色</span>的段落。</p>
HTML 表单
HTML 表单是通过 <form>
标签来定义的,<form>
标签定义了网页的表单。
input 标签定义了表单的输入控件,type 属性定义了输入控件的类型,
name 属性定义了输入控件的名称,value 属性定义了输入控件的初始值。
label 标签定义了输入控件的标签,for 属性定义了输入控件的 id。
html
<form>
<label for="name">姓名:</label>
<input type="text" id="name" name="name" value="张三">
<br>
<label for="gender">性别:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">男</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女</label>
<br>
<label for="age">年龄:</label>
<input type="number" id="age" name="age" value="20">
<br>
<label for="email">邮箱:</label>
<input type="email" id="email" name="email" value="123@qq.com">
<br>
<label for="message">留言:</label>
<textarea id="message" name="message" rows="5" cols="30">这是一个留言。</textarea>
<br>
<input type="submit" value="提交">
</form>
属性:
- accept:文件类型。
- method:提交方式。
- name:表单名称。
- target:表单提交目标。
- action:表单提交地址。
- enctype:表单提交编码类型。
- onsubmit:表单提交事件。
- onreset:表单重置事件。
- autocomplete:自动完成。
- novalidate:禁用表单验证。
- list:列表。
- min:最小值。
- max:最大值。
- step:步长。
- pattern:正则表达式。
- required:必填。
- multiple:多选。
- size:输入控件大小。
- form:表单。
- formaction:表单提交地址。
- formenctype:表单提交编码类型。
- formmethod:表单提交方式。
- formnovalidate:禁用表单验证。
- formtarget:表单提交目标。
- height:输入控件高度。
- width:输入控件宽度。
- alt:输入控件的提示信息。
- placeholder:输入控件提示信息。
- readonly:只读。
- alt:输入控件的提示信息。
- tabindex:Tab 键顺序。
- autocomplete:自动完成。
- autofocus:自动聚焦。
- checked:默认选中。
- disabled:禁用。
- form:表单。
- formaction:表单提交地址。
- formenctype:表单提交编码类型。
- formmethod:表单提交方式。
- formnovalidate:禁用表单验证。
- formtarget:表单提交目标。
- height:输入控件高度。
- list:列表。
- max:最大值。
- maxlength:最大长度。
- min:最小值。
- multiple:多选。
- name:输入控件名称。
- pattern:正则表达式。
- placeholder:输入控件提示信息。
- readonly:只读。
- required:必填。
- size:输入控件大小。
- src:图片路径。
- step:步长。
- type:输入控件类型。
- value:输入控件值。
- width:输入控件宽度。
HTML 框架
HTML 框架是通过 <frameset>
和 <frame>
标签来定义的,<frameset>
标签定义了网页的框架,<frame>
标签定义了框架内的页面。
html
<!DOCTYPE html>
<html>
<head>
<title>网页标题</title>
</head>
<frameset rows="20%,80%">
<frame src="top.html">
<frame src="main.html">
</frameset>
</html>
HTML 颜色
HTML 颜色是通过 <font>
标签的 color 属性来定义的,<font>
标签定义了网页的字体颜色。
html
<font color="red">这是一个红色的字。</font>
HTML 脚本
HTML 脚本是通过 <script>
标签来定义的,<script>
标签定义了网页的脚本。
html
<script>
alert("Hello, World!");
</script>
HTML 事件
HTML 事件是指网页的用户操作,如:鼠标点击、鼠标移动、键盘按下、表单提交等.
HTML 事件是通过 JavaScript 来处理的,JavaScript 可以绑定到 HTML 事件上,当事件发生时,JavaScript 代码可以执行。
常见的 HTML 事件有:
- onclick:鼠标点击事件。
- onmouseover:鼠标移入事件。
- onmouseout:鼠标移出事件。
- onkeydown:键盘按下事件。
- onkeyup:键盘松开事件。
- onchange:表单值改变事件。
- onsubmit:表单提交事件。
- onload:页面加载事件。
- onunload:页面卸载事件。
- onerror:页面错误事件。
- onresize:窗口大小改变事件。
- onscroll:窗口滚动事件。
- onblur:元素失去焦点事件。
- onfocus:元素获得焦点事件。
- onselect:文本被选中事件。
- onload:页面加载完成事件。
- onbeforeunload:页面即将卸载事件。
- onhashchange:URL hash值改变事件。
- onmessage:页面间通信事件。
- onoffline:浏览器离线事件。
- ononline:浏览器上线事件。
- onpopstate:页面历史记录改变事件。
- onstorage:本地存储事件。
- onpagehide:页面隐藏事件。
- onpageshow:页面显示事件。
- onabort:页面中止事件。
- oncanplay:媒体文件可以播放事件。
- oncanplaythrough:媒体文件可以播放至结尾事件。
- ondurationchange:媒体文件时长改变事件。
- onemptied:媒体文件清空事件。
- onended:媒体文件播放结束事件。
- onloadeddata:媒体文件加载完成数据事件。
- onloadedmetadata:媒体文件加载元数据事件。
- onpause:媒体文件暂停事件。
- onplay:媒体文件播放事件。
- onplaying:媒体文件正在播放事件。
- onprogress:媒体文件加载进度事件。
- onratechange:媒体文件速率改变事件。
- onseeked:媒体文件跳转完成事件。
- onseeking:媒体文件跳转开始事件。
- onstalled:媒体文件加载失败事件。
- onsuspend:媒体文件暂停事件。
- ontimeupdate:媒体文件播放时间更新事件。
- onvolumechange:媒体文件音量改变事件。
- onwaiting:媒体文件缓冲事件。
- oncopy:复制事件。
- oncut:剪切事件。
- onpaste:粘贴事件。
- onbeforeinput:输入控件内容改变前事件。
- oninput:输入控件内容改变事件。
- oninvalid:输入控件无效输入事件。
- onreset:表单重置事件。
- onsearch:搜索事件。
- onselectstart:选择控件开始事件。
- onselectionchange:选择控件改变事件。
- onshow:元素显示事件。
- onwheel:滚轮事件。
- ondrag:拖拽事件。
- ondragend:拖拽结束事件。
- ondragenter:拖拽进入目标元素事件。
- ondragleave:拖拽离开目标元素事件。
- ondragover:拖拽在目标元素上方事件。
- ondragstart:拖拽开始事件。
- ondrop:拖拽放下事件。
- onscroll:滚动事件。
- onanimationstart:动画开始事件。
- onanimationiteration:动画一次迭代结束事件。
- onanimationend:动画结束事件。
- ontransitionend:动画结束事件。
- onpointerdown:指针按下事件。
- onpointermove:指针移动事件。
- onpointerup:指针松开事件。
- onpointercancel:指针取消事件。
- onpointerover:指针悬停在目标元素上方事件。
- onpointerout:指针移出目标元素事件。
- onpointerenter:指针进入目标元素事件。
- onpointerleave:指针离开目标元素事件。
- ongotpointercapture:指针捕获事件。
- onlostpointercapture:指针释放事件。
- onbeforeinstallprompt:安装提示事件。
- onappinstalled:应用安装完成事件。
- onbeforeprint:打印前事件。
- onafterprint:打印后事件。
- onbeforecopy:复制前事件。
- onaftercopy:复制后事件。
- onbeforecut:剪切前事件。
- onaftercut:剪切后事件。
- onbeforepaste:粘贴前事件。
- onafterpaste:粘贴后事件。
- onbeforeunload:页面即将卸载事件。
- onafterprint:页面打印完成事件。
- onanimationcancel:动画取消事件。
- onanimationend:动画结束事件。
- onanimationiteration:动画迭代事件。
- onanimationstart:动画开始事件。
- onauxclick:辅助点击事件。
- onblur:元素失去焦点事件。
- oncancel:用户取消事件。
- oncanplay:媒体文件可以播放事件。
- oncanplaythrough:媒体文件可以播放至结尾事件。
- onchange:元素值改变事件。
- onclick:元素点击事件。
- onclose:对话框关闭事件。
- oncontextmenu:上下文菜单事件。
- oncuechange:媒体文件cue变化事件。
- ondblclick:元素双击事件。
- ondrag:拖拽事件。
- ondragend:拖拽结束事件。
- ondragenter:拖拽进入目标元素事件。
- ondragleave:拖拽离开目标元素事件。
- ondragover:拖拽在目标元素上方事件。
- ondragstart:拖拽开始事件。
- ondrop:拖拽放下事件。
HTML 实体
HTML 实体是指 HTML 代码中使用的特殊符号,如:<、>、&、"、 等。
HTML 实体的作用是将特殊符号转换为对应的字符。
html
<p>这是一个<p>段落。</p>
常见的 HTML 实体有:
- <:小于号。
- >:大于号。
- &:和号。
- ":双引号。
- :空格。
- ©:版权符号。
- ®:注册商标符号。
- ™:商标符号。
- €:欧元符号。
- £:英镑符号。
- ¥:日元符号。
- ¢:分符号。
- δ:希腊字母 delta。
- ↑:上箭头。
- ↓:下箭头。
- ←:左箭头。
- →:右箭头。
- ×:乘号。
- ÷:除号。
- ±:正负号。
- ¶:段落符号。
- §:节符号。
- °:度符号。
- µ:微符号。
- ²:上标 2。
- ³:上标 3。
- ½:分数 1/2。
- ¼:分数 1/4。
- ¾:分数 3/4。
HTML url
HTML url 是指网页的 URL,URL 用于标识网页的位置。
URL 的格式如下:
协议://主机名[:端口号]/路径名[?查询字符串][#片段标识符]
HTML5 新元素
新元素
HTML5 新增了 <canvas>
元素,用于在网页上绘制图形。
<canvas>
元素可以用来绘制图像、动画、游戏、动态数据图表等。
html
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 50, 50);
</script>
属性:
- height:画布高度。
- width:画布宽度。
- getContext():获取画布的上下文。
- fillStyle:填充颜色。
- fillRect():填充矩形。
- strokeStyle:边框颜色。
- strokeRect():描边矩形。
- clearRect():清除矩形。
- fillText():填充文本。
- strokeText():描边文本。
- measureText():测量文本宽度。
- drawImage():绘制图像。
- createLinearGradient():创建线性渐变。
- createRadialGradient():创建放射性渐变。
新元素
HTML5 新增了 <audio>
元素,用于在网页上播放音频。
元素支持的3种文件格式:MP3、Wav、Ogg。
html
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
属性:
- autoplay:自动播放。
- controls:显示控制条。
- loop:循环播放。
- muted:静音播放。
- src:音频文件路径。
- volume:音量。
新元素
HTML5 新增了 <video>
元素,用于在网页上播放视频。
html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
属性:
- autoplay:自动播放。
- controls:显示控制条。
- height:视频高度。
- loop:循环播放。
- muted:静音播放。
- poster:封面图片。
- src:视频文件路径。
- width:视频宽度。
- volume:音量。
- oncanplaythrough:视频可以播放至结尾事件。
- onended:视频播放结束事件。
- onerror:视频播放错误事件。
- onloadeddata:视频加载完成数据事件。
- onloadedmetadata:视频加载元数据事件。
- onpause:视频暂停事件。
- onplay:视频播放事件。
- onplaying:视频正在播放事件。
- onprogress:视频加载进度事件。
- onratechange:视频速率改变事件。
- onseeked:视频跳转完成事件。
- onseeking:视频跳转开始事件。
- onstalled:视频加载失败事件。
- onsuspend:视频暂停事件。
- ontimeupdate:视频播放时间更新事件。
- onvolumechange:视频音量改变事件。
新元素
HTML5 新增了 <source>
元素,用于指定不同格式的视频文件。
html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
新元素
HTML5 新增了 <embed>
元素,用于在网页上嵌入外部应用程序或插件。
html
<embed src="example.swf" type="application/x-shockwave-flash" width="300" height="200">
属性:
- height:嵌入内容高度。
- src:嵌入内容文件路径。
- type:嵌入内容类型。
- width:嵌入内容宽度。
- align:对齐方式。
新元素
HTML5 新增了 <track>
元素,用于为媒体文件添加字幕。
html
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<track kind="subtitles" src="subtitles_en.vtt" srclang="en" label="English">
Your browser does not support the video tag.
</video>
属性:
- kind:字幕类型。
- src:字幕文件路径。
- srclang:字幕语言。
- label:字幕语言名称。
新表单元素
新元素
HTML5 新增了 <datalist>
元素,用于创建下拉列表。
html
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
属性:
- list:关联的 input 元素。
- value:下拉列表选项值。
uotput 新属性
HTML5 新增了 <output>
元素,用于显示计算结果。
html
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="5"> +
<input type="number" id="b" value="10"> =
<output name="result" for="a b"></output>
</form>
属性:
- name:输出结果名称。
- for:关联的 input 元素。
新的语义和结构元素
c
HTML5提供了新的元素来创建更好的页面结构:
标签 描述
<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> 定义文档中的节(section、区段)。
<time> 定义日期或时间。
<wbr> 规定在文本中的何处适合添加换行符。
SVG
新元素
HTML5 新增了 <svg>
元素,用于创建矢量图形。
html
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
属性:
- height:图形高度。
- width:图形宽度。
- viewBox:定义坐标系统。
- cx:圆心 x 坐标。
- cy:圆心 y 坐标。
- r:半径。
- stroke:边框颜色。
- stroke-width:边框宽度。
- fill:填充颜色。
- transform:图形变换。
- d:路径数据。
- pathLength:路径长度。
- points:多边形顶点。
- x1:线段起点 x 坐标。
- y1:线段起点 y 坐标。
- x2:线段终点 x 坐标。
- y2:线段终点 y 坐标。
- x:矩形左上角 x 坐标。
- y:矩形左上角 y 坐标。
- width:矩形宽度。
- height:矩形高度。
- rx:矩形 x 轴半径。
- ry:矩形 y 轴半径。
新元素
HTML5 新增了 <use>
元素,用于重用 SVG 元素。
html
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<use x="50" y="50" xlink:href="#myCircle" />
</svg>
新元素
HTML5 新增了 <animate>
元素,用于创建动画。
html
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<animate attributeName="cx" from="50" to="100" dur="5s" />
<animate attributeName="cy" from="50" to="100" dur="5s" />
<animate attributeName="r" from="40" to="80" dur="5s" />
<use x="50" y="50" xlink:href="#myCircle" />
</svg>
新元素
HTML5 新增了 <animateTransform>
元素,用于创建变换动画。
html
<svg width="100" height="100">
<circle id="myCircle" cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
<animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="5s" />
<use x="50" y="50" xlink:href="#myCircle" />
</svg>
MathML 新元素
新元素
HTML5 新增了 <math>
元素,用于创建数学公式。
html
<math>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</math>
新元素
HTML5 新增了 <mstyle>
元素,用于设置数学公式的样式。
html
<math>
<mstyle displaystyle="true">
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</mstyle>
</math>
新元素
HTML5 新增了 <mrow>
元素,用于创建行级数学公式。
html
<math>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</math>
新元素
HTML5 新增了 <mfrac>
元素,用于创建分数数学公式。
html
<math>
<mfrac>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</mfrac>
</math>
新元素
HTML5 新增了 <msqrt>
元素,用于创建平方根数学公式。
html
<math>
<msqrt>
<mi>x</mi>
</msqrt>
</math>
新元素
HTML5 新增了 <mroot>
元素,用于创建根数学公式。
html
<math>
<mroot>
<mi>x</mi>
<mn>3</mn>
</mroot>
</math>
新元素
HTML5 新增了 <mstyle>
元素,用于设置数学公式的样式。
html
<math>
<mstyle displaystyle="true">
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</mstyle>
</math>
新元素
HTML5 新增了 <merror>
元素,用于创建错误数学公式。
html
<math>
<merror>
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
<mo>=</mo>
<mrow>
<mi>z</mi>
<mo>+</mo>
<mn>2</mn>
</mrow>
</merror>
</math>
新元素
HTML5 新增了 <mtext>
元素,用于创建文本数学公式。
html
<math>
<mtext>
This is some text.
</mtext>
</math>
新元素
HTML5 新增了 <mspace>
元素,用于创建空白数学公式。
html
<math>
<mspace width="1em" />
</math>
新元素
HTML5 新增了 <menclose>
元素,用于创建围绕数学公式的框。
html
<math>
<menclose notation="longdiv">
<mrow>
<mi>x</mi>
<mo>+</mo>
<mi>y</mi>
</mrow>
</menclose>
</math>
新元素
HTML5 新增了 <mtable>
元素,用于创建表格数学公式。
html
<math>
<mtable>
<mtr>
<mtd>
<mi>x</mi>
</mtd>
<mtd>
<mi>y</mi>
</mtd>
</mtr>
<mtr>
<mtd>
<mi>z</mi>
</mtd>
<mtd>
<mn>2</mn>
</mtd>
</mtr>
</mtable>
</math>
HTML5 拖放
HTML5 拖放 API 提供了一种在网页上拖放元素的简单方式。
html
<div id="drag" ondragstart="drag(event)">Drag me</div>
<script>
function drag(event) {
event.dataTransfer.setData("text", event.target.id);
}
</script>
属性
- ondragstart:拖动开始事件。
- dataTransfer:数据传输对象。
- setData():设置数据。
- getData():获取数据。
- drop:拖动结束事件。
- effectAllowed:允许的拖动效果。
- types:允许的类型。
- files:拖动的文件。
Geolocation(地理定位)
HTML5 Geolocation API 提供了一种在网页上获取用户位置的简单方式。
html
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
属性:
- getCurrentPosition():获取用户位置。
- coords.latitude:纬度。
- coords.longitude:经度。
- coords.accuracy:精度。
- timestamp:时间戳。
- altitude:海拔高度。
- altitudeAccuracy:海拔高度精度。
- heading:航向角。
- speed:速度。
- altitudeAccuracy:海拔高度精度。
- heading:航向角。
- speed:速度。
- address:地址。
新的 Input 类型
HTML5 新增了新的 input 类型:
- color:颜色选择器。
- date:日期选择器。
- datetime:日期时间选择器。
- datetime-local:本地日期时间选择器。
- email:电子邮件输入框。
- month:月份选择器。
- number:数字输入框。
- range:滑动输入框。
- search:搜索框。
- tel:电话号码输入框。
- time:时间选择器。
- url:URL 输入框。
- week:周选择器。
html
<label for="color">Color:</label>
<input type="color" id="color" name="color">
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<label for="datetime">Date and time:</label>
<input type="datetime" id="datetime" name="datetime">
<label for="datetime-local">Local date and time:</label>
<input type="datetime-local" id="datetime-local" name="datetime-local">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="month">Month:</label>
<input type="month" id="month" name="month">
<label for="number">Number:</label>
<input type="number" id="number" name="number">
<label for="range">Range:</label>
<input type="range" id="range" name="range">
<label for="search">Search:</label>
<input type="search" id="search" name="search">
<label for="tel">Telephone:</label>
<input type="tel" id="tel" name="tel">
<label for="time">Time:</label>
<input type="time" id="time" name="time">
<label for="url">URL:</label>
<input type="url" id="url" name="url">
<label for="week">Week:</label>
<input type="week" id="week" name="week">
新的表单元素
HTML5 新增了新的表单元素:
- datalist:下拉列表。
- keygen:密钥生成器。
- output:输出结果。
- progress:进度条。
- meter:进度指示器。
- fieldset:字段集。
- legend:字段集标题。
- details:详情。
- summary:详情标题。
- command:命令按钮。
- menu:菜单。
- menuitem:菜单项。
- dialog:对话框。
- script:脚本。
html
<label for="cars">Choose a car:</label>
<input list="cars" id="cars" name="cars">
<datalist id="cars">
<option value="Toyota">
<option value="Honda">
<option value="Ford">
<option value="BMW">
</datalist>
<label for="key">Enter a key:</label>
<keygen id="key" name="key">
<label for="output">Result:</label>
<output name="output" for="a b"></output>
<progress value="25" max="100"></progress>
<meter value="0.5" min="0" max="1"></meter>
<fieldset> // 字段集
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<details> // 详情
<summary>More information</summary>
<p>Here is some more information.</p>
</details>
<script>// 脚本
alert("Hello, world!");
</script>
<menu> // 菜单
<menuitem type="command" label="New">
<menuitem type="command" label="Open">
<menuitem type="command" label="Save">
<menuitem type="command" label="Save As...">
<hr>
<menuitem type="checkbox" label="Bold" checked>
<menuitem type="checkbox" label="Italic">
<menuitem type="checkbox" label="Underline">
<hr>
<menuitem type="radio" label="Option 1" name="options">
<menuitem type="radio" label="Option 2" name="options">
<menuitem type="radio" label="Option 3" name="options">
</menu>
<dialog id="myDialog"> // 对话框
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone">
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</dialog>
表单属性
HTML5 新增了一些表单属性:
- autocomplete:自动完成。
- autofocus:自动聚焦。
- form:表单。
- formaction:表单提交地址。
- formenctype:表单提交编码类型。
- formmethod:表单提交方法。
- formnovalidate:禁用表单验证。
- formtarget:表单提交目标。
- list:列表。
- min:最小值。
- max:最大值。
- pattern:正则表达式。
- placeholder:占位符。
- readonly:只读。
- required:必填。
- step:步长。
- multiple:多选。
- size:尺寸。
html
<label for="name">Name:</label>
<input type="text" id="name" name="name" autocomplete="off" autofocus>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890">
<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" maxlength="100"></textarea>
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="Toyota">Toyota</option>
<option value="Honda">Honda</option>
<option value="Ford">Ford</option>
<option value="BMW">BMW</option>
</select>
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file">
<form action="submit.php" method="post" enctype="multipart/form-data">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" required>
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file" required>
<button type="submit">Submit</button>
</form>
HTML5 语义元素
HTML5 新增了一些语义元素:
- article:文章。
- section:章节。
- nav:导航。
- aside:侧边栏。
- hgroup:标题组。
- header:页眉。
- footer:页脚。
- figure:图表。
- figcaption:图表标题。
- main:主要内容。
- mark:标记。
- time:时间。
- audio:音频。
- video:视频。
- canvas:画布。
- progress:进度条。
- meter:进度指示器。
- details:详情。
- summary:详情标题。
- data:数据。
- code:代码。
- kbd:键盘输入。
- pre:预格式化。
- q:短引用。
- blockquote:块引用。
- cite:引用。
- em:强调。
- strong:重要。
- small:小型。
- sub:下标。
- sup:上标。
- i:斜体。
- b:粗体。
- u:下划线。
- s:删除线。
- strike:删除线。
- br:换行。
- hr:水平线。
- a:链接。
- img:图片。
- embed:嵌入。
- object:对象。
- param:参数。
- video:视频。
- source:媒体源。
- track:媒体轨道。
- canvas:画布。
- map:地图。
- area:区域。
- svg:矢量图。
- math:数学公式。
- ruby:中文标点。
- rt:中文注音。
- rp:中文注音括号。
- bdi:Bi-directional Isolation。
- bdo:Bi-directional Override。
- wbr:Word Break Opportunity。
Web 存储
HTML5 提供了 Web 存储,可以将数据存储在用户的浏览器中,
可以将数据存储在本地,也可以将数据存储在服务器上。
html
<button onclick="save()">Save</button>
<button onclick="load()">Load</button>
<script>
function save() {
localStorage.setItem("name", "John Doe");
sessionStorage.setItem("age", "30");
}
function load() {
document.getElementById("name").value = localStorage.getItem("name");
document.getElementById("age").value = sessionStorage.getItem("age");
}
</script>
localStorage 和 sessionStorage
localStorage 和 sessionStorage 都是 Web 存储 API 的一部分,
它们都可以用来存储数据,但是它们的生命周期不同。
- localStorage:localStorage 存储的数据在浏览器关闭后依然存在,除非手动删除。
- sessionStorage:sessionStorage 存储的数据在浏览器窗口关闭后就清除。
- 存储大小:localStorage 和 sessionStorage 存储的数据量没有限制,可以存储大量的数据。
- 存储位置:localStorage 和 sessionStorage 存储在用户的本地计算机上,不受服务器控制。
- 安全性:localStorage 和 sessionStorage 存储的数据不会发送到服务器,所以安全性较高。
- 性能:localStorage 和 sessionStorage 存储数据时比 cookie 要快。
- 访问限制:localStorage 和 sessionStorage 存储的数据只能由同源的 JavaScript 脚本访问。
- 存储对象:localStorage 和 sessionStorage 存储的数据只能存储字符串,如果要存储对象,需要先将对象转换为字符串。
- 命名规则:localStorage 和 sessionStorage 存储的键名可以包含字母、数字、下划线和句点,但不能以数字开头。
- 编码规则:localStorage 和 sessionStorage 存储的数据在客户端和服务器之间传输时,会自动进行编码。
Web SQL 数据库
HTML5 提供了 Web SQL 数据库,可以用来存储结构化数据。
html
<button onclick="createTable()">Create Table</button>
<button onclick="insertData()">Insert Data</button>
<button onclick="selectData()">Select Data</button>
<button onclick="deleteData()">Delete Data</button>
<script>
var db;
function initDatabase() {
if (!window.openDatabase) {
alert("Web SQL is not supported by this browser.");
return;
}
db = openDatabase("myDatabase", "1.0", "My Database", 2 * 1024 * 1024);
}
function createTable() {
db.transaction(function(tx) {
tx.executeSql("CREATE TABLE IF NOT EXISTS myTable (id INTEGER PRIMARY KEY, name TEXT, age INTEGER)");
});
}
function insertData() {
db.transaction(function(tx) {
tx.executeSql("INSERT INTO myTable (name, age) VALUES (?,?)", ["John Doe", 30]);
});
}
function selectData() {
db.transaction(function(tx) {
tx.executeSql("SELECT * FROM myTable", [], function(tx, results) {
var len = results.rows.length;
for (var i = 0; i < len; i++) {
var name = results.rows.item(i).name;
var age = results.rows.item(i).age;
alert("Name: " + name + ", Age: " + age);
}
});
});
}
function deleteData() {
db.transaction(function(tx) {
tx.executeSql("DELETE FROM myTable", []);
});
}
initDatabase();
</script>
Web Workers
HTML5 提供了 Web Workers,可以用来在后台运行脚本,不会影响页面的响应。
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>计数: <output id="result"></output></p>
<button onclick="startWorker()">开始工作</button>
<button onclick="stopWorker()">停止工作</button>
<p><strong>注意:</strong> Internet Explorer 9 及更早 IE 版本浏览器不支持 Web Workers.</p>
<script>
var w;// 定义一个 Web Worker
function startWorker() { // 启动 Web Worker
if(typeof(Worker) !== "undefined") { // 检查浏览器是否支持 Web Workers
if(typeof(w) == "undefined") { // 判断 Web Worker 是否已定义
w = new Worker("demo_workers.js"); // 定义 Web Worker
}
w.onmessage = function(event) { // 监听 Web Worker 的消息
document.getElementById("result").innerHTML = event.data; // 更新计数
};
} else {
document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
</body>
</html>
HTML5 服务器发送事件(Server-Sent Events)
HTML5 提供了服务器发送事件,可以用来实时地向浏览器推送数据。
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。
例子:更新、股价更新、新的博文、赛事结果等。
接收 Server-Sent 事件通知
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script>
if (typeof(EventSource)!== "undefined") { // 检查浏览器是否支持 Server-Sent 事件
var source = new EventSource("sse.php");// 创建一个新的 Server-Sent 事件源
source.onmessage = function(event) {// 监听 Server-Sent 事件
document.getElementById("result").innerHTML = event.data; // 更新内容
};
source.onerror = function(event) {// 监听 Server-Sent 事件错误
if (event.target.readyState == EventSource.CLOSED) { // 连接关闭
document.getElementById("result").innerHTML = "连接关闭"; // 显示提示信息
}
};
} else {
document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Server-Sent 事件...";
}
</script>
</body>
</html>
发送 Server-Sent 事件通知
php
<?php
header("Content-Type: text/event-stream"); // 设置响应类型
header("Cache-Control: no-cache"); // 禁止缓存
header("Connection: keep-alive"); // 保持连接
$counter = 0; // 计数器
while(true) { // 循环
$counter++;// 计数器加 1
echo "data: The counter is ".$counter."\n\n"; // 发送数据
ob_flush(); // 刷新输出缓冲区
flush(); // 刷新输出缓冲区
sleep(1);// 等待 1 秒
}
?>
HTML5 WebSocket
HTML5 WebSocket 是 HTML5 定义的一种协议,它使得客户端和服务器之间可以进行全双工通信。
WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 服务器和客户端之间可以互相发送数据。
WebSocket 协议自 2011 年 12 月 25 日正式成为 RFC 6455 标准。
WebSocket 协议支持两种模式:
- 文本模式:WebSocket 协议的默认模式,使用字符串或 JSON 数据。
- 二进制模式:WebSocket 协议的二进制模式,使用 ArrayBuffer 或 Blob 数据。
- 除了文本模式和二进制模式,WebSocket 协议还支持自定义帧格式。
- 压缩:WebSocket 协议支持数据压缩,以减少网络流量。
- 安全:WebSocket 协议支持安全套接层 (SSL/TLS) 和 WebSocket 安全 (WS-Security)。
- 多路复用:WebSocket 协议支持多路复用,允许多个 WebSocket 连接复用同一个 TCP 连接。
- 协议扩展:WebSocket 协议支持协议扩展,允许开发者自定义帧格式。
- 协议版本:WebSocket 协议支持多版本,包括 75、76、77、78、79 版本。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。
浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求,连接建立以后,客户端和服务器端就可以通过 TCP 连接直接交换数据。
当你获取 Web Socket 连接后,你可以通过 send() 方法来向服务器发送数据,并通过 onmessage 事件来接收服务器返回的数据。
c
什么是 WebSocket?
WebSocket 是一种网络通信协议,提供了在单个 TCP 连接上进行全双工通信的能力。在 WebSocket 连接中,客户端和服务器之间可以相互发送数据,这使得 WebSocket 特别适合实时应用,例如在线聊天、游戏、股票更新等。
WebSocket 的工作原理
建立连接:
WebSocket 以 HTTP 协议进行初始的握手,客户端发送一个 HTTP 请求来请求建立 WebSocket 连接。
如果服务器支持 WebSocket,它将返回一个 101 状态码的响应,表示协议切换成功。此时,HTTP 连接升级为 WebSocket 连接。
全双工通信:
一旦 WebSocket 连接建立,客户端和服务器可以随时通过这个连接发送和接收消息。
数据通过帧(frame)的形式传输,可以是文本、二进制数据等。
关闭连接:
任何一方都可以发送关闭帧,表示要关闭连接。
WebSocket 的优点
实时性:由于 WebSocket 是持久连接,数据可以实时传输,无需等待请求和响应,这样降低了延迟。
效率:WebSocket 的通信开销较小,头部开销比传统的 HTTP 请求低,更加高效。
双向通信:支持服务器主动推送数据给客户端,适用于需要实时更新的应用场景。
WebSocket 的基本使用步骤
创建 WebSocket 对象。
连接到 WebSocket 服务器。
发送和接收消息。
关闭连接。