网页极客术语 (解释)

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费额度!

就像任何奇怪的小众社会群体一样,我们这些网页极客也发展了自己的语言。其中一些语言是完全可以接受的英语,但对局外人来说听起来仍然很奇怪。我想到要列出这些词并尝试用简单的英语解释它们,作为非极客的参考。

浏览器 – 浏览器是一种用于访问网站的软件应用程序。 Firefox、Internet Explorer、Safari 等。如果您认为这很明显,再想想

服务器 – 当访问网页时,数据会通过互联网从某台计算机发送到您的计算机。那台其他计算机是服务器,本质上就像您正在查看的计算机一样,只是专门配置用于向其他请求信息的计算机提供信息。即使任何计算机理论上都可以作为服务器,但更常见的是人们从专门从事此工作的公司(如 Media Temple)购买服务器功能。除了“服务器”用于描述物理机器之外,它还可以用于描述在该机器上用于处理提供数据的软件程序,例如 Apache

URL – 统一资源定位符 – 就像这样的东西https://css-tricks.org.cn/video-screencasts/64-building-a-photo-gallery/有些人还使用URI – 统一资源标识符 – 用于相同目的,尽管 URL 更常见。老实说,我阅读了这两个词的整个维基百科文章,但我仍然不太理解它们的区别。域名是上面示例的第一部分css-tricks.com。任何人都可以从专门从事此工作的公司(如 Go Daddy)购买域名。

标签 是围绕 HTML 代码中的内容的文本,用于识别它们所包围的内容类型。例如,在此代码 <li>Go dancing.</li> 中,标签是 <li> 和 </li>。

锚点 – “锚点”标签是 HTML 代码中看起来像这样的标签:<a href=”http//url.com”>链接文本</a>。大多数 HTML 标签都是以其外观来命名的,例如,<ul> 标签可能会被大声读作“Yoo-Ell”标签。使用锚点的原因是,说“一个 a 标签”无论是书写还是口语都听起来很奇怪。

包裹 指在 HTML 代码中将开头和结尾标签放在内容周围。如果您听到“您需要用额外的 div 包裹它”,这意味着需要在引用的任何内容区域之前添加 <div> 标签,并在其之后添加 </div> 标签。

嵌套 非常类似于包裹,但意味着深入多层。例如,这是一系列“嵌套”的 div

<div id="outer">
   <div id="inner">
      <div class="section">
      </div>
   </div>
</div>

标记 – 标记只是说 HTML 代码的另一种方式,但更通用,也可能用于引用 XML 或其他“描述”语言。如果您听到诸如“该站点使用非常语义化的标记”之类的短语,这意味着该网站的 HTML 代码使用非常合适的标签来描述它显示的内容,这是一件理想且有时难以做到的事情。

可访问性 – 当谈到网站的可访问性时,它指的是残疾人访问内容的难易程度。例如,行动不便的用户导航网站的难易程度、盲人阅读网站的难易程度或色盲用户区分链接与普通文本的难易程度。

可用性 – 可用性类似于可访问性,但不同之处在于它指的是所有访问者的易用性,而不仅仅限于残疾人。例如,一个需要冗长的注册才能查看内容或导航在不同页面上位于不同位置的网站可能会被认为可用性差。

可查找性 – 可查找性是可用性的一部分,指的是用户在网站上查找所需内容的难易程度。通常是一项难以捉摸的任务。

验证 – 代码可能包含错误,甚至很可能包含错误。但是谁来决定代码中的错误是什么?在 HTML 和 CSS 方面,W3C 说了算。他们提供 工具 来运行这些类型的代码以检查错误。如果没有错误,则代码通过并被称为有效代码(或“标记”!)或者,验证可以指数据。例如,如果您输入一个只有 5 位数字的电话号码,软件可能会“验证”该数据并将其拒绝为无效

标准 – 这再次指的是 W3C,该组织提出了描述浏览器在解释代码时应如何行为的“规则”。你能想象如果你的每项工作都必须以略微不同的方式重复五次,那么任何工作都会有多么困难吗?这就是网络标准试图防止的事情,通过提出规则,使每个人的工作都更容易,事情只需要做一次。如果您听到有人说他们“编写符合标准的代码”,可能意味着他们编写的代码已通过验证,但希望这也意味着他们了解网络标准的重要性并为之奋斗。

语义 – 这个词本身通常指的是词语或词语选择的意思。在网络上,语义是指选择正确的 HTML 标签来描述内容。例如,使用表格标签来布局您的网站并不是很语义化,因为这些标签不会向它们包含的内容传达任何含义。而像 <navigation> 这样的标签则非常语义化。

