初识HTML5和CSS3

原创

王凡汎

修改于 2020-04-03 10:42:17

3.7K0

修改于 2020-04-03 10:42:17

HTML新特性

HTML5不仅仅是HTML规范的最新版本，它也代表了一系列Web相关技术的总称，其中最重要的三项技术就是HTML5核心规范、CSS3（Cascading StyleSheet，层叠样式表的最新版本）和JavaScript（一种脚本语言，用于增强网页的动态功能）。

HTML5 八大革新

语义网（Semantics）：提供了一组丰富的语义化标签。

离线&存储（Offline & Storage）：HTML5 App Cache，Local Storage，Indexed DB和File API使Web应用程序更加迅速，并提供了离线使用的能力。

设备访问（Device Access）：增强了设备感知能力使得Web应用在电脑、pad、手机上均能使用

通信（Connectivity）：增强了通信能力，意味着增强了聊天程序的实时性和网络游戏的顺畅性。

多媒体（Multimedia）：音频视频能力的增强是HTML5的最大突破！

图形和特效（3D, Graphics & Effects）：Canvas、SVG和WebGL等功能使得图形渲染更高效，页面效果更加炫酷。

性能和集成（Performance & Integration）：Web Worker让浏览器可以多线程处理后台任务而不阻塞用户界面渲染。同时，性能检测工具方便评估程序性能

呈现（CSS3）：CSS3可以很高效的实现页面特效，并不会影响页面的语义和性能。

新增的多个语义化标签

•新的特殊内容元素，比如 header、nav、section、article、footer。

•新的表单控件，比如 calendar、date、time、email、url、search。

•用于绘画的 canvas 元素。

•用于媒介回放的 video 和 audio 元素。

•对本地离线存储的更好的支持。

•地理位置、拖拽、摄像头等API。

HTML5基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <!--这是注释 -->
</body>
</html>

CSS3新特性

–CSS即层叠样式表（Cascading Stylesheet），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。CSS提供了丰富的功能，如字体、颜色、背景的控制及整体排版等。

–CSS3 是 CSS 的最新版本，该版本提供了更加丰富且实用的规范，如：列表模块、超链接、语言模块、背景和边框、颜色、文字特效、多栏布局、动画等等，这些规范的使用会在后面的单元中将依次讲解。另外，响应式设计就是通过CSS3的媒体查询来实现的。

如何在HTML中引入样式表

•行内式

–任何HTML标签都拥有style属性，用来设置行内样式，其基本语法如下所示：

 <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 
		内容
 </标签名>

•内嵌式

内嵌式是将CSS代码集中写在HTML文档的<head>头部标签中，并且用<style>标签定义，其基本语法如下所示：

 <style>
	选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>

•外链式

–链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中，通过<link />标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

       <link href="CSS文件的路径" type="text/css" rel="stylesheet" />

ühref：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。

ütype：定义所链接的文档类型，“text/css”表示链接的外部文件为CSS样式表。

ürel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

CSS3与浏览器

•浏览器私有前缀

–为了更好的兼容不同内核的浏览器，CSS3中部分属性需要添加浏览器的私有前缀，将某个样式以-xx-开头，具体如下：

-webkit- → 只有以Webkit为内核的浏览器可以解析。如Chrome、 Safari。

-mOZ- → 只有以Gecko为内核的浏览器可以解析。如Firefox。

-ms- → 只有以Trident为内核的浏览器可以解析。如IE。

-0- → 只有以Presto为内核的浏览器可以解.析。如Opera。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

html5

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

登录后参与评论

0 条评论

热度