参考资料

1. Html转ASP/Perl有哪些
2. HTML 表格头部、主体、页脚
3. HTML 用于双向重写
4. HTML 音频(Audio)
5. HTML 书签属性格式化
6. http-equiv="expires" 模拟 HTTP 头部中的 Expires 字段
7. 如何判断一个网站是否被采集
8. HTML "计算机输出"标记

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; /* 为固定导航栏留出空间 */
}