言

HTML5，作为HTML的最新版本，自推出以来，就以其强大的功能和革命性的特性，引领了网页设计的新潮流。它不仅增强了网页的表现力，还引入了众多新元素和API，极大地丰富了网页开发的可能性。本文将深入探讨HTML5的核心特性，并通过实际代码示例，展示它如何改变和提升现代网页设计和开发。

一、HTML5的新特性

1.1 语义标签

HTML5引入了许多语义化的标签，如<article>、<section>、<nav>和<header>，这些标签使得网页的结构更加清晰，有助于搜索引擎优化（SEO）。

示例代码：

<header>
  <h1>Website Title</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<section id="home">
  <article>
    <h2>Article Title</h2>
    <p>Article content...</p>
  </article>
</section>

1.2 离线存储

通过本地存储（localStorage）和会话存储（sessionStorage），HTML5允许网页在用户离线时存储数据，大大提高了网页的可用性和响应速度。

示例代码：

// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 读取数据
let value = localStorage.getItem('key');
value = sessionStorage.getItem('key');

1.3 多媒体支持

HTML5原生支持音频和视频，无需依赖插件。使用<audio>和<video>标签，开发者可以轻松嵌入和播放多媒体内容。

示例代码：

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

1.4 画布（Canvas）和SVG

<canvas>元素用于通过JavaScript绘制图形，而SVG（可缩放矢量图形）则提供了另一种强大的图形渲染方式。

示例代码：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = '#FF0000';
  ctx.fillRect(0, 0, 150, 100);
</script>

1.5 新的表单元素和属性

HTML5为表单提供了更多的控制和验证功能，如日期和时间输入、颜色选择器、表单验证等。

示例代码：

<form>
  <input type="date" name="bday">
  <input type="color" name="favcolor">
  <input type="email" name="email" required>
  <input type="submit">
</form>

二、HTML5 API

2.1 地理定位（Geolocation）

HTML5的地理定位API允许网页访问用户的地理位置信息，为开发基于位置的服务提供了便利。

示例代码：

navigator.geolocation.getCurrentPosition(function(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log('Your current position is (' + latitude + ',' + longitude + ')');
});

2.2 拖放（Drag and Drop）

拖放API使得用户可以轻松地拖拽网页上的元素，为创建交互式网页提供了新途径。

示例代码：

<div id="drag" draggable="true">Drag me</div>
<div id="drop" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<script>
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>

2.3 Web Workers

Web Workers允许在后台运行JavaScript代码，不会影响主线程的性能，特别适用于处理复杂计算。

示例代码：

var myWorker = new Worker('worker.js');

myWorker.onmessage = function(e) {
  console.log('Received message ' + e.data);
};

myWorker.postMessage('Hello World');

2.4 WebSockets

WebSockets提供了一种全双工通信通道，使得客户端和服务器之间的实时通信成为可能。

示例代码：

var socket = new WebSocket('ws://localhost:8080');

socket.onopen = function(event) {
  socket.send('Hello Server!');
};

socket.onmessage = function(event) {
  console.log('Server says: ', event.data);
};

socket.onclose = function(event) {
  console.log('Connection closed');
};

三、HTML5对移动开发的影响

3.1 移动优先

HTML5的设计考虑到了移动设备的特性，使得开发跨平台移动应用变得更加容易。

3.2 触摸事件

HTML5支持触摸事件，如触摸开始、移动和结束，为移动设备提供了良好的交互体验。

示例代码：

var canvas = document.getElementById('myCanvas');
canvas.addEventListener('touchstart', handleStart, false);
canvas.addEventListener('touchmove', handleMove, false);
canvas.addEventListener('touchend', handleEnd, false);

function handleStart(e) {
  e.preventDefault();
  // 处理触摸开始事件
}

function handleMove(e) {
  e.preventDefault();
  // 处理触摸移动事件
}

function handleEnd(e) {
  e.preventDefault();
  // 处理触摸结束事件
}

3.3 响应式设计

结合CSS3，HTML5可以创建响应式网页，自动适应不同屏幕尺寸和分辨率。

示例代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

@media (max-width: 600px) {
  .responsive-class {
    width: 100%;
  }
}

四、HTML5的最佳实践

4.1 兼容性考虑

虽然现代浏览器普遍支持HTML5，但在开发时仍需考虑旧版浏览器的兼容性问题。

