HTML详解

gopher95112024-10-05 19:45

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 服务器。
发送和接收消息。
关闭连接。
相关推荐
m0_7482402542 分钟前
前端如何检测用户登录状态是否过期
前端
black^sugar43 分钟前
纯前端实现更新检测
开发语言·前端·javascript
寻找沙漠的人1 小时前
前端知识补充—CSS
前端·css
GISer_Jing2 小时前
2025前端面试热门题目——计算机网络篇
前端·计算机网络·面试
m0_748245522 小时前
吉利前端、AI面试
前端·面试·职场和发展
理想不理想v2 小时前
webpack最基础的配置
前端·webpack·node.js
pubuzhixing2 小时前
开源白板新方案：Plait 同时支持 Angular 和 React 啦！
前端·开源·github
2401_857600952 小时前
SSM 与 Vue 共筑电脑测评系统：精准洞察电脑世界
前端·javascript·vue.js
2401_857600952 小时前
数字时代的医疗挂号变革：SSM+Vue 系统设计与实现之道
前端·javascript·vue.js
GDAL2 小时前
vue入门教程：组件透传 Attributes
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04机器人编程怎么入门？05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07SQL 主从数据库实时备份08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10VSCode插件 —— Cody AI （免费AI助手！）