HTML5和CSS3总结

HTML5

HTML5是最新的HTML标准,它的主要目标是提供所有内容而不需要任何像flash,silverlight等的额外插件,这些内容来自动画、视频、富GUI等。HTML5是万维网联盟(W3C)和网络超文本应用技术工作组(WHATWG)之间合作输出的。几乎所有的浏览器Safari、Chrome、Firefox、Opera、IE都支持HTML5。

HTML5没有使用SGML或者XHTML,它是一个全新的东西,因此不需要参考DTD。仅需放置<! DOCTYPE html>的文档类型代码告诉浏览器识别这是HTML5文档。如果不放入<! DOCTYPE html> ,浏览器将不能识别它是HTML5文档,同时HTML5的标签将不能正常工作。

DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档。

<!DOCTYPE> 声明必须是 HTML 文档的第一行,位于 <html> 标签之前。 

如果不写,浏览器将无法识别HTML文件,并且HTML 5标签将无法正常工作。

文档声明

<!DOCTYPE html>

元素

新增文档结构标签(块级元素)

<section>、<article>、<nav>、<aside>、<header>、<footer>、<figure>

新增内联(行内)元素

<mark>、<time>、<meter>、<progress>

新增input类型

email、url、number、tel、range、search、color、date、month等。

创建画布语法

<canvas id="myCanvas" width="200" height="100"></canvas>

<datalist> 标签

如果我们想要用户自由输入的同时又有一些建议选项,可以使用<datalist>。

<datalist> 标签定义选项列表。与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

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

<input id="myCar" list="cars" />

<datalist id="cars">

  <option value="BMW">

  <option value="Ford">

  <option value="Volvo">

</datalist>

CSS3

1. 圆角边框

border-radius:1-4 length  1%/1-4 length  1%

/*水平半径/垂直半径*/

四个值的顺序:自左上角开始,顺时针方向。

2. 边框阴影

box-shadow: h-shadow(必需) v-shadow(必需) blur spread color inset;

3. 2D转换

(1)translate()方法:平移

(2)rotate()方法:旋转

(3)scale()方法:缩放

4. 3D转换

(1)translateZ()方法:延Z轴移动

(2)rotateX()、rotateY()、rotateZ()方法:分别绕X、Y、Z轴旋转

(3)perspective()方法:定义3D转换的透视视图

5. CSS3的选择器

1)E:last-child 匹配父元素的最后一个子元素E。

2)E:nth-child(n)匹配父元素的第n个子元素E。

3)E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

6. @keyframes规则

用于创建动画。

CSS3实现动画主要有3种方式:

第一种是:transition 实现渐变动画

第二种是:transform 转变动画

第三种是:animation 实现自定义动画

7. @Font-face 特性

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

8. 多列布局 (multi-column layout)

CSS3 的多列布局有很多属性,例如:

column-count
div元素的文本分成三列。

column-gap
在div元素的文本分成三列,并指定一个30像素的列之间的差距。

column-rule
指定列之间的规则:宽度,样式和颜色。

在规定的多列布局容器内的元素,要使用display:inline-block属性,否则会出现脱节和错乱。

  • 21
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值