4.2 性能优化

合理使用HTML5特性，如缓存策略和资源加载，可以显著提升网页性能。

示例代码：

<link rel="manifest" href="/manifest.webmanifest">

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/service-worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

4.3 安全性

遵循最佳安全实践，如验证用户输入、使用HTTPS等，保护用户数据和隐私。

总结

HTML5作为现代网页设计的基石，不仅提供了丰富的语义标签和API，还极大地增强了网页的表现力和交互性。它对移动开发的支持，使得创建跨平台应用变得更加容易。然而，开发者在利用HTML5的强大功能时，也应考虑兼容性、性能和安全性的问题。随着技术的发展，HTML5将继续推动网页设计和开发向更加先进和用户友好的方向发展。

载说明：原创不易，未经授权，谢绝任何形式的转载

使用HTML5 Canvas构建绘图应用是在Web浏览器中创建交互式和动态绘图体验的绝佳方式。HTML5 Canvas元素提供了一个绘图表面，允许您操作像素并以编程方式创建各种形状和图形。本文将为您提供使用HTML5 Canvas创建绘图应用的概述和指导。此外，它还将通过解释HTML设置、JavaScript实现、用户交互和绘图功能来帮助您理解构建绘图应用的步骤。

HTML canvas标签是一个HTML元素，它提供了一个空白的绘图表面，可以使用JavaScript来渲染图形、形状和图像。绘图应用程序利用HTML5 canvas的功能，使用户能够以数字方式创建艺术作品、草图和插图。此外，使用HTML5 canvas构建的绘图应用程序允许用户与画布进行交互，捕捉鼠标移动和点击事件，实时绘制、擦除或操作元素。

HTML5画布非常适合创建绘图应用程序，原因如下：

• 它提供了一个动态的绘图界面，可以实时更新。
• 它提供了丰富的绘图API，用于创建各种绘图工具和功能。
• 现代网络浏览器的原生支持。
• 支持交互和事件处理，用于捕获用户输入。
• 启用动画和特效，让绘画栩栩如生。
• 允许图像操作，包括加载、显示和转换图像。

HTML设置

您可以使用HTML5 Canvas以以下方式为绘图应用程序设置HTML结构：

• 在代码编辑器中创建一个新的HTML文件或打开一个已存在的文件。
• 从基本的HTML结构开始，通过包含 <!DOCTYPE html> 声明，打开 <html> 标签，并添加 <head> 和 <body> 部分。
• 在 <head> 部分，您可以设置应用程序的标题并包含任何必要的CSS样式或外部库。
• 在 <body> 部分中添加一个 <canvas> 元素，它将作为应用程序的绘图表面。您可以指定所需的宽度和高度属性来定义画布的尺寸。
• 在 <canvas> 元素下面，您可以添加任何其他的HTML元素，以便在您的绘图应用程序中使用，比如按钮、颜色选择器或工具栏。
• 您可以根据需求自定义HTML结构，添加任何必要的元素、样式和ID以供绘图应用程序使用。以下是绘图应用程序的基本HTML设置示例：

<!DOCTYPE html>
<html>
<head>
 <title>Drawing Application</title>
 <style>
  body {
   margin: 3px;
   padding: 6px;
   font-size: 22px;
  }
  canvas {
   border: 2px solid black;
  }
  .toolbar button,
  #clearButton,
  #saveButton {
   padding: 15px;
   font-size: 24px;
  }
 </style>
</head>
<body>
 <h1>HTML Setup for a Drawing Application Using HTML5 Canvas</h1>
 <canvas id="myCanvas" width="700" height="400"></canvas>
 <button id="clearButton">Clear</button>
</body>
</html>

结果：

在上面的示例中，我们通过添加带有ID为“myCanvas”的画布元素并分别指定其宽度和高度为700和400像素来构建了绘图应用程序的HTML结构。我们还在画布下方包含了一个ID为“clearButton”的“清除”按钮，为用户提供了一种方便的方式来从画布中删除所有绘制的元素，并为新的绘图创建一个空白画布。

绘图应用的样式设计

添加一些元素和功能，使用额外的HTML和CSS使绘图应用程序看起来更像一个应用程序。例如，您可以添加一个工具栏、一个颜色调色板、一个画笔大小和一个状态栏。以下是一个示例，其中包含一些额外的元素，以增强绘图应用程序的外观和布局：

