Web前端学习笔记

一、超链接与锚点

1. 基本超链接

使用 <a> 标签创建超链接，通过 href 属性指定目标地址。

<a href="block.html" title="block">Basics of Web Design Textbook Companion</a>

• href: 指定链接的目标URL。
• title: 为链接提供额外信息，鼠标悬停时会显示。

2. 块级元素链接

在HTML5中，<a> 标签可以包裹块级元素（如 <header>, <h1>, <p>），使整个区域都成为可点击的链接。

<header>
    <a href="http://www.w3.org/TR/html-markup">
        <h1>HTML5 Reference</h1>
        <p>Bookmark this site for a handy HTML5 reference.</p>
    </a>
</header>

3. 站点导航

通常使用无序列表 <ul> 结合 <nav> 标签来构建导航菜单。

<nav>
    <b>
        <a href="学生会主页.html">主页</a> &nbsp;
        <a href="服务页面.html">学生服务</a> &nbsp;
        <a href="联系方式页面.html">联系方式</a>
    </b>
</nav>

4. 页面内锚点链接

通过在目标元素上设置 id 属性，并在链接的 href 中使用 #id值，实现页面内的快速跳转。

<!-- 链接到页面顶部 -->
<a href="#top">Back to Top</a>

<!-- 目标位置 -->
<h1 id="top">Frequently Asked Questions</h1>

二、图片标签 <img>

1. 常用属性

属性名称	属性值说明
src	图片的URL或文件名，必须有。
alt	图片的替代文本（描述），必须有。当图片无法显示时，会显示此文本，也用于无障碍访问。
width	以像素或百分比为单位的图片宽度。
height	以像素或百分比为单位的图片高度。
loading	eager: 默认，立即加载图片。 lazy: 延迟加载，直到用户滚动到图片附近位置才加载，可提升页面性能。
srcset	提供一组不同分辨率的图片，让浏览器根据设备特性选择最合适的图片显示，实现灵活响应。

2. 图片使用示例

<img src="缩略图.jpg" height="100" width="100" alt="日落">