如何快速理解HTML5新增元素和css

本篇内容介绍了“如何快速理解HTML5新增元素和css”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

　　一、HTML5新增布局标签

　　HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

　　HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

　　1993年HTML的草案发布，在html5版本之前，html共有4个版本。2.0版、3.2版、4.0版，再到1999年的4.01版。

　　在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面。但是这样的布局方式不仅使我们的文档结构不够清晰，而且不利于搜索引擎爬虫对我们页面的爬取。为了解决上述缺点，HTML5新增了很多新的语义化标签

　　Div+css布局

　　HTML5

　　<header>&hellip;</header>     头部

　　<nav>&hellip;</nav>           导航

　　<section>&hellip;</section>定义文档中的节。比如章节、页眉、页脚或文档中的其它部分

　　<aside>&hellip;</aside>        侧边栏

　　<footer>&hellip;</footer>       页脚

　　<article>&hellip;</article>代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等

　　使用HTML5的新的结构标签，做出上面的布局，代码如下：

　　二、视频和音频

　　HTML5未出来之前，在线的音频和视频都是借助Flash或者第三方工具实现的，现在HTML5也支持了这方面的功能。在一个支持HTML5的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频，为HTML5注入了巨大的发展潜力。

　　2.1视频

　　Video标签定义视频，比如电影片段或其他视频流。

　　2.2音频

　　audio 标签定义声音，比如音乐或其他音频流。
 

　　2.3source

　　<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。

　　<source> 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。

　　三、HTML5新增标签（了解）

　　3.1figure

　　用于对元素进行组合。多用于图片与图片描述组合。

　　3.2details

　　details 用于描述文档或文档的某个部分的细节，类似于下拉列表，兼容性较差，chrome与Safari支持。

　　3.3mark

　　主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

　　3.4meter

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

　　low:最低临界点

　　high：最高临界点

　　Min：最小值

　　Max：最大值

　　Value：当前值

　　3.5 progress

　　运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

　　max：定义完成值

　　value：定义当前值

　　3.6 datalist

　　定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。

　　datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。

　　请使用 input 元素的 list 属性来绑定 datalist。

　　3.7canvas

　　定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。

　　四、CSS介绍

　　4.1 为什么需要CSS

　　使用css的目的就是让网页具有美观一致的页面，另外一个最重要的原因是内容与格式分离，在没有CSS之前，我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性，当HTML内容非常多时，就会定义很多重复的样式属性，并且修改的时候需要逐个修改，费心费力。是时候做出改变了，所以CSS就出现了。

　　4.2 CSS概念

　　CSS（Cascading Style Sheets）层叠样式表，又叫级联样式表，简称样式表

　　1、用于HTML文档中元素样式的定义

　　实现了将内容与表现分离

　　提高代码的可重用性和可维护性

　　2、文件后缀是。css
 

　　4.3 CSS发展史

　　1990年，Tim Berners-Lee和Robert Cailliau共同发明了Web。1994年，Web真正走出实验室。

　　从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。

　　随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

　　1994年哈坤&middot;利提出了CSS的最初建议。而当时伯特&middot;波斯（Bert Bos）正在设计一个名为Argo的浏览器，于是他们决定一起设计CSS。

　　其实当时在互联网界已经有过一些统一样式表语言的建议了，但CSS是第一个含有“层叠”丰意的样式表语言。在CSS中，一个文件的样式可以从其他的样式表中继承。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合每个人的爱好。

　　哈坤于1994年在芝加哥的一次会议上第一次提出了CSS的建议，1995年的www网络会议上CSS又一次被提出，博斯演示了Argo浏览器支持CSS的例子，哈肯也展示了支持CSS的Arena浏览器。

　　同年，W3C组织（World WideWeb Consortium）成立，CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准，层叠样式表的开发终于走上正轨。有越来越多的成员参与其中，例如微软公司的托马斯&middot;莱尔顿（Thomas Reaxdon），他的努力最终令Internet Explorer浏览器支持CSS标准。哈坤、波斯和其他一些人是这个项目的主要技术负责人。1996年底，CSS初稿已经完成，同年12月，层叠样式表的第一份正式标准（Cascading style Sheets Level 1）完成，成为w3c的推荐标准。

　　1997年初，W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

“如何快速理解HTML5新增元素和css”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！