渲染 是浏览器在解释 HTML 和 CSS 并将其转换为您在屏幕上看到的视觉最终结果的过程中所经历的过程。

客户端 指的是由浏览器本身解释的语言。例如,JavaScript 由您的浏览器下载,然后在您的机器上本地运行。您的浏览器是“客户端”。

服务器端 指的是由服务器解释的语言。例如,PHP 由您的服务器解释、处理,然后交付给您。作为记住区别的一个简单示例,如果您要求客户端语言显示当前时间,它将显示计算机上设置的时间。如果您要求服务器端语言显示当前时间,它将显示服务器上设置的时间。

DOCTYPE – 这是 HTML 文档顶部看起来像乱码的代码,看起来像这样

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

有很多不同的 DOCTYPE。它们告诉浏览器在解释文档中其余代码时应遵循哪些特定规则集。

内容 – 它只是指文本。“我需要一些该区域的内容”的意思是“我需要您希望放在该区域的文本”。

空白 – 设计中(不一定为白色!)有意留空的区域,用于美观。

矢量 – 一种图形形式,其中设计保存为点和数学公式。因此,文件是“分辨率无关的”,这意味着它们可以缩放至任何大小而不会损失清晰度。Adobe Illustrator 文件是矢量文件(尽管它们可能包含位图数据)。AI、EPS

位图 – 一种图形形式,它保存为单个像素,这意味着它具有设置的分辨率,并且不能放大或缩小而不会影响其清晰度。Adobe Photoshop 文件是位图文件(尽管它们可能包含矢量数据)。JPG、GIF、PNG。

分析 – 指的是有关网站使用情况的数据。当天有多少人浏览了网站?他们来自哪些国家?他们使用了什么浏览器?他们停留了多长时间?这些是分析数据可以回答的问题。它通过使用专门构建用于捕获它的软件(如 Google Analytics)来收集。

字距调整 – 调整两个特定字母之间的间距,以改善单词的美观性。字间距类似,但指的是整体字母间距。

精灵图 – 一张实际上包含多个图像的图像。这些图像通常以裁剪的方式显示,只显示一小部分区域。虽然看起来违反直觉,但这可以通过减少使用图像总数来提高效率。

弹性 – 是一种网页布局类型,其中字体大小和宽度使用称为Em的特殊测量单位(一个抽象的概念,仅表示“相对大小”)来声明。这允许整个网页布局进行缩放,而不仅仅是字体大小。这与固定布局不同,在固定布局中,网站的宽度理论上保持不变,只有文本会缩放,或者与流体布局不同,在流体布局中,布局的宽度由浏览器窗口确定。

框架 – 用于描述旨在简化事物的软件的通用术语。例如:RoR 或 Ruby on Rails,一个旨在帮助更轻松地创建网络应用程序的开发框架。

 

首字母缩略词

CSS – 层叠样式表 – 以 .css 结尾的文件,从 HTML 中链接,控制渲染页面的外观。

HTML – 超文本标记语言是构成所有网站并描述其包含内容的代码。重要的是要理解,所有网站最终都会变成某种形式的 HTML,无论构建它们使用的语言是什么。例如,一个文件可能是PHP(超文本预处理器),如index.php,但最终提供给浏览器的将是 HTML。PHP 文件扩展名只是让服务器知道在提供之前先处理内部任何特殊的 PHP 代码。

JS – JavaScript – 一种客户端语言,具有以下独特功能:A)监视事件(例如鼠标点击、按键等)和 B)在网页上执行操作而无需刷新页面。例如,如果您在网站上看到一个按钮,单击该按钮后一个新区域会向下滑动,那就是(可能是)JavaScript。

AJAX – 异步 JavaScript 和 XML – 一种流行的技术,用于从服务器加载内容并将其放置到页面上,而无需刷新页面。这已成为构建响应性更强且感觉更像桌面应用程序的网站的一种极其流行的技术。虽然 AJAX 从技术上讲仍然是一个首字母缩略词,但它通常与 XML 没有太大的关系。

CMS – 内容管理系统 – 运行在服务器上的软件程序,目的是使网站内容管理更容易。例如,一个网站可能有数百个页面(就像这个页面一样)。每个页面并不作为单独的 HTML 文件存在。相反,内容保存在数据库中,并注入到模板中,根据需要由 CMS 提供服务。

SEO – 搜索引擎优化 – 对网站进行特定操作,以便在 Google 等搜索引擎上的搜索结果中排名更高。在网络上,流量 = 金钱,搜索引擎会带来大量的流量,因此每个人都非常渴望尽可能地提高排名。

