首页 > 作文

html5新增的语义标签和表单验证功能

更新时间:2023-04-03 01:06:56 阅读: 评论:0

html5新增的语义标签和表单验证功能。

1:html5css3

a:html5的定义

<!DOCTYPEhtml>

<html>

<head>

<metachart=”utf-8″/>

<linkrel=”stylesheet”href=”xxx.css”/>
蛙泳动作要领
<scriptsrc=”xxxx.js”/>

</head>

<body>

</body>

</html>

b:新增的语义标签

块级:

<header></header> 定义页面的头部

<footer></footer> 定义页面的尾部

<article></article> 定义一篇文章

<ction></ction> 定义一个段落或者块苏武转

<aside></aside> 定义一个侧边栏

<nav></na优质文明服务v> 定义一个导航栏

<main></main> 定义一个页面的主体部分

<figure></figure> 定义一个图片或者视频

<figcaption></figcaption> 定义一个图片或者视频的标题或者简介

行级:

<mark></mark> 给文字添加标注

<s></s> 加重提示

<b></b>

c:新增的表单验证

搜索框<p>arch:<inputtype=”arch”></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>datalist<inputtype=”text”list=”browrs”>

<datalistid=”browrs”>

<optionvalue=”aaaaa”/>

<optionvalue=”bdna提取原理bbbbb”/>

<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后表单也不会进行校验–>

本文发布于:2023-04-03 01:06:55,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/f02c4ea85124fec8060abe940475536d.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:html5新增的语义标签和表单验证功能.doc

本文 PDF 下载地址:html5新增的语义标签和表单验证功能.pdf

标签:定义   表单   数值   语义
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图