<div class="toolbar">
 <button id="pencilTool">Pencil</button>
 <button id="brushTool">Brush</button>
 <button id="eraserTool">Eraser</button>
 <input type="color" id="colorPicker" />
 <select id="brushSize">
  <option value="1">1px</option>
  <option value="3">3px</option>
  <option value="5">5px</option>
 </select>
</div>
<div class="color-palette">
 <div class="color-swatch" style="background-color: black"></div>
 <div class="color-swatch" style="background-color: red"></div>
 <div class="color-swatch" style="background-color: green"></div>
 <div class="color-swatch" style="background-color: blue"></div>
</div>

使用CSS进行样式设置：

.toolbar {
 margin-bottom: 12px;
}
.toolbar button {
 padding: 10px;
 margin-right: 7px;
 background: white;
 color: black;
 border: none;
 cursor: pointer;
}
.color-palette {
 display: flex;
 justify-content: center;
 margin-bottom: 12px;
}
.color-palette .color-swatch {
 width: 32px;
 height: 32px;
 border: 3px solid white;
 cursor: pointer;
 margin-right: 6px;
}
.status-bar {
 padding: 7px;
 background: white;
 color: black;
}

结果：

上面的例子包括了创建绘图应用所需的结构和样式，包括工具栏（带有不同工具的按钮，如铅笔、画笔、橡皮擦）、颜色调色板、画笔大小选择下拉菜单、绘图画布、状态栏和清除按钮。您可以根据所需的功能自定义这些元素。

JavaScript 设置

没有JavaScript功能，上述示例中的按钮、颜色样本和清除按钮将不会执行任何操作。要使用绘图应用程序，您必须添加相应的JavaScript源代码来处理功能和与画布元素的交互。以下是您可以使用JavaScript处理画布元素功能和交互的几种方式：

• 你需要使用canvas元素的ID在JavaScript中访问它，并获取绘图上下文。绘图上下文提供了在canvas上绘制的方法。
• 要做到这一点，请在 <script> 标签内添加以下JavaScript代码：

const canvas = document.getElementById("myCanvas");
const context = canvas.getContext("2d");

• 为了启用绘图功能，您必须处理用户交互，如鼠标点击和移动。
• 将事件监听器附加到画布元素以捕获 mousedown 、 mousemove 、 mouseup 和 mouseout 事件。
• 使用 mousedown 事件开始绘制，使用 mousemove 事件在鼠标移动时绘制，使用 mouseup 事件在释放鼠标按钮时停止绘制，使用 mouseout 事件在光标移出画布时停止绘制。
• 要实现绘图的事件处理函数，请使用 startDrawing 、 last position 和 stopDrawing 。
• startDrawing 设置绘图标志并保存起始位置， draw 根据鼠标移动从上一位置到当前位置绘制线条， stopDrawing 重置绘图标志。
• 要初始化变量以跟踪绘图状态，请使用 isDrawing 、 lastX 和 lastY 。它们可以跟踪绘图状态和光标或指针的先前坐标。
• 变量 isDrawing 是一个布尔标志，指示用户当前是否正在绘制，而 lastX 和 lastY 存储光标或指针的先前坐标，使得可以在画布上绘制平滑且连续的线条。以下是如何使用JavaScript来改进绘图应用程序的示例：

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
let isDrawing = false;
let selectedTool = "pencil";
function startDrawing(event) {
 isDrawing = true;
 draw(event);
}
function draw(event) {
 if (!isDrawing) return;
 const x = event.clientX - canvas.offsetLeft;
 const y = event.clientY - canvas.offsetTop;
 ctx.lineTo(x, y);
 ctx.stroke();
}
function stopDrawing() {
 isDrawing = false;
 ctx.beginPath();
}
canvas.addEventListener("mousedown", startDrawing);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stopDrawing);
canvas.addEventListener("mouseout", stopDrawing);
const clearButton = document.getElementById("clearButton");
clearButton.addEventListener("click", function() {
 ctx.clearRect(0, 0, canvas.width, canvas.height);
});
const colorSwatches = document.querySelectorAll(".color-swatch");
colorSwatches.forEach((swatch) => {
 swatch.addEventListener("click", function() {
  const color = this.style.backgroundColor;
  ctx.strokeStyle = color;
 });
});
const brushSizeSelect = document.getElementById("brushSize");
brushSizeSelect.addEventListener("change", function() {
 const brushSize = this.value;
 ctx.lineWidth = brushSize;
});
const pencilToolButton = document.getElementById("pencilTool");
pencilToolButton.addEventListener("mousedown", function() {
 selectedTool = "pencil";
 ctx.globalCompositeOperation = "source-over";
});
const brushToolButton = document.getElementById("brushTool");
brushToolButton.addEventListener("mousedown", function() {
 selectedTool = "brush";
 ctx.globalCompositeOperation = "multiply";
});
const eraserToolButton = document.getElementById("eraserTool");
eraserToolButton.addEventListener("mousedown", function() {
 selectedTool = "eraser";
 ctx.globalCompositeOperation = "destination-out";
});
const colorPicker = document.getElementById("colorPicker");
colorPicker.addEventListener("input", function() {
 const color = this.value;
 ctx.strokeStyle = color;
});

