HTML5的新增了哪些标签元素

大家知道h5新增了不少的元素标签,那么我们就给大家总结归纳一下,h5增加了哪些标签?这些标签都有什么作用。

Input  type=“XXX”

Email 邮箱: 提示格式不正确

url   地址  :地址格式:http://www…..

Number:数值型 

立即学习“前端免费学习笔记(深入)”;

属性:min 最小  max最大

Range: 范围内数字的输入域  滑动条 了解

Date: 日期选择器

Tel :电话号码的输入框

Color: 选色器

新增表单属性:

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。  值 on  打开 off 关闭。

表单提示框autofocus 属性规定在页面加载时,域自动地获得焦点。autofocus=”autofocus”  页面上只有一个

formaction – 重写表单的 action 属性  重定向表单提交  控制表单数据提交时候,提交到那个页面进行数据处理

formmethod – 重写表单的 method 属性

image类型的input元素的宽度和高度

height:

width:

list: 属性规定输入域的 datalist

解释:关联选项  input-à关联成下拉列表  datalist      list=”val”   =è datalist  id=”val”

  Datalist 所有选项必须 option

  Label 提示

  Value  下拉列表中出现的值

required 属性规定必须在提交之前填写输入域(不能为空)。 必填项  可以用在所有的input 类型的元素上。

案例:

Css代码@charset "utf-8";/* CSS Document */*{ margin:0px;padding:0px;}ul,li{ list-style:none;}a{ text-decoration:none;}header{      border:0px solid #ff0000;      width:90%;      height:80px;      margin:0 auto;      font-size:50px;      background-color:#E9F8FE;      text-align:center;      line-height:80px;}nav{      width:90%;      height:30px;      margin:20px auto;      border:0px solid #ff0000;      background-color:#8CCFF0; }nav ul{ padding-left:30px;}nav ul li{      width:80px;      float:left;      line-height:30px;      font-weight:bold;    }nav ul li a:hover{ color:#F00;} section{      height:600px;      width:90%;      border:1px solid #CCC;      margin:0 auto;  }aside{     width:20%;      float:left;      height:600px;      border-right:1px solid #ccc; }aside ul{      border:0px solid #00ff00;      height:400px;   }aside ul li a{      color:#000;      line-height:40px;      border-bottom:1px solid #ccc;      text-align:center;      display:block;   }form{     width:75%;      float:left;      margin-left:10px;          padding-left:30px;      padding-top:20px;}form p{ line-height:30px;} footer{      width:90%;      height:100px;      text-align:center;      margin-top:20px;    }
Html代码无标题文档
XXX科技有限公司出品

用户名

邮箱

性别

手机

京ICP:111111111 地址:XXXXXX

H5新增的标签以及作用就这么多了,更多精彩请关注创想鸟其它相关文章!

相关阅读:

HTML下拉菜单代码

html 的

标签需要怎么使用

HTML5的

标签元素怎么使用

以上就是HTML5的新增了哪些标签元素的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545279.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:48:00
下一篇 2025年12月21日 16:48:15

相关推荐

  • 解析基于元素位置的固定定位原理

    固定定位:基于元素位置的固定定位原理解析,需要具体代码示例 如果你在网页设计或开发中曾经需要固定某个元素的位置,那么你就会用到CSS中的固定定位(position:fixed)。固定定位是一种可以将元素固定在页面的特定位置的CSS布局技术。在本文中,我们将深入探讨固定定位的原理,并提供一些具体的代码…

    2025年12月24日
    000
  • 网页布局中的元素选择器的应用

    元素选择器在网页布局中的应用,需要具体代码示例 随着互联网的不断发展,网页设计和布局变得越来越重要。为了实现网页的美观和功能,我们需要使用 CSS (层叠样式表)来定义网页的外观和样式。而元素选择器是 CSS 中最常用和基本的选择器之一,它能够帮助我们对页面上的元素进行精确的定位和样式设置。 一、元…

    2025年12月24日
    000
  • CSS变形:如何实现元素的旋转效果

    CSS变形:如何实现元素的旋转效果,需要具体代码示例 在网页设计中,动画效果是提高用户体验和吸引用户注意力的重要方式之一,而旋转动画是其中比较经典的一种。在CSS中,使用“transform”属性可以实现元素的各种变形效果,包括旋转。本文将详细介绍如何利用CSS的“transform”实现元素的旋转…

    2025年12月24日
    000
  • CSS过渡效果:如何实现元素的滑动效果

    CSS过渡效果:如何实现元素的滑动效果 引言:在网页设计中,元素的动态效果能够提升用户体验,其中滑动效果是一个常见而又受欢迎的过渡效果。通过CSS的过渡属性,我们可以轻松实现元素的滑动动画效果。本文将介绍如何使用CSS过渡属性来实现元素的滑动效果,并提供具体的代码示例,以帮助读者更好地理解和应用。 …

    2025年12月24日
    000
  • CSS过渡效果:如何实现元素的淡入淡出旋转效果

    CSS过渡效果:如何实现元素的淡入淡出旋转效果 CSS过渡效果是一种用来控制元素状态改变时的动画效果,可以实现元素的平滑过渡。在本篇文章中,我将介绍如何使用CSS来实现元素的淡入淡出旋转效果,并提供具体的代码示例。 首先,我们需要创建一个HTML页面,其中包含要应用过渡效果的元素。下面是一个示例代码…

    2025年12月24日
    000
  • 如何使用CSS实现元素的透明度渐变效果

    如何使用CSS实现元素的透明度渐变效果 在Web开发中,为网页元素添加过渡效果是提升用户体验的重要手段之一。透明度的渐变效果不仅可以使页面变得更加平滑,还可以突出元素的重点内容。本文将介绍如何使用CSS实现元素的透明度渐变效果,并提供具体的代码示例。 使用CSS的transition属性 要实现元素…

    2025年12月24日
    000
  • CSS动画:如何实现元素的抖动效果

    CSS动画:如何实现元素的抖动效果 摘要:CSS动画是网页设计中常用的一种效果,它能够为网页增加动态和生动的感觉。本文将介绍如何使用CSS动画实现元素的抖动效果,并附上具体的代码示例供参考。 引言 在网页设计中,动画效果能够吸引用户的注意力,增加用户对网页的互动性和体验感。其中,CSS动画作为一种简…

    2025年12月24日
    000
  • CSS运动效果:为网页元素添加流动和运动效果

    CSS运动效果:为网页元素添加流动和运动效果,需要具体代码示例CSS(Cascading Style Sheets)是一种用于描述网页元素样式的标记语言,通过使用CSS,我们可以美化网页、改变元素的外观和行为。其中,运动效果是一种非常有趣和常用的样式效果,可以为网页添加活力和吸引力。在本文中,我们将…

    2025年12月24日
    000
  • 如何使用CSS Positions布局实现元素的流体布局

    如何使用CSS Positions布局实现元素的流体布局 在Web开发中,实现元素的流体布局是一项重要的技能。CSS Positions布局是一种常用的方法,可以帮助我们实现元素的自适应和流动性。本文将介绍如何使用CSS Positions布局来实现元素的流体布局,以及具体的代码示例。 CSS Po…

    2025年12月24日
    000
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 好文分享
    000
  • 教你使用css3给字体添加立体效果(附代码)

    之前的文章《手把手教你怎么使用html+css实现轮播图效果(代码分享)》中,给大家介绍了怎么使用html+css实现轮播图效果。下面本篇文章给大家介绍怎么使用css3给字体添加立体效果,我们一起看看怎么做。 字体添加立体效果图如下 1、新建一个html文件,首先写div标签输入写contented…

    2025年12月24日 好文分享
    000
  • 手把手教你使用css3制作炫酷的导航栏效果(代码详解)

    之前的文章《教你使用css3给字体添加立体效果(附代码)》中,给大家介绍了怎么使用css3给字体添加立体效果。下面本篇文章给大家介绍怎么使用CSS3制作炫酷的导航栏效果,我们一起看看怎么做。 炫酷的导航栏效果图如下 CSS3制作炫酷的导航栏效果的方法 1、新建一个html文件,首先写div标签输入写…

    2025年12月24日 好文分享
    000
  • 10款好看且实用的文字动画特效,让你的页面更吸引人!

    图片和文字是网页不可缺少的组成部分,图片运用得当可以让网页变得生动,但普通的文字不行。那么就可以给文字添加一些样式,实现一下好看的文字效果,让页面变得更交互,更吸引人。下面创想鸟就来给大家分享10款文字动画特效,好看且实用,快来收藏吧! 1、网页玻璃文字动画特效 模板简介:使用css3制作网页渐变底…

    2025年12月24日 好文分享
    000
  • 教你怎么使用css3给图片添加渐变效果(代码详解)

    之前的文章《手把手教你怎么使用CSS3实现动画效果(代码分享)》中,给大家介绍一下怎么使用css3动画效果设置经验。下面本篇文章给大家介绍怎么使用css3给图片添加渐变效果,伙伴们来看看一下。 初次接触css3渐变是在很早以前了,觉得这个东西很有意思哈,跟玩 PS 似的,可以做出很多华丽的东西。 浏…

    2025年12月24日 好文分享
    000
  • 手把手教你使用CSS3制作一个简单页面的布局(代码详解)

    之前的文章《深入解析微信小程序页面中实现的保存图片(附代码)》中,给大家了解一下微信小程序页面中实现的保存图片。下面本篇文章给大家介绍怎么使用CSS3制作一个简单页面的布局,感兴趣的小伙伴们可以参考一下。 兼容性 2009 年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响…

    2025年12月24日 好文分享
    000
  • css如何选取第几个元素

    css选取第几个元素的方法:1、【first-child】表示选择列表中的第一个标签;2、【last-child】表示选择列表中的最后一个标签;3、【nth-child(3)】表示选择列表中的第3个标签。 本教程操作环境:windows7系统、css3版,DELL G3电脑。 css选取第几个元素的…

    2025年12月24日
    000
  • css中什么属性可为元素设置外边距

    css中margin属性可以为元素设置外边距。margin属性可以定义元素周围的空间,它会清除周围的外边框元素区域。margin属性可以单独改变元素的上下左右边距,也可以一次改变所有的属性。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 在cs…

    2025年12月24日
    000
  • 聊聊你可能不了解的CSS属性函数 attr()

    本篇文章带大家了解一下css属性函数 attr()。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。 属性函数 attr() 用于获取HTML元素里面的属性值,并用于样式中,但目前暂时只能应用于CSS元素中的伪元素。 例子 实现一个Tooltip 立即学习“前端免费学习笔记(深入)”…

    2025年12月24日 好文分享
    000
  • 5个有用的css函数(分享)

    CSS 包含了许多函数,而且它能够完成许多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加进来,这让我们的开发更加轻松,也减少了对JavaScript的依赖。CSS 函数是它所具有的最强大的特性之一,在本文中,我将介绍一些我认为有用的函数。 (学习视频分享:css视频教程) a…

    2025年12月24日 好文分享
    000
  • css实现元素横向滚动的方法

    分析: 子元素的宽度大于父元素时会出现滚动 overflow-x: scroll; 为水平滚动,overflow-y: scroll; 为垂直滚动,根据需求这里采用水平横向滚动。 (学习视频分享:css视频教程) html代码: 立即学习“前端免费学习笔记(深入)”; 2元 XXXXXX 满1000…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信