HTML5与CSS3新增特性

时间:2022-11-17 15:59:23

HTML5是什么?

HTML5是是下一代HTML,比之前的HTML更增添了许多新的标签元素,对于浏览器的要求也比较高级,至少需要IE9以上的浏览器,移动端浏览器版本高,使用的比较多。那今天就来看看它增加了那些新的特性。


HTML5

  • audio(音频标签)、video(视频标签)

    例:

//audio标签属性:autoplay :是否自动播放
//controls : 提供添加播放、暂停和音量控件
//loop : 设置循环次数
//preload :在页面进行加载时进行加载,预备播放
//src : 文件存储路径
<audio src="mp3.mp3" controls="controls"> </audio>
<audio controls="controls">
    <source src="1.ogg" type="audio/ogg">
    <source src="2.mp3" type="audio/mpeg">
</audio>

//video属性标签:同audio相同,
//height width : 设置视频播放器高度、宽度 
<video src="mp3.mp3" controls="controls"> </video>
<video controls="controls" width="300" height="400">
    <source src="1.ogg" type="video/ogg">
    <source src="2.mp4" type="video/mp4">
</video>
  • 拖放(drag and drop)
    实例:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } </script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />

</body>
</html>
  • 结构标签:header、footer、nav、article、section、aside;
    HTML5与CSS3新增特性

  • 新增标签:datalist(定义选项列表)、details(定义文档细节,通常与summary使用)、menu(定义列表/菜单)、address、progress(进度条,有两个值:value、max)、mark(标记)、time(时间)

  • 新增表单元素type:email、url、tel、number(min、max、step)、range(进度条)、color(颜色面板)、search

//用法基本相同
<input type="email" name="user_email" />
  • 属性: form、autocomplete、autofocus、method、action、multiple、pattern、placeholder、required、contenteditable、hidden、tableindex。
<form action="demo_form.asp" method="get" autocomplete="on">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
  • 绘图:canvas

  • webStorage:分为localStorage与sessionStorage(他们的区别以及cookie,会在后面单独列出来)。

//二者用法大同小异,只不过存储方式不同。
<script> localStorage.lastname="Smith"; document.write(localStorage.lastname); </script>

以上是常见的HTML新属性,接下来是CSS3 的新属性,同样在较高版本的浏览器中才能实现功能。

CSS3

注意:因为浏览器内核的不同,渲染引擎在会有不同变得表现,需要注意偏差。

  • 边框:
    border-image 设置所有 border-image-* 属性的简写属性。
    border-radius 设置所有四个 border-*-radius 属性的简写属性。
    box-shadow 向方框添加一个或多个阴影。
div
{ border:solid 2px red; border-radius:25px; border-radius:25px; /* 创建圆角,100%为圆形 */ box-shadow: 10px 10px 5px #888888}
  • 背景:
    background-clip 规定背景的绘制区域。
    background-origin 规定背景图片的定位区域。
    background-size 规定背景图片的尺寸。

  • 文本效果:
    text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
    text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。
    text-justify 规定当 text-align 设置为 “justify” 时所使用的对齐方法。
    text-outline 规定文本的轮廓。
    text-overflow 规定当文本溢出包含元素时发生的事情。
    text-shadow 向文本添加阴影。
    text-wrap 规定文本的换行规则。
    word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。

  • 2D效果:
    matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
    translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
    translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
    translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
    scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
    scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
    scaleY(n) 定义 2D 缩放转换,改变元素的高度。
    rotate(angle) 定义 2D 旋转,在参数中规定角度。
    skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
    skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
    skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

//如何使用 matrix 方法将 div 元素旋转 30 度:

div
{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);     /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);      /* Opera */
}
  • 3D转换:
    matrix3d(n,n,n,n,n,n,
    n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
    translate3d(x,y,z) 定义 3D 转化。
    translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
    translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
    translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
    scale3d(x,y,z) 定义 3D 缩放转换。
    scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
    scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
    scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
    rotate3d(x,y,z,angle) 定义 3D 旋转。
    rotateX(angle) 定义沿 X 轴的 3D 旋转。
    rotateY(angle) 定义沿 Y 轴的 3D 旋转。
    rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
    perspective(n) 定义 3D 转换元素的透视视图。

  • 渐变:线性渐变与镜像渐变
    线性:background:gredient(linear, left-top, left-bottom, from(blue), to(red), color-stop(0.4,#fff));
    镜像: background:gredient(radialr, center center, 0, center center,200, from(blue), to(red), color-stop(0.4,#fff));

  • 响应式布局:根据不同分辨率设备,将网页很好地呈献给用户,media screen判定宽度大小。

另外这些只是常用的用法,具体的用法可参考官方文档,里面有更细致的用法。