新的语义标签
HTML5引入了一些新的语义标签，如<header>、<footer>、<nav>、<article>、<section>、<aside>等，这些标签可以更好地描述网页的结构和内容，使得搜索引擎更容易理解页面的内容，提高 了 页面的可访问性和可用性。
视频和音频
HTML5支持内置的视频和音频播放器，不需要使用第三方插件，如Flash。使用HTML5的视频和音频标签，可以更方便地在网页中嵌入视频和音频，提高了用户的体验。
画布
HTML5引入了<canvas>标签，可以在网页中创建图形、动画、游戏等交互式应用程序，使得开发者可以更方便地开发丰富的互动性应用程序。
本地存储
HTML5提供了本地存储API，可以在客户端本地存储数据，如Web Storage和IndexedDB，使得网页可以离线访问，并且可以更快地加载页面。
增强的表单控件
HTML5中新增了一些表单控件，如日期选择器、时间选择器、颜色选择器等，使得表单更易于使用和填写，提高了用户的体验。
Web Workers
HTML5支持Web Workers，可以在后台运行JavaScript代码，使得网页可以更快地响应用户的操作，提高了网页的性能。
Geolocation
HTML5提供了Geolocation API，可以获取用户的地理位置信息，可以为用户提供更加个性化的服务和体验。
CSS3引入了许多新的功能和特性，其中包括：
新的选择器
CSS3新增了一些新的选择器，如属性选择器、伪类选择器、伪元素选择器等，可以更精确地选择元素。比如，属性选择器可以根据元素的属性值来选择元素，伪类选择器可以根据元素的状态来选择元素，伪元素选择器可以选择元素的某个部分。
盒模型
CSS3引入了新的盒模型，可以通过box-sizing属性控制元素的盒模型，包括content-box、border-box和padding-box。content-box是标准盒模型，border-box是IE盒模型，padding-box是W3C盒模型。通过控制盒模型，可以更好地控制元素的布局和样式。
边框
CSS3新增了一些新的边框属性，如border-radius、border-image、box-shadow等，可以更加灵活地控制元素的边框样式。比如，border-radius可以实现圆角边框，border-image可以使用图片作为边框，box-shadow可以实现元素的阴影效果。
渐变
CSS3引入了渐变属性，包括线性渐变和径向渐变，可以更加灵活地控制元素的背景样式。比如，可以实现从一个颜色到另一个颜色的平滑渐变，或者从一个颜色到透明的渐变。
转换和动画
CSS3引入了transform和animation属性，可以通过CSS3的转换和动画特性，实现更加丰富的交互效果。比如，可以实现元素的旋转、缩放、移动等效果，或者实现元素的动画效果，如淡入淡出、旋转、弹跳等。
字体
CSS3引入了新的字体属性，如@font-face、font-stretch、font-feature-settings等，可以更加灵活地控制网页的字体样式。比如，可以使用自定义的字体，或者控制字体的拉伸、特性等。
媒体查询
CSS3引入了媒体查询，可以根据设备的不同，为不同的设备提供不同的样式。比如，可以为移动设备提供不同的样式，或者根据屏幕尺寸来控制布局和样式。这样可以提高网页的适应性和可用性。
- 邮箱格式验证规则：
function validateEmail(email) {
const reg = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
return reg.test(email);
}- 手机号码验证规则：
function validatePhone(phone) {
const reg = /^1\d{10}$/;
return reg.test(phone);
}- 密码验证规则：
function validatePassword(password) {
const reg = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*]).{8,16}$/;
return reg.test(password);
}- 身份证号码验证规则：
function validateIdCard(idCard) {
const reg = /(^\d{15}$)|(^\d{17}([0-9]|X)$)/;
return reg.test(idCard);
}- 银行卡号验证规则：
function validateBankCard(bankCard) {
const reg = /^([1-9]{1})(\d{15}|\d{18})$/;
let sum = 0;
let index = 0;
for (let i = bankCard.length - 2; i >= 0; i--) {
let num = parseInt(bankCard.charAt(i));
if (index % 2 === 0) {
num *= 2;
if (num > 9) {
num -= 9;
}
}
sum += num;
index++;
}
sum += parseInt(bankCard.charAt(bankCard.length - 1));
return sum % 10 === 0 && reg.test(bankCard);
}- 网址验证规则：
function validateUrl(url) {
const reg = /^(http|https):\/\/[a-zA-Z0-9]+(\.[a-zA-Z0-9]+)+[^\s]*$/;
return reg.test(url);
}- IP地址验证规则：
function validateIp(ip) {
const reg = /^(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])(\.(\d{1,2}|1\d{2}|2[0-4]\d|25[0-5])){3}$/;
return reg.test(ip);
}- 时间格式验证规则：
function validateTime(time) {
const reg = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/;
return reg.test(time) && !isNaN(Date.parse(time));
}- 数字验证规则：
function validateNumber(number, min, max) {
const reg = /^\d+$/;
if (!reg.test(number)) {
return false;
}
if (min !== undefined && number < min) {
return false;
}
if (max !== undefined && number > max) {
return false;
}
return true;
}- 字符串验证规则：
function validateString(str, minLength, maxLength, regExp) {
if (minLength !== undefined && str.length < minLength) {
return false;
}
if (maxLength !== undefined && str.length > maxLength) {
return false;
}
if (regExp !== undefined && !regExp.test(str)) {
return false;
}
return true;
}