结果：

在上面的示例中，绘图应用程序的功能被激活，您可以轻松地使用它来绘制您想要的内容。请注意，现在所有的元素都在正常工作，您可以在画布上绘制，选择不同的绘图工具（铅笔、画笔、橡皮擦），选择颜色，调整画笔大小，并清除画布。

JavaScript代码指定了HTML文档中的画布元素，获取了2D绘图上下文，并在HTML文档的各个元素上设置了事件监听器，例如画布、按钮、颜色样本和输入字段。这些事件监听器响应用户的鼠标点击、移动和值变化等操作。当触发时，相应的JavaScript函数根据用户的操作修改画布绘图上下文（ctx）。

它从HTML文档中选择清除按钮并添加一个点击事件监听器。当点击时，它使用2D绘图上下文的clearRect方法清除整个画布。例如，当您在画布上点击并拖动鼠标时，将调用 startDrawing 、 draw 和 stopDrawing 函数，这些函数跟踪鼠标坐标并在画布上绘制线条。

绘图应用的相关应用

一款绘图应用程序允许您使用上述工具和功能创建数字艺术作品。它为用户提供了一个画布，可以绘制、绘画和应用不同的效果，以创建视觉组合。绘图应用程序被艺术家、设计师、爱好者和任何对通过创建视觉吸引人的插图、绘画、素描和其他数字艺术形式来表达创造力感兴趣的人使用。

如何将HTML5画布绘制保存为图像文件

将HTML5画布绘制保存为图像文件可帮助您与他人分享绘画或在其他应用程序中使用。用户可以将绘画存储在本地设备上，或通过提供将其保存为图像文件的选项，将其上传到各种平台，如社交媒体、网站或在线画廊。

此外，保存绘画使用户能够稍后重新访问和展示他们的创作，增强了绘画应用程序的可用性和价值。以下是如何将HTML5画布绘制保存为图像文件的方法：使用JavaScript，您可以将画布绘制保存为图像文件。使用画布元素的 toDataURL() 方法。该方法将画布内容转换为数据URL，可用于创建图像文件。例如：

<button id="saveButton">Save</button>

const canvas = document.getElementById('myCanvas');
const link = document.createElement('a');
function saveCanvasAsImage() {
 const dataURL = canvas.toDataURL('image/png');
 link.href = dataURL;
 link.download = 'drawing.png';
 link.click();
}
saveCanvasAsImage();

在上面的示例中，添加了一个具有id“saveButton”的新按钮元素，并添加了一个点击事件监听器。当您点击“保存”按钮时，它会触发一个函数，该函数使用 toDataURL() 来检索画布的数据URL。然后，它创建一个动态生成的链接元素，将数据URL设置为href属性，并使用download属性指定所需的文件名为“drawing.png”，以启动图像文件下载。

如何以不同格式保存绘图

该方法支持不同的图像格式，如PNG、JPEG和GIF。您可以通过修改所需文件的类型（例如JPEG格式的'image/jpeg'）来更改格式。保存后，您可以通过电子邮件、消息应用程序或社交媒体平台分享图像文件。

结束

利用HTML5画布的绘图应用为艺术家、设计师、教育工作者和所有具有创造力的人打开了无限的可能性。无论是作为独立工具还是集成到其他应用程序中，绘图应用都赋予用户表达创造力、与他人分享作品和探索视觉表达的新领域的能力。凭借其丰富的功能，绘图应用在艺术创作中继续激发和取悦用户。所以拿起你的数字画笔，在可能性的画布上尽情释放你的想象力吧！

