首页 > 其他分享 >HTML5新增和删减

HTML5新增和删减

时间:2024-08-20 19:52:39浏览次数:11  
标签:定义 元素 新增 删减 表单 文档 HTML5 属性

html5发展

HTML5是HTML最新的修订版本,2014年10月由万维网联盟(W3C)完成标准制定。 HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持 h5添加css hack,css zoom知识点

特性

  • 新的特殊内容元素,比如 header、nav、section、article、footer

  • 新的表单控件,比如 required、date、time、email、url、search

  • 用于绘画的 canvas 元素

  • 用于媒介回放的 video 和 audio 元素

  • 新增了本地存储

  • html5删除的元素

文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>文档标题</ title>
  </head >
  <body>
    文档内容......
  </body>
</html>

 新增

结构化标签

  • <header>定义页眉

  • <nav>定义导航

  • <section> 定义文档中的区段e>

  • <article> 定义文章

  • <section> 定义文档的节(区域).比如章节,页眉,页脚,或者文档中的其他部分

  • <aside> 定义文章的侧边栏

  • <hgroup>用于对section或网页的标题进行组合

  • <figure>用于对元素进行组合,使用figcaption元素为元素组添加标题

  • <figcaption>给元素添加标题

  • <time>定义日期或时间

  • <footer>定义页脚

 表单控件

1. 下拉菜单

<datalist > 元素规定输入域的选项列表。 当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项 使用 < input > 元素的列表属性与 < datalist> 元素绑定

<!-- 添加搜索框 -->
<input list="browsers" name="mybrowser">
<!-- 搜索内容 -->
<datalist id="browsers">
  <option value='jack'></option>
  <option value='Rose'></option>
  <option value='Bob'></option>
  <option value='Pater'></option>
  <option value='jerry'></option>
</datalist>

2. 必填字段

required 属性适用于以下 类型:text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file

<!--键和值一致可以省略-->
<input type="text" required="required">

3. 正则

pattern='[限制的内容]{数量}' A-Z -表示范围 数量 如果是5-10之间,中间用,隔开

<!--年龄-->
<input type="text" name="" id="" pattern='[0-9]{3}'><br>
<!--只能输入字母-->
<input type="text" name="" id="" pattern='[A-Za-z]{1,3}'><br>
<!--电话号码-->
<input type="text" name="" id="" pattern='1[3-9][0-9]{9}'><br>

4. 邮件地址

语法:<input type="email" />

<input type="email" name='email'/>

5. 网址

语法:<input type="url" />

<input type="url" name='url'/>

6. 类型

语法:type="number" min 最小值 max 最大值 value 默认值 step 间隔值

<input type="number" min="1" max="10" value="1" step='10'>

7. 日期字段

语法:type = date min 最小日期 max 最大日期 注意:日期格式必须为YYYY-MM-SS

<input type="date" min="2010-12-16" />

8. 时间字段

语法:type="time" step 时间间隔(单位秒)

<input type="time" step="1800" />

9. 拾色器

语法:type:color value:默认颜色

<input type="color" value="#ed1c24">

 10. 进度条

<progress value="22" max="100"></progress>

11. 取消表单验证

在开发阶段我们可能想把表单临时提交一下, 又不想让它进行表单中所有元素内容的有效性检查,有两种方法可以取消表单验证

<!-- 方法一 -->
<form action="demo.php" novalidate='novalidate'></form>
<!-- 方法二 -->
<input type="submit" formnovalidate='formnovalidate'/>

12. 使用滑块和输出组件进行运算

oninput 输入组件 output 输出组件 parseInt 转换为整形

<form action="" oninput="sum.value = parseInt(a.value) - parseInt(b.value)">
  0<input type="range" min="0" max="100" step="10" value="0" id='a'>100
  +
  <input type="number" min="0" max="100" step="10" value="10" id="b">
  =
  <output name='sum'></output>
</form>

13. 指定元素属于对应的表单

在HTML4中,表单内的从属元素必须写在表单的内部,而在HTML5中,可以把他们书写在页面上的任何地方,然后为该元素指定一个form属性,属性值为表单的id,这样就可以声明该元素的从属指定表单了。

 <form action="demo.php" method="get" id="user-demo" id='user-form'>
     first name: <input type="text" name='uname'>
     <input type="submit">
 </form>
 first name: <input type="text" name='rename' form="user-form">

 注意:form 属性适用于所有 标签的类型。 form 属性必须引用所属表单的 id。 form 属性规定输入域所属的一个或多个表单。

14. 提交到不同的页面

在HTML4中,一个表单内的所有元素只能通过表单的action属性被统一提交到另一个页面,而在HTML5中可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。 同一个表单可以选择提交给不同的数据处理程序

<form action="demo.php" method="get" >
     first name: <input type="text" name='fname'>
     last name: <input type="text" name='lname'>
     <input type="submit" value='注册' formaction="register.php">
     <input type="submit" value='登陆' formaction="login.php">
     <input type="submit" value='post方式提交' formmethod="post" formaction="login.php">
</form>

15. 占位符

在HTML5中,表单元素所具有的默认提示,可以使用placeholder去进行设置。

<input type="text" name='uname' placeholder='请输入用户名'>

 placeholder属性能够让你在文本框里显示提示信息,一旦你在文本框里输入了什么信息,提示信息就会隐藏。 你以前可能无数次看到这种效果,但那些大部分是用JavaScript里实现的,而现在,HTML5提供了原生支持,而且效果更好

