css过去及未来展望—分析css演进及排版布局的考量

Posted zhoulujun

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css过去及未来展望—分析css演进及排版布局的考量相关的知识,希望对你有一定的参考价值。

从形式上来说,CSS3 标准自身已经不存在了。每个模块都被独立的标准化。但是每个模块都可以追溯其来龙去脉。从印刷出版到互联网的兴起,这期间板式设计可以构成一篇雄文。

读初二的时候,学校有了计算机,也简单地介绍了下网页,不过那是的html 都是table,也没有去细看。到了高中,qq空间有个html模式,为了让文章好看点。也浅尝辄止地学了下css

css简介

在HTML迅猛发展的 90 年代,不同的浏览器根据自身的 HTML 语法结构来支持实现不同的样式语言。在最初的 HTML 版本中,由于只含有很少的显示属性,所以用户可以自己决定显示页面的方式。

但随着 HTML 的发展,HTML 增加了很多功能,代码也越来越臃肿,HTML 就变得越来越乱。网页也失去了语义化,维护代码很艰难,因为代码很混乱:比如现在博客园里面还有大量的<font color="blue" face="verdana"><body bgcolor="#e6e6fa">标签等。于是装饰网页样式的 CSS(层叠样式表,Cascading Style Sheets)诞生了。

CSS 是随着前端表现分离的提出而产生的,因为最早网页内容的样式都是通过center、strike等标签或fontColor等属性内容来体现的,而CSS提出使用样式描述语言来表达页面内容,而不是用HTML的标签来表达。

css历史

CSS的早期历史可以读此文:http://www.w3.org/Style/LieBos2e/history/ ,以及CSS之父的博士论文:层叠样式表。css的特性早起由印刷出版业而来。

1994 年,Hkon Wium Lie 最初提出了 CSS 的想法,联合当时正在设计 Argo 的浏览器的Bert Bos,他们决定一起合作设计 CSS,于是创造了 CSS 的最初版本。

1995年他们在芝加哥的Mosaic and the Web 大会上第一次正式提出了 CSS 的建议,博斯演示了Argo浏览器支持CSS的例子,哈肯也展示了支持CSS的Arena浏览器。当时 W3C 刚刚建立,W3C 对 CSS 很感兴趣,为此专门组织了一次讨论会。同年,W3C组织(World WideWeb Consortium)成立,CSS的创作成员全部成为了W3C的工作小组并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。有越来越多的成员参与其中,例如微软公司的托马斯·莱尔顿(Thomas Reaxdon),他的努力最终令Internet Explorer浏览器支持CSS标准。

1996 年 12 月,W3C 推出了 CSS 规范的第一版本。

1997 年,W3C 颁布 CSS1.0 版本 ,CSS1.0 较全面地规定了文档的显示样式,可分为选择器、样式属性、伪类 / 对象几个部分。这一规范立即引起了各方的关注,随即微软和网景公司的浏览器均能支持 CSS1.0,这为 CSS 的发展奠定了基础。W3C组织负责CSS的工作组开始讨论第一版中没有涉及到的问题。其讨论结果组成了1998年5月出版的CSS规范第二版。

1998年5,W3C 发布了 CSS 的第二个版本,目前的主流浏览器都采用这标准。

CSS2 的规范是基于 CSS1 设计的,包含了 CSS1 所有的功能,并扩充和改进了很多更加强大的属性。包括选择器、位置模型、布局、表格样式、媒体类型、伪类、光标样式。

1999年,CSS 3的草稿开始制定

2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块

2005 年 12 月,W3C 开始 CSS3 标准的制定。css是有一系列的标准组成。每个系列完成的时间不一样。所以css3是不断的演进的,直到现在。

css模块演化图

从形式上来说,CSS3 标准自身已经不存在了。每个模块都被独立的标准化。

网页布局模式演变

用于展示的HTML标签

