HTML详解

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>这是一个&lt;p&gt;段落。</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 的一部分,

它们都可以用来存储数据,但是它们的生命周期不同。

  1. localStorage:localStorage 存储的数据在浏览器关闭后依然存在,除非手动删除。
  2. sessionStorage:sessionStorage 存储的数据在浏览器窗口关闭后就清除。
  3. 存储大小:localStorage 和 sessionStorage 存储的数据量没有限制,可以存储大量的数据。
  4. 存储位置:localStorage 和 sessionStorage 存储在用户的本地计算机上,不受服务器控制。
  5. 安全性:localStorage 和 sessionStorage 存储的数据不会发送到服务器,所以安全性较高。
  6. 性能:localStorage 和 sessionStorage 存储数据时比 cookie 要快。
  7. 访问限制:localStorage 和 sessionStorage 存储的数据只能由同源的 JavaScript 脚本访问。
  8. 存储对象:localStorage 和 sessionStorage 存储的数据只能存储字符串,如果要存储对象,需要先将对象转换为字符串。
  9. 命名规则:localStorage 和 sessionStorage 存储的键名可以包含字母、数字、下划线和句点,但不能以数字开头。
  10. 编码规则: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 服务器。
发送和接收消息。
关闭连接。
相关推荐
陈王卜几秒前
django+boostrap实现发布博客权限控制
java·前端·django
景天科技苑8 分钟前
【vue3+vite】新一代vue脚手架工具vite,助力前端开发更快捷更高效
前端·javascript·vue.js·vite·vue项目·脚手架工具
小行星12519 分钟前
前端预览pdf文件流
前端·javascript·vue.js
小行星12526 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00136 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
J总裁的小芒果1 小时前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen961 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
咖喱鱼蛋1 小时前
Electron一些概念理解
前端·javascript·electron
yqcoder1 小时前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架