参考资料

1. Html转ASP/Perl有哪些
2. HTML/MarkDown互转有哪些
3. HTML 来显示目录链接页面使用 iframe
4. 用于长引用的 HTML
5. HTML 颜色采用的是 RGB 颜色
6. HTML 表格空间
7. HTML 合并单元格
8. HTML id 属性在 JavaScript 中的使用

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

声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。