参考资料

1. HTML 内联式
2. HTML 标签
3. HTML 链接语法
4. HTML 内联元素
5. HTML 表格高度和宽度
6. HTML 预期格式文本
7. HTML 合并单元格
8. HTML 符号实体

HTML 书签属性格式化

介绍

HTML 书签属性允许在页面内创建导航点，通过ID和链接实现页面内跳转。

主要标签和属性

1. ID 属性

<h2 id="section1">第一部分</h2>

• 任何HTML元素都可以添加id属性

• id值必须是唯一的

2. 锚链接

<a href="#section1">跳转到第一部分</a>

用法

基本用法

<!-- 定义书签 -->
<div id="bookmark1">...</div>

<!-- 链接到书签 -->
<a href="#bookmark1">跳转到书签1</a>

跨页面链接

<a href="otherpage.html#section2">跳转到其他页面的第二部分</a>

功能

1. 页面内导航

2. 创建目录结构

3. 快速定位长文档内容

4. 跨页面精确跳转

CSS 扩展

1. 样式化锚链接

a[href^="#"] {
  color: blue;
  text-decoration: none;
}

a[href^="#"]:hover {
  text-decoration: underline;
}

2. 平滑滚动效果

html {
  scroll-behavior: smooth;
}

3. 目标样式

:target {
  background-color: yellow;
  border-left: 4px solid blue;
  padding: 0.5em;
}

4. 固定导航栏中的链接

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
  padding: 10px;
}

section {
  padding-top: 60px; /* 为固定导航栏留出空间 */
}