HTML5学习简记（更新中~）

发布人：shili8 发布时间：2025-01-24 04:47 阅读次数：0

**HTML5学习简记**

**更新中...**

HTML5是目前最流行的网页开发技术之一，它提供了许多新的功能和特性，例如视频和音频播放器、canvas绘图API、地理定位API等。下面是一些关于HTML5的基本知识和实例。

###1. HTML5的新元素HTML5引入了一些新的元素，例如：

* `

`：定义文档头部区域。
* `

`：定义导航链接区域。
* `

`：定义文档中的一个部分或节。
* `

`：定义独立的内容区域。
* `

`：定义侧边栏区域。
* `

`：定义文档底部区域。

html<!-- header元素 -->
<header>
 <h1>标题</h1>
 <nav>
 <ul>
 <li><a href="#">链接1</a></li>
 <li><a href="#">链接2</a></li>
 </ul>
 </nav>
</header>

<!-- section元素 -->
<section>
 <article>
 <p>这是一个独立的内容区域。</p>
 </article>
 <aside>
 <p>这是一个侧边栏区域。</p>
 </aside>
</section>

<!-- footer元素 -->
<footer>
 <p>&copy;2023</p>
</footer>

###2. HTML5的新属性HTML5引入了一些新的属性，例如：

* `placeholder`：定义输入框的占位符文本。
* `autocomplete`：定义表单域是否应该自动完成。
* `spellcheck`：定义表单域是否应该检查拼写错误。

html<!-- placeholder属性 -->
<input type="text" id="username" name="username" placeholder="请输入用户名">

<!-- autocomplete属性 -->
<form>
 <input type="email" id="email" name="email" autocomplete="on">
</form>

<!-- spellcheck属性 -->
<textarea id="description" name="description" spellcheck="true"></textarea>

###3. HTML5的新APIHTML5提供了一些新的API，例如：

* `canvas`：定义一个用于绘图的元素。
* `video`：定义一个用于播放视频的元素。
* `audio`：定义一个用于播放音频的元素。
* `geolocation`：定义一个用于获取地理位置的API。

html<!-- canvas元素 -->
<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');
 ctx.fillStyle = 'red';
 ctx.fillRect(10,10,50,50);
</script>

<!-- video元素 -->
<video id="myVideo" width="320" height="240" controls>
 <source src="movie.mp4" type="video/mp4">
 Your browser does not support the video tag.
</video>

<script>
 var video = document.getElementById('myVideo');
 video.play();
</script>

<!-- audio元素 -->
<audio id="myAudio" controls>
 <source src="song.mp3" type="audio/mpeg">
 Your browser does not support the audio tag.
</audio>

<script>
 var audio = document.getElementById('myAudio');
 audio.play();
</script>

<!-- geolocation API -->
<button onclick="getLocation()">获取地理位置</button>

<script>
 function getLocation() {
 if (navigator.geolocation) {
 navigator.geolocation.getCurrentPosition(showPosition);
 } else {
 alert("浏览器不支持地理定位API");
 }
 }

 function showPosition(position) {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
 alert("您的位置是：" + latitude + "," + longitude);
 }
</script>

###4. HTML5的新特性HTML5提供了一些新的特性，例如：

* **离线缓存**：定义一个用于缓存网页内容的机制。
* **Web Storage**：定义一个用于存储数据的API。
* **Web Workers**：定义一个用于创建后台线程的API。

html<!-- 离线缓存 -->
<!DOCTYPE html>
<html>
<head>
 <title>离线缓存示例</title>
 <script>
 if ('serviceWorker' in navigator) {
 window.addEventListener('load', function() {
 navigator.serviceWorker.register('/sw.js')
 .then(registration => console.log('Service worker registered'))
 .catch(registrationError => console.error('Service worker registration failed:', registrationError));
 });
 }
 </script>
</head>
<body>
 <h1>离线缓存示例</h1>
</body>
</html>

<!-- Web Storage -->
<!DOCTYPE html>
<html>
<head>
 <title>Web Storage示例</title>
 <script>
 localStorage.setItem('username', 'John Doe');
 var username = localStorage.getItem('username');
 console.log(username);
 </script>
</head>
<body>
 <h1>Web Storage示例</h1>
</body>
</html>

<!-- Web Workers -->
<!DOCTYPE html>
<html>
<head>
 <title>Web Workers示例</title>
 <script>
 var worker = new Worker('worker.js');
 worker.postMessage('Hello, world!');
 worker.onmessage = function(event) {
 console.log(event.data);
 };
 </script>
</head>
<body>
 <h1>Web Workers示例</h1>
</body>
</html>

<script>
// worker.jsself.addEventListener('message', function(event) {
 self.postMessage('Hello, back!');
});
</script>

上面是一些关于HTML5的基本知识和实例。希望这些信息能够帮助你更好地理解HTML5的特性和应用。

上一条：谷歌黑客语法与漏洞寻找

下一条：一文9个步骤带你从0到1入门接口自动化测试！