一.HTML标签
1.HTML5新增标签
语义化标签
之前在做布局的使用，使用了大量的div，这些div都是没有语义的，我们不能很轻易的就判断出某个div大致是什么内容，所以在HTML5中新增了语义化标签来弥补这个缺陷，现在我们可以根据标签名去推断出其大致内容，方便代码的阅读，而且使用语义化标签也可以提高被搜索引擎检索的概率。
什么是语义化标签？
- 语义化标签既是使标签有自己的含义
语义化标签的优势
-
使界面的代码结构清晰，方便代码的阅读和团队的合作开发
-
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。
-
有利于搜索引擎优化（SEO）。
：头部标签：导航标签：内容标签：定义文档某个区域：侧边栏标签：尾部标签
功能型标签
音频和视频
audio
标签支持三种音频格式，分别是MP3、Wav以及Ogg，其中MP3格式所有的浏览器都支持。
语法：
<audio src="文件地址" controls="controls"></audio>
标签常见属性👇
属性
值
描述
autoplay
autoplay
表示音频在就绪后马上播放
controls
controls
表示向用户显示控件，比如播放按钮
loop
loop
循环播放，即每当音频结束时重新开始播放
src
url
要播放的音频的url
video
属性
值
描述
autoplay
autoplay
视频就绪自动播放(谷歌浏览器不会自动播放，需要添加muted属性来自动播放)
controls
controls
向用户显示播放控件
width
pixels(像素)
设置播放器宽度
height
pixels(像素)
设置播放器高度
loop
loop
插放完是否继续播放该视频，循环播放
preload
auto(预先加载视频) none(不加载视频)
规定是否预加载视频 (如果有了 autoplay 就忽略该属性)
src
url
视频ur地址
poster
图片的url
加载等待的画面图片
muted
muted
静音插放
画布标签
Canvas（画布）的概述
-
Canvas通过Javascript在网页上来绘制2D图形。Canvas是逐像素进行渲染的。开发者可以通过javascript脚本实现任意绘图。可以通过多种方法使用canvas元素绘制路径、矩形、圆形、字符以及添加图像。
-
在Canvas中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
Canvas(画布)基本使用
<canvas id="tutorial" width="300" height="300"></canvas>
canvas 元素
-
canvas 是一个二维网格。canvas 的左上角坐标为 (0,0)
-
看起来和
标签一样，只是 只有两个可选的属性 width、heigth 属性，而没有 src、alt 属性。如果不给设置 widht、height 属性时，则默认 width为300、height 为 150，单位都是 px。也可以使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。所以，建议永远不要使用 css 属性来设置的宽高。
-
由于某些较老的浏览器（尤其是 IE9 之前的 IE 浏览器）或者浏览器不支持 HTML 元素，在这些浏览器上你应该总是能展示替代内容。支持 的浏览器会只渲染 标签，而忽略其中的替代内容。 不支持 的浏览器则 会直接渲染替代内容:
<canvas> 你的浏览器不支持 canvas，请升级你的浏览器。</canvas>用
替换：
<canvas> <img src="" alt=""> </canvas>- 结束标签 不可省略。
渲染上下文
会创建一个固定大小的画布，会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。 我们重点研究 2D 渲染上下文。 其他的上下文我们暂不研究，比如， WebGL 使用了基于 OpenGL ES的3D 上下文 (“experimental-webgl”) 。
var canvas = document.getElementById('tutorial');//获得 2d 上下文对象var ctx = canvas.getContext('2d');
检测支持性
var canvas = document.getElementById('tutorial');if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here} else { // canvas-unsupported code here}
表单标签
在HTML5中，增加了一些新的input类型，使其语义化更加明显。
属性值
说明
type=“email”
限制用户输入必须为Email类型
type=“url”
限制用户输入必须为URL类型
type=“date”
限制用户输入必须为日期类型
type=“time”
限制用户输入必须为时间类型
type=“month”
限制用户输入必须为月类型
type=“week”
限制用户输入必须为周类型
type=“number”
限制用户输入必须为数字类型
type=“tel”
手机号码
type=“search”
搜索框
type=“color”
生成一个颜色选择表单
type="submit "
点击按钮会提交表单
type="radio"
定义单选按钮
type="checkbox"
定义复选框
type="file"
用于文件上传
type="hidden "
定义隐藏输入字段
type="password"
密码文本框
type="reset"
定义重置按钮。点击按钮会重置表单中的所有输入字段
HTML5中不仅新增了一些input类型，还新增了一些表单属性👇
属性
值
说明
required
required
表单拥有该属性表示其内容不能为空，必填
placeholder
提示文本
表单的提示信息，存在默认值将不显示
autofocus
autofocus
自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete
off / on
当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。默认已经打开，如autocomplete=“on”，关闭autocomplete="off，需要放在表单内，同时加上name属性，并且提交成功过
multiple
multiple
可以多选文件提交
超链接标签
< a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
属性
作用
href
用于指定链接目标的ur地址，(必须属性)当为标签应用href属性时，它就具有了超链接的功能； href=“#”表示这是一个空链接； 如果href里面地址是—个文件或者压缩包,会下载这个文件
target
用于指定链接页面的打开方式，其中_self为默认值(在本窗口中打开)， _ blank为在新窗口中打开方式
注意！！！锚点链接
<a href="#要跳转的元素的id"></a>
点击链接的时候，会跳转到指定元素所在的位置。
图像标签
图像标签：<img src="xxxxxx" 属性2="xxxxxx">
属性
属性值
说明
src
图片路径
必须属性
alt
文本
替换文本。图像不能显示的文字
title
文本
提示文本。鼠标放到图像上，显示的文字
width
像素
设置图像的宽度
height
像素
设置图像的高度
border
像素
设置图像的边框粗细
loading
可以设置为 "lazy"（延迟加载，只有在图像可见时才加载）、"eager"（立即加载）或者 "auto"（浏览器自动选择加载方式）
指示下载资源时相对重要性，或者说优先级。
ismap
布尔属性
指示图像是否是一个服务器图像映射的一部分
表格标签
是用于定义表格的标签。 ```
是用于定义表格的标签。
标签用于定义表格中的行,必须嵌套在< table>标签中 用于定义表格中的单元格，必须嵌套在< tr>标签中 表示表格的表头部分，表示表格的第一行或第一列，其中的文本内容加粗居中显示 用于定义表格的头部。< thead>内部必须拥有< tr>标签，一般是位于第一行 用于定义表格的主体，主要用于放数据本体。**table常用属性**| 属性名 | 属性值 | 描述 || :---------: | :-----------------: | :----------------------------------------------: || align | left、center、right | 规定表格相对周围元素的对齐方式 || border | 1 或 “” | 规定表格单元是否拥有边框，默认为“”，表示没有边框 || cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 || cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 || width | 像素值或百分比 | 规定表格的宽度 || height | 像素值或百分比 | 规定表格的高度 || rowspan | 要合并的单元格个数 | 合并行单元格，记得要删除多余的单元格 || colspan | 要合并的单元格个数 | 合并列单元格，记得要删除多余的单元格 |例子：```html<table border="1" cellspacing="0" width="500" height="250"> <thead> <tr> <th>表头1</th> <th>表头2</th> <th>表头3</th> </tr> </thead> <tbody align="center"> <tr> <td align="left" rowspan="2">111</td> <td colspan="2">222</td> </tr> <tr> <td>555</td> <td>666</td> </tr> </tbody></table>
列表标签
<ul></ul>：定义无序列表，里面只能放 li 标签，其它标签不被允许<ol></ol>：定义有序列表，里面只能放 li 标签，其它标签不被允许<li></li>：有序列表和无序列表中的列表项，相当于一个容器，里面可以放其它标签<dl></dl>：定义自定义列表，里面只能包含 dt 和 dd 标签<dt></dt>：定义自定义列表中的项目<dd></dd>：描述自定义列表中的每一个项目
表单标签
通常一个表单由一个大的表单域构成，表单域里面又包含表单元素和提示信息。
<form></form>：表单域标签，表单域就是一个包含表单元素的区域
<form></form>标签常用属性：
属性
属性值
作用
action
url地址
用于指定接收并处理表单数据的服务器程序的url地址
method
get / post
用于设定表单数据的提交方式
name
名称
用于指定表单的名称，以区分用一个页面中的多个表单域
<input/>：输入表单元素<lable></lable>：绑定一个表单元素，当点击 lable 标签内的文本时，会自动将焦点转到对应的表单元素上，lable 标签的for属性必须得与相关元素的id属性相同<select></select>：下拉表单元素，用于定义一个下拉列表<option></option>：下拉列表中的元素，定义**selected=“selected”**属性时，当前项为默认选中项<textarea></textarea>文本域元素，用于定义一个多行文本输入框，cols属性规定每行的字符数，rows属性规定显示的行数
新增表单元素
用户会在他们输入数据时看到域定义选项的下拉列表
进度条，展示连接/下载进度
刻度值，用于某些计量，例如温度、重量等
提供一种验证用户的可靠方法生成一个公钥和私钥
用于不同类型的输出比如尖酸或脚本输出
detalist的用法：
<input list='food'/> <datalist id = food> <option value="大龙虾"></option> <option value="小龙虾"></option> <option value="汉堡包"></option> <option value="大闸蟹"></option> <option value="小笼包"></option> </datalistai>
改代码输出结果：
progress的用法:
排版标签
内容级结构标签在一个html文档中可以出现多次，而且都应该在body标签中。 内容级结构标签也常称为“排版标签”，主要包括： h1~h6，br， hr， p， pre， blockquote， div， span， 表格标签等等
-
h1～h6： 标题标签，用于设定一定级别的标题，h1是最大的标题，h6是最小的标题 属性 :align：left（左） | center（中） | right（右）
-
br： 换行标签，表示新的一行，能够让其后的内容放到下一行的开头开始显示。 单标签
-
hr: 横线标签，就是输出一根横线，有几个常用属性，如下所示：noshade:去除阴影
<hr width=”宽度值” color=”颜色值” align=”对齐方式” size=”粗细” noshade /> -
p: 段落标签，表示“一个段落”，此时文字前后自然会有一个空行。 有一个属性为：align，其值可以为：left（默认）， center，right。
-
pre: 预格式化标签，表示其中的内容“原样输出”， 主要是其中的换行符，tab符以及空格能在网页上也直观显示出该有的效果。
-
blockquote: 引用标签，表示其中的内容是“引用别人的话”，通常在学术著作中比较常见(不常用,就是加粗)
块标签和行内标签
-
块标签： 一个标签写出后，不管其是否有内容（是否单标签），或内容多少，都会“独占一行”。 比如：hr, p, h1, div等
-
行内标签： 一个标签跟另一个标签如果相继出现，则在页面表现上会在一行出现。 比如：b， strong， font等
块元素可以设置宽高，行内元素不可以设置宽高
文本标签
文本标签主要用于修饰文字内容，以实现一定的文字外观效果，或表达一定的含义，或二者兼具。 文本标签主要包括：
-
b：粗体
-
strong：加强，强调（也会表现为粗体）
-
i：斜体
-
em：强调（斜体）
-
s：删除线
-
del：删除线
-
u：下划线
-
ins：下划线
-
sub：下标
-
sup：上标
-
big：字体变大115%
-
small：字体变小85%
-
font：可以设置文字大小，颜色和字体的文本标签。 该标签有几个属性。
<font size=”大小” color=”颜色” face=”字体” > 文本</font>
Link标签
通过link标签可以设置网页图标
<link rel="icon" href="favicon.ico">
注意 :
-
要将link标签放到head标签中
-
link标签中的属性rel=“icon”。
-
href=“图标路径”
-
一般将网页图标放到网站的根目录下。
meta标签(元信息标签)
meta标签用于定义有关网页（文档）的相关信息（不作为网页的内容表现信息）。 meta标签常用的网页（文档）的相关信息如下所示：
设定针对搜索引擎的关键词：
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
设定对页面的描述：
<meta name="description" content="传智播客是一家全国性的IT技能综合培训学校" />
设定网页的作者或制作组:
<meta name="Author" content="传智播客网页前端技术教研组">
设定网页每隔多少秒数自动刷新一次：
<meta http-equiv="refresh" content="5" />
设定网页在一定时间后自动跳转到另一个页面：
<Meta http-equiv="Refresh" Content="等待的秒数; url=要跳转到的网页地址">
内嵌框架
就是在这个页面里面 ,显示另一个页面的内容
<iframe src=”要嵌入进来的网页地址” name=”框架名称” width=”宽度” height=”高度” frameborder=”1或0” scrolling=”yes或no”></iframe>
说明：
iframe是双标签，但标签中通常不放任何内容。frameborder：用于设定框架窗口是否显示“边框线”，1表示显示，0表示不显示。scrolling：用于设定框架窗口是否显示滚动条（类似浏览器的滚动条）。
特殊字符
二.H5新特性
HTML5（H5）作为最新的 HTML 标准，引入了许多新特性和改进，使得 Web 应用程序更加强大、灵活和易于开发。以下是一些 HTML5 的新特性：
1.语义化标签：
- 新的语义化标签如
<header>,<footer>,<nav>,<article>,<section>等，使得页面结构更清晰。
2.表单增强：
-
提供新的表单控件类型，如
email,url,date,number等。 -
提供表单验证 API，可以通过 JavaScript 进行表单字段的验证。
3.多媒体支持：
-
引入
<video>和<audio>标签，使得在网页中直接嵌入视频和音频变得更加简单。 -
支持 Canvas 元素，可以通过 JavaScript 绘制图形、动画等。
4.本地存储：
- 提供了 localStorage 和 sessionStorage API，可以在客户端存储数据，以便在页面加载时使用。
5.Web Workers：
- 允许在后台运行 JavaScript 代码，提高 web 应用的性能并允许执行耗时操作而不阻塞页面。
6.WebSocket：
- 提供了 WebSocket API，支持浏览器与服务器进行双向通信，实现实时数据传输。
7.Geolocation API：
- 允许 web 应用获取用户的地理位置信息，用于定位服务、导航等功能。
8.拖放功能：
- 支持通过拖放方式实现元素的移动、拖拽文件上传等操作。
9.响应式设计支持：
- 引入了新的 meta 标签和媒体查询等特性，帮助开发响应式设计的网页。
10.离线应用缓存：
- 提供了 Application Cache，允许开发者指定哪些资源需要缓存，使得网页可以在离线状态下访问。
优点
这些新特性使得 HTML5 在 Web 开发中更加强大和灵活，同时也提升了用户体验和开发效率。开发者可以根据项目需求合理利用这些特性，为用户提供更丰富、交互性更强的网页应用
