HTML5的新特性--基础知识（1）

关注

原创最新推荐文章于 2026-05-29 09:00:00 发布 733 阅读 AI 写同款· GEO 优化 ›

关于Html5新特性及Html语义化文章目录一、如何区分Html5和Html1.文档类型声明2.结构语义二、Html5新特性1.拖拽释放(Drag and drop)API2.音频、视频API(audio、video)3.画布(Canvas)API4.地理位置(Geolocation)5.语义化更好的内容标签6.本地离线存储loaclStorage长期存储数据,浏览器关闭后数据不丢失7.sessionStorage数据在浏览器关闭后自动删除8.表单控件9.新的技术三、HTML语义化1.语义化优点2.Html5新增语义元素3.如何语义化一、如阅读详情

HTML5表单元素：

input类型：电子邮件类型、搜索类型、URL类型、电话号码类型、数字类型、范围类型、颜色类型、日期类型、周类型、月类型、日期与时间类型、本地日期与时间类型

在其他版本的HTML中，表单包含的元素非常有限，并且属性也不多，尤其是在数据交互过程中数据的验证需要编写大量的JavaScript代码。上述的不足，都已经在HTML5中被克服了。HTML5在以上的基础上增加了新的标签和属性。

电子邮件类型：

语法：<input type="email"/>

自动进行验证，如果不通过则会显示错误提示。

搜索类型：

输入关键字操作的文本框，基本上和文本框一样，但是能快速实现文本的删除切换

语法：<input type="search"/>

URL类型：

输入web站点地址的文本框,严格要求输入的网址必须以http:\\开头

语法：<input type="url" />

例：

<head>

<style>

table{border:1px solie black;border-collapse:collapse;}

th,td{border:1px solid black;padding:5px;}

</style>

</head>

function txtRange_change(){

var value = document.frm.txtRange.value;

console.log("RangeValue:"+value);

}

function getValue(){

var frm = document.frm;

//1、获取txtColor控件的value

var value = document.frm.txtColor.value;

console.log("txtColor:" + value);

//2、获取日期类型控件数据

var date =frm.txtDate.value;

var week = frm.txtWeek.value;

var month = frm.txtMonth.value;

console.log("Date:"+date);

console.log("Week:"+week);

console.log("Month:"+month);

//3、获取日期与时间(本地)

var datetime = frm.txtDatetime.value;//日期与时间

var datetimeLocal = frm.txtDatetimeLocal.value;//本地

window.alert("Datetime:"+datetime);

console.log("datetimeLocal:"+datetimeLocal);

//4、获取 txtNewEmail的值

console.log("txtNewEmail:"+frm.txtNewEmail.value);

}

</script>

<body>

<table>

<tr>

</tr>

<tr>

<td>Email类型</td>

<td>

</td>

<td>要求用户输入Email类型数据，提交表单时，会自动验证</td>

</tr>

<tr>

<td>Search类型</td>

<td>

</td>

<td>搜索文本框，与text相似，特点是数据允许被快速删除</td>

</tr>

<tr>

<td>URL类型</td>

<td>

</td>

<td>对用户输入的数据进行URL检测，如果不符合规范，给出提示，阻止表单提交</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

HTML5是支持移动终端的

电话号码类型：主要针对电话号码的输入，能够指示浏览器根据不同的设备进行调整。

注意：只对移动终端有效，会显示出拨号键盘，通过该键盘接收用户录入的数据。可以在笔记本上架一个服务器，然后用手机访问笔记本上的这个网页

数字类型：只能接收数字值

语法：<input type="number"/>

属性：min:当前域能够接收的最小值

max:当前域能接收的最大值

step:决定了域所接收值递增或递减的步长，默认为1

例：<input type="number" name="txtNumber" id ="txtNumber" max="10" min="3" step="2" />

范围类型：

value:设定初始值

例：<td>

2<input type="range" min="2" max="20" value="2" name="txtRange" />10

</td>

颜色类型：

预定义的颜色拾取控件：

语法：<input type="color" />

例：<input type="color" name="txtColor" />

自定义调色器：

通过三个范围选择控件表示R、G、B，并且默认为0，最大为255

练习1：通过三个滑块选取颜色值，并且显示在div的背景上

step1：由于获取处理的数值都是0~255,赋值方式rgb(255,255,255)

div.style.backgroundColoe=rgb(255,255,255)

step 2 : 让三个滑块执行同一事件，事件中，获取三个滑块的值，构建成 rgb(v1,v2,v3)

css颜色组成:

1、red

2、#112233

3、rgb(0-255,0-255,0-255) 通过rgb来指定颜色

4、rgba(0-255,0-255,0-255,0-1) 通过rgb以及alpha指定颜色

<!DOCTYPE HTML>

<html>

<head>

<title> 通过滑块选取颜色 </title>

<style>

div{float:left;width:200px;height:200px;border:1px solid red;}

#showColor{background-color:#rgba(155,0,0,0)}

</style>

function $(id){

return document.getElementById(id);

}

function range_click(){

var r=$("txtRangeRed").value;

var g=$("txtRangeGreen").value;

var b=$("txtRangeBlue").value;

var color="rgb("+r+","+g+","+b+")";

console.log(color);

$("showColor").style.backgroundColor=color;

}

</script>

</head>

<body>

<div>

R:0<input type="range" id="txtRangeRed" value="0" min="0" max="255" onchange="range_click()"/>255

G:0<input type="range" id="txtRangeGreen" value="0" min="0" max="255" onchange="range_click()"/>255

B:0<input type="range" id="txtRangeBlue" value="0" min="0" max="255" onchange="range_click()"/>255

</div>

</body>

</html>

日期类型：创建一个日期输入域

语法：<input type="date"/>

例：<input type="date" name="txtDate" />

周类型：与date类型相似，但是只能选择周

语法：<input type="week"/>

例：<input type="week" name="txtWeek" />

月份类型：与date类型相似，但是只能选择一个月份

语法：<input type="month" />

通过箭头选取日期时间（Safari）

弹出一个日历控件，允许选择年月日，通过按钮选取时间

表单属性

Placeholder属性：常用于search输入类型，也可用在文本域，可用于提示用户输入正确的内容。<input type="search" placeholder="请输入用户名称">

value一般不做用户提示，用placeholder来提示好点

required属性：防止表单为空的提示效果

语法:<input type="text" required />

required属性只要出现在表单元素中就行，无论后面写的是false、true，想做非空，不写就行

multiple属性：可以用在一些输入类型中，从而支持在一个域中输入多个值，但是所插入的值必须用逗号隔开。

语法：<input type="email" multiple />

Autofocus属性：在网页加载时自动让域获得焦点，方便快捷的定位元素

pattern属性：作用是实现元素的验证，它支持正则，用于快速实现自定义表达式验证,pattern等号后面写正则表达式，提交表单时会自动进行验证

语法：<input type="text" pattern="13[0-9]\d{8}" />

例：

<!DOCTYPE html>

<html>

<head>

<style>

table{border:1px solid black;border-collapse:collapse;}

th,td{border:1px solid black;padding:5px;}

</style>

</head>

<body>

<table>

<tr>

</tr>

<tr>

<td>Email类型</td>

<td>

</td>

<td>要求用户输入Email类型数据，提交表单时，会自动验证</td>

</tr>

<tr>

<td>Search类型</td>

<td>

</td>

<td>

搜索文本框，与text相似，特点：数据允许被快速删除

</td>

</tr>

<tr>

<td>URL类型</td>

<td>

</td>

<td>

对用户输入的数据进行Url检测，如果不符合规范，给出提示，阻止表单提交

</td>

</tr>

<tr>

<td>tel类型</td>

<td>

</td>

<td>

注意：指对移动终端有效，会显示出拨号键盘,通过该键盘接收用户录入的数据

</td>

</tr>

<tr>

<td>

</td>

<td>

只能接收数字，min表示数字范围下限值，max表示数字范围上限值，step表示步长

</td>

</tr>

<tr>

<td>