SERP – 搜索引擎结果页面 – 你在 Google 中搜索某些内容,你会得到一个结果页面,这就是 SERP。

TLD – 顶级域名 – .com、.net、.org……有很多顶级域名

CRUD – 创建、读取、更新、删除 – 通常用于描述主要目的是执行这些操作的 Web 应用程序。想想博客软件,你可以创建博客条目,以后更新或删除它,并且网站的前端读取它以显示它。

DOM – 文档对象模型 – 这是一个有点抽象的概念。它是浏览器用来表示和交互 HTML 中的对象(元素)的系统。例如,HTML 中的 DIV 肯定属于 DOM 的一部分,但浏览器窗口本身及其直接页面历史记录也属于 DOM。也许最简单的理解方式是,它基本上是构成页面的 HTML,加上一堆只有网络极客才会关心的东西。

RGB – 红绿蓝 – 电子媒体用来显示图形的颜色模型。通常用于描述图像保存的“模式”。用于电子显示(网页、视频等)的图像应为 RGB 模式。

CMYK – 青色、品红色、黄色、黑色 – 传统四色印刷使用的颜色模型。仅通过打印这四种颜色即可实现照片级真实感。通常用于描述图像保存的“模式”。最终用于纸质打印的图像应为 CMYK 模式。

RSS – 真的很简单的聚合,是一种用于发布内容的特殊(且基于标准的)XML 格式。例如,大多数博客都会提供其内容的 RSS。其他人(甚至普通用户)可以利用 RSS 以不同的方式使用它,例如在其他地方重新发布内容,或者仅通过专用程序(例如 Google 阅读器)阅读它。可以将其称为 RSS Feed,甚至可以简称为 Feed

DPI / PPI – 每英寸点数和每英寸像素数。“点数”实际上是纸上墨水的物理点,决定了打印图像的分辨率。“像素”是数据位,决定了电子图像的大小。通常会被混淆和错误使用。

WYSIWYG – 所见即所得 – 描述任何与视觉最终结果而不是抽象交互的内容。例如,显示字体实际外观的字体菜单就是 WYSIWYG 字体菜单。允许你放置方块并拖动的网页设计程序就是 WYSIWYG 程序。

SVN – Subversion – 用于维护不同代码版本的系统。更改会被“签入”,并且可以“回滚”到以前的版本(如果出现问题)。

 

短语

页面可见区域 – 这个词来自报纸行业,报纸首页上半部分的空间比下半部分的空间更有价值。在网络上,无需滚动即可查看的内容被称为页面可见区域,其价值也更高(例如,对广告商而言,或通常而言对用户的注意力而言)。

浏览器安全颜色 – 或“网页安全颜色”指的是一组特定的颜色,很久以前,这些颜色是可以使用的,因为它们可以在所有计算机显示器上正确显示。现在已经不那么重要了。

悬停状态 – 当你的鼠标光标悬停在链接上时,链接颜色发生变化,这就是链接的“悬停状态”。网页设计模型可能会同时包含按钮的常规状态和悬停状态。与活动状态略有不同,活动状态是指链接处于某种状态,例如,在浏览器中“使用 Tab 键切换到”该链接时。

后端 – 一般指网站“幕后”发生的任何事情。在复杂的网站上,人们在浏览器中实际查看的内容下方会发生各种各样的事情。CMS 是“后端”的一个示例。

前端 – Web 应用程序中访问者在浏览器中看到的部件。本质上是网站的“网站”部分。

切图 PSD – 用于描述将 Photoshop 文档 (PSD) 转换为 HTML/CSS 网站的过程的短语。Photoshop 中有一个“切片工具”,它可以是此过程的一部分,但不一定。

像素完美 – 完成的网页设计与创建它的模型完全匹配。

浏览器缩放是浏览器中的一项功能,它会放大整个网站,而不仅仅是调整文本大小。这有点争议,因为它会导致水平滚动,在这种情况下,网站内容的宽度超过浏览器窗口,这意味着用户需要左右移动滚动条以及上下移动滚动条才能浏览内容。

娱乐

Bugfoot – 无法重现且仅被一人发现的 bug。

Duck – 添加的功能,其唯一目的是吸引管理层的注意并被移除,从而避免对产品其他方面的必要更改。

Ghetto Code – 虽然满足要求,但代码部分特别不优雅且显然不是最佳方案。Ghetto 缓存与此类似,指的是将数据存储在文本文件中而不是使用“真正的”缓存解决方案。

Borked – 有问题,通常用于指代网页的视觉布局。“侧边栏下移并破坏了布局。”

 

还有其他可能让普通人感到困惑的词语/短语/首字母缩略词吗?