HTML5中新增特性-6ren

HTML5中新增特性

转载作者：知者更新时间：2024-03-13 01:52:34

27

4

一、写在前面
html5新增特性一直都是不明不白的，今天将总结一下html5中的十大特性。
二、总结
2.1、语义化标签
语义化标签使得页面的内容结构化，见名知义。语义化的优点:好的代码结构，有利于SEO,提升用户体验，有利于团队开发和维护，方便其他设备解析。

标签	描述
`<hrader></header>`	定义了文档的头部区域
`<footer></footer>`	定义了文档的尾部区域
`<nav></nav>`	定义文档的导航
`<section></section>`	定义文档中的节（section、区段）
`<article></article>`	定义页面独立的内容区域
`<aside></aside>`	定义页面的侧边栏内容
`<detailes></detailes>`	用于描述文档或文档某个部分的细节
`<summary></summary>`	标签包含 details 元素的标题
`<dialog></dialog>`	定义对话框，比如提示框

2.2、增强型表单
html5拥有多个新的表单input输入类型，这些新特性提供了更好的输入控制和验证。

输入类型	描述
color	主要用于选取颜色
date	从一个日期选择器选择一个日期
datetime	选择一个日期（UTC时间）
datetime-local	选择一个日期和时间
email	包含 e-mail 地址的输入域
mouth	选择一个月份
number	数值的输入域
range	一定范围内数字值额输入域
search	用于搜索域
tel	定义输入电话号码字段
time	选择一个时间
url	url地址的输入域
week	选择周和年

HTML5 新增的表单属性

1、placeholder属性：简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
2、required属性：是一个boolean属性。要求填写的输入域不能为空。
3、pattern属性，描述了一个正则表达式用于验证input元素的值。
4、min和max属性，设置元素的最大值和最小值。
5、step属性，为输入域规定合法的数字间隔。
6、height和width属性，用于image类型的input标签的图像高度和宽度。
7、autofocus属性，是一个boolean属性。规定在页面加载时，域自动获得焦点。
8、multiple属性，是一个boolean属性。规定input元素中可选择多个值。

2.3、视频和音频
audio``video``source
2.4、canvas--图形

1、创建一个画布，一个画布在网页中是一个矩形框，通
过 元素来绘制。默认情况下 元素没有边框和内容。

