認識HTML頁面

頁就是一個HTML文件。

1、HTML結構

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標簽位于文檔的最前面，用于向瀏覽器說明當前文檔使用哪種 HTML 或 XHTML 標準規范.

HTML標簽
標識HTML文檔，是所有HTML中標簽的一個根節點。
head標簽
標識頭部區域，用于存放：title,meta,base,style,script,link
title標題
在head標簽中我們必須要設置的標簽，讓頁面擁有一個屬于自己的標題。
body標簽
標識頁面的主體部分，用于存放所有的HTML標簽，如p,h,a,b,u,i,s,em,del,ins,strong,img

2、HTML標簽和屬性

寫HTML文檔時，必須遵循HTML語法規范。HTML文檔實際上就是一個文本文件，它由標簽和信息組合而成，當然標簽和信息也不是隨便組合的，需要遵循一定規則，否則無法正常顯示。

標簽分類
在HTML頁面中，帶有“< >”符號的元素被稱為HTML標簽，如上面提到的 <html>、<head>、<body>都是HTML標簽。根據出現個數不同，分為雙標簽和單標簽
雙標簽
該語法中“<標簽名>”表示該標簽的作用開始，一般稱為“開始標簽（start tag）”，“</標簽名>” 表示該標簽的作用結束，一般稱為“結束標簽（end tag）”。和開始標簽相比，結束標簽只是在前面加了一個關閉符“/”。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" ……> 內容 </標簽名>
單標簽
單標簽也稱空標簽，是指用一個標簽符號即可完整地描述某個功能的標簽。
<標簽名屬性名1="屬性值" 屬性名2="屬性值" 屬性名3="屬性值" …… />

標簽關系
嵌套關系
<head> <title> </title> </head>
并列關系
<head></head> <body></body>
標簽語義化
所謂標簽語義化，就是指標簽的含義
作用：

方便代碼閱讀和維護
具有更好地搜索引擎優化
更容易讓瀏覽器或是網絡爬蟲解析，從而更好地分析網頁的內容

遵循原則：
合適的地方放一個最為合理的標簽。當我們去掉CSS之后，網頁結構依然組織有序，并且有良好的可讀性

有一起學習的嗎？請點贊收藏+關注哦！

言

有時候，我們想閱讀頁面中某段精彩的內容，但由于頁面太長，用戶需要自己滾動頁面，查找起來非常麻煩，很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好，所以我們可以想辦法實現點擊某段文字或者圖片跳轉到頁面指定位置，方便用戶的閱讀。

一、純 html 實現

1. 利用 id 為標記的錨點

這里作為錨點的標簽可以是任意元素。

  <a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標簽的 name 屬性作為錨點

這里作為錨點的標簽只能是 a 標簽。

  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <div id="abb">bbb</div>

注意：當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現（即以 name 為錨點和以 id 為錨點名字相同時），會將后者作為錨點。

二、 js 實現

1. 利用 scrollTo()

window.scrollTo 滾動到文檔中的某個坐標?？商峁┗瑒有Ч刖唧w了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說，看下面代碼

「html 部分」:

  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">c</div>

「js 部分」:

  var linkc = document.querySelector('#linkc')
  var cc = document.querySelector('#cc')

  function to(toEl) {
    // toEl 為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    
    // 計算該 DOM 節點到 body 頂部距離
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)
    
    // 滾動到指定位置
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

2. 利用 scrollIntoView()

Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。

下面也直接上代碼

「html 部分」:

  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">ddd</div>

「js 部分」:

  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開發中，請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂，所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。

下面為了方便看效果，把上面的代碼整理在一起。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 600px;
      height: 300px;
      background-color: pink;
    }
  </style>
</head>
<body>
  <a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標簽的錨點</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
  <p>-------------分隔線-------------</p>
  <div id="dd">dd</div>
  <p>-------------分隔線-------------</p>
  <div></div>
</body>
<script>
  var cc = document.querySelector('#cc')
  var linkc = document.querySelector('#linkc')

  function to(toEl) {
    //ele為指定跳轉到該位置的DOM節點
    let bridge = toEl;
    let body = document.body;
    let height = 0;
    do {
      height += bridge.offsetTop;
      bridge = bridge.offsetParent;
    } while (bridge !== body)

    console.log(height)
    window.scrollTo({
      top: height,
      behavior: 'smooth'
    })
  }

  linkc.addEventListener('click', function () {
    to(cc)
  });

</script>
<script>
  var dd = document.querySelector('#dd')

  function goTo(){
    dd.scrollIntoView()
  }
</script>
</html>

效果圖：

超鏈接除了可以鏈接特定的文件和網站之外，還可以鏈接到網頁內的特定內容。這可以使用<a>標簽name或id屬性，創建一個文檔內部的書簽。也就是說，可以創建指向文檔片段的鏈接。

例如，使用以下命名可以將網頁中的文本，“你好”定義為一個內部書簽，書簽名稱為“name1”。

在網頁中的其它位置可以插入超鏈接引用該書簽，引用命名如下：

<a href="#name">使用內部書簽</a>

一般網頁內容比較多的網站會采用這種方法，如一個電子書網頁。

下面就使用錨鏈接制造一個電子書網頁。

（1）編寫代碼如下圖所示：

（2）在瀏覽器中打開文件，預覽效果圖如下所示，由于內容較少，還看不出效果。

（3）為每一個詩詞添加內容，完善后的代碼如下：

（4）在瀏覽器中打開文件，預覽整體效果圖如下所示：

（5）單擊《書憤二首》，頁面會自動跳轉《書憤二首》對應的內容，如下所示：

更多精彩等你來學習哦！

在線咨詢

上一篇：又到積分/權益盤點時！
下一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎自學網頁制作

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商