趣说HTML

如果有非技术人员问你,HTML5是什么,你会怎么回答?

新的HTML规范?

给浏览器提供了牛逼能力,干以前不能干的事?(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能。。)

给浏览器暴露了许多新的接口?

加了很多新的效果?

问的人其实并不明白他想问的真正问题,回答的人貌似明白,但又好像少了点什么。牛逼的能力、新的接口、炫酷的效果,首先回答的人自己就是晕晕乎乎。什么是HTML、什么是CSS、什么是DOM、什么是JavaScript,大部分的前端开发每天都在用这些,但很少会有人去思考一下他们之间的关系。

首先,HTML的全称是超文本标记语言,是一种标记形式的计算机语言。将这种标记语言给专门的解析器,就能够解析出一定的界面效果。浏览器就是专门解析这种标记语言的解析器。我们说他最终的效果是在屏幕上展示出特定的界面,那么浏览器肯定要把一个个的标记转换成内部的一种数据结构,这种数据结构便是DOM元素。比如,一个标签在浏览器内部的世界中就是一个HTMLAnchorElement类型的一个实例。

一个HTML文件就好比用超文本标记语言写的一篇文章,文章通常是有结构的,在浏览器眼里它就是DOM。DOM描述了一系列层次化的节点树。

随着历史的发展,当人们不在满足简单的显示文本,对于某些文本需要特殊强调或者给添加特殊格式的需求,慢慢的冒了出来。面对人们需要控制显示效果的需求,最先想到的也最简单的方式就是加标记。加一些样式控制的标记。这时候就出现了像 <font> <center> 这种样式控制的标记。但是这样一来,所有的标记就会分为两大类:一种是说我是什么,一种是说我怎么显示。这还不是大问题。标记是简单的,但是浏览器要解析标记可就不那么简单了。想一想,这样干的话DOM也就要分成两大类,一类属于描述元素的DOM节点,一类属于描述显示效果的DOM节点。一个DOM节点可能代表一个元素,也可能是代表一种显示效果。怎么看都觉得别扭呀。

最后人们决定废弃样式标签,给元素标签添加一个style特性,style特性控制元素的样式(最初的样式声明语法肯定很简单)。原来的样式标签的特性,现在变成了样式特性的语法,样式标记变成了样式特性。这样逻辑上就清晰多了。

那么问题来了:

一篇文章如果修辞过多,必然会引起读者的反感。如果把元素和显示效果都放在一个文件中,必然不利于阅读。

如果有10个元素都需要一个效果,是不是要把一个style重复写十遍呢

父元素的设置效果对子元素有没有影响

......

类似的问题肯定有很多,所以出来了CSS,层叠样式表,带来了css规则、css选择器、css声明、css属性等,这样以来就解决了以上痛点。标记语言这层解决了,但是浏览器就不能干坐着玩耍了,必然得提供支持。所以浏览器来解析一个静态html文件时,遍历整个html文档生成DOM树,当所有样式资源加载完毕后,浏览器开始构建呈现树。呈现树就是根据一系列css声明,经历了层叠之后,来确定一个个个DOM元素应该怎么绘制。这时候其实页面上还没有显示任何界面,渲染树也是浏览器内存里面的一种数据结构。渲染树完成之后,开始进行布局,这就好比已经知道一个矩形的宽高,现在要在画布量一量该画在哪,具体占多大地方。这个过程完了之后就是绘制的过程,然后我们便有了我们看到的显示界面了。

给标记加点效果的问题解决了,历史的车轮又开始前进了。慢慢的人们不再满足简单的显示效果,人们希望来点交互。那个时候写HTML的大部分并不懂软件开发,那正规军不屑干的事就交给游击队吧,这时候网景公司开发出了JavaScript语言,那时候的JavaScript根本没有现在这么火,一土鳖脚本语言,哪像现在这么牛逼。

JavaScript本是运行在浏览器的语言,HTML文本是静态的,不可能让JavaScript修改静态文件,但可以跟浏览器内部打交道。可是这个时候的DOM并不是今天的DOM,他们是C++对象,要么把JavaScript转换成C++指令操作这些C++对象,要么把这些C++对象包装成JavaScript原生对象。历史选择了后者,这时候也就标志着现代DOM的正式诞生。

从历史的角度我们可以看到。CSS、DOM、JavaScript的出现于发展最终的源头都在HTML,超文本标记语言。人们对web的需求最终都汇集在HTML上。所以只要历史产生新的需求,最终的变化都首先发生在HTML规范上。

