HTML和CSS如何工作的?原理解释?

HTML和CSS如何工作的?原理解释?HTML和CSS是web的两种主要语言。第三种是JavaScript。

HTML代表超文本标记语言,用于标记页面中的内容,以便浏览器能够正确地解释和显示它们。HTML的主要目的是为页面的内容提供结构。我们通过在内容周围包装所谓的标签来为内容提供结构。标签说明某物是否是段落、标题(包括标题的级别)、有序/无序列表等等。

网站,前端设计,html,css,JavaScript

你可以把这个结构想象成房子的框架。框架提供了一个基础,定义了一个房间有多大,房间在房子里的位置,有多少面墙,但在这一点上,房子只是一个框架。现在的房子是这样的。

现在我们将CSS加入其中。CSS代表层叠样式表。CSS控制结构化内容的表示。它告诉浏览器段落应该使用这种字体,应该使用这种颜色,应该是这么大(或这么小),标题应该在它和下一组内容之间有这么大的空间,无论是小标题还是段落。CSS通常放在单独的文档(页面)中,并链接到包含结构化内容的页面中。这允许我们快速地改变CSS,而不需要改变每个元素标签中的样式,或者在每个页面中有重复的样式标题。我们可以很容易地将样式应用到具有单个链接的多个页面上。如果我们想要针对特定页面上的特定元素,我们可以通过CSS中的类来实现。

CSS是我们开始在墙壁上添加颜料、挂窗帘、决定地毯的颜色等等的地方。在我们添加CSS之后,我们的房子就从一个骨架结构变成了一些人们想要看到的样式。

超文本标记语言被用来用“语义标签”来标记网页的内容,让盲人和搜索引擎能够容易地得到内容的含义。语义标签是100%的可访问性和搜索引擎优化。没有语义标签,盲人和搜索引擎将面临一堵单词墙,很难理解它们的用途或含义。网页不应该是没有语义标签的文本块。

CSS是用来给大多数有视力的用户提供“视觉风格”和线索的,他们欣赏页面的外观,并使用诸如页边距、边框、阴影、背景色或图像等特征来理解页面的含义。从CSS3开始,我们也有了“动态”风格,可以做下拉菜单,或者当你点击或鼠标悬停在它们上面时,使事情变得更大或更不透明。

你忽略了JavaScript,它是网页的另一个标准特性,甚至可以用于更动态的效果,或者做AJAX-异步JavaScript和XML从服务器“后台”获取东西来刷新页面的一部分,或者在搜索框下创建一个动态列表,当你在框中键入字符时,该列表会发生变化。

最好的一点是,网页除了超文本标记语言之外什么都没有,这样盲人可以使用它,谷歌可以把你的网页提升到“有机搜索”的顶端。我有点视觉障碍,需要用“对比度反转器”把橙色或琥珀色字体放在深色背景上,否则我会失明。我喜欢有干净的超文本标记语言的页面,它能让我击败让我失明的白色背景,当我到达一个页面时,我很生气,因为我必须关掉我的对比度反转器才能看到一个按钮或一个控件,然后被灯光弄瞎了。

CSS的存在是为了让页面对有视力的人有吸引力和意义。JavaScript的存在是为了让页面对能看到它的人表现得更好。

我同意W3学校对超文本标记语言、CSS、JavaScript和当今最重要的移动优先和响应性网页设计的另一个回答。他们是一个很好的介绍,但他们是一个非常快速的介绍,没有很多深度。

你可能想看看Mozilla,尤其是谷歌关于移动优先、响应性的超文本标记语言和超文本标记语言以及类似“材料”之类的东西,来制作轻量级页面,这些页面通过W3C验证器验证,在谷歌的移动友好性测试中得分很高,并且在每台设备上看起来都很好。

你可以通过点击ctrl-u或者在浏览器中获取视图源来查看大多数页面的HTML和CSS。如果做得好,你将在超文本标记语言中看到的所有东西都被很好地标记了语义,所有的样式都在引用这些语义标签的外部CSS中,并且具有其他功能,比如帮助布局页面并在整个网站中一致地应用您的样式的“网格系统”。

发表评论

电子邮件地址不会被公开。 必填项已用*标注