示例1：最基础的HTML网页结构
这个例子展示了任何HTML文件都必须具备的骨架,它非常简单，但包含了所有核心元素。
（图片来源网络，侵删）
文件名: index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">我的第一个网页</title>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个段落，包含了<b>粗体</b>和<i>斜体</i>文本。</p>
</body>
</html>
代码解释:
<!DOCTYPE html>: 声明文档类型，告诉浏览器这是一个HTML5文档。<html lang="zh-CN">: 根元素，包裹整个页面内容。lang属性指定了页面的语言，有助于搜索引擎和屏幕阅读器。<head>: 包含页面的元数据（metadata），这些数据不会直接显示在页面上，但提供关于页面的信息。<meta charset="UTF-8">: 声明字符编码为UTF-8，可以正确显示中文等大部分语言。<meta name="viewport" ...>: 响应式设计必需的标签，确保在移动设备上正确缩放。<title>: 页面的标题，会显示在浏览器标签栏中，也是搜索引擎优化的关键。
<body>: 包含所有可见的页面内容，如标题、段落、图片、链接等。<h1>: 一级标题，最重要的标题。<p>: 段落标签。<b>: 粗体文本（语义上只是强调样式）。<i>: 斜体文本（语义上只是强调样式）。
示例2：带样式的个人简介页面
这个例子引入了CSS（层叠样式表），用于美化页面，我们将使用内部样式表（<style>标签）来编写CSS。
文件名: profile.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">个人简介 - 张三</title>
<style>
/* 全局样式 */
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
background-color: #f4f4f9;
color: #333;
margin: 0;
padding: 20px;
line-height: 1.6;
}
/* 容器样式 */
.container {
max-width: 800px;
margin: 20px auto;
background-color: #ffffff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 标题样式 */
h1 {
color: #0056b3;
border-bottom: 2px solid #e0e0e0;
padding-bottom: 10px;
}
/* 头像样式 */
.avatar {
width: 150px;
height: 150px;
border-radius: 50%; /* 使图片变为圆形 */
float: right; /* 图片靠右浮动 */
margin: 0 0 20px 20px; /* 外边距 */
border: 5px solid #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
/* 清除浮动，防止父元素高度塌陷 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 链接样式 */
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container clearfix">
<img src="https://via.placeholder.com/150" alt="张三的头像" class="avatar">
<h1>你好，我是张三</h1>
<p>我是一名热爱前端开发的工程师，专注于创建美观、高效且用户友好的网站，我对HTML、CSS和JavaScript充满热情，并持续学习最新的Web技术。</p>
<h2>技能</h2>
<ul>
<li>HTML5 & CSS3</li>
<li>JavaScript (ES6+)</li>
<li>响应式设计</li>
<li>版本控制</li>
</ul>
<h2>联系方式</h2>
<p>如果你想与我联系，请通过以下方式：</p>
<p>
<a href="mailto:zhangsan@example.com">发送邮件</a> |
<a href="https://github.com/zhangsan" target="_blank">访问我的GitHub</a>
</p>
</div>
</body>
</html>
代码解释:
<style>: 在<head>标签内，用于编写CSS代码。- CSS选择器:
body: 选择<body>元素，设置全局字体、背景色等。.container: 选择class属性为container的元素，将其设置为内容容器，并添加了居中、背景色、圆角和阴影效果。h1,p,ul,li: 选择对应的HTML标签，进行样式定义。.avatar: 选择class为avatar的图片，设置了圆形、浮动等样式。a:hover: 这是一个伪类，当鼠标悬停在<a>链接上时触发，改变下划线样式。
- 新HTML元素:
<div>: 一个通用的容器块，用于组织和布局页面内容。<img>: 图片标签。src是图片地址，alt是替代文本（当图片无法显示时出现，对SEO和无障碍访问很重要）。<ul>: 无序列表。<li>: 列表项。<a>: 超链接。href指定链接地址，target="_blank"表示在新标签页中打开链接。
示例3：带交互功能的待办事项列表
这个例子引入了JavaScript,用于实现页面的动态交互功能，我们将使用内部脚本（<script>标签）来编写JS。
文件名: todo.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">待办事项列表</title>
<style>
/* 基础样式，与上一个示例类似 */
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
color: #333;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
margin: 0;
padding-top: 50px;
}
.todo-container {
width: 90%;
max-width: 500px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
color: #2c3e50;
}
#todo-input {
width: 70%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
#add-btn {
width: 25%;
padding: 10px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#add-btn:hover {
background-color: #2980b9;
}
#todo-list {
list-style-type: none;
padding: 0;
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px;
border-bottom: 1px solid #eee;
background-color: #fdfdfd;
}
.todo-item.completed {
text-decoration: line-through;
color: #aaa;
background-color: #f9f9f9;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.delete-btn:hover {
background-color: #c0392b;
}
</style>
</head>
<body>
<div class="todo-container">
<h1>我的待办事项</h1>
<input type="text" id="todo-input" placeholder="输入新任务...">
<button id="add-btn">添加</button>
<ul id="todo-list">
<!-- 待办事项将通过JavaScript动态添加到这里 -->
</ul>
</div>
<script>
// 获取页面上的元素
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// 为“添加”按钮添加点击事件监听器
addBtn.addEventListener('click', addTodo);
// 为输入框添加“回车”键事件监听器
todoInput.addEventListener('keypress', function(event) {
// 检查是否按下了“Enter”键
if (event.key === 'Enter') {
addTodo();
}
});
// 添加待办事项的函数
function addTodo() {
const todoText = todoInput.value.trim(); // 获取输入值并去除首尾空格
if (todoText === '') {
alert('请输入待办事项！');
return;
}
// 创建列表项
const li = document.createElement('li');
li.className = 'todo-item';
// 创建任务文本
const span = document.createElement('span');
span.textContent = todoText;
// 创建完成按钮
const completeBtn = document.createElement('button');
completeBtn.textContent = '完成';
completeBtn.className = 'complete-btn';
completeBtn.addEventListener('click', function() {
li.classList.toggle('completed');
});
// 创建删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.textContent = '删除';
deleteBtn.className = 'delete-btn';
deleteBtn.addEventListener('click', function() {
todoList.removeChild(li);
});
// 将元素添加到列表项中
li.appendChild(span);
li.appendChild(completeBtn);
li.appendChild(deleteBtn);
// 将列表项添加到列表中
todoList.appendChild(li);
// 清空输入框
todoInput.value = '';
}
</script>
</body>
</html>
代码解释:
- HTML部分:
- 新增了
<input type="text">用于输入文本。 - 新增了
<button>用于触发添加操作。 <ul id="todo-list">用于存放动态生成的待办事项。id是唯一的，方便JavaScript通过document.getElementById()找到它。
- 新增了
- CSS部分:
- 新增了针对输入框、按钮和待办事项列表项的样式，使其看起来更美观。
.completed类用于标记已完成的任务，通过添加删除线和灰色背景来区分。
- JavaScript部分:
<script>: 通常放在<body>标签的末尾，这样可以确保在脚本执行前，HTML元素已经被加载完毕。document.getElementById(): 通过元素的ID来获取DOM（文档对象模型）元素。addEventListener(): 为元素添加事件监听器，例如'click'（点击）和'keypress'（键盘按下）。function addTodo(): 定义一个函数来封装添加待办事项的逻辑。document.createElement(): 动态创建新的HTML元素（如<li>,<span>,<button>）。element.textContent: 设置或获取元素的文本内容。element.className: 设置元素的class属性。element.appendChild(): 将一个子元素添加到父元素中。element.classList.toggle(): 切换元素的类名，如果类名存在则移除，不存在则添加。parentElement.removeChild(): 从父元素中移除一个子元素。
如何使用这些代码
- 创建文件: 在你的电脑上创建一个新的文件夹，
my-website。 - 保存代码: 在文件夹中分别创建三个文件：
index.html,profile.html,todo.html。 - 复制粘贴: 将上面对应的代码分别复制并粘贴到对应的文件中。
- 查看效果:
- 对于
profile.html，你可以直接用浏览器打开它，如果想用本地的图片替换头像，只需将一张图片（my-avatar.jpg）放在同一个文件夹下，然后将<img src="..." />中的地址改为"my-avatar.jpg"即可。 - 对于
todo.html，直接用浏览器打开，你就可以看到一个可以正常工作的待办事项应用了。
- 对于
这些示例从静态到动态,从简单到复杂，希望能为你提供一个清晰的HTML网页开发学习路径，你可以基于这些代码进行修改和扩展，创造出更丰富的功能。