1990年代中期,主流浏览器厂商(网景和微软)添加了一些标签(tag),从而使得设计者可以用“展示类”的标签来控制页面的外观,例如<b>让文字成为粗体,<i>则是斜体。

表格布局

table布局,在IBM的邮箱系统中投放,是个很好的解决方案。

帧(Frames)

通过使用<frameset>和<frame src>标签,一个HTML页面中的一些区域可以包含另外的HTML文件。帧甚至还可以嵌套使用。

客户端分区响应图(Image Map)

这在dreawave大热的时代,是利器。就是在图片上面添加锚点与热点区域,然后点击锚点。

 

css 层叠样式

 

浏览器战争中的对手们(网景和微软)达成了共识,决定逐渐淘汰展示类标签。CSS(Cascading Style Sheet)的广泛使用大大促进了结构和展示的分离。

DIV和“盒模型”

<div>元素起初是作为CSS的一部分被发明的,用来把页面组织成逻辑上独立的几个部分。它的设计初衷其实是替代当时最常用的表格布局。<div>标签内可以包含文字和图片,(从而形成“盒子”)。这些“盒子”可以设置宽度和/或长度,甚至还能有外边距(margin)和内边距(padding)。

CSS 定位(Position)属性

<div>默认是块级元素,如果不专门设置的话,多个<div>会一个个地上下层叠排列。而最早能够专门设置元素对齐的就是定位属性(即position:fixed)。定位属性至今仍然是CSS规范的一部分

浮动布局

float浮动属性最早是为了实现图片的文字环绕效果,允许的值包括left、right、none、inherit,后来人们发现,浮动<div>元素可以用来有效地控制页面上元素的位置。把<div>设置成浮动会使得对应的盒子有一定的自适应效果,多个浮动元素一一排列,如果超出了容器元素宽度,一行放不下时还会自动换行。

移动和响应式网站

Flexbox,Column Grid

CSS Grid

基于CSS来实现某种网格(grid)布局的想法已经存在多年了。CSS的两位联合发明人Bert Bos和Håkon Wium Lie都有相关的想法

突破来自微软。一些微软员工一直在为他们的浏览器探索更好的布局工具,慢慢形成了一份提案。事实上,2011年的时候,微软发布的IE 10中甚至用-ms-的厂商前缀实现了一个grid布局草案。随后的2012年,他们将规范的草案提交给了W3C。微软还为他们的grid系统申请了一份专利,并通过了审批。在专利文档中,这项技术被称为基于样式法则的内容无关网格布局

css grid第一份规范的网址是:https://www.w3.org/TR/css-grid-1

现在所有的主流浏览器全都支持CSS Grid了。

Flexbox

这个是目前主流的布局方式。就不多说了

 

参考文章:

前端技术演进(四):前端三层结构与应用 https://juejin.im/post/5c137fc96fb9a049e82b677b

 


转载本站文章《css过去及未来展望—分析css演进及排版布局的考量》,
请注明出处:https://www.zhoulujun.cn/html/webfront/style/cssBase/2020_0520_8436.html

前沿 | NLP 研究的未来展望

我们最近出版的由邓力博士及刘洋博士等人合著的  一书(本书在 SpringerLink 上线4周,下载量已达3600次,查看电子书请点击“阅读原文”)系统介绍深度学习在 NLP 常见问题中的应用,而且是目前对此方面研究最新、最全面的综述。基于这些分析,我们对 NLP 未来发展的研究方向进行了探讨,包括神经符号整合框架、基于记忆的模型、先验知识融合以及深度学习范式(如无监督学习、生成式学习、多模学习、多任务学习和元学习等)。


基于组合性的推广


在有监督学习条件下,当前深度学习的一个常见缺点是需要大量带有标签的训练数据。在自然语言处理任务中,自然语言数据通常遵循幂律分布,而深度学习方法难以处理长尾现象。也就是说,任何大规模的自然语言训练数据都难以避免出现训练数据无法覆盖全部现象的情况,这是任何学习系统中局部性和符号表示所面临的一个内在的问题。然而,这一挑战为深度学习方法提供了一个很好的研究方向,因为深度学习方法是基于分布式表示的,不受数据覆盖问题的影响,至少在原则上是这样的。


