整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5 不基于 SGML(我記不住，所以叫它三顧茅廬)，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。
補充：SGML(Standard Generalized Markup Language，即標準通用標記語言)是國際上定義電子文檔和內容描述的標準。它源于1969年IBM公司開發的文檔描述語言GML，GML主要用來解決不同系統中文檔格式不同的問題。后經過多年發展，1986年經ISO批準為國際標準ISO8897，并被稱為SGML。 制定SGML的基本思想是把文檔的內容與樣式分開。在SGML中，標記分兩種：一種用來描述文檔顯示的樣式，稱為程序標記；另一種用來描述文檔中語句的用途，稱為描述標記。一個SGML文件通常分三個層次：結構、內容和樣式。結構為組織文檔的元素提供框架，內容是信息本身，樣式控制內容的顯示。 SGML的平臺無關性、結構化、可擴展等特性，使得它使用范圍很廣，被許多大型公司用來創建和發布信息。
化為最簡：
HTML4.01：
效果
語法： 類選擇器名稱 { }
語法：標簽名 { }
常見的行內元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<ins>,<u>,<span>等，其 中<span>是最典型的行內元素
行內元素的特點：
1、相鄰行內元素在一行上，一行可以顯示多個。
2、高度，寬度直接設置無效
3、寬度默認是本身內容的寬度
4、行內元素只能容納文本或其它行內元素
注意：
1、鏈接里不能再放其它鏈接
2、特殊情況<a>鏈接里面可以放塊級元素，但是給<a>轉換一下塊級模式最安全。
常見的塊元素有<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等，其中<div>是最典型的塊元素
塊元素的特點：
1、獨占一行。
2、高度，寬度，外邊距以及內邊距都可以控制。
3、寬度默認是容器（父級容器的100%）
4、是一個容器及盒子，里面可以放行內或者塊級元素
注意：
1、文字類的元素內不能使用塊級元素
2、<p>標簽主要用于存放文字，因此<p>里面不能放塊級元素，特別是不能放<div>
3、同理,<h1>--<h6>等都是文字類塊級元素，里面也不能放其它塊級元素
看個錨點定位的例子
發現頁面唰的一些就到頂部了，快到我們懵逼了。。。
開始解決
CSS屬性 scroll-behavior 為一個滾動框指定滾動行為，其他任何的滾動，例如那些由于用戶行為而產生的滾動，不受這個屬性的影響。在根元素中指定這個屬性時，它反而適用于視窗。
scroll-behavior:smooth 寫在滾動容器元素上，可以讓容器的滾動變得平滑。
在網頁默認滾動是在<html>標簽上，移動端大多數在<body>標簽上。
我們可以這樣加：
html,
body { scroll-behavior:smooth; }
加了以后的效果如下：
這是錄制的GIF圖，效果沒那么好。 大家可以動手試一下，滑動體驗非常不錯。
兼容性不夠好
當然我們可以通過js來做個類似
DOM元素的scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內，通過觸發滾動容器的定位實現。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6，兼容性非常好。
參數如下
{
behavior: "auto" | "instant" | "smooth", // 默認 auto
block: "start" | "center" | "end" | "nearest", // 默認 center
inline: "start" | "center" | "end" | "nearest", // 默認 nearest
}
解釋一下這三個參數：
用法：
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"});
}
效果：
這回大家再也不用害怕做錨點定位啦。
最后我們在說一個關于頁面滾動問題吧，那就是 返回頂部 功能實現
我們常用定時器 setInterval 來不斷減去高度。
如：當前距離頂部 1000， 我們每10毫秒減50，
var timer = setInterval(function() { // 定時器 每10毫秒執行一次
// 頂部距離 document.body.scrollTop = 1000
var speed = 50 // 返回頂部速度
document.body.scrollTop = document.body.scrollTop - speed
if (document.body.scrollTop === 0) { // 返回到達頂部后， 銷毀定時器
clearInterval(timer)
}
}, 10)
效果：
大家會發現，頁面返回是滾動起來很干。 沒10毫秒減50. 很平均，在交互上效果并不好。
借鑒上面 scroll-behavior:smooth 的交互效果。 緩動的返回頂部。
改一下計算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 這樣滑動起來是不是就平滑了呢？
換算成公式：開始位置 = 開始位置 + (結束位置 - 開始位置) / 速度
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()
}
調用：
var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
target.scrollTop = value
})
效果：
Ps: gif錄制效果不好，大家可以動手寫一下DEMO
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
