前端基础（12）：HTML5新增语义化标签与表单元素

最新推荐文章于 2023-05-14 11:44:45 发布

抽屉里面放枫叶（Breeze_qi）

最新推荐文章于 2023-05-14 11:44:45 发布

阅读量438

点赞数

文章标签： html css java html5

本文链接：https://blog.csdn.net/Quick_only/article/details/108927347

版权

HTML5 语义化标签智能表单多媒体元素响应式布局

关键词由CSDN通过智能技术生成

学习目标

1、HTML5发展史
2、HTML5语法
3、HTML5新增语义化标签及应用场景
4、智能表单的使用和规范

一、HTML5发展史

HTML5是Hypertext Markup Language超文本标记语言（HTML）第5次重大修改。

是一个新的网络标准。

HTML5 是 W3C 与 WHATWG 合作的结果。

目标是取代现有的HTML 4.01和XHTML 1.0 标准。

在这里插入图片描述

1、HTML5新特性

新增meta属性，实现响应式布局

1）、用于绘画的 canvas 元素（用于动画，游戏，以及动态地图）

2）、多媒体应用如： video 和 audio （减少对外部插件的需求（比如 Flash）

3）、对本地存储、离线存储的更好的支持（如kindle，记住用户名、密码等）

4）、新增元素，比如 article、footer、header、nav、section等

5）、新增表单控件，比如 color、date、time、email、url、search等

2.DOCTYPE 声明的改变

<!DOCTYPE html>

在这里插入图片描述

写法上更加的简单化(DOCTYPE/charset)

7、废除的元素

1）可以用css替代的元素

big center font u del 等

2）不再使用frame框架，由于框架对网页可用性存在负面影响。所以废除。只可以用iFrame 或，用服务器方，在同一个页面加载不同页面。

<iFrame scrolling=“yes” frameborder=“0” ></iFrame>

二、智能表单的使用和规范

1、新增的type类型

Search/tel/url/email/number/range/color/Datetime/date/month/week/time/datetime-local/hidden

2、新增的表单属性的语法及应用

required:表示该项是必填项，如果表单未填写，会弹出相应的提示信息‘’；

placeholder:占位符，当获取焦点或者输入框中的值输入为空时显示，否则显示自己填写的内容

autofocus：进入该页面自动获取焦点，原则上只允许设置一个，如果设置多个，则只有第一个有效果

autocomplete：是否在双击输入框的时候自动补全，默认值为on，另一个值为off

multiple:支持用户输入多个此类型的文本，以逗号隔开，每个文本均会进行验证,适用于类型type为email属性值和file属性值

pattern：正则表达式,一般和title属性配合说明该项填写的内容

min:最小值，适用于属性type为number和range

max:最大值，适用于属性type为number和range

step:间隔

list属性：结合datalist元素使用

取消验证：可以对form表单添加novalidate属性，即使form表单中的input添加了required，也将不进行验证

3、新增的表单元素

1）、Datalist ：选项列表

input中输入list属性，属性值为该标签的id值，标签中子标签使用option，设置value和label

例：

<input type=“text” list=“id名" />

<datalist id=“id名">

<option label=“提示信息” value=“值“ >

<option label="提示信息" Value="值“ >

</datalist>

提示：option 元素永远都要设置 value 属性。

2）output:表示不同类型的输出，比如脚本的输出

注：必须从属于某个表单。即，必须将它书写在表单内部，或对它添加form属性。

<form οninput="x.value=parseInt(a.value)+parseInt(b.value)" >

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

<input type="number" id="b" value="50"/>=

<output name="x" for="a b"></output>

</form>