视频标签/音频标签【html5新增的标签】

<!-- 音频或者视频 -->
<object data="../video/Tomorrow.mp4" height="200" width="200"></object>
<!-- 音频或者视频 -->
<embed src="../video/Tomorrow.mp4" height="200" width="200">
<!-- 音频 -->
<audio src="../那一年.mp3"></audio>
    audio 音频元素;用于嵌入一个 音频文件
    src 音频文件的URL
    controls 显示播放控件
    autopaly 表示立刻播放
    preload 预先载入音频文件数据
<!-- 视频 -->
<video src="movie.mp4" controls="" width="400" muted="" poster="cover.jpg" loop="">
    video 视频播放元素
    src 视频资源的URL
    controls 表示显示播放控件
    autoplay 自动播放,目前不能使用
    muted 表示静音
    poster 指定视频载入时显示的图片封面
    loop 反复播放
    preload 预先加载

html5废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除:

<acronym>首字母缩写

<applet>嵌入的applet(Applet是采用Java编程语言编写的小应用程序)

<basefont>Applet是采用Java编程语言编写的小应用程序

<big>大号字体效果

<center>居中

<dir>定义目录列表

<font>规定文本字体、大小和颜色

<frame>框架

<frameset>框架集

<noframes>noframes

<strike>可定义加删除线

<tt>呈现类似打字机或者等宽的文本效果

标签:定义,元素,新增,删减,表单,文档,HTML5,属性
From: https://blog.csdn.net/weixin_71949204/article/details/141366178

相关文章

  • 界面控件DevExpress Blazor v24.2路线图预览——支持.NET 9、新增桑基图等
    DevExpress BlazorUI组件使用了C#为BlazorServer和BlazorWebAssembly创建高影响力的用户体验,这个UI自建库提供了一套全面的原生BlazorUI组件(包括PivotGrid、调度程序、图表、数据编辑器和报表等)。本文中包含了DevExpressBlazorv24.2官方发布的当前/预计的开发计划,请注意......
  • HTML5服装电商网上商城模板源码
    文章目录1.设计来源1.1主界面1.2购物车界面1.3电子产品界面1.4商品详情界面1.5联系我们界面1.6各种标签演示界面2.效果和源码2.1动态效果2.2源代码源码下载万套模板,程序开发,在线开发,在线沟通         【博主推荐】:前些天发现了一个巨牛的人工智能......
  • HTML5+CSS3学习笔记补充——移动端网页+Bootstrap框架
    移动端网页和Bootstrap框架1.视口:用来约束HTML尺寸<!--视口标签是HTML骨架默认生成的设置网页宽度与逻辑分辨率(即设备)宽度一致--><metaname="viewport"content="width=device-width,initial-scale=1.0">2.二倍图:防止设计稿图片在高分辨率屏幕下模糊失真3.......
  • SonarQube使用新增的自定义规则,进行maven项目扫描
    1、将新加规则添加到QualityProfiles中 2、创建, 写完名称回车  3、暂时将原先的规则禁用掉  点击apply; 499条规则被更改 4、添加我们新增的自定义规则  应用  规则已经添加;将我们创建的规则设置为默认扫描规则 5、进行项目扫描1)创建......
  • 【无删减】最新整理的25个磁力资源搜索网站,学习必备!
    在数字资源丰富的今天,磁力搜索网站成为了获取影视、音乐、软件等内容的重要渠道。以下是我们为您整理的25个国内磁力搜索网站,让您轻松找到所需资源!......
  • html5+CSS3 Canvas动画分享
    1.赛朋博客赛车动画 源码分享:<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <title>赛车</title>  <style>    *{      margin:0;      padding:0;      bo......
  • HTML5新特性之Canvas
    <canvas>是⼀个HTML元素,我们可以将它简单理解为⼀个画板,通过Canvas提供的绘制api我们就可以绘制出各种图形。一、基础1、渲染上下文●getContext('2d')●getContext('webgl')<body><canvasid="canvas"width="800"height="800"style="back......
  • [HTML5] 一文读懂H5新特性的应用
    文章目录一、HTML5新增语义化标签1.`<header>`标签语法使用场景常用属性示例代码2.`<footer>`标签语法使用场景常用属性示例代码3.`<nav>`标签语法使用场景常用属性示例代码4.`<article>`标签语法使用场景常用属性示例代码5.`<section>`标签语法使用场景......
  • HTML5
    HTML5初识HTML网页基本标签图像,超链接,网页布局列表,表格,媒体元素表单及表单应用表单初级验证1.1什么是HTMLHyperTextMarkupLanguage(超文本标记语言)超文本包括:文字,图片,音频,视频,动画等Html5+Css3—>现在使用的版本Html5提供了一些新的元素和一些有趣的新特性,同时也......
  • 《C#面向语言版本编程》C# 13 中的新增功能
    将C#语言版本升级为预览版C#13包括一些新增功能。可以使用最新的VisualStudio2022版本或.NET9预览版SDK尝试这些功能。若想在.NET项目中尝试使用C#的最新预览版特性,可以按照以下步骤来升级你的项目语言版本:.打开项目文件:找到并打开您的.csproj项目文件。......