前端学习之路html5(03)-特性

最新推荐文章于 2023-03-03 00:56:05 发布

戚继光

最新推荐文章于 2023-03-03 00:56:05 发布

阅读量410

点赞数

分类专栏： web前端文章标签： html5 前端表单

本文链接：https://blog.csdn.net/weixin_36244867/article/details/61933498

版权

web前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文介绍了HTML5中新增的表单元素如<datalist>、<keygen>、<output>，以及表单属性如autocomplete、novalidate，并详细讲解了<form>和<input>的新特性和用法。此外，还讨论了HTML5的语义元素，如<section>、<article>、<nav>、<aside>、<header>、<footer>、<figure>和<figcaption>，强调了它们在网页结构中的重要性。

摘要由CSDN通过智能技术生成

html5 表单元素

htm,l5提供了三种新的表单类型，如果浏览器不兼容这些类型它会表现成普通的表单类型，这三种类型分别是<datalist>、<keygen>、<output>。

1. <datalist>

规定输入域的选项列表；
属性规定form、input自动匹配功能。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
</head>

<body>
<input list="myList" name="list">
<datalist id="myList">
    <option value="apple" >
    <option value="banana" >
    <option value="orange" >
</datalist>
<input type="submit">
</body>

</html>

这里写图片描述

2. <keygen>

元素的作用是提供一种验证用户的可靠方法。
标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

3. <output>

元素用于不同类型的输出，比如计算或脚本输出。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
</head>

<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" value="50">
100+
<input type="number" id="b" value="1">
=
<output name="x" for="a b"></output>
</form>
</body>

</html>

这里写图片描述

html5 表单属性

我们先列举html5的form、input新属性，再一一探讨。

<form>新属性

autocomplete
novalidate

<input>新属性

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height、width
list
min、max
multipie
pattern(regexp)
placeholder
required
step

<autocomplete>属性

form、input都具有该属性，从字面上理解是自动完成的意思。比如当我们输入用户名’qdl’登录后，下次再打开登录页面输入一个’q’时，输入框会自动提示出之前输入的’qdl’我们可以选择自动完成。
form标签适用于此属性；
input当中的text、search、url、telephone、email、password、datepickers、range、color标签。

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
</head>

<body>
<form autocomplete="on">
    Your Name: <input type="text" name="name"><br>
    Your Pass: <input type="password" name="pass"><br>
    <input type="submit">
</form>
</body>

</html>

这里写图片描述

<form> novalidate属性

是一个 boolean(布尔) 属性；
规定在提交表单时不对表单中的数据进行验证；
比如email类型提交时不验证格式直接提交。

<input> autofocus属性

是一个 boolean(布尔) 属性；
规定在页面加载时，域自动地获得焦点。

<input> form属性

属性规定输入域所属的一个或多个表单。
比如一个表单form的id为form1，input类型的没有包含在表单之中，如果我们仍然需要input拥有form1的属性，则在input中设置<input form=”form1”>

<input> formaction属性

属性用于描述表单提交的URL地址；
属性会覆盖<form> 元素中的action属性。

<input> formenctype属性

属性描述了表单提交到服务器的数据编码 (只对form表单中 method=”post” 表单)；
属性覆盖 form 元素的 enctype 属性；
该属性与 type=”submit” 和 type=”image” 配合使用。

<input> formmethod属性

属性定义了表单提交的方式；
属性覆盖了form元素的的method 属性；
该属性与 type=”submit” 和 type=”image” 配合使用。

<input> formnovalidate属性

属性是一个 boolean 属性；
属性描述了input元素在表单提交时无需被验证；
属性会覆盖元素的novalidate属性。

<input> formtarget属性

属性指定一个名称或一个关键字来指明表单提交数据接收后的展示；
属性覆盖form元素的target属性；
属性与type=”submit” 和 type=”image”配合使用。

<input> height、width属性

height 和 width 属性规定用于 image 类型的input标签的图像高度和宽度。
图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间在加载页时会被保留。如果没有这些属性，浏览器不知道图像的大小，并不能预留适当的空间。图片在加载过程中会使页面布局效果改变（尽管图片已加载）。

<input> list属性

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。
即输入域的预选项列表的来源。

<input> min、max属性

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。
min、max 和 step 属性适用于以下类型的input标签：date pickers、number 以及 range。

<input> multiple属性

属性是一个 boolean 属性；
属性规定input元素中可选择多个值；
属性适用于以下类型的input标签：email 和 file。

<input> pattern属性

属性描述了一个正则表达式用于验证input元素的值；
属性适用于以下类型的input标签: text, search, url, tel, email, 和 password。

<input> placeholder属性

属性提供一种提示（hint），描述输入域所期待的值。
属性适用于以下类型的input标签：text, search, url, telephone, email 以及 password。

<input> required属性

属性是一个 boolean 属性；
属性规定必须在提交之前填写输入域（不能为空）；
属性适用于以下类型的input标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

<input> step属性

属性为输入域规定合法的数字间隔；
如果 step=”3”，则合法的数是 -3,0,3,6 等；
step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。

html5 语义元素

一个语义元素能够清楚地描述其意义给浏览器和开发者
无语义元素比如div和span，无需考虑内容；
语义元素实例比如form,table,img，清楚的定义了它的内容；
html5提供了新的语义元素来明确一个Web页面的不同部分。

这里写图片描述

<section>

标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分;
根据W3C HTML5文档: section 包含了一组内容及其标题。

<article>

标签定义独立的内容。

<nav>

标签定义导航链接的部分；
元素用于定义页面的导航链接部分区域，但不是所有的链接都需要包含在nav元素中。

<aside>

标签定义页面主区域内容之外的内容（比如侧边栏）；
标签的内容应与主区域的内容相关。

<header>

元素描述了文档的头部区域；
元素注意用于定义内容的介绍展示区域；
在页面中你可以使用多个header元素。

<footer>

元素描述了文档的底部区域；
元素应该包含它的包含元素；
一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等；
文档中你可以使用多个footer元素。

<figure>、<figcaption>

figure标签规定独立的流内容（图像、图表、照片、代码等等）；
figure元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响；
figcaption标签定义figure元素的标题；
figcaption元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

举一个例子

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>datalist</title> 
</head>

<body>

<section>
    <h3>this is a section</h3>
    <p>这里是section的具体内容</p>
</section>

<article>
    <h3>this is a article</h3>
    <p>这里是article的具体内容</p>
</article>

<nav>
    <h3>this is a nav</h3>
    <a href="http://blog.csdn.net/weixin_36244867/article/details/54376017" target="_blank">java</a> | 
    <a href="http://blog.csdn.net/weixin_36244867/article/details/54616338" target="_blank">android</a> | 
    <a href="http://blog.csdn.net/weixin_36244867/article/details/56012197" target="_blank">web</a>
</nav>

<aside>
    <h3>this is a aside</h3>
    <p>这里是aside的具体内容</p>
</aside>

<header>
    <h3>this is a header</h3>
    <p>这里是header的具体内容</p>
</header>

<footer>
    <h3>this is a footer</h3>
    <p>write by qi</p>
</footer>

<figure>
    <img src="image/girl01.jpg">
    <figcaption>这是个美女</figcaption>
</figure>

</body>

</html>