Register
> 博客>

html网页模板代码

新星源码网 1月 25日 3 0

HTML网页模板是一个基本的网页结构，通常包括DOCTYPE声明、html元素、head元素和body元素。

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Page Title</title>
    <!-- 在head部分可以添加其他的元信息、样式表、脚本等 -->
    <!-- 例如：<link rel="stylesheet" href="styles.css"> -->
</head>
<body>
    <!-- 在body部分添加网页的内容 -->
    <header>
        <h1>Your Website</h1>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <h2>Section 1</h2>
            <p>This is the content of section 1.</p>
        </section>

        <section>
            <h2>Section 2</h2>
            <p>This is the content of section 2.</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 Your Website. All rights reserved.</p>
    </footer>
    <!-- 在body部分末尾可以添加其他的脚本 -->
    <!-- 例如：<script src="script.js"></script> -->
</body>
</html>

你可以根据自己的需求修改和扩展这个模板。在<head>部分，你可以添加页面的元信息，引入外部样式表和脚本等。在<body>部分，你可以添加页面的实际内容，包括标题、段落、图片等。

链接 (Link):

html
<a href="https://www.example.com">Visit Example Website</a>

图像 (Image):

html
<img src="image.jpg" alt="Description of the image">

表格 (Table):

html
<table>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
    </tr>
    <tr>
        <td>Row 1, Cell 1</td>
        <td>Row 1, Cell 2</td>
    </tr>
    <tr>
        <td>Row 2, Cell 1</td>
        <td>Row 2, Cell 2</td>
    </tr>
</table>

表单 (Form):

html
<form action="/submit" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
</form>

列表 (List):

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

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

嵌套元素:

html
<div>
    <p>This is a paragraph inside a div.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
    </ul>
</div>

注释 (Comment):

html
<!-- This is a comment. Comments are not visible on the web page. -->

Related

热门文章

微海报