这些方法的研究在于如何设计新的深度学习架构和算法使得能够有效地利用分布式表示的组合性,从而能够理清自然语言数据变化的潜在因素。


近期深度学习方法在视频和图像数据上的可行性研究给出了在没有大规模自然语言数据的情况下如何解决泛化问题的前景。作为第一步,Larsson 和 Nilsson (2017)的最新的研究提出了分解的表示方法,表明在保留语义的同时,可以有效地控制自然语言的情绪色彩。


NLP 中的无监督学习


几个月前,我们在 一书中第一章写到无监督学习和一些先进方法的初步有前景的工作,这些先进方法包括利用序列输出结构、输入输出的关系以及在训练的预测系统中用来消除昂贵的平行语料库(就是指成对的数据和标签)需求的先进的优化方法。 类似的无监督学习模式最近已经扩展到大规模机器翻译任务


Artetx 等2017年以及 Lample 等2017年发表的两种用于机器翻译的无监督学习方法在各自的训练系统中都利用了反向翻译和去噪。训练是在没有成对的输入和输出数据的情况下进行的,与 Chen 等人(2016年)和 Liu 等人(2017年)的非 NLP 任务的工作设置相同,利用的是输出的结构以及输入(图像)与输出(文本)的关系。Lample 等人以及 Artetxe 等人在2017年提出的反向翻译步骤利用了输入(原文本)和输出(目标文本)的关系以及输入和输出的信息率的相似性(比如都是自然语言文本),这是一种更加优雅的方法。更具体地说,在反向翻译中,先将输入源语言中的一个句子近似地翻译成输出目标语言,之后再将输出的目标语言翻译回源语言。如果反向翻译得到的句子与源语言句子不一致,那么深度神经网络就会学习调整它的权重,以便下次它们会变得更相近。 


两个研究中的去噪步骤都有类似的功能,但仅限于对一种语言起作用,只能在一个句子中加入噪声,然后使用去噪的自编码器恢复原始的版本。这样的主要的思想是在源语言和目标语言之间建立一个共同的隐空间,并通过在源域和目标域之间的重构来学习翻译。有效地利用源(输入)域和目标(输出)域之间的关系,可以为训练机器翻译系统构造成对的源语句和目标语句,从而节省大量成本。


最近,Radford 等人在2017年提出了另一项关于 NLP 无监督学习的有趣研究——情绪分析。研究的最初目的是探索字节级 LSTM 语言模型的属性,以便预测输出给定文本(Amazon评论)的下一个字符。令人惊讶的是,研究发现利用无监督方式训练的乘性 LSTM 中的一个神经元能够对评论是积极的还是消极的进行准确分类。当在另一个情绪数据集——Stanford Sentiment Treebank 进行测试时,这个模型取得了良好效果。


NLP 中的强化学习


如上所述,Artetxe 等在2017年和 Lample 等在2017年报告的基于无监督学习的机器翻译的初步成功,令人联想到 Silver 等在最近报告的强化学习在 AlphaGo Zero 中没有人类数据完全利用自我博弈的策略所取得的成功。通过自我博弈,AlphaGo 成为它自己的老师,一个深度神经网络被训练来预测 AlphaGo 自己的以及 AlphaGo 的游戏的获胜者的下棋选择。这个预测是合理的,因为有一个远程老师告知在自我博弈中谁赢谁输,对强化学习算法进行指导。对于无监督机器翻译,反向翻译和 AlphaGo Zero 中自我博弈相似,只不过没有类似的老师来获取胜负信息。然而,如果通过用反向翻译的句子相比源句子质量好坏这种衡量方法来代替强化学习中的胜负信号,那么,这种衡量方法可以作为一个目标函数来指导深层神经网络中对权重参数的无监督学习。


