一个完整的html代码

html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的网页</title> <!-- 在<head>标签中可以添加其他元信息、样式表和脚本等 --> <!-- 例如:<link rel="stylesheet" href="styles.css"> --> </head> <body> <!-- 在<body>标签中添加网页内容 --> <header> <h1>欢迎来到我的网页</h1> </header> <nav> <ul> <li><a href="#section1">部分一</a></li> <li><a href="#section2">部分二</a></li> <li><a href="#section3">部分三</a></li> </ul> </nav> <main> <section id="section1"> <h2>部分一</h2> <p>这是第一部分的内容。</p> </section> <section id="section2"> <h2>部分二</h2> <p>这是第二部分的内容。</p> </section> <section id="section3"> <h2>部分三</h2> <p>这是第三部分的内容。</p> </section> </main> <footer> <p>&copy; 2024 我的网页. All rights reserved.</p> </footer> </body> </html>

这是一个基本的HTML5文档结构,包括了<!DOCTYPE html>声明、<html>元素、<head>元素和<body>元素。在<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>我的网页</title> <!-- 引入外部样式表 --> <link rel="stylesheet" href="styles.css"> <!-- 在<head>中引入JavaScript脚本 --> <script src="script.js" defer></script> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <nav> <ul> <li><a href="#section1">部分一</a></li> <li><a href="#section2">部分二</a></li> <li><a href="#section3">部分三</a></li> </ul> </nav> <main> <section id="section1"> <h2>部分一</h2> <p>这是第一部分的内容。</p> </section> <section id="section2"> <h2>部分二</h2> <p>这是第二部分的内容。</p> <!-- 添加一个简单的表单 --> <form action="submit_form.php" method="post"> <label for="name">姓名:</label> <input type="text" id="name" name="name" required> <br> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <br> <input type="submit" value="提交"> </form> </section> <section id="section3"> <h2>部分三</h2> <p>这是第三部分的内容。</p> <!-- 添加一个简单的图像 --> <img src="image.jpg" alt="美丽的图片"> </section> </main> <footer> <p>&copy; 2024 我的网页. All rights reserved.</p> </footer> </body> </html>

这个例子中,我们引入了外部的样式表和JavaScript脚本。在主体部分,我们在第二部分添加了一个简单的表单和在第三部分添加了一个图像。你可以根据需要进一步扩展和修改这个模板。

标签