欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

你知不知道屏幕后面长了一棵树_html/css_WEB-ITnose

程序员文章站 2022-04-08 11:32:40
...
不管你在刷朋友圈,还是在购物,或者在看新闻,你所看到的都是浏览器呈现给你的。

现在的网页一般都很复杂,里面有各种图片、不同字体和颜色的文字、音频和视频、动态菜单等等。但在呈现到你眼前之前,浏览器从网络另一端的服务器上得到的只有一行行的代码。它要把那些杂乱的代码变成一副规整的画面,把页面中的各种元素准确地展示给你看,不能把它们的位置、颜色、大小、动态效果搞错;还要准确响应你做的各种操作,比如你向上滑了一下手指,它就要在屏幕上画一副新的画面,并且还要有动态效果。

虽然程序猿会用几种不同的技术(比如CSS、JavaScript、JSON)来共同控制你最终看到的画面,但最基本的就是HTML。可以说没有HTML,就没有网页,浏览器呈现页面的第一步,也是从解读HTML开始的。如果你对藏在屏幕后面的HTML感兴趣,请继续往下看。

HTML是个什么鬼?

HTML是欧洲核子研究中心的物理学家蒂姆·伯纳斯-李在1980年前后发明的,他的初衷是为了让科学家们更方便地表达和分享知识。在HTML出现之前,人们在互联网上只能用电邮等技术传送普通的文本。现在大家经常说的H5,就是HTML第5版。

HTML是超文本标记语言的缩写,它根据页面中不同内容的类型(比如文字、图片、音频、视频等)定义了一组元素,这些元素中可以包含一个或多个标签。页面中的内容就放在这些标签中,或者标签本身就是内容项。所以标签看起来就像括号一样,一般都是成对出现的。比如要在页面中显示一个按钮,对应的标签就是 。看到了吧,很简单,开始标签就是把一个英文单词放到一对尖括号里,结束标签只是在单词前加了一个反斜杠。有些元素只需要一个标签,比如表示换行的
,可以把结束标签省略掉,并把反斜杠 / 放到右尖括号 > 前面就可以了。

浏览器就是根据这些标签来决定该如何“呈现”页面中的“内容”的。比如下面这个最基本的HTML代码,它会在页面上显示一行文字:我是一个栗子...

  页面标题

我是一个栗子...

大多数电脑上的浏览器都可以看到页面的代码,如果你用chrome的话,只要在页面上点击鼠标右键,然后选择“审查元素”,就能看到上面这种代码了。刚开始看可能会吓到你,因为大多数页面中都会有非常非常多的代码,但只要你仔细看,总能找到 、

、 这几个标签,它们也会遵循上面的结构。

好吧,我知道这看起来并不像一棵树。但在程序猿的世界里,这个结构确实叫做树,老师就是这么教的。如果你坚持要看到树,我可以给你画一棵。

接下来我会继续深入,介绍上面提到的那些概念。不过你也可以现在就开始动手,在浏览器中访问 Mozilla Thimble 。这是一个交互式的在线编辑器,可以教你怎么编写HTML代码。另外你也有必要看一下 HTML 元素 列表,里面有所有的HTML元素和它们的用途。

元素--垒页面的砖块

HTML是由元素构成的,元素包含一对相互匹配的标签和这两个标签中的任何东西。HTML给每个元素定义了一个明确的语义,比如

我是一段文本

,表示一段文本, 你知不知道屏幕后面长了一棵树_html/css_WEB-ITnose 表示要显示一个放在'images目录下,名为img.jpg的图片。

有些元素有非常明确的含义,有些没有,还有些是出于技术需要而定义的,可能根本不需要显示。但大多数元素都可以包含其它元素,就像在一个大盒子里放进一个小盒子一样,从而形成一个层级结构,也就是我们说的树。html就像树干一样,head是一个树枝,body也是个树枝,在body中又会分出好多不同的树枝。这个层级结构被称为DOM(文档对象模型)。

标签

HTML文档都是用普通的文本编写的,你可以用任何编辑器编写,记事本也行。编辑完后,保存为后缀名为.html或htm的文件,双击浏览器就会自动打开它。不过我们一般都用专业的编辑器,比如Sublime Text,因为这种专业的编辑器能识别出HTML语法,然后用不同的颜色显示不同的元素。

所有放在小于号 之间的东西都叫标签,HTML都会特殊对待,如果出现没有结束的标签,或者标签不是成对出现的,HTML都会报错。比如:

I really mean that

如果写成这样就是错的(注意看 的位置):

I really mean that

属性

开始标签中可以放入额外的信息,一般是 ‘名称=值’这种格式,这些额外的信息叫做属性。有些属性也可以只放名称。比如 你知不知道屏幕后面长了一棵树_html/css_WEB-ITnose 中就有个名为 src 的属性。属性值之间如果有空格,必须用引号引上。

命名字符引用

因为HTML语法给一些字符赋予了特殊的含义,所以要显示这些字符时,必须用特殊的形式代替,比如小于号 ,如果要显示它们,只能用 > 和 < ,这样的命名字符引用有很多,感兴趣可以看一下 这里 。

注释和doctype

编程的时候,最重要的就是注释了,因为时间长了很容易忘。在HTML里面可以把注释放在 之间。我们可以在代码中看到注释,但浏览器又不会把它显示在页面中。

除了标签,文本内容和命名字符引用,HTML还必须在第一行声明doctype,以便告诉浏览器页面是用哪个版本的HTML写的,对于HTML 5来说,只要记住写成 就可以了。

关于HTML我们就介绍这么多,只要你掌握了那些标签的含义,就可以写自己的页面了。