原创

初识HTML5和CSS3

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" />

<link />标签需要放在<head>头部标签中,并且指定<link />标签的三个属性,具体如下:

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

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

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

CSS3与浏览器

浏览器私有前缀

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

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

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

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

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • HTML5常用的文本标签

        <h1>~<h6>用处是为了命名标题,<h1> 定义最大的标题。<h6>用来定义最小的标题;标题标签主要目的不是为了设置字体大小,主要作用是对浏览器索引...

    王凡汎
  • CSS选择器

    标签选择器 : 元素名称 |div{...}|使用标签选择元素,优先级最低,使用最广泛|

    王凡汎
  • HTML5语义化结构标签

    HTML5中的header元素是一种具有引导和导航作用的结构元素,该元素可以包含所有通常放在页面头部的内容。其基本语法格式如下:

    王凡汎
  • 猿设计6——真电商之属性的套路你了解吗

    看过上一章节相信你对电商系统的类目划分有了一个全新的认识,出去再跟人讲电商的类目,可不要上去就跟人扯,一颗树,一张表,外行看热闹,内行听门道,张牙舞爪的准备得再...

    山旮旯的胖子
  • Spring官网阅读系列(十一):Spring中的BeanWrapper及类型转换

    BeanWrapper的子类只有一个:BeanWrapperImpl,它继承了ConfigurablePropertyAccessor,这个接口的主要功能是进行...

    秃顶的Java程序员
  • Spring官网阅读(十四)Spring中的BeanWrapper及类型转换

    BeanWrapper的子类只有一个:BeanWrapperImpl,它继承了ConfigurablePropertyAccessor,这个接口的主要功能是进行...

    程序员DMZ
  • Getter & Setter:使用还是废弃

    私有变量 为什么我们要使用私有的实例变量呢? 因为我们不希望其他类直接的依赖于这些变量。而且在心血来潮时,我们还可以灵活的修改变量类型和实现。 然而,为什么程序...

    java思维导图
  • 院长手把手教学---DaemonSet实验

    [root@k8s-master ~]# kubectl apply -f daemonset.yaml

    院长技术
  • [收藏] 宏工作原理以及典型面试10问

    [导读] C语言中宏是非常有价值的语言特性之一,也是面试中必考察的要点之一,本文来分享总结一些关于宏的常见面试问题。希望能帮助到有需要的小伙伴们。

    C语言与CPP编程
  • 关于响应式前端WEB

    响应式 Web 设计 -Viewport什么是 Viewport? viewport 是用户网页的可视区域。 viewport 翻译为中文可以叫做"视区"。 手...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券