</td>

<td>

提供一个滑块工具给用户去选择指定范围内的数值

</td>

</tr>

<tr>

<td>

</td>

<td>

弹出一个调色板提供给用户选取颜色

</td>

</tr>

<tr>

<td>

</td>

<td>

弹出日历框供用户选择，用户可以精确选择到某一天

</td>

</tr>

<tr>

<td>

</td>

<td>

弹出一个日历控件，用户能够选取一个星期的时间

</td>

</tr>

<tr>

<td>

</td>

<td>

弹出一个日历控件，允许用户选择一个月

</td>

</tr>

<tr>

<td>日期与时间</td>

<td>

</td>

<td>

通过箭头选取日期时间(Safari)

</td>

</tr>

<tr>

<td>本地日期与时间类型</td>

<td>

</td>

<td>

弹出一个日历控件，允许用户选择年月日，通过按钮选取时间

</td>

</tr>

<tr>

<td>Placeholder</td>

<td>

</td>

<td>

默认显示一段文字在表单元素上

</td>

</tr>

<tr>

<td>Required</td>

<td>

</td>

<td>

要求当前元素必须录入值，否则表单不允许提交

</td>

</tr>

<tr>

<td>Multiple</td>

<td>

</td>

<td>

允许用户输入多段数据，但必须使用',' 进行分割

</td>

</tr>

<tr>

<td>Autofocus</td>

<td>

</td>

<td>

网页加载时，让控件自动获取焦点

</td>

</tr>

<tr>

<td>Pattern</td>

<td>

</td>

<td>

自定义正则表达式验证当前控件中的值，如果值不满足验证规则，表单则无法提交

</td>

</tr>

<tr>

</td>

</tr>

</table>

</form>

</body>

</html>

表单属性是可以组合使用的

Form属性，可用于在from标签之外声明表单元素

语法：

例：

<body>

用户名称：<input type="text" name="txtUsername" />

</form>

<hr/>

新用户名称：<input form="frmUser" type="text" name="txtNewName">

</body>

新表单元素：

detalist元素,progress元素,meter元素,output元素

detalist元素：可以创建一组列表项，相当于select属性，但是需要放在输入框上才能使用，用户看的是label的值，但是选的时候是value值

<form>

</datalist>

</form>

detalist元素写完后自己本身是没有什么效果的，他是提交给其他控件使用的

progress元素：表示一个任务的当前完成进度，而且通常这些任务都在表单中启动和处理。

属性：value（任务执行的进度），max（声明任务完成后达到的值）

Meter元素：用于显示刻度，而非进度

属性：min、max：设置范围便捷

value：确定测量的值

low、high、optimum：将范围划分为不同的部分和设置最佳位置

output元素：通常用于显示表单元素处理的结果值，显示表单控件与表单控价的处理结果

属性：for，将output元素与参与计算的源元素相关联，目的为了提高代码可读性

例：

<!DOCTYPE html>

<head>

</style>

function $(id){

return document.getElementById(id);

}

function changeProgress(){

//从滚动条的当前进度开始滚动

setInterval(function(){

var value = parseInt($("pro").value);

value += 5;

if(value >= 100){

value = 0;

}

$("pro").value=value;

},300);

}

//window.onload = changeProgress;

window.onload = function(){

//为form表单添加事件

$("frm").oninput = function(){

var num1 = parseInt($("txtRange").value);

var num2 = parseInt($("txtNumber").value);

var result = num1 + num2;

$("outResult").value = result;

}

</script>

</head>

<body>

</datalist>

<hr />

滚动条:<progress id="pro" max="100" value="50"></progress>

<hr />

刻度表:<meter id="met" min="0" max="220" low="60" high="100" optimum="85" value="50"></meter>

<hr />

0<input type="range" id="txtRange" min="0" max="50" value="0" />50 +

<input type="number" id="txtNumber" value="0" />=

</form>

</body>

</html>

收录于

jquery text文本框搜索段落文本关键词文字高亮显示立即下载

HTML5的新特性--基础知识（1）

相关推荐