自闭和标签和伪元素

html简史

HTML 是 Web 统一语言,这些容纳在尖括号里的简单标签,构成了现在的 Web。1991 年, Tim Berners-Lee 编写了一份叫作 “HTML 标签”的文档,里面包含了大约20个用来标记网页的 HTML 标签。他直接借用 SGML 的标记格式,也就是后来咱们看到的 HTML 标记的格式。本文讲述了 HTML 这门 Web 标记语言的发展简史。

从 IETF 到 W3C: HTML 4 之路

  • HTML 1 并未曾存在,
  • HTML 的第一个官方版本就是由 IETF (互联网工程任务组) 推出的 HTML 2.0。问世以前,这个版本中的不少细则已经被实现,好比,1994年的 Mosaic 浏览器已经实现了在文档中嵌入图片的方法,后来 HTML 2.0 便吸纳了 img 这个标签。
  • 后来,W3C 取代 IETF 的角色,成为 HTML 的标准组织,
  • 90年代的后半叶,HTML 的版本被频繁修改,直到1999年的 HTML 4.01,至此,HTML 到达了它的第一个拐点。

HTML4以后,出现了一些分歧。html

XHTML 1: XML 风格的 HTML

HTML HTML 4.01 以后的第一个修订版本就是 XHTML 1.0,其中 X 表明 “eXtensible” ,扩展,固然也有人将之解读为 “eXtreme”,极端。XHTML 1.0 是基于 HTML 4.01 的,并无引入任何新标签或属性,惟一的区别是语法,HTML 对语法比较随便,而 XHTML 则要求 XML 般的严格语法。html5

  使用严格的语法规范并不是坏事,要求开发者使用单一的代码风格,好比,HTML 4.01 容许你使用大写或小写字母标识标记元素和属性,XHTML 则只容许小写字母。XHTML 1.0 的推出恰好碰上了 CSS 的崛起,Web 开发设计者们开始意识到 Web 标准问题,基于 XHTML 的严格语法规范被视为编写 HTML 代码的最佳实践。ios

  因而,W3C 推出 XHTML 1.1web

  若是说 XHTML 1.0 是 XML 风格的 HTML,XHTML 1.1 则是货真价实的 XML。这意味着 XHTML 1.1 没法使用 text/html mime-type 直接输出,然而,若是 Web 开发者使用 XML mime-type,则当时的主流浏览器,IE 则压根不支持。看上去,W3C 彷佛正在与当时的 Web 脱节。浏览器

出力不讨好的 XHTML 2

  对 W3C 而言,到了 HTML 4 已是功德圆满,他们的下一步工做是 XHTML 2,但愿将 Web 带向 XML 的光明将来。虽然 XHTML 2 听上去和 XHTML 1 相似,它们却有不少差异,XHTML 2 不向前兼容,甚至不兼容以前的 HTML。它是一种全新的语言,赤条条来去无牵挂。这实在是一场灾难。搜索引擎

WHATWG:与 W3C 决裂

  W3C 闭门造车的做风引发了一些人的不满,来自 Opera, Apple, 以及 Mozilla 的表明开始表达反对声音。2004年,Opera 的 Ian Hickson 提议在 HTML 基础上进行扩展以适应新的 Web 应用,该提议遭到 W3C 的拒绝。因而,他们自发组织成立了超文本应用技术工做组,就是 WHATWG设计

从 Web Apps 1.0 到 HTML5

  从一开始,WHATWG 就和 W3C 走不一样的路线,W3C 对问题的讨论是集体投票,而 WHATWG 则由主笔 Ian Hickson 定度。表面上看,W3C 更民主,然而事实上,各类内部纷争会使一些决议限于泥潭,在 WHATWG,事情的进展会更容易,不过,主笔的权力并不是无限大,他们的委员会能够对那些过于偏执的主笔进行弹劾。code

  一开始,WHATWG 的主要工做包括两部分,Web Forms 2.0 Web Apps 1.0,它们都是 HTML 的扩展,后来,他们合并到一块儿成为如今的 HTML5 规范。orm

言归于好

  在 WHATWG 致力于 HTML5 的同时,W3C 继续他们的 XHTML 2.0,然而,他们慢慢地陷入困境。htm

  2006年10月,Web 之父 Tim Berners-Lee 发表了一篇博客文章,表示,从 HTML 走向 XML 的路是行不通的,几个月后,W3C 组建了一个新的 HTML 工做组,他们很是明智地选择了 WHATWG 的成果做为基础。这一转变带来一些困惑,W3C 同时进行这两套规范,XHTML 2 HTML 5注意,W3C 的 HTTML 5 在 5 以前有个空格,而 WHATWG 的 HTML5 则没有空格),而 WHATWG 也在进行着一样的工做。

