参考资料

1. HTML 链接语法
2. HTML 强调
3. 如何检测开发者工具是否被禁用？
4. HTML 输出
5. 禁用开发者工具的方法与示例
6. HTML 元素语法
7. Html/JS互转有哪些
8. HTML高度与宽度设置 Iframe

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