HTML5 与 CSS3 新特性

原創 奔跑的前端er 2020-02-20 17:08

H5的新特性：

① 语义特性

HTML5赋予网页更好的意义和结构。

HTML5 提供了定义页面不同部分的新语义元素：

<article><aside><details><figcaption><figure><footer><header><main><mark><nav>
<section>:定义大块的内容，如文章区块或者某个重要表单。区块可以有他们自己的标题、导航及页脚。
<summary>
<time>可以快速把日期和时间按照自己选定的格式呈现。若设置了datetime属性，那么<time>元素内容就可以是任何想用的文本，如果没有设置datetime属性，<time>元素的日期和时间就必须采用有效的格式。
< title>简短、描述性、唯一（提升搜索引擎排名）。
搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密切相关的关键字，建议将title核心内容放在前60个字符中。
<hn><header><nav>
html5规范不推荐对辅助性页脚链接使用nav，除非页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
<main><article><section><aside><footer><small>
<strong><em><mark><b><figure><figcaption><cite>
<blockquoto><q><time><abbr>
abbr[title]{ border-bottom:1px dotted #000; }
<dfn>定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<del>移除的内容。
<ins>添加的内容。少有的既可以包围块级，又可以包围短语内容的元素。
<code>标记代码。包含示例代码或者文件名 （< &lt;  > &gt;）
<pre>预格式化文本。保留文本固有的换行和空格。
<meter><progress>

② 本地存储特性

基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。
HTML5离线存储包含 应用程序缓存，本地存储，索引数据库，文件接口。

③ 设备访问特性

从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。

④ 连接特性

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

⑤ 网页多媒体特性

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

⑥ 三维、图形及特效特性

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

⑦ 性能与集成特性

没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，解决以前的跨域等问题，帮助您的Web应用和网站在多样化的环境中更快速的工作。

CSS3 新特性

CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范，如：盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等等。

CSS 选择器

tbody: nth-child(even), nth-child(odd)
: not(.textinput)：这里即表示所有 class 不是“textinput”的节点。
div:first-child：这里表示所有 div 节点下面的第一个直接子节点。

        :nth-last-child(n)
        :nth-of-type(n)
        :nth-last-of-type(n)
        :last-child
        :first-of-type
        :only-child
        :only-of-type
        :empty
        :checked
        :enabled
        :disabled
        ::selection
        :not(s)

@font-face 特性

font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face { 
font-family: BorderWeb; 
src:url(BORDERW0.eot); 
} 
@font-face { 
font-family: Runic; 
src:url(RUNICMT0.eot); 
} 
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" } 
.event { FONT-SIZE: 110px; COLOR: black; FONT-FAMILY: "Runic" }

word-wrap & text-overflow 样式

<div style="width:300px; border:1px solid #999999; word-wrap:break-word;"> 
wordwrapbreakwordwordwrapbreakwordwordwrapbreakwordwordwrapbreakword 
</div>
text-overflow:clip
text-overflow:ellipsis

文字渲染

div { 
-webkit-text-fill-color: black; 
-webkit-text-stroke-color: red; 
-webkit-text-stroke-width: 2.75px; 
}

CSS3 的多列布局

.multi_column_style{ 
-webkit-column-count: 3; 
-webkit-column-rule: 1px solid #bbb; 
-webkit-column-gap: 2em; 
} 

<div class="multi_column_style"> 
................. 
................. 
</div>

column-count：表示布局几列。
column-rule：表示列与列之间的间隔条的样式
column-gap：表示列于列之间的间隔

边框和颜色

color: hsla( 112, 72%, 33%, 0.68);

对于 border，CSS3 提供了圆角的支持：

border-radius: 15px;

CSS3 的渐变效果

左上（0% 0%）到右上（0% 100%）即从左到右水平渐变：

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));

复杂线性渐变

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),
       color-stop(0.33,#AAD010),color-stop(0.33,#FF7F00),to(#FE280E));

径向渐变

backgroud: 
-webkit-gradient(radial,50 50,50,50 50,0,from(black),color-stop(0.5,red),to(blue));

CSS3 的阴影（shadow）和反射（reflect）效果

阴影

.class1{ 
text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); 
} 

.class2{ 
box-shadow:3px 3px 3px rgba(0, 64, 128, 0.3); 
}

反射

.classReflect{ 
-webkit-box-reflect: below 10px 
-webkit-gradient(linear, left top, left bottom, from(transparent), 
     to(rgba(255, 255, 255, 0.51))); 
}

CSS3 的背景效果

首先：”background clip”，该属确定背景画区，有以下几种可能的属性：
background-clip: border-box; 背景从 border 开始显示 ;
background-clip: padding-box; 背景从 padding 开始显示 ;
background-clip: content-box; 背景显 content 区域开始显示 ;
background-clip: no-clip; 默认属性，等同于 border-box;
通常情况，我们的背景都是覆盖整个元素的，现在 CSS3 让您可以设置是否一定要这样做。这里您可以设定背景颜色或图片的覆盖范围。
其次：”background origin”，用于确定背景的位置，它通常与 background-position 联合使用，您可以从 border、padding、content 来计算 background-position（就像 background-clip）。
background-origin: border-box; 从 border. 开始计算 background-position;
background-origin: padding-box; 从 padding. 开始计算 background-position;
background-origin: content-box; 从 content. 开始计算 background-position;
还有，”background size”，常用来调整背景图片的大小，注意别和 clip 弄混，这个主要用于设定图片本身。有以下可能的属性：
background-size: contain; 缩小图片以适合元素（维持像素长宽比）
background-size: cover; 扩展元素以填补元素（维持像素长宽比）
background-size: 100px 100px; 缩小图片至指定的大小 .
background-size: 50% 100%; 缩小图片至指定的大小，百分比是相对包 含元素的尺寸 .
最后，”background break”属性，CSS3 中，元素可以被分成几个独立的盒子（如使内联元素 span 跨越多行），background-break 属性用来控制背景怎样在这些不同的盒子中显示。
background-break: continuous; 默认值。忽略盒之间的距离（也就是像元 素没有分成多个盒子，依然是一个整体一 样）
background-break: bounding-box; 把盒之间的距离计算在内；
background-break: each-box; 为每个盒子单独重绘背景。
这种属性让您可以设定复杂元素的背景属性。
最为重要的一点，CSS3 中支持多背景图片，参考如下代码：

div { 
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 10px center repeat-x; 
}

CSS3 的 transitions, transforms 和 animation

transition-property：用于指定过渡的性质，比如 transition-property:background 就是指 backgound 参与这个过渡
transition-duration：用于指定这个过渡的持续时间
transition-delay：用于制定延迟过渡的时间
transition-timing-function：用于指定过渡类型，有 ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

<div id="transDiv" class="transStart"> transition </div> 

.transStart { 
   background-color: white; 
   -webkit-transition: background-color 0.3s linear; 
   -moz-transition: background-color 0.3s linear; 
   -o-transition: background-color 0.3s linear; 
   transition: background-color 0.3s linear; 
} 
.transEnd { 
   background-color: red; 
}
.skew { 
-webkit-transform: skew(50deg); 
} 

.scale { 
-webkit-transform: scale(2, 0.5); 
} 

.rotate { 
-webkit-transform: rotate(30deg); 
} 

.translate { 
-webkit-transform: translate(50px, 50px); 
} 

.all_in_one_transform { 
-webkit-transform: skew(20deg) scale(1.1, 1.1) rotate(40deg) translate(10px, 15px); 
}
@-webkit-keyframes anim1 { 
   0% { 
       Opacity: 0; 
       font-size: 12px; 
   } 
   100% { 
       Opacity: 1; 
       font-size: 24px; 
   } 
} 
.anim1Div { 
   -webkit-animation-name: anim1 ; 
   -webkit-animation-duration: 1.5s; 
   -webkit-animation-iteration-count: 4; 
   -webkit-animation-direction: alternate; 
   -webkit-animation-timing-function: ease-in-out; 
}

伪元素和伪类的区别

CSS 伪类用于向某些选择器添加特殊的效果。
CSS 伪元素用于将特殊的效果添加到某些选择器。

伪类种类：

伪类 作用
:active 将样式添加到被激活的元素
:focus 将样式添加到被选中的元素
:hover 当鼠标悬浮在元素上方时，向元素添加样式
:link 将特殊的样式添加到未被访问过的链接
:visited 将特殊的样式添加到被访问过的链接
:first-child 将特殊的样式添加到元素的第一个子元素
:lang 允许创作者定义指定的元素中使用的语言

伪元素种类：

伪元素 作用
:first-letter 将特殊的样式添加到文本的首字母
:first-line 将特殊样式添加到文本的首行
:before 在某元素之前插入某些内容
:after 在某元素之后插入某些内容

伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到，这也是为什么他们一个称为伪类，一个称为伪元素的原因。

奔跑的前端er
发布了95 篇原创文章 · 获赞 22 · 访问量 11万+
私信 关注
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

CSS居中及布局

CSS中的居中可分爲水平居中和垂直居中。水平居中分爲行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分爲定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。 水平居中 使用inline-block和text-aligh實

奔跑的前端er 2020-07-05 21:38:46

等高布局

奔跑的前端er 2020-02-20 17:08:35

CSS居中及布局

CSS中的居中可分爲水平居中和垂直居中。水平居中分爲行內元素居中和塊狀元素居中兩種情況，而塊狀元素又分爲定寬塊狀元素居中和不定寬塊狀元素居中。下面詳細介紹這幾種情況。 水平居中 使用inline-block和text-aligh實

奔跑的前端er 2020-07-05 21:38:46

等高布局

奔跑的前端er 2020-02-20 17:08:35

CSS多列

奔跑的前端er 2018-09-03 04:17:22

sticky-footer实现方式

奔跑的前端er 2018-09-03 04:17:22

CSS动画

奔跑的前端er 2018-09-03 04:17:22

定宽+流动布局

奔跑的前端er 2018-09-03 04:17:17