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>© 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>