基礎(chǔ)面試02:HTML5為什么只需要最頂部寫!DOCTYPE html?聊聊SGML

TML5 不基于 SGML(我記不住，所以叫它三顧茅廬)，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。

補充：SGML(Standard Generalized Markup Language，即標準通用標記語言)是國際上定義電子文檔和內(nèi)容描述的標準。它源于1969年IBM公司開發(fā)的文檔描述語言GML，GML主要用來解決不同系統(tǒng)中文檔格式不同的問題。后經(jīng)過多年發(fā)展，1986年經(jīng)ISO批準為國際標準ISO8897，并被稱為SGML。
制定SGML的基本思想是把文檔的內(nèi)容與樣式分開。在SGML中，標記分兩種：一種用來描述文檔顯示的樣式，稱為程序標記；另一種用來描述文檔中語句的用途，稱為描述標記。一個SGML文件通常分三個層次：結(jié)構(gòu)、內(nèi)容和樣式。結(jié)構(gòu)為組織文檔的元素提供框架，內(nèi)容是信息本身，樣式控制內(nèi)容的顯示。
SGML的平臺無關(guān)性、結(jié)構(gòu)化、可擴展等特性，使得它使用范圍很廣，被許多大型公司用來創(chuàng)建和發(fā)布信息。

化為最簡：

HTML4.01：

行效果圖

效果

技術(shù)要點

類選擇器

語法：類選擇器名稱 { }

標簽選擇器

語法：標簽名 { }

行內(nèi)元素

常見的行內(nèi)元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其中<span>是最典型的行內(nèi)元素

行內(nèi)元素的特點：

1、相鄰行內(nèi)元素在一行上，一行可以顯示多個。

2、高度，寬度直接設(shè)置無效

3、寬度默認是本身內(nèi)容的寬度

4、行內(nèi)元素只能容納文本或其它行內(nèi)元素

注意：

1、鏈接里不能再放其它鏈接

2、特殊情況<a>鏈接里面可以放塊級元素，但是給<a>轉(zhuǎn)換一下塊級模式最安全。

塊元素

常見的塊元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的塊元素

塊元素的特點：

1、獨占一行。

2、高度，寬度，外邊距以及內(nèi)邊距都可以控制。

3、寬度默認是容器（父級容器的100%）

4、是一個容器及盒子，里面可以放行內(nèi)或者塊級元素

注意：

1、文字類的元素內(nèi)不能使用塊級元素

2、<p>標簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>

3、同理,<h1>--<h6>等都是文字類塊級元素，里面也不能放其它塊級元素

代碼如下：

看個錨點定位的例子

發(fā)現(xiàn)頁面唰的一些就到頂部了，快到我們懵逼了。。。

開始解決

scroll-behavior

CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產(chǎn)生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。

scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。

在網(wǎng)頁默認滾動是在<html>標簽上，移動端大多數(shù)在<body>標簽上。

我們可以這樣加：

html, 
body { scroll-behavior:smooth; }

加了以后的效果如下：

這是錄制的GIF圖，效果沒那么好。大家可以動手試一下，滑動體驗非常不錯。

缺點

兼容性不夠好

當然我們可以通過js來做個類似

Element.scrollIntoView() 方法

DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區(qū)域內(nèi)，通過觸發(fā)滾動容器的定位實現(xiàn)。

DOM元素的scrollIntoView()方法是原生JS 兼容到IE6，兼容性非常好。

參數(shù)如下

{
 behavior: "auto" | "instant" | "smooth", // 默認 auto
 block: "start" | "center" | "end" | "nearest", // 默認 center
 inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}

解釋一下這三個參數(shù)：

behavior 表示滾動方式。auto 表示使用當前元素的 scroll-behavior 樣式。instant 和 smooth 表示直接滾到底和使用平滑滾動。
block 表示塊級元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是豎直方向。start 表示將視口的頂部和元素頂部對齊；center 表示將視口的中間和元素的中間對齊；end 表示將視口的底部和元素底部對齊；nearest 表示就近對齊。
inline 表示行內(nèi)元素排列方向要滾動到的位置。對于默認的 writing-mode: horizontal-tb 來說，就是水平方向。其值與 block 類似。

用法：

html:

<div class="wrap">
 <div onClick="onScrollIntoView()">點擊讓黑色塊到頂部</div>
 <ul class="body">
 <li>1</li>
 <li>2</li>
 <li id="box">我是黑色</li>
 <li>3</li>
 <li>4</li>
 </ul>
</div>

js:

function onScrollIntoView () {
 var element = document.getElementById("box");
 element.scrollIntoView({behavior: "smooth"});
}

效果：

這回大家再也不用害怕做錨點定位啦。

最后我們在說一個關(guān)于頁面滾動問題吧，那就是 返回頂部 功能實現(xiàn)

返回頂部功能實現(xiàn)

我們常用定時器 setInterval 來不斷減去高度。

如：當前距離頂部 1000，我們每10毫秒減50，

var timer = setInterval(function() { // 定時器 每10毫秒執(zhí)行一次
 // 頂部距離 document.body.scrollTop = 1000 
 var speed = 50 // 返回頂部速度 
 document.body.scrollTop = document.body.scrollTop - speed
 if (document.body.scrollTop === 0) { // 返回到達頂部后， 銷毀定時器
 clearInterval(timer)
 }
}, 10)

效果：

大家會發(fā)現(xiàn)，頁面返回是滾動起來很干。沒10毫秒減50. 很平均，在交互上效果并不好。

借鑒上面 scroll-behavior:smooth 的交互效果。緩動的返回頂部。

改一下計算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動起來是不是就平滑了呢？

換算成公式：開始位置 = 開始位置 + (結(jié)束位置 - 開始位置) / 速度

document.body.scrollTop = 1000 + (0 - 1000) / 2

公式太煩了還是上代碼吧：

var onTop = function (a, b, c, d) {
 if (a == b || typeof a != 'number') {
 return
 }
 b = b || 0
 c = c || 2
 
 var speed = function () {
 a = a + (b - b) / c
 
 if (a < 1) {
 d(b, true)
 return
 }
 d(a, false)
 requestAnimationFrame(speed)
 }
 speed()
}

a 開始位置
b 結(jié)束位置
c 速度
d 位置回調(diào)，d(當前的位置值, 否動畫結(jié)束)

調(diào)用：

var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
 target.scrollTop = value
})

效果：

Ps: gif錄制效果不好，大家可以動手寫一下DEMO

在線咨詢

上一篇：HTML常用字體標簽：揭秘HTML字體標簽，讓你的網(wǎng)頁“字”得其樂！
下一篇：肖sir_html之表單標簽

您的項目需求

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

整合營銷服務商