Register
> 博客>

html5网页制作代码大全

新星源码网 1月 31日 2 0

HTML5 是一种用于构建网页的标记语言，它提供了丰富的功能和元素，可以创建各种类型的网页。基本结构：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- Your content goes here -->
</body>
</html>

标题与段落：

html
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>

链接与图片：

html
<a href="https://www.example.com">Visit Example</a>
<img src="image.jpg" alt="Description">

列表：

html
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>

<ol>
    <li>Item 1</li>
    <li>Item 2</li>
</ol>

表格：

html
<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
    <tr>
        <td>Jane</td>
        <td>30</td>
    </tr>
</table>

表单：

html
<form action="/submit-form" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username"><br><br>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password"><br><br>
    
    <input type="submit" value="Submit">
</form>

音频与视频：

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

<video controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video element.
</video>

Canvas：

html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000;"></canvas>

当涉及到更复杂的 HTML5 功能时，你可能还会涉及到一些其他的元素和技术。地理位置：

html
<button onclick="getLocation()">Get Location</button>
<p id="demo"></p>

<script>
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        document.getElementById("demo").innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    document.getElementById("demo").innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
}
</script>

拖放：

html
<div id="draggable" draggable="true" ondragstart="drag(event)">Drag me</div>
<div id="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</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>

Web 存储：

html
<!-- Local Storage -->
<script>
localStorage.setItem("username", "john_doe");
var username = localStorage.getItem("username");
</script>

<!-- Session Storage -->
<script>
sessionStorage.setItem("session_id", "123456");
var session_id = sessionStorage.getItem("session_id");
</script>

Web Workers：

html
<script>
var worker = new Worker("worker.js");
worker.onmessage = function(event) {
    console.log("Message received from worker: " + event.data);
};
worker.postMessage("Hello Worker!");
</script>

SVG (可缩放矢量图形)：

html
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

这些示例涵盖了 HTML5 中一些更高级的功能和技术，包括地理位置、拖放操作、Web 存储、Web Workers 以及 SVG 等。你可以根据项目需求和兴趣进一步探索这些功能，并结合其他技术来创建更加复杂和交互性强的网页应用程序。

Related

热门文章

微海报