上述比较指出了强化学习的潜力,它为现有和新的 NLP 应用开发了一套强大的算法。如果 NLP 问题能够被精心地形式化以便利用“自我博弈”的概念或者输入-输出关系来定义远距离的教学信号,那么强化学习将非常有前景。在这个研究领域的成功将能够为强化学习增加强有力的方法来攻克当前 NLP 和深度学习瓶颈的一个关键方面:那就是它们主要基于模式识别和监督学习范例,因此需要大量的标记数据并缺乏推理能力。


NLP 中强化学习的一个典型的应用场景是对话系统。正如第三章中的调研所表明的一样,对话管理是强化学习在 NLP 中取得的主要成功之一,它使用了标准的马尔可夫决策过程及其在处理不确定性任务时的部分观察版本。最近,由强化学习控制和训练的深度神经网络已经应用到了所有类型的对话系统或聊天机器人(智能助理)。虽然强化学习的“奖励”已经根据任务完成的启发式组合(或其他方式)、对话的轮数以及聊天机器人和用户之间的互动水平等合理清楚地定义, 但是对于大量会话数据的需求仍然是一个具有挑战性的问题。由于用于人类——聊天机器人对话的良好“世界”模型或模拟器很难形成,在能够以适当的形式结合“自我博弈”的概念之前,强化学习还很难克服对于大量训练数据的需求。现在聊天机器人的对话在实际应用被期望变得更加真实,因此更加迫切需要在这一领域取得进展。


将强化学习应用于 NLP 问题所取得的其它最新进展主要包括用于创作文本生成的 SeqGAN 方法,它通过策略梯度有效地训练序列生成对抗网络。在 Bahdanau 等, (2017)中报告的一项最近的相关研究是在强化学习中使用另一种流行的 Actor-Critic 算法。 对该方法和其实验结果的分析表明它对于许多自然语言生成任务(包括机器翻译,字幕生成和对话建模)都有很好的效果。此外,还发现了强化学习在解决基于文本的游戏的 NLP 问题以及预测文本论坛中的流行趋势的 NLP 问题方面的有效性。具体地,最近的文献中报告的实验表明:状态空间和动作空间都采用自然语言的形式独立建模能够从文本中提取语义信息,而不是简单地记忆字符串文本。最近发布的强化学习在NLP中的另一个应用是文本摘要(它是一个重要的 NLP 任务,但由于深度学习最近才开始应用于处理文本摘要,所以我们在本书中未涉及)。在(Paulus等. 2017)中表明,在神经编码器 - 解码器模型中,当使用监督学习的标准词预测与使用强化学习训练的全局序列预测相结合时,所得到的摘要文本变得更可读。


结语


最后,我们高度关注了近来应用强化学习从自然语言生成结构查询所取得的成功,在本书第二章中称这项 NLP 任务为“槽填充”,它在有限域内是语言理解的核心。过去通常使用第二章中调研的结构化的监督学习方法来解决它。如果强化学习能够在第二章和第三章中描述的许多实际有用的领域都能表现出一致的优势,那么口语理解和对话系统的研究前沿就会被推进。


点击"阅读原文" 至原文页下载精选内容。


*本文翻译自 Deep Learning in Natural Language Processing 一书第11.3.1-11.3.3 


延伸阅读

点击阅读:



版权声明


marketingchina@springernature.com

© 2018 Springer, part of Springer Nature. All Rights Reserved.




以上是关于css过去及未来展望—分析css演进及排版布局的考量的主要内容,如果未能解决你的问题,请参考以下文章

Css+Div布局时如何在文字中插入空格?

CSS英文命名规范整理及参考

用CSS2及CSS3弹性盒两种方式实现如下布局,要求自适应浏览器窗口宽高。

漫谈css模块化,postcss及css之未来

Css 弹性布局(Flex)详细介绍(Flex 属性详解场景分析)

Web开发及人机交互导论 实验三 CSS+DIV基础