html网页代码

当提到 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> <style> /* 在这里添加样式 */ body { font-family: Arial, sans-serif; margin: 20px; } h1 { color: #333; } p { line-height: 1.5; } </style> </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> <section id="section1"> <h2>部分一</h2> <p>这是部分一的内容。</p> </section> <section id="section2"> <h2>部分二</h2> <p>这是部分二的内容。</p> </section> <section id="section3"> <h2>部分三</h2> <p>这是部分三的内容。</p> </section> <footer> <p>&copy; 2024 我的网页</p> </footer> </body> </html>

上述代码包含了基本的页面结构,包括文档类型声明 (<!DOCTYPE html>)、html 标签、头部和主体部分。此外,还包含了一些基本的样式定义,通过 <style> 标签嵌入在 head 部分。

html
<img src="image.jpg" alt="描述图片的文本">

链接到外部资源:

html
<a href="https://www.example.com" target="_blank">访问外部链接</a>

创建列表:

html
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> </ul>

使用表格:

html
<table> <tr> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>行1列1</td> <td>行1列2</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> </tr> </table>

添加表单:

html
<form action="/submit" method="post"> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <br> <label for="password">密码:</label> <input type="password" id="password" name="password" required> <br> <input type="submit" value="提交"> </form>

引入 JavaScript:

html
<script> // 在这里添加JavaScript代码 alert('欢迎访问我的网页!'); </script>

使用CSS样式:

html
<style> /* 添加自定义样式 */ body { background-color: #f0f0f0; } a:hover { color: #ff0000; } </style>