由于文章内容篇幅有限，今天的内容就分享到这里，文章结尾，我想提醒您，文章的创作不易，如果您喜欢我的分享，请别忘了点赞和转发，让更多有需要的人看到。同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

TML 是用来描述网页的一种语言。

HTML 指的是超文本标记语言 (Hyper Text Markup Language)

HTML 不是一种编程语言，而是一种标记语言 (markup language)

标记语言是一套标记标签 (markup tag)

HTML 使用标记标签来描述网页

HTML5 是最新的 HTML 标准。

HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。

HTML5 拥有新的语义、图形以及多媒体元素。

HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

CSS 是一种描述 HTML 文档样式的语言。

CSS 描述应该如何显示 HTML 元素。

CSS 用于控制网页的样式和布局。

CSS3 是最新的 CSS 标准。

CSS3 被拆分为"模块"。主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

CSS3的新特征有很多，例如圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、多背景图、文字或图像的变形处理（旋转、缩放、倾斜、移动）、多栏布局、媒体查询等。

1 标注效果

要实现如下效果：

HTML5:

<ruby>
少<rt>shào</rt>小<rt>xiǎo</rt>离<rt>lí</rt>家<rt>jiā</rt>老<rt>lǎo</rt>大<rt>dà</rt>回<rt>huí</rt>
</ruby>，
<ruby>
乡<rt>xiāng</rt>音<rt>yīn</rt>无<rt>wú</rt>改<rt>gǎi</rt>鬓<rt>bìn</rt>毛<rt>máo</rt>衰<rt>cuī</rt>
</ruby>。

2 与文本换行相关的属性

3 text-shadow

要实现的效果：

CSS3：

p {
    text-align: center;
    font: bold 60px helvetica, arial, sans-serif;
    color: #fff;
    text-shadow: black 0.1em 0.1em 0.2em;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    font:bold 60px helvetica, arial, sans-serif;
    color: red;
    text-shadow: 0 0 4px white, 
        0 -5px 4px #ff3, 
        2px -10px 6px #fd3, 
        -2px -15px 11px #f80, 
        2px -25px 18px #f20;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: -1px -1px white,  
        1px 1px #333;
}

要实现的效果：

CSS3：

p {
    text-align: center;
    padding: 24px;
    margin: 0;
    font-family: helvetica, arial, sans-serif;
    font-size: 80px;
    font-weight: bold;
    color: #D1D1D1;
    background: #CCC;
    text-shadow: 1px 1px white,  
        -1px -1px #333;
}

4 border的transparent属性

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

要实现的效果：

CSS3：

#demo {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

要实现的效果：

CSS3：

#demo {
    height: 0;
    width: 120px;
    border-bottom: 120px solid #ec3504;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;

}

5 transform: rotate

要实现的效果：

CSS3和HTML5：

<style type="text/css">
.bubble {
    width: 200px; /*定义框大小，可忽略，让消息框自由收缩*/
    height: 50px;
    background:hsla(93,96%,62%,1); /*定义背景色，必须与下面箭头背景色一致*/
    padding: 12px;  /*增加补白，防止消息文本跑到框外*/
    position: relative; /*定义定位包含框，方便定位箭头*/
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;   /*圆角*/
}
.bubble:before { 
    content: "";   /*不显示任何内容*/
    width: 0;  /*定义箭头内容区大小*/
    height: 0;
    position: absolute;  /*绝对定位*/
    z-index:-1;  /*显示在消息框下面*/
}
.bubble.bubble-left:before {
    right: 90%;
    top: 50%;
    
    -webkit-transform: rotate(-25deg);
    -moz-transform: rotate(-25deg);
    transform: rotate(-25deg);  /*定位箭头倾斜角度*/
    /*定义箭头长短、粗细*/
    border-top: 20px  solid transparent;
    border-right: 80px  solid hsla(93,96%,62%,1);
    border-bottom: 20px  solid transparent;

}

div {
    margin:50px;
}

<div class="bubble bubble-left">左侧消息提示框<br>class="bubble bubble-left"</div>

6 background: repeating-linear-gradient

要实现的效果：

