君陌离的博客

vuePress-theme-reco 君陌离    2018 - 2020
君陌离的博客 君陌离的博客

Choose mode

  • dark
  • auto
  • light
首页
我的作品
  • 项目橱窗
  • blog模板
分类
  • 数据库
  • CSS
  • 摘记
  • JS
  • Node
  • Vue
  • React
  • GIT
  • Promise
  • Liunx
  • Xshell
  • ajax
  • WINDOWS
  • Python
  • 随笔
  • 脚手架
  • node
  • 自动化
标签
笔记
时间线
About Me
  • 关于我
  • 赞赏
Contact
  • GitHub
  • QQ
author-avatar

君陌离

70

文章

90

标签

首页
我的作品
  • 项目橱窗
  • blog模板
分类
  • 数据库
  • CSS
  • 摘记
  • JS
  • Node
  • Vue
  • React
  • GIT
  • Promise
  • Liunx
  • Xshell
  • ajax
  • WINDOWS
  • Python
  • 随笔
  • 脚手架
  • node
  • 自动化
标签
笔记
时间线
About Me
  • 关于我
  • 赞赏
Contact
  • GitHub
  • QQ
  • HTML5

    • HTML5语义元素
    • HTML5多媒体标签
    • HTML5表单元素
    • HTML5中的API
    • HTML5十大新特性
    • Canvas
    • video 引用
    • CSS
    • 详解CSS3 rem(设置字体大小)
    • CSS高阶用法以及VUE CSS穿透用法
  • JS

  • 微信小程序

  • 数据库

  • React

  • Vue

  • vuepress

HTML5十大新特性

vuePress-theme-reco 君陌离    2018 - 2020

HTML5十大新特性

君陌离 2020-08-07 HTML5

# 1.语义化标签

  • 对比之前HTML没有体现结构语义化的标签,如:
<div id="header"></div>
1
  • HTML5提供语义化标签,如:
<header><article><footer><nav><aside><section>
1

# 2.增强型表单

  • 多个新的表单 Input 输入类型,如:

color,url,date等

这些新特性提供了更好的输入控制和验证。

  • 新增表单元素,如:

output,用于用于不同类型的输出,比如计算或脚本输出。

新增表单属性,如:

placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。

required 属性,是一个 boolean 属性。要求填写的输入域不能为空

pattern 属性,描述了一个正则表达式用于验证input 元素的值。

min 和 max 属性,设置元素最小值与最大值。

step 属性,为输入域规定合法的数字间隔。

height 和 width 属性,用于 image 类型的 input 标签的图像高度和宽度。

autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。

multiple 属性 ,是一个 boolean 属性。规定input 元素中可选择多个值。

# 3.新增视频 video 和音频 audio 标签

<video src="/i/movie.ogg" controls="controls">
  your browser does not support the video tag
</video>
<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
1
2
3
4

# 4.Canvas绘图

# 5.SVG绘图

# 6.地理定位

# 7.拖放API

# 8.Web Worker

# 9.Web Storage

# 10.WebSocket

欢迎来到 您的站点名称($site.title)
看板娘