HTML5 CSS新增特性

HTML5和CSS3的新增特性非常多，以下是一些主要的特性和示例代码：

语义化标签：HTML5提供了一些新的语义化标签，如<header>, <nav>, <section>, <article>, <aside>, <footer>等。




<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
</head>
<body>
    <header>头部内容</header>
    <nav>导航链接</nav>
    <section>
        <article>文章内容</article>
    </section>
    <aside>侧边内容</aside>
    <footer>底部内容</footer>
</body>
</html>

画布(Canvas)：使用JavaScript可以在网页上绘制图形和图像。




<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, 75);
</script>

视频和音频：HTML5提供了<video>和<audio>标签用于在网页上播放视频和音频。




<!-- 视频 -->
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>
 
<!-- 音频 -->
<audio controls>
  <source src="song.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

表单控件：HTML5引入了新的表单控件，如日期选择器、时间选择器、数字输入框等。




<form>
    生日: <input type="date">
    时间: <input type="time">
    数量: <input type="number" min="0" max="10">
    <input type="submit">
</form>

CSS3提供了更强大的选择器、背景和边框的装饰效果、阴影、变换、动画等。




/* 阴影效果 */
div {
    box-shadow: 10px 10px 5px #888888;
}
 
/* 圆角边框 */
div {
    border-radius: 25px;
}
 
/* 渐变背景 */
div {
    background: linear-gradient(to right, red , yellow);
}
 
/* 动画 */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}
 
div {
    animation-name: example;
    animation-duration: 4s;
}

地理位置(Geolocation)：HTML5提供了获取用户地理位置的API。




navigator.geolocation.getCurrentPosition(function(position) {
    console.log("纬度: " + position.coords.latitude + 
    " 经度: " + position.coords.longitude);
});

本地存储：HTML5提供了本地存储机制，可以在客户端存储数据。




// 存储
localStorage.setItem("key", "value");
// 读取
var data = localStorage.getItem("key");
// 删除
localStorage.removeItem("key");
// 清除所有
localStorage.clear();

新的内容元素，如<main>、<details>、<summary>等。




<main>
    <details>
        <summary>点击查看详情</summary>

HTML5 CSS新增特性

评论已关闭

推荐阅读