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小时内与您取得联系。