当交互性不能在满足人们需求时,web迎来了新的需求:webapp。要迎合新的需求,首先要改变的就是HTML规范,这个时候已有的HTML4.0,已经无法满足人们日益增长的需求,所以HTML5迎着历史的需求,经过八年的艰苦努力,终于在2014年正式定稿!HTML5肯定是要加入新标签,然对于传统HTML而言,HTML5算是一个叛逆。所有之前的版本对于JavaScript接口的描述都不过三言两语,主要篇幅都用于定义标记,与JavaScript相关内容一概交由DOM规范去定义。而HTML5规范,则围绕着如何使用新增标记定义了大量JavaScript API(所以其中有一些API是与DOM重叠,定义了浏览器应该支持的DOM扩展,由此可以看到HTML5也必定不是HTML的最终版)。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML代码中要想改变字体颜色,常常需要使用CSS样式表。CSS是一门用来描述网页上样式的语言,通过编写CSS代码可以实现网页中各元素的大小、颜色、字体等各种样式的控制。那么如何在HTML代码中应用CSS样式来改变字体颜色呢?这里为大家介绍一下。 首先,在HTML代码...
HTML代码如何让字体盖住图片呢?需要使用CSS的position属性及z-index属性。 img { position: relative; z-index: -1; } p { position: absolute; to...
HTML代码字体设置 在HTML中,我们可以使用标签来设置网页中的文字字体。常用的字体标签是font和style,下面我们来学习如何使用这些标签。 1. font标签 使用font标签可以改变文字的字体、颜色和大小。它有三个属性font-family、color和...
在网页设计中,HTML代码的字体和字号选择是非常重要的一个环节,因为它们直接关系到页面的可读性和视觉效果。 要指定文本的字体和字号,可以使用HTML中的样式属性。使用样式属性设置字体和字号,如下所示: <p style="font-family: Aria...
HTML(Hypertext Markup Language,超文本标记语言)是一种用于创建网页的标准语言。它由许多标签(一对尖括号包围的关键字)组成,这些标签告诉浏览器如何显示内容。使用HTML代码,我们可以轻松地创建各种类型的图像和图形,如太极图。 在HTM...
外链是指在一个网页中添加一个指向其他网站的链接,用户可以通过这个链接直接跳转到其他网站。在HTML中,实现外链的方法很简单,只需要使用标签就可以了。 <a href="http://www.example.com">这是一个外链,点击跳转到www.ex...
HTML代码是实现网页界面的基础,而网页中的各种表单则是用户和网站进行交互的重要方式之一。下面我们来介绍如何使用HTML代码实现一个简单的报名表格。 <form action="submit.php" method="post"> &lt...
HTML是一种标记语言,用于开发网站和其他互联网内容。字体是网站设计中的关键元素之一,它可以决定网站的整体风格和呈现效果。HTML提供了字体编辑器,使网站设计变得更加容易。 <font face="Arial"> 这里是Arial字体 &...
HTML代码中,字体样式是开发者们必备的一部分。在HTML中,我们可以通过特定的标签和属性设置字体的样式、颜色和大小,以达到更好的排版效果。 <p style="font-size: 14px; color: #333; font-family:...
HTML中的字体可以设为粗体,以强调文本信息。我们可以通过使用一些标签来实现这一功能。其中,常用的标签包括: 1. 标签:该标签会把文本加粗显示,语法如下: 这是一段加粗的文本 2. 标签:与标签作用相同,但语义更强,表示该文本内容的重要性。语法如下:...
HTML代码可以实现文件的上传和下载,在网页开发中相当常见。通过使用<input>标签和<form>标签,我们可以轻松创建一个文件上传表单。 <form action="upload.php" method="post" enct...
HTML代码非常常见于网页设计中。在一些需要处理时间相关数据的场景下,可能需要将时间戳转换为实际时间,这时候就需要使用一些特定的HTML代码。 function timeStamp2Time(time){ var date = new Date(time...
HTML是一种用于创建网页的标记语言。在HTML中,我们可以使用超链接标签实现下载文件到本地的功能。 具体实现步骤如下: <a href="文件的URL" download="文件名">下载文件</a> 其中,href属性是文件...
在HTML代码中,对于字体靠左对齐有各种方法。其中最简单的方式之一是使用pre标签。 使用pre标签可以保留一段文本中的空格和换行符,从而使代码排版更加整齐。下面是一个例子: <p>这是一个段落。</p> &lt...
HTML代码字典是一本解释HTML标记和属性的参考文献。这本字典中包含了最常用的HTML代码以及它们的属性和值的详细描述。 例如,以下是HTML代码字典中的一部分内容: <a href="url">link text</a> 在...
在网页开发过程中,遇到一些需要用户复制的内容,我们通常都会提供复制按钮,让用户更方便地复制所需内容。下面我们来介绍如何使用html代码实现一键复制的功能。 var copyBtn = document.querySelector('#copy-bt...
用户登录 欢迎来到公司登录界面,请输入用户名和密码登录 用户名: 密码: 代码解释: 第1行:定义了一个 HTML 文档 第2行:开始了 HTML 头部 第3行:定义了...
HTML 代码是用来创建网页的语言,它包含了许多不同的元素和属性,让我们可以在网页中添加各种不同的元素和内容,如文字、图片、链接等等。在编写 HTML 代码时,我们可以使用各种不同的样式来美化我们的网页,例如更改字体、颜色、大小等等。 font-family:...
HTML代码中的字体转移 在编写HTML代码时,我们经常会使用各种字体来增强页面的可读性和视觉效果。但是,有些字符或特殊符号可能会在HTML中具有不同的含义,这就需要使用字体转义转换成HTML可以正常显示的字符。 在HTML中,使用"&"符号表示一个特殊字符将要被转...
HTML 编程语言中,你可以使用字体属性来更改文本的字体大小、颜色和样式。其中,字体颜色是最常用的样式更改。在 HTML 中,你可以使用 "color" 属性来更改文本的颜色。下面是一个使用 "pre" 标签的代码示例,演示如何使用 "color" 属性来更改字体颜色...