web前端回顾

来源：互联网发布：云购商城源码破解版编辑：程序博客网时间：2024/05/29 15:07

1、HTML锚

当使用命名锚时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。

<a name="tips">基本的注意事项 - 有用的提示</a>
然后，我们在同一个文档中创建指向该锚的链接：
<a href="#tips">有用的提示</a>

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锚</title>
</head>
<body>
<a href="#p1">第一章</a><br/>
<a href="#p2">第二章</a><br/>
<a href="#p3">第三章</a><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="p1">第一章</a><br/>
<p>aaaaaaaaaaaaaaa</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="p2">第二章</a><br/>
<p>bbbbbbbbbbbbbbb</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="p3">第三章</a><br/>
<p>ccccccccccccccc</p>
</body>

</html>

2、HTML5视频与音频元素

今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。同时，HTML5 规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。

3、CSS3

(1)CSS3圆角边框

在 CSS3 中，border-radius 属性用于创建圆角：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
text-align:center;
border:2px solid #CCC;
padding:10px 40px;
background:#dddddd;
width:300px;
border-radius:20px;

-moz-border-radius:20px; /* 老的 Firefox */
}
</style>
</head>
<body>
<div>CSS3生成圆角矩形</div>
</body>
</html>

(2)CSS3边框阴影

在 CSS3 中，box-shadow 用于向方框添加阴影：

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:200px;
height:100px;
background-color:#ccc;
-moz-box-shadow: 10px 10px 5px #888; /* 老的 Firefox */
box-shadow: 10px 10px 5px #888;/* 三个像素值分辨是：阴影右偏值、阴影下偏值、阴影扩散值 */
}
</style>
</head>
<body>
<div></div>
</body>
</html>

(3)CSS3 文本阴影

在 CSS3 中，text-shadow 用于文本生成阴影：

p
{
text-shadow: 5px 5px 5px #ccc;
}

(4)CSS3 转换transform

a、通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标）和 top（y 坐标）位置参数。

transform:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素。

b、通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

transform:rotate(30deg) 把元素顺时针旋转 30 度

c、通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数：

transform:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍。

d、通过 skew() 方法，元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数：

transform:skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度。

(5)CSS3过度transition

transition简写从左到右分别是：规定应用过滤的CSS属性、过滤效果持续的时间（默认：0）、规定过滤效果的时间轴线（默认：ease）、规定过滤效果的开始时间（默认：0）

<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:blue;
transition:width 1s linear 0s;
/* Firefox 4 */
-moz-transition:width 1s linear 0s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 0s;
/* Opera */
-o-transition:width 1s linear 0s;
}
div:hover
{
width:200px;
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针放到蓝色的 div 元素上，来查看过渡效果。</p>
<p>本例在 Internet Explorer 中无效。</p>
</body>
</html>