XHTML 已死: XHTML 语法永存

  这一混乱局面到了 2009 年开始变得清晰,W3C 宣布终止 XHTML 2 的工做,这是一份关于 XHTML 2 的迟到的讣告。这一消息被那些 XML 的反对者视为珍宝,他们借此嘲笑那些使用 XHTML 1 规范的人,然而他们彷佛忘记了,XHTML 1 XHTML 2 是大相径庭的东西。于此同时,XHTML 1 规范的制定者担忧,XHTML 1 中的严格语法规范会被 HTML5 弃用,这种担忧后来证实是多余的,HTML5 既支持松散语法,也支持 XHTML 1 般的严格语法。

HTML5 路线图

  HTML5 的现状是,它再也不象之前那样让人困惑,然而仍不够明朗。有两个组织在同时制定它的规范,这两个组织有着彻底不一样的行事风格,WHATWG 是先买后尝,W3C 是先尝后买,他们造成了一个不太靠谱的联姻,最终人们必将面临一个 HTML5 仍是 HTML 5 的问题。html5和其余的不一致的地方,能够查看:查看HTML5的区别

<!DOCTYPE> 声明

<!DOCTYPE> 声明位于文档中的最前面的位置,处于 <html> 标签以前。此标签可告知浏览器文档使用哪一种 HTML XHTML 规范。
HTML4的三种模式:HTML 4.01 规定了三种文档类型:Strict、Transitional 以及 Frameset。

一样XHTML1也有三种模式:XHTML 1.0 规定了三种 XML 文档类型:Strict、Transitional 以及 Frameset。

不过目前而言,在 HTML5 中只有一种声明:<!DOCTYPE html>

目前的标准已经到了HTML5的第二版,查看HTML5.3

自闭和标签正确书写

通常标签因为有开始符号和结束符号,能够在标签内部插入其余标签或文字;自闭合标签因为没有结束符号,没办法在内部插入其余标签或文字,只能定义自身的一些属性。

常见自闭和标签:

一、<meta/>
定义页面的说明信息,供搜索引擎查看。

二、<link/>
用于链接外部的CSS文件或脚本文件。

三、<base/>
定义页面全部连接的基础定位。

四、<br/>
用于换行。

五、<hr/>
水平线。

六、<input/>
用于定义表单元素

七、<img/>
图片

目前的HTML都是准守html5的标准,因此自闭和标签也是须要准守html5的标准写法,也就是推翻了xhtml中的严格模式,自闭和标签不须要加斜杠结束。

图片实例:

<img src="" ><img /> // 不规范
<img src="" >  // html规范写法

伪元素 ::placeholder

伪元素添加到选择器,但不是描述特殊状态,它们容许您为元素的某些部分设置样式;最为常见的就是::before-::after

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

试验性_内嵌

  • ::backdrop
  • ::placeholder
  • ::marker
  • ::spelling-error
  • ::grammar-error

对于不少自闭和标签,其实应该是不支持伪元素,不过input元素有一个特殊的伪元素,能够设置占位符的样式;

::-webkit-input-placeholder
::-moz-placeholder
:-ms-input-placeholder
::placeholder

ios的弹性滚动和滚动条的问题

-webkit-overflow-scrolling: touch; 是用在移动端 webkit 内核浏览器的一个滚动条效果,一般咱们的页面滚动(body 会默认采用这种方案无需代码声明)当手指触摸滑动时,它是不会以一种惯性,带回弹效果的滚动,而这段代码便是让它拥有这种像 App 同样的效果

使用这段代码的时候它随即带来了一个问题,-webkit-overflow-scrolling: touch; 所带来的滚动条在未滚动的时候是隐藏状态,而当手指尝试去滑动滚动条就会显示出来,然而这个控件的样式并不是像桌面浏览器能够自定义,也就是说没法隐藏。

也就是这两个属性展不兼容。

-webkit-scrollbar{ display: none;} 
-webkit-overflow-scrolling: touch;

目前的解决方案:父容器设置固定高度h,并overflow:hidden,滚动容器高出父容器h+10px;滚动容器的子内容高度和父容器同样,比滚动容器小10px,而后滚动条就会被父容器隐藏。

<div class="father">
    <div class="scroller">
        <div class="son">子元素</div>
        <div class="son">子元素</div>
        <div class="son">子元素</div>
    </div>
</div>
相关文章