html5新增的语义标签和表单验证功能
导读：收集整理的这篇文章主要介绍了html5教程-html5新增的语义标签和表单验证功能，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 htML5新增的...
收集整理的这篇文章主要介绍了html5教程-html5新增的语义标签和表单验证功能，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 htML5新增的语义标签和表单验证功能。
1:html5css3
a:html5的定义!DOCTYPEhtml>
html>
head>
metacharset="utf-8"/>
linkrel="stylesheet"href="xxx.css"/>
scriptsrc="xxxx.js"/>
/head>
body>
/body>
/html>
b:新增的语义标签块级：
header> /header> 定义页面的头部
footer> /footer> 定义页面的尾部article> /article> 定义一篇文章
section> /section> 定义一个段落或者块
aside> /aside> 定义一个侧边栏
nav> /nav> 定义一个导航栏
main> /main> 定义一个页面的主体部分
figure> /figure> 定义一个图片或者视频
figcaption> /figcaption> 定义一个图片或者视频的标题或者简介
行级:
mark> /mark> 给文字添加标注
s> /s> 加重提示
b> /b>
c:新增的表单验证搜索框p> seArch:inputtype="search"> /p>
邮件框p> email:inputtype="email"> /p>
电话框p> tel:inputtype="tel"> /p>
数字框p> number:inputtype="number"> /p>
地址框p> url:inputtype="url"> /p>
颜色框p> color:inputtype="color"> /p>
日期框p> date:inputtype="date"> /p>
必填框：inputtype="text"required> br/>
字符长度控制框：inputtype="text"minlength="4"maxlength="10"required> br/>
数值控制框：inputtype="number"min="4"max="10"required> br/>
住址提示框：inputtype="text"placeholder="江西南昌"> br/>
自动获取光标:inputtype="text"autofocus> br/>
自动补全框:inputtype="text"autocomplete="on">
text可选文本框
p> datalistinputtype="text"list="browsers">
datalistid="browsers">
optionvalue="aaaaa"/>
optionvalue="bbbbbb"/>
optionvalue="cccccc"/>
optionvalue="dddddd"/>
/datalist>
/p>
加密框：
p> inputtype="text">
keygenname="aaaaaaaaaaa"> /keygen>
/p>
拖动显示数值框
formoninput="showNum.value=num.value">
拖动显示数值框：inputtype="range"value="10"name="num">
outputname="showNum"> /output>
/form>
如果不想对表单进行校验有一下两种方式：
1. formaction="#"method="post"novalidate>
!--form中加入novalidate后表单不会进行校验-->
2. inputtype="submIT"value="提交"formnovalidate>
!--input提交按钮中加入formnovalidate后表单也不会进行校验-->
html5新增的语义标签和表单验证功能。
1:html5css3
a:html5的定义!DOCTYPEhtml>
html>
head>
metacharset="utf-8"/>
linkrel="stylesheet"href="xxx.css"/>
scriptsrc="xxxx.js"/>
/head>
body>
/body>
/html>
b:新增的语义标签块级：
header> /header> 定义页面的头部
footer> /footer> 定义页面的尾部article> /article> 定义一篇文章
section> /section> 定义一个段落或者块
aside> /aside> 定义一个侧边栏
nav> /nav> 定义一个导航栏
main> /main> 定义一个页面的主体部分
figure> /figure> 定义一个图片或者视频
figcaption> /figcaption> 定义一个图片或者视频的标题或者简介
行级:
mark> /mark> 给文字添加标注
s> /s> 加重提示
b> /b>
c:新增的表单验证搜索框p> search:inputtype="search"> /p>
邮件框p> email:inputtype="email"> /p>
电话框p> tel:inputtype="tel"> /p>
数字框p> number:inputtype="number"> /p>
地址框p> url:inputtype="url"> /p>
颜色框p> color:inputtype="color"> /p>
日期框p> date:inputtype="date"> /p>
必填框：inputtype="text"required> br/>
字符长度控制框：inputtype="text"minlength="4"maxlength="10"required> br/>
数值控制框：inputtype="number"min="4"max="10"required> br/>
住址提示框：inputtype="text"placeholder="江西南昌"> br/>
自动获取光标:inputtype="text"autofocus> br/>
自动补全框:inputtype="text"autocomplete="on">
text可选文本框
p> datalistinputtype="text"list="browsers">
datalistid="browsers">
optionvalue="aaaaa"/>
optionvalue="bbbbbb"/>
optionvalue="cccccc"/>
optionvalue="dddddd"/>
/datalist>
/p>
加密框：
p> inputtype="text">
keygenname="aaaaaaaaaaa"> /keygen>
/p>
拖动显示数值框
formoninput="showNum.value=num.value">
拖动显示数值框：inputtype="range"value="10"name="num">
outputname="showNum"> /output>
/form>
如果不想对表单进行校验有一下两种方式：
1. formaction="#"method="post"novalidate>
!--form中加入novalidate后表单不会进行校验-->
2. inputtype="submit"value="提交"formnovalidate>
!--input提交按钮中加入formnovalidate后表单也不会进行校验-->
觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html5新增的语义标签和表单验证功能
本文地址： https://pptw.com/jishu/587222.html