HTML 骨架与头部设置
任何标准的网页都始于基础骨架。
-
<!DOCTYPE html>：声明文档类型，告诉浏览器这是一个 HTML5 标准的网页。 -
<html>标签：根标签，包裹整个页面。代码中使用了<html lang="zh-CN">，明确告诉浏览器和搜索引擎页面内容为简体中文，有助于浏览器自动提示翻译。 -
<head>区域：-
元数据 (
<meta>)：charset="UTF-8"至关重要，它防止了中文字符在浏览器中显示为乱码。 -
<title>：定义了浏览器标签页上显示的文字（即“深海探险日志”）。 -
<style>：用于编写 CSS（层叠样式表），控制页面的视觉表现，如背景颜色、字体大小等。
-
文本排版与层级
网页内容的结构化依赖于合理的标签使用：
-
标题 (
<h1>-<h6>)：-
代码中使用了
<h1>作为主标题（页面正中央），<h2>作为章节标题。 -
知识点：
h1权重最高，通常一个页面只用一次；h2、h3依次递减。浏览器会自动给标题加粗并调整字号。
-
-
段落 (
<p>)：用于包裹普通文本。 -
水平分割线 (
<hr>)：在视觉上创建一条横线，用于区分不同的内容板块（如标题与正文之间）。 -
滚动文字 (
<marquee>)：-
虽然在现代开发中不推荐使用（已废弃），但它是初学者实现“动态公告栏”最简单的方法。
-
代码通过
style属性设置了深绿色背景和白色文字，实现了醒目的新闻播报效果。
-
多媒体资源的插入
网页不仅是文字，图片和视频能极大地丰富体验：
-
图片 (
<img>)：-
src：可以是网络链接（如代码中的 Unsplash 链接），也可以是本地路径（如./images/fish.jpg）。 -
alt：当图片无法加载时显示的文字，对 SEO 和视障用户非常重要。 -
width：控制图片显示的宽度，高度通常会自适应。 -
图注 (
<figure>&<figcaption>)：代码使用了这两个标签包裹图片，这是语义化更好的写法，让图片和下方的文字说明（“图1：...”）形成一个整体。
-
-
视频 (
<video>)：-
controls：必须添加此属性，否则用户无法看到播放/暂停按钮。 -
兼容性提示：在
<video>标签内部可以写一段文字，当旧版浏览器不支持视频播放时，会显示这段文字提醒用户。
-
超链接与锚点导航
<a> 标签是互联网“互联”的核心，代码中展示了四种用法：
-
外部链接：
href="https://..."，配合target="_blank"可以在新标签页打开，防止用户流失。 -
图片链接：将
<img>标签包裹在<a>标签内，实现点击图片跳转（如点击鲸鱼图片跳转百度百科）。 -
锚点链接（页面内跳转）：
-
设置锚点：
<h4 id="footer-contact">（给目标位置一个 ID）。 -
点击跳转：
<a href="#footer-contact">。这实现了从目录直接跳到页脚的功能。
-
-
功能链接：
href="mailto:..."，点击后会自动唤起电脑的邮件客户端。
CSS 样式与美化
代码中展示了三种改变样式的层级：
-
内部样式表（
<head>中的<style>）：-
body { background-color: #e0f7fa; }：给整个页面设置了浅蓝色背景。 -
img { border... }：统一给所有图片加上了圆角和蓝色边框，提高了复用性。
-
-
类选择器（Class）：
-
定义了
.highlight-text，任何加上class="highlight-text"的标签都会变色且加粗。
-
-
内联样式（Inline Style）：
-
直接在标签内写
style="color: red;"。这种方式优先级最高，适合单独修改某一行字的颜色（如“注意：下潜前...”）。
-
VS Code 开发环境特别提示
在 VS Code 中运行此代码时，需特别注意 路径（Path） 问题：
-
相对路径：代码中提到的
./my_ocean_video.mp4表示“当前文件夹下的视频文件”。如果你的视频放在名为video的子文件夹里，路径应改为./video/name.mp4。 -
文件管理：建议创建一个文件夹，将
.html文件、图片文件和视频文件都放在里面，这样能避免文件找不到（图片裂开）的问题。 -
预览技巧：推荐安装 VS Code 插件 "Live Server"。安装后右键点击 HTML 文件选择 "Open with Live Server"，这样当你修改代码并保存时，浏览器会自动刷新，无需手动按 F5。
实验：根据学习的知识，制作一个网页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深海探险日志</title>
<style>
/* 这里是CSS样式区域，用来控制整体外观 */
body {
background-color: #e0f7fa; /* 浅蓝色背景，模拟海洋 */
font-family: "Microsoft YaHei", sans-serif;
}
/* 修改段落文字颜色的样式类 */
.highlight-text {
color: #00008b; /* 深蓝色文字 */
font-weight: bold;
font-size: 18px;
}
/* 给图片加一点边框 */
img {
border: 5px solid #00acc1;
border-radius: 10px;
}
</style>
</head>
<body>
<marquee style="background-color: #006064; color: white; padding: 10px;">
最新消息：我们的潜水艇刚刚在马里亚纳海沟发现了未知生物！点击下方链接查看详情...
</marquee>
<h1 style="text-align: center; color: #006064;">深海探险者中心</h1>
<hr> <h2>第一章：启航准备</h2>
<p>今天是探险的第一天，阳光明媚，海鸥在头顶盘旋。</p>
<p style="color: red; font-style: italic;">注意：下潜前请务必检查氧气瓶剩余含量！</p>
<figure>
<a href="https://baike.baidu.com/item/蓝鲸" target="_blank" title="点击了解蓝鲸">
<img src="https://images.unsplash.com/photo-1582967788606-a171f1080ca8?ixlib=rb-4.0.3&auto=format&fit=crop&w=300&q=80" alt="深海鲸鱼图片" width="300">
</a>
<figcaption>图1：我们在浅海区拍到的鲸鱼</figcaption>
</figure>
<h3>探险装备清单：</h3>
<ul>
<li>深潜器 (型号X-2000)</li>
<li><span style="color: purple;">高强度探照灯</span></li>
<li>应急压缩饼干</li>
<li>水下摄像机</li>
</ul>
<br>
<h2>第二章：深渊的呼唤</h2>
<p>这是我们刚才拍摄到的海底实况录像：</p>
<video width="400" height="300" controls>
<source src="./my_ocean_video.mp4.mp4" type="video/mp4">
你的浏览器不支持播放视频，请升级。
</video>
<br><br>
<div style="background-color: #b2ebf2; padding: 20px;">
<h3>快速导航</h3>
<a href="https://www.bilibili.com/v/technology" target="_blank">📺 去B站看海洋纪录片</a>
<br><br>
<a href="./data/deep_sea_report.pdf">📥 点击下载探险报告</a>
<br><br>
<a href="#footer-contact">👇 跳转到页脚联系我们</a>
</div>
<p class="highlight-text">
深海的奥秘无穷无尽，我们看到的只是冰山一角...
</p>
<br><br><br><br>
<h4 id="footer-contact">联系中心</h4>
<p>地址：太平洋深海观测站 101号</p>
<a href="mailto:captain@ocean.com">给船长发邮件</a>
<br><br>
<a href="#">回到顶部</a>
</body>
</html>
效果展示
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
