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

最新推荐文章于 2024-08-31 17:25:57 发布

原创最新推荐文章于 2024-08-31 17:25:57 发布 · 677 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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

html5 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了HTML5的基本结构、新增语义标签及表单验证特性，并概述了CSS3的基本用法。

1:html5 css3

a:html5的定义
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="xxx.css"/>
<script src ="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:<input type="search"></p>
邮件框 <p>email:<input type="email"></p>
电话框 <p>tel:<input type="tel"></p>
数字框 <p>number:<input type="number"></p>
地址框 <p>url:<input type="url"></p>
颜色框 <p>color:<input type="color"></p>
日期框 <p>date:<input type="date"></p>
必填框：<input type="text" required><br/>
字符长度控制框：<input type="text" minlength="4" maxlength="10" required><br/>
数值控制框：<input type="number" min="4" max="10" required><br/>
住址提示框：<input type="text" placeholder="江西南昌"><br/>
自动获取光标:<input type="text" autofocus><br/>
自动补全框:<input type="text" autocomplete="on">

text可选文本框
<p>datalist<input type="text" list="browsers">
<datalist id="browsers">
<option value="aaaaa"/>
<option value="bbbbbb"/>
<option value="cccccc"/>
<option value="dddddd"/>
</datalist>
</p>

加密框：
<p><input type="text">
<keygen name="aaaaaaaaaaa"></keygen>
</p>

拖动显示数值框
<form oninput="showNum.value=num.value">
拖动显示数值框：<input type="range" value="10" name="num">
<output name="showNum"></output>
</form>

如果不想对表单进行校验有一下两种方式：
1. <form action="#" method="post"novalidate>


2. <input type="submit" value="提交"formnovalidate>