HTML5+CSS3+移动web——HTML 基础
HTML5是HTML的最新标准，在原有的基础上添加了新的元素和功能，同时废弃了一些旧的元素。CSS3是CSS的最新标准，增加了许多新的特性，比如阴影、渐变、变换等。
HTML5的基础结构如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>页头内容</header>
<nav>导航内容</nav>
<section>
<article>
<h1>文章标题</h1>
<p>这里是文章的内容。</p>
</article>
</section>
<aside>侧边内容</aside>
<footer>页脚内容</footer>
</body>
</html>在这个例子中，我们使用了HTML5提供的新元素，如<header>, <nav>, <section>, <article>, <aside>, 和 <footer>等。这些元素有助于开发者写出更具语义化的代码，有利于搜索引擎的爬取和页面内容的理解，也有助于后期的维护和更新。
CSS3的基础使用示例：
/* 添加阴影效果 */
.shadow {
box-shadow: 5px 5px 5px #888888;
}
/* 线性渐变背景 */
.gradient {
background: linear-gradient(to right, red , yellow);
}
/* 3D旋转动画 */
.rotate {
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from {
transform: rotateX(0deg) rotateY(0deg);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}在这个例子中，我们使用CSS3的box-shadow属性给元素添加了阴影，使用linear-gradient创建了一个线性渐变的背景，并且使用@keyframes创建了一个简单的3D旋转动画。这些新的特性提升了页面的视觉效果和用户体验。
评论已关闭