企业官网建设流程全解析

大家好，我是Java1234_小锋老师，最近更新 《一天学会 HTML5 视频教程(无废话版) 》专辑，感谢大家支持。

本课程主要介绍和讲解 HTML5简介，文档结构，文本与排版标签，链接与图片，列表标签，表格标签，表单基础以及增强，容器与页面结构基础，语义化标签，音频与视频，Canvas 基础以及动画入门，SVG 基础，Web Storage 本地存储 ，文件 API，拖放 API，地理定位 API，Web Workers 入门。

视频教程+课件+源码 打包下载 ：

链接：https://pan.baidu.com/s/1o-zRfndo1HHrS_uFroOiCw?pwd=1234
提取码：1234

HTML5（在第二阶段目录里）

HTML5 链接与图片

一、超链接<a>

用来创建超链接，核心属性是 href，表示链接目标。

1.href

<ahref="https://www.example.com">外部网站</a><ahref="about.html">站内页面</a><ahref="mailto:test@example.com">发邮件</a><ahref="tel:+8613800000000">打电话</a><ahref="file.pdf"download>下载文件</a>

• href="https://..."：完整网址。
• href="about.html"：相对路径，链接到当前目录下的页面。
• href="mailto:..."：打开邮件客户端。
• href="tel:..."：手机拨号。
• download：提示下载。

2.target

控制链接在哪里打开：

示例：

<ahref="https://www.example.com"target="_blank"rel="noopener noreferrer">新窗口打开</a>

注意：使用target="_blank"时，建议加上：

rel="noopener noreferrer"

防止新页面通过window.opener操作原页面，并避免发送 Referer。

3. 锚点链接

锚点用于跳转到页面中的某个位置。HTML5 推荐用id。

<ahref="#section1">跳到第一部分</a><h2id="section1">第一部分</h2>

跨页面锚点：

<ahref="about.html#contact">跳到“关于我们”的联系方式</a>

在about.html中：

<h2id="contact">联系方式</h2>

点击后 URL 会变成类似：

about.html#contact

也可以做“回到顶部”：

<ahref="#top">回到顶部</a><h1id="top">页面标题</h1>

二、图片<img>

是空元素，不需要闭合标签。

<imgsrc="images/logo.png"alt="公司 Logo"title="公司 Logo"width="200"height="80">

1.src

图片的路径或 URL，必需。

<imgsrc="images/pic.jpg"alt="风景图"><imgsrc="https://example.com/pic.jpg"alt="网络图片">

2.alt

替代文本，非常重要。

• 图片加载失败时显示。
• 屏幕阅读器会读出来。
• 有利于 SEO。
• 装饰性图片可以写空：alt=""。

<imgsrc="logo.png"alt="公司 Logo"><imgsrc="line.png"alt="">

3.title

鼠标悬停时显示的提示文字。

<imgsrc="logo.png"alt="公司 Logo"title="返回首页">

注意：title不是alt的替代品，无障碍主要依赖alt。

4.width和height

设置图片宽高，单位默认是像素，HTML 属性中只写数字，不写px。

<imgsrc="logo.png"alt="Logo"width="200"height="80">

建议：

• 只设一个宽或高，另一个按比例自动缩放。
• 或者用 CSS 控制。
• 同时设置width和height有助于浏览器提前预留空间，减少页面跳动。
• 响应式图片常用：

img{max-width:100%;height:auto;display:block;}

HTML5 还支持响应式图片：

<imgsrc="small.jpg"srcset="small.jpg 480w, large.jpg 1200w"sizes="(max-width: 600px) 480px, 1200px"alt="示例图片"loading="lazy">

loading="lazy"可以实现懒加载。

“HTML5 图片懒加载”简单说就是：图片不要一开始全部加载，等用户快滚动到它、快要看见它时，再加载这张图片。

三、相对路径与绝对路径

1. 绝对路径

绝对路径通常指完整 URL，或从网站根目录开始的路径。

完整 URL：

<ahref="https://www.example.com/about.html">关于我们</a><imgsrc="https://www.example.com/images/logo.png"alt="Logo">

根路径：

<imgsrc="/images/logo.png"alt="Logo">

/images/logo.png表示从网站根目录开始找，不是从当前文件所在目录开始。

2. 相对路径

相对路径是相对于当前 HTML 文件的位置。

假设目录结构：

project/ ├── index.html ├── about.html ├── images/ │ └── logo.png └── pages/ └── contact.html

在index.html中：

<imgsrc="images/logo.png"alt="Logo"><ahref="about.html">关于我们</a><ahref="pages/contact.html">联系我们</a>

在pages/contact.html中访问图片：

<imgsrc="../images/logo.png"alt="Logo">

常用符号：

注意：

• 相对路径是相对于当前 HTML 文档，不是相对于 CSS 文件。CSS 中的url()是相对于 CSS 文件自身。
• 不要使用本地绝对路径，如C:\Users\...\logo.png，上线后会失效。
• 路径大小写要统一，Linux 服务器区分大小写。

四、综合示例

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8"><title>HTML5 链接与图片</title></head><body><h1id="top">HTML5 链接与图片</h1><p><ahref="#pic">跳转到图片</a>|<ahref="about.html">关于我们</a>|<ahref="https://python222.java1234.com"target="_blank">python222</a></p><h2id="pic">图片示例</h2><imgsrc="images/logo.jpg"alt="网站 Logo"title="网站 Logo 2"width="200"height="80"><p><ahref="#top">回到顶部</a></p></body></html>

一句话总结：
<a>负责跳转，重点是href、target和#id锚点；<img>负责显示图片，重点是src、alt、title和宽高；路径要分清绝对路径、根路径和相对路径。