認(rèn)識(shí)HTML頁(yè)面

頁(yè)就是一個(gè)HTML文件。

1、HTML結(jié)構(gòu)

<!doctype html>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

說(shuō)明：

文檔類型<!DOCTYPE>

<!DOCTYPE html>

標(biāo)簽位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種 HTML 或 XHTML 標(biāo)準(zhǔn)規(guī)范.

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

2、HTML標(biāo)簽和屬性

寫HTML文檔時(shí)，必須遵循HTML語(yǔ)法規(guī)范。HTML文檔實(shí)際上就是一個(gè)文本文件，它由標(biāo)簽和信息組合而成，當(dāng)然標(biāo)簽和信息也不是隨便組合的，需要遵循一定規(guī)則，否則無(wú)法正常顯示。

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

標(biāo)簽關(guān)系
嵌套關(guān)系
<head> <title> </title> </head>
并列關(guān)系
<head></head> <body></body>
標(biāo)簽語(yǔ)義化
所謂標(biāo)簽語(yǔ)義化，就是指標(biāo)簽的含義
作用：

方便代碼閱讀和維護(hù)
具有更好地搜索引擎優(yōu)化
更容易讓瀏覽器或是網(wǎng)絡(luò)爬蟲解析，從而更好地分析網(wǎng)頁(yè)的內(nèi)容

遵循原則：
合適的地方放一個(gè)最為合理的標(biāo)簽。當(dāng)我們?nèi)サ鬋SS之后，網(wǎng)頁(yè)結(jié)構(gòu)依然組織有序，并且有良好的可讀性

有一起學(xué)習(xí)的嗎？請(qǐng)點(diǎn)贊收藏+關(guān)注哦！

言

有時(shí)候，我們想閱讀頁(yè)面中某段精彩的內(nèi)容，但由于頁(yè)面太長(zhǎng)，用戶需要自己滾動(dòng)頁(yè)面，查找起來(lái)非常麻煩，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁(yè)面指定位置，方便用戶的閱讀。

一、純 html 實(shí)現(xiàn)

1. 利用 id 為標(biāo)記的錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。

  <a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div id="aa">a</div>

2. 利用 a 標(biāo)簽的 name 屬性作為錨點(diǎn)

這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。

  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <div id="abb">bbb</div>

注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會(huì)將后者作為錨點(diǎn)。

二、 js 實(shí)現(xiàn)

1. 利用 scrollTo()

window.scrollTo 滾動(dòng)到文檔中的某個(gè)坐標(biāo)。可提供滑動(dòng)效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。

話不多說(shuō)，看下面代碼

「html 部分」:

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

「js 部分」:

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

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

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

2. 利用 scrollIntoView()

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

下面也直接上代碼

「html 部分」:

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

「js 部分」:

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

  function goTo(){
    dd.scrollIntoView()
  }

注意：此功能某些瀏覽器尚在開(kāi)發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。

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

<!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">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
  <p>-------------分隔線-------------</p>
  <a name="aa">hhh</a>
  <div id="aa">aa</div>
  <a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
  <p>-------------分隔線-------------</p>
  <div>bb</div>
  <a id="linkc">平滑滾動(dòng)到 c</a>
  <p>-------------分隔線-------------</p>
  <div id="cc">cc</div>
  <a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 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為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
    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>

效果圖：

超鏈接除了可以鏈接特定的文件和網(wǎng)站之外，還可以鏈接到網(wǎng)頁(yè)內(nèi)的特定內(nèi)容。這可以使用<a>標(biāo)簽name或id屬性，創(chuàng)建一個(gè)文檔內(nèi)部的書簽。也就是說(shuō)，可以創(chuàng)建指向文檔片段的鏈接。

例如，使用以下命名可以將網(wǎng)頁(yè)中的文本，“你好”定義為一個(gè)內(nèi)部書簽，書簽名稱為“name1”。

在網(wǎng)頁(yè)中的其它位置可以插入超鏈接引用該書簽，引用命名如下：

一般網(wǎng)頁(yè)內(nèi)容比較多的網(wǎng)站會(huì)采用這種方法，如一個(gè)電子書網(wǎng)頁(yè)。

下面就使用錨鏈接制造一個(gè)電子書網(wǎng)頁(yè)。

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

（2）在瀏覽器中打開(kāi)文件，預(yù)覽效果圖如下所示，由于內(nèi)容較少，還看不出效果。

（3）為每一個(gè)詩(shī)詞添加內(nèi)容，完善后的代碼如下：

（4）在瀏覽器中打開(kāi)文件，預(yù)覽整體效果圖如下所示：

（5）單擊《書憤二首》，頁(yè)面會(huì)自動(dòng)跳轉(zhuǎn)《書憤二首》對(duì)應(yīng)的內(nèi)容，如下所示：

更多精彩等你來(lái)學(xué)習(xí)哦！

在線咨詢

上一篇：又到積分/權(quán)益盤點(diǎn)時(shí)！
下一篇：HTML表單3（下拉列表、多行文字輸入）-零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商