余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

HTML5新特性(html5新特性有哪些,css3新增属性有哪些)

xiyangw 2022-11-25 12:30 29 浏览 0 评论

HTML5是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,为了顺应整个互联网时代变迁,使得人们能够以更好的方式去进行网页结构搭建,HTML5应运而生。HTML5新增了如下几个方面你的特性:

一、语义特性(Class:Semantic)

HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

HTML结构语义化,是最近几年才提出来的,以前的html结构,都是一堆没有语义的冷冰冰的标签。最泛滥的就是div+css,以前的页面,一打开就是一堆div+css,为了改变这种这种状况,开发者们和官方提出了让HTML结构语义化的概念,并且w3c也在HTML5给出了几个新的语义化的标签。

语义化之后文档会有什么效果呢?就是你写的HTML结构,是用相对应的有一定语义的英文字母(标签)表示的,标记的,因为HTML本身就是标记语言。不仅对自己来说,容易阅读,书写。别人看你的代码和结构也容易理解,甚至对一些不是做网页开发的人来说,也容易阅读。。

怎么知道自己的页面结构是否语义化,那就要看HTML布局结构,在去掉CSS样式表之后,是否,依然能很好的呈现内容的代码结构。也就是说,去掉CSS的装饰之后,整个HTML的结构阅读起来依旧主次分明,能够看清其整体的架构模块。这也就是,语义化之后我们想要HTML文档达到的效果。

其实语义化,也无非就是自己在使用标签的时候在合适的场景下选取合适的标签,比如h1~h5系列标签,在HTML中就是就是用来定义标题;而p标签,大部分情况下用以处理文字段落,table表格则适合做信息表格,等等。

我们对整个HTML结构进行语义化的规范操作有如下几个好处:

1,这样有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;

2,方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;

3,便于团队开发和维护,语义化更具可读性,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

HTML5中新增的语义化标签进一步加强了我们针对整个HTML结构进行语义化跟进的可操作性,使得我们网页布局的可阅读性更高。

常见的HTML5语义化标签及其使用场景如下:

<article>

定义页面独立的内容区域。

<aside>

定义页面的侧边栏内容。

<command>

定义命令按钮,比如单选按钮、复选框或按钮

<details>

用于描述文档或文档某个部分的细节

<dialog>

定义对话框,比如提示框

<summary>

标签包含 details 元素的标题

<figure>

规定独立的流内容(图像、图表、照片、代码等等)。

<figcaption>

定义 <figure> 元素的标题

<footer>

定义 section 或 document 的页脚。

<header>

定义了文档的头部区域

<mark>

定义带有记号的文本。

<meter>

定义度量衡。仅用于已知最大和最小值的度量。

<nav>

定义导航链接的部分。

<progress>

定义任何类型的任务的进度。

<section>

定义文档中的节(section、区段)。

<time>

定义日期或时间。

二、本地存储特性(Class: OFFLINE & STORAGE)

基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。

早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速,这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上,它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

客户端存储数据的两个对象为:

localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。

sessionStorage - 用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

保存数据:localStorage.setItem(key,value);

读取数据:localStorage.getItem(key);

删除单个数据:localStorage.removeItem(key);

删除所有数据:localStorage.clear();

得到某个索引的key:localStorage.key(index);

三、连接特性(Class: CONNECTIVITY)

更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。

在 WebSocket API 中,浏览器和服务器只需要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。

现在,很多网站为了实现推送技术,所用的技术都是 Ajax 轮询。轮询是在特定的的时间间隔(如每1秒),由浏览器对服务器发出HTTP请求,然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点,即浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源。

HTML5 定义的 WebSocket 协议,能更好的节省服务器资源和带宽,并且能够更实时地进行通讯。

我们使用WebSocket 与Ajax的长轮询做对比,从而感受WebSocket 的优势所在,其对比图如下:

四、网页多媒体特性(Class: MULTIMEDIA)

支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。

video元素,在HTML5中专门用来播放网络上的视频或者电影。

audio元素,在HTML5中专门用来播放网络上的音频。

使用video和audio元素进行播放时就不在需要使用其他的插件了,只要我们的浏览器支持HTML5就可以。

浏览器的支持:

Safari3以上、Firefox4以上、0pera10以上、chrome3.0以上版本都对audio元素和video元素支持!

1,基本使用方法

audio元素只需要给他指定一个src属性:

<audio src="MP3.mp3" controls="controls"></audio>

对于不支持的浏览器我们可以在这对元素之间加入提示语句来代替

<audio src="MP3.mp3" controls="controls">您的浏览器不支持Audio元素</audio>

video元素要设定好长宽和src属性就可以了:

<video width="750" height="400" src="time.mp4"></video>

同样对于不支持video的浏览器可以在中间加入替换文字:

<video width="750" height="400" src="time.mp4">您的浏览器不支持video元素</video>

source元素指定多个播放格式与编码:

source元素可以为同一个媒体数据指定多个播放格式与编码方式,以确保浏览器可以从中选择一种自己支持的播放格式进行播放。选择顺序自上而下,直到选择到所支持的格式为止。

使用方法:

<video>

<source src="video.m4v" type="video/mp4" />

<source src="video.webm" type="video/webm" />

<source src="video.ogv" type="video/ogg" />

<source src="video.mp4" />

</video>

各种设备对编码格式的支持情况:

webm(.webm)格式的视频 火狐4.0+、chrome6.0+、opera10.6+

mp4(.m4v)格式的视频 IE9.0+ 、Safari3.1+ 、iso5.0 、Android4.0+

ogg(.ogv)格式的视频 火狐3.5+、chrome3.0+、opera10.5+

mp4(.mp4)格式的视频 IE9.0+ 、Safari3.1+ 、iso3.0 、Android2.3+

2、viedo与audio的常用属性

audio元素和video元素的常用属性

src属性:在这个属性里面指定媒体数据的URL地址。

controls属性:指定是否为视频或者音频数据添加浏览器自带的播放控制条,控制条中有播放按钮、暂停等按钮。

width和height属性(video独有):指定视频的宽度与高度。

autoplay属性:这个属性指定是否当我们网页加载完成之后就开始自动播放。

preload属性:这个属性指定是否对数据进行预加载,如果是的话,浏览器会将视频数据或者音频数据进行缓冲,这样做可以加快播放的速度。

preload属性的三个值:

none 表示不进行预加载。

metadata 表示只预加载媒体的元数据。

auto(默认值) 表示预加载全部的视频或者音频。

2,使用Javascript提供的方法操作多媒体。

Javascript为我们提供了丰富的方法,用以灵活控制多媒体文件,这样我们就可以根据实际的项目需求,定义自己的多媒体播放器。

其中controls属性经过设定,会在界面中显示一个浏览器自带的控制条。如果对于UI没有要求的需求,其内置控制器已经可以满足大部分的需求。隐藏控制条并模拟:那么实现一个自定义功能的播放器关键就在于,我们不使用原生的控制器,将其隐藏掉之后,在下方同样的位置通过HTML、CSS来模拟所需样式,同时通过js来调用video标签所暴露给我们的接口函数及属性,以及检测用户的操作行为来同步的模拟UI与视频播放数据的相应变化。

几个核心函数及属性的用法:

myVid=document.getElementById("video1");//控制视频开关

myVid.play() // 触发媒体文件的播放

myVid.pause() //触发媒体文件的暂停

myVid.currentTime=5; //返回或设定当前视频播放位置

myVid.duration // 返回视频总长度

myVid.volume //控制音量大小

myVid.muted //控制多媒体是否静音

五、三维、图形及特效特性(Class: 3D, Graphics & Effects)

基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

<canvas>是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素.例如,它可以用于绘制图表、制作图片构图或者制作简单的(以及不那么简单的)动画. 右边的图片展示了一些 <canvas> 的实现示例。

使用 <canvas> 元素不是非常难但你需要一些基本的HTML和JavaScript知识。一些过时的浏览器不支持<canvas> 元素,但是所有的新版本主流浏览器都支持它。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px)。但是,可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形,我们使用一个JavaScript上下文对象,它能动态创建图像( creates graphics on the fly)

随着大数据等领域的发展及应用,canvas绘图在数据可视化方面扮演了重要的角色,可以让我们灵活地通过各种形式展示数据,提高数据的可读性,增强产品的数据能力。

下图展示了canvas在数据可视化方面的应用效果:

综上,HTML5新功能的出现,使得前端在很多新的应用领域发挥出了更加强大的能力,也让很多已有项目在表现形式上有了更好的选择。私信【前端】领取web前端开发/html5学习视频。

相关推荐

了解基本JavaScript,什么是JavaScript?(javascript怎么开启)
了解基本JavaScript,什么是JavaScript?(javascript怎么开启)

JavaScript是一种非常简单的方法来向您的网站添加各种动态元素。除非你有一些编程经验,JavaScript将是一个相当一个新的概念开始-它是相当不同的...

2023-03-21 19:21 xiyangw

每日一「讲」之 JavaScript(js每天执行一次)
每日一「讲」之 JavaScript(js每天执行一次)

1.1JavaScript简介让我们看看JavaScript有什么特别之处,我们可以用它实现什么,以及哪些其他技术可以很好地使用它。什么是JavaScript...