CSS3：

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
body {
    background: -webkit-repeating-linear-gradient(to top, #f9f9f9, #f9f9f9 29px, #ccc 30px);
    background: repeating-linear-gradient( to top, #f9f9f9, #f9f9f9 29px, #ccc 30px );
    background-size: 100% 30px;
    position: relative;
}
body:before {
    content: "";
    display: inline-block;
    height: 100%;
    width: 4px;
    border-left: 4px double #FCA1A1;
    position: absolute;
    left: 30px;
}

需要实现的效果：

CSS3：

.box {
    background: linear-gradient(-135deg, #f00 30px, #fff 30px, #162e48 32px);
    color: #fff;
    padding: 12px 24px;
}

7 实现选项卡效果

<script>
function setTab(cursel,n){
	    for(i=1;i<=n;i++){
	        	var menu=document.getElementById("tab_"+i);
	        	var con=document.getElementById("con_"+i);
	        	menu.className=i==cursel?"hover":"";
	        	con.style.display=i==cursel?"block":"none";
	    }
}
</script>

<div id="tab">
    <div class="Menubox">
        <ul>
            <li id="tab_1" class="hover" onclick="setTab(1,4)">明星</li>
            <li id="tab_2" onclick="setTab(2,4)">搞笑</li>
            <li id="tab_3" onclick="setTab(3,4)">美女</li>
            <li id="tab_4" onclick="setTab(4,4)">摄影</li>
        </ul>
    </div>
    <div class="Contentbox">
        <div id="con_1" class="hover" ><img src="images/1.png" /></div>
        <div id="con_2" class="hide"><img src="images/2.png" /></div>
        <div id="con_3" class="hide"><img src="images/3.png" /></div>
        <div id="con_4" class="hide"><img src="images/4.png" /></div>
    </div>
</div>
</body>

8 表格隔行添加背景色

CSS3：

tbody tr:nth-child(2n) {
    background-color: #f5fafe;
}

9 border-radius

圆角表格的CSS3：

.bordered tr:last-child td:last-child {
    -moz-border-radius: 0 0 6px 0;
    -webkit-border-radius: 0 0 6px 0;
    border-radius: 0 0 6px 0;
}

10 border-spacing

单线表格的CSS3：

table {
    *border-collapse: collapse; /* IE7 and lower */
    border-spacing: 0;
    width: 100%;
}

11 box-shadow

设计图片翘边阴影效果：

CSS3：

.box {
    width: 980px;
    clear: both;
    overflow: hidden;
    height: auto;
    margin: 20px auto;
}
.box li {
    background: #fff;
    float: left;
    position: relative;
    margin: 20px 10px;
    border: 2px solid #efefef;
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    -o-box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
    box-shadow: 0 1px 4px rgba(0,0,0,0.27), 0 0 4px rgba(0,0,0,0.1) inset;
}
.box li img {
    width: 290px;
    height: 200px;
    margin: 5px;
}
.box li:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    left: 21px;
    background: transparent;  /*透明背景*/
    z-index: -2;   /*显示在照片的下面*/
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);  /*添加阴影*/
    -webkit-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -o-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    -moz-box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(-12deg) rotate(-6deg);   /*变形并旋转阴影，让其翘起*/
    -webkit-transform: skew(-12deg) rotate(-6deg);
    -moz-transform: skew(-12deg) rotate(-6deg);
    -os-transform: skew(-12deg) rotate(-6deg);
    -o-transform: skew(-12deg) rotate(-6deg);
}
.box li:after { /*在左侧添加翘边阴影*/
    content: "";
    position: absolute;
    width: 90%;
    height: 80%;
    bottom: 13px;
    right: 21px;
    z-index: -2;
    background: transparent;
    box-shadow: 0 8px 20px rgba(0,0,0,0.8);
    transform: skew(12deg) rotate(6deg);
    -webkit-transform: skew(12deg) rotate(6deg);
    -moz-transform: skew(12deg) rotate(6deg);
    -os-transform: skew(12deg) rotate(6deg);
    -o-transform: skew(12deg) rotate(6deg);
}

<ul class="box">
    <li><img src="images/1.jpg" /></li>
    <li><img src="images/2.jpg" /></li>
    <li><img src="images/3.jpg" /></li>
</ul>

ref

《HTML5+CSS3+JavaScript从入门到精通（实例版）》

-End-