---
# System prepended metadata

title: 'HTML、CSS & #ID 錨點的練習'
tags: [JavaScript - 學徒篇]

---

# HTML、CSS & #ID 錨點的練習

[練習網址](https://codepen.io/rrpaqjcq/pen/eYyYJXW)

---------------------

- 程式碼講解:

裏頭有一組 `<ul>` / `<li>` 帶 `<a>` **(錨點)** 連結:

並且三段 `<p>` 段落，分別由 lorem 假字填滿

此範例實際效果要在自己的瀏覽器才看得明白

這邊使用 codepen 方便記錄追蹤

- #id

我的三個 p 段落 id名稱在 HTML是這樣的:

```
    <ul>
        <li>
            <a href="#title1">段落一</a>
        </li>
        <li>
            <a href="#title2">段落二</a>
        </li>
        <li>
            <a href="#title3">段落三</a>
        </li>
    </ul>

// id


 <p id="title1">
     lorem*50
 </p>
 
  <p id="title2">
     lorem*50
 </p>
 
  <p id="title3">
     lorem*50
 </p>
```

此範例重點如下:

id在 錨點下要擷取的話，HTML 語法為:

例如 id = title1 , 打法為: #name

`<a href="#title1">您輸入的任何內容</a>`





###### tags: `JavaScript - 學徒篇`