2023-03-21 19:21 xiyangw

Javascript 中三个点的三种用法(js 3个点)

如果你阅读或查看现在的Javascript程序时,大概率会发现省略号出现在很多的地方,这个省略号(…)是在ES6中引入的一个功能,它看起来很简单很不起眼是不?但是它在JavaScript中,非...

好程序员web前端分享JavaScript到底是什么?特点有哪些?
好程序员web前端分享JavaScript到底是什么?特点有哪些?

  好程序员web前端分享JavaScript到底是什么?特点有哪些?这也是成为web前端工程师必学的内容。今天特意为大家分享了这篇关于JavaScript的文...

2023-03-21 19:20 xiyangw

Python 与 JavaScript:主要区别、性能比较和应用领域
Python 与 JavaScript:主要区别、性能比较和应用领域

现代Web应用程序的复杂性远不止创建具有无数元素的引人注目的用户界面。为了实现无延迟的体验和轻松的可扩展性,对架构设计给予应有的关注非常重要,这可能非常具有...

2023-03-21 19:20 xiyangw

JavaScript 也可以搞定嵌入式开发? | 硬创公开课
JavaScript 也可以搞定嵌入式开发? | 硬创公开课

嘉宾介绍:郑晔,RuffCTO,OracleDuke选择奖获奖作品Moco的作者,目前投身于IoT领域,致力于简化IoT应用的开发方式。他多次在各种...

2023-03-21 19:20 xiyangw

我们为什么要关注 JavaScript ?(我们为什么要关注印度的发展)

本文主要介绍我们之所以要关注JavaScript的原因。首先,我认为JavaScript能够得到普及的主要原因之一是,JavaScript非常易于接近。学习JavaScript,对于初学者而言,相对比...

您可能未使用过的JavaScript功能(javascript功能)
您可能未使用过的JavaScript功能(javascript功能)

>PhotobyJasonHafsoonUnsplashJavaScript具有许多经常使用的功能。但是,有些功能可能我们大多数人都没有使...

2023-03-21 19:19 xiyangw

这13个好用的JavaScript特性,估计你都没用过
这13个好用的JavaScript特性,估计你都没用过

一、逗号运算符,是用于分隔表达式并返回链中最后一个表达式的运算符。let oo = (1, 2, 3)co...

2023-03-21 19:19 xiyangw

JavaScript能应用在哪些方向?未来前景怎么样?
JavaScript能应用在哪些方向?未来前景怎么样?

JavaScript,一门全栈的语言,无论是前端,还是后台,都能轻松的用它完成,随处可见它的身影,那么,它能做些什么呢?下面和千锋广州小编一起来看看吧!?网页开...

2023-03-21 19:18 xiyangw

Web前端培训:为什么JavaScript对Web开发人员来说是必不可少的
Web前端培训:为什么JavaScript对Web开发人员来说是必不可少的

JavaScript是一种编程语言,使你能够在网页上实现复杂的功能,如交互式地图、及时的内容更新、动画2D或3D图形等等!它是当前标准web技术的第三层,另外两...

2023-03-21 19:18 xiyangw

为什么JavaScript活得这么好?总能踩到未来的步点!
为什么JavaScript活得这么好?总能踩到未来的步点!

为什么JavaScript活得很好,以及它未来在区块链进入主流的过程中将扮演怎样的角色?JavaScript很活跃。JavaScript不仅是全球最知名的编程语...

2023-03-21 19:18 xiyangw

前端开发基础,JavaScript 主要作用是什么?(javascript前端开发案例教程)

学习编程的同学对JavaScript并不陌生,JavaScript是前端技术中非常重要的内容。例如页面的效果切换、动画效果、页面游戏等等。其实我们功通过HTML和CSS技术已经可以搭建各种样式的页面,...

需要了解的5种现代JavaScript特性(应用需要浏览器开启 javascript 支持!)
需要了解的5种现代JavaScript特性(应用需要浏览器开启 javascript 支持!)

JavaScript是最流行的脚本或编程语言之一,在开发专业网页时包含许多功能。它是Web技术的第三个最重要的层,仅次于HTML和CSS。Jav...

2023-03-21 19:17 xiyangw

为什么每个 Web 新手开发人员都需要学习JavaScript
为什么每个 Web 新手开发人员都需要学习JavaScript

当你刚刚进入Web开发领域时,JavaScript是必须要学的一门语言之一,web开发是绝对少不了JavaScript的。为什么初学者必须要学这门语言呢?...

2023-03-21 19:17 xiyangw

取消回复欢迎 发表评论: