HTML笔记

First Post:

2024-07-30

Last Update:

2024-09-30

如何使用a和id实现页面内跳转

要在HTML中使用ID实现页面内的跳转，你可以使用`<a>`标签配合`href`属性来指向目标元素的ID。这里有一个简单的例子来说明如何操作：

1. **定义一个带有ID的目标元素**：
   ```html
   <div id="target">
     这是目标位置的内容。
   </div>
   ```

2. **创建一个链接到该目标元素的锚点**：
   ```html
   <a href="#target">点击跳转到目标位置</a>
   ```

将这两个部分组合起来，你的HTML文件看起来可能是这样的：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面内跳转示例</title>
</head>
<body>
  <h1>页面顶部</h1>
  <p>这是页面的起始部分。</p>
  
  <!-- 创建一个链接到目标位置 -->
  <a href="#target">点击跳转到目标位置</a>
  
  <p>这里是其他内容...</p>
  
  <!-- 定义带有ID的目标位置 -->
  <div id="target">
    <h2>这是目标位置</h2>
    <p>这是目标位置的内容。</p>
  </div>
</body>
</html>
```

当用户点击“点击跳转到目标位置”这个链接时，浏览器会滚动到ID为`target`的元素所在的位置。

如果你希望在点击链接后平滑地滚动到目标位置，可以利用JavaScript或者HTML5中的`scroll-behavior: smooth;` CSS属性来实现平滑滚动效果。例如，在CSS中添加如下样式：

```css
html {
  scroll-behavior: smooth;
}
```

这样，当用户点击链接时，页面将会以平滑的方式滚动到目标位置。

link标签rel属性的prefetch

预加载，在渲染之前提前解析好DNS拿好资源以加快加载速度

浏览器渲染过程

下载index.html
解析
下载相关资源（如css）
https://www.51cto.com/article/771596.html

text-align

对行内级元素进行居中处理（div这种块级元素要改成==display:inline-block==）

em

用作font-size时是父元素的X倍

定位，你把一个元素一定位的话，它可能这个包含块就不再是它的父元素了

文本居中显示line-height

设置文本的行高，行距=行高-文本/2，可以用来设置居中

直接子代选择器

<div class="home">
  <span
    >Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium
    repellat quasi cumque, odit accusamus voluptates velit laudantium
    facere, ratione a, molestias impedit deserunt ipsum delectus unde maxime
    officia minus dolores.</span
  >
  <div class="box"><span>草</span></div>
</div>

.home > span {
  color: red;
  padding: 20px;
  margin: 20px;
}

只选中了直接相连的span，如果删除>换成空格则为后代选择器，两者都能选中

选择器权重

block-inline

block块级元素可以设置宽高、inline行内级不行，宽高取决于内容的大小，但是行内替换元素可以设置，例如==img==、==input==。
==inline-block==有两者的特性，既不占一行，又能设置宽高

隐藏html元素的四种方法

border-box

border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements. box-sizing: border-box is the default styling that browsers use for the <table>, <select>, and <button> elements, and for <input> elements whose type is radio, checkbox, reset, button, submit, color, or search.

border-box 告诉浏览器在您为元素的宽度和高度指定的值中考虑任何边框和填充。如果将元素的宽度设置为 100 像素，则该 100 像素将包含您添加的任何边框或填充，并且内容框将收缩以吸收该额外宽度。这通常使调整元素大小变得更加容易。box-sizing：border-box 是浏览器用于 <table>、<select> 和 <button> 元素的默认样式，以及类型为 radio、checkbox、reset、button、submit、color 或 search 的 <input> 元素的默认样式。