<canvas id="myCanvas"  width="200" height="100"` style="border:1px solid #000000;"></canvas>

标签通常需要指定一个id属性 (脚本中经常引用), 
width 和 height 属性定义的画布的大小，使用 
style 属性来添加边框。你可以在HTML页面中使用多个 
元素。

2、使用Javascript来绘制图像，canvas 元素本身是
没有绘图能力的。所有的绘制工作必须在 JavaScript 
内部完成。

<script>
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#FF0000";
   ctx.fillRect(0,0,150,75);
   </script>

getContext("2d") 对象是内建的 HTML5 对象，拥有
多种绘制路径、矩形、圆形、字符以及添加图像的方法。

设置 fillStyle 属性可以是CSS颜色，渐变，或图案。
fillStyle默认设置是#000000（黑色）。
fillRect(x,y,width,height) 方法定义了矩形当前
的填充方式。意思是：在画布上绘制 150x75 的矩形，
从左上角开始 (0,0)。

2.5、SVG绘图

SVG是指----可伸缩的矢量图形,且不失真

SVG 与 Canvas两者间的区别

1、SVG 是一种使用 XML描述 2D 图形的语言。
2、Canvas 通过 JavaScript 来绘制 2D 图形。
3、SVG 基于 XML，这意味着 SVG DOM 中的每个元素都
是可用的。您可以为某个元素附加 JavaScript 事件处
理器。
4、在 SVG 中，每个被绘制的图形均被视为对象。如果 
SVG 对象的属性发生变化，那么浏览器能够自动重现图
形。
5、Canvas 是逐像素进行渲染的。在 canvas 中，一旦
图形被绘制完成，它就不会继续得到浏览器的关注。如果
其位置发生变化，那么整个场景也需要重新绘制，包括任
何或许已被图形覆盖的对象。

2.6、地理位置
HTML5 Geolocation（地理定位）用于定位用户的位置。

window.navigator.geolocation {
    getCurrentPosition:  fn  用于获取当前的位置数据
    watchPosition: fn  监视用户位置的改变
    clearWatch: fn  清除定位监视
}

2.7、拖放API
2.8、web worker
当在html页面中执行脚本时，页面的状态是不可相应的，直到脚本已完成。
　　web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
2.9、Web storage
localstorage和localstorage
2.10、WebSocket

websocket是从html5开始提供的一个在单个tcp连接上进行全双工通讯的协议。在websocket api中，浏览器
和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成一个快速的通道。两者之间就直接可以数
据相互传送。浏览器通过JavaScript向服务器发出建立websocket连接请求，连接建立以后，客户端和服务器
就可以通过tcp连接直接交换数据。当你获取web socket连接以后，你可以通过send()方法来向服务器发送数
据，并通过onmessage事件来接收服务器返回的数据。

27

4

0

文章推荐：【面试普通人VS高手系列】b树和b+树的理解

文章推荐： echart 写一个大屏展示圆边渐变柱状图

文章推荐： MYSQL之高性能索引

文章推荐： .Net Core 使用 CSRedisCore 访问 Redis 的哨兵和主从复制

javascript - 我需要将文本放在一个中，它位于一个 Div 中，该 Div 位于另一个 Div 中，该 Div 位于另一个 Div 中
我需要将文本放在中在一个 Div 中，在另一个 Div 中，在另一个 Div 中。所以这是它的样子: #document Change PIN
html - 两个背景图像。一个在 HTML 中，一个在 BODY 中。在 Firefox 中，主体图像未呈现
奇怪的事情发生了。我有一个基本的 html 代码。 html，头部， body 。(因为我收到了一些反对票，这里是完整的代码) 这是我的CSS: html { backgroun
ios - 将图像从 asset.xcassets 加载到 imageArray 中，并将其动态加载到 UIImageView 中，该 UIImageView 存在于 UICollectionView 中 - swift
我正在尝试将 Assets 中的一组图像加载到 UICollectionview 中存在的 ImageView 中，但每当我运行应用程序时它都会显示错误。而且也没有显示图像。我在ViewDidLoa
linux - 在 BASH 中，我需要根据 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名 eval 组合。不能在 bash 中
我需要根据带参数的 perl 脚本的输出更改一些环境变量。在 tcsh 中，我可以使用别名命令来评估 perl 脚本的输出。 tcsh: alias setsdk 'eval `/localhome/
asp.net - Windows 身份验证适用于 IIS，但不适用于 Kestrel/Microsoft.AspNetCore.Authentication.Negotiate(不在 Chrome 中，有时在 Edge 中，始终在 IE 中)？
我使用 Windows 身份验证创建了一个新的 Blazor(服务器端)应用程序，并使用 IIS Express 运行它。它将显示一条消息“Hello Domain\User!”来自右上方的以下 Ra
java - java 中 Kotlin 中的等价物是什么？
这是我的方法 void login(Event event);我想知道 Kotlin 中应该如何最佳答案在 Kotlin 中通配符运算符是 * 。它指示编译器它是未知的，但一旦知道，就不会有其他类
express - 在 Jade 中，为什么有时我可以按原样使用变量而有时必须将它们包含在#{......} 中？
看下面的代码 for story in book if story.title.length < 140 - var story
c - C 中 strstr() 中 for 循环的错误使用
我正在尝试用 C 语言学习字符串处理。我写了一个程序，它存储了一些音乐轨道，并帮助用户检查他/她想到的歌曲是否存在于存储的轨道中。这是通过要求用户输入一串字符来完成的。然后程序使用 strstr()
c - * 在 sscanf 中，* 在 [] 中
我正在学习 sscanf 并遇到如下格式字符串: sscanf("%[^:]:%[^*=]%*[*=]%n",a,b,&c); 我理解 %[^:] 部分意味着扫描直到遇到 ':' 并将其分配给 a。:
python - 在 Python (2.7.3) 中，如果 str(x) 中的任何字符在 str(y) 中(或 str(y) 在 str(x) 中)，我如何编写一个函数来回答？
def char_check(x,y): if (str(x) in y or x.find(y) > -1) or (str(y) in x or y.find(x) > -1):
ansible - 在 Ansible 中，如何将一行移动到一个 block 中？
我有一种情况，我想将文本文件中的现有行包含到一个新 block 中。 line 1 line 2 line in block line 3 line 4 应该变成 line 1 line 2 line
Django 调试工具栏显示在根 URL 中，但不显示在应用程序 URL 中
我有一个新项目，我正在尝试设置 Django 调试工具栏。首先，我尝试了快速设置，它只涉及将 'debug_toolbar' 添加到我的已安装应用程序列表中。有了这个，当我转到我的根 URL 时，调试
r - 在 R 中，Matlab 中 @ 函数句柄的等价物是什么？
在 Matlab 中，如果我有一个函数 f，例如签名是 f(a,b,c)，我可以创建一个只有一个变量 b 的函数，它将使用固定的 a=a1 和 c=c1 调用 f: g = @(b) f(a1, b,
swiftui - SwiftUI 中 ScrollView 中 VStack 元素中的神秘间距或填充
我不明白为什么 ForEach 中的元素之间有多余的垂直间距在 VStack 里面在 ScrollView 里面使用 GeometryReader 时渲染自定义水平分隔线。 Scrol
cookies - 什么应该存储在 session 中，什么应该存储在 cookie 中？
我想知道，是否有关于何时使用 session 和 cookie 的指南或最佳实践？什么应该和什么不应该存储在其中？谢谢! 最佳答案这些文档很好地了解了 session cookie 的安全问题以及
python - Python 中 matplotlib 中 3d 直方图的奇怪行为
我在 scipy/numpy 中有一个 Nx3 矩阵，我想用它制作一个 3 维条形图，其中 X 轴和 Y 轴由矩阵的第一列和第二列的值、高度确定每个条形的是矩阵中的第三列，条形的数量由 N 确定。
c - c 中 sem_init(...) 中 value 参数的不同用法
假设我用两种不同的方式初始化信号量 sem_init(&randomsem,0,1) sem_init(&randomsem,0,0) 现在， sem_wait(&randomsem) 在这两种情况下
c - 实际值存储在 pstr 中，但是该值如何存储在数组 "WORD"中
我怀疑该值如何存储在“WORD”中，因为 PStr 包含实际输出。？既然Pstr中存储的是小写到大写的字母，那么在printf中如何将其给出为“WORD”。有人可以吗？解释一下？ #include
javascript - 数组索引选择像在 numpy 中，但在 javascript 中
我有一个 3x3 数组: var my_array = [[0,1,2], [3,4,5], [6,7,8]]; 并想获得它的第一个 2
javascript - 在 Javascript 中，如何检测浏览器窗口何时在 View 中？
我意识到您可以使用如下方式轻松检查焦点: var hasFocus = true; $(window).blur(function(){ hasFocus = false; }); $(win

首页

博学

6Ren·AI

商城

HTML5中新增特性