大前端中的专业术语

一、名词解释

1. 横切
   在固定页面的宽度(按栅格化进行)并且对高度没有限制的容器称为一个标准横切
2. 留白
   两个容器或碎片之间的上、下、左、右的空白距离
3. 继承
   元素可以从其父级元素中获得一些可为自己使用的属性或值。
4. 图片定位
   把图片元素放置到一个静态的、相对的、绝对的、或固定的位置中，利用CSS中对图片进行遮罩属性，多用于页面中的修饰图
5. 底图
   页面中在标签中使用的背景图
6. 齐底
   (图线用于区分横切或碎片结束的线或图
7. 页面结构
   页面的基础框架，由横切、布局元素组成
8. 焦点区(图)
   最易注意的区域
9. 导航
   在页面中具有导向性的链接集合
10. 头图
    页面主题图片
11. 间距
    碎片或文字间的距离
12. 行高
    文字段落中行与行之间的距离
13. 首行缩进
    文字段落首行缩进
14. 浮动
    使被定义的区域脱离正常的页面文档流
15. 碎片
    由文字、图片组合成的内容区域
16. 通栏广告
    与页面内容区同宽的广告区域
17. 功能按钮
    具有交互属性的按钮
18. 私有样式
    当前页面独立使用的样式，不具备公用性
19. 水平(垂直)居中
    在页面中的某个元素处于父级的上下或左右的相同距
20. 标准头(尾)
    定义相同的页面头或尾元素集合

二.、文本格式化

1. 段落：p
2. 斜体：address（联系信息）em（强调）i（突出不同）cite（引用）dfn（首次定义术语）
3. 粗体：strong（重要）b（提醒）
4. 图片块：figure
5. 引述文段，段落缩进：blockquote
6. 背景颜色：mark
7. 虚线下划线：abbr
8. 上标下标：sub/sup
9. 下划线：ins
10. 删除线：del（标记已删除内容）s（标记不准确内容）
11. 等宽字体：code
12. 预格式化：pre
13. 字号减小，表注释：small
14. 时间：time
15. 换行：br
16. html5定义区块：
    • header
    • nav
    • article
    • section
    • aside
    • footer
    • div
    • span

三、表单表格

1. 创建各种框: 注：text→password/url/tel/email Id:为了让对应的标签识别，添加CSS Name：为了让服务器和脚本识别，通常与id设为一样 Size：文本框大小Maxlength：能输入的最大字符数
   Pattern：正则表达式
2. 单(多)选按钮：北京上海注：id各自唯一，name必须相同。checked：默认选择
3. 下拉框：北京上海成都注：size:选择框的高度 multiple：允许多选 selected：默认选择用对选择框进行分组
4. 上传文件：注：size：输入路径和文件名的字段的宽度
5. 创建提交按钮：创建带图像的提交按钮：点击这里创建图像按钮：Submit→reset重置
6. 文本区域：请在此输入字符

四、文本格式化

1. {font：（斜体粗体小型大写字母）字体大小(必有) 行距字体集（必有）;}
2. 文本背景：{ background：#foc url（）repeat-x scroll 0 0；}
3. 字间距：word-spacing:12px;
4. 字偶距：letter-spacing:12px;
5. 缩进增加：text-indent:12px;
6. 小型大写字母: font-variant:small-caps;
7. 文本对齐：text-align:left；适用于block，inline-block
8. 单词大小写: text-transform:capitalize(单词首字母大写)/uppercase(大写)/lowercase(小写)
9. 文本上的线：text-decoraion:underline/overline/line-through;
10. 空格：white-space:pre(显示所有空格回车)/nowrap（非断行空格）；
11. h3—16px; h5—12px; verdana,Geneva,sans-serif;
12. 列表属性： li{list-style:url() inside square;}

五、CSS布局

1. width：不包括padding，border，margin；max-width设置外围限制；
2. 浮动：float:left; 清除浮动：clear:both;
3. 设置边框： border:dotted 4px red;(dotted点状、dashed虚线、solid实线)
4. 使元素对齐：vertical-align:baseline/middle/text-bottom…
5. 显示：display:black/inline/inline-block;
6. 显示：visibility:visible/hiddle;
7. 相对定位：{position:relative; top:5px;} 相对于该元素的原始位置
8. 绝对定位：{position:absolute; top:5px;} 相对于body或离他最近定位的祖先元素
9. 三维位置：{z-index:50;} 越大的在最上面
10. 厂商前缀：-webkit-(safari) –moz-(firefox) –ms-(IE) –o-(opera)
11. 创建圆角：{-moz-border-radius-topleft:50px; -webkit-border-top-left-radius:50px; border-top-left-radius:50px;} (左上角,角的半径是50px) {border-radius:50px;}(所有角简写)
12. 创建椭圆角：{ border-radius:40px/20px;} （x半径/y半径）
13. 创建圆形：{ border-radius:50px;} 50px为元素半径大小
14. 文本加阴影：{text-shadow: 2px 5px 5px #999;} x/y/模糊半径
15. 元素加阴影：{(-moz-/-webkit-)box-shadow:(inset内阴影)2px 5px 5px #999; 5px 10px 2px #555(多重阴影);}
16. 多重背景：{background:#000 url() 50% 102% no-repeat,#222 url() 12px -150px repeat-x;}
17. 透明度： {opacity:.5;} 0→1 透明→不透明
18. 渐变背景：{background:linear-gradient(left,#000,#999);} (left ：渐变线沿逆时针方向转至水平线的角度)

六、html5视频音频

1. html5支持3种视频：.ogg/.ogv .mp4/.m4v .webm
2. 添加视频：视频属性：src autoplay controls muted loop poster width height preload
3. 为视频添加多个来源：//嵌入Flash动画下载该视频
4. html5支持5中音频：.ogg .mp3 .wav .aac .mp4
   5.添加音频：音频属性：src autoplay controls muted loop preload 。多个来源同video。

七、实际项目中的一些约定(重点)

我们结合常用的一些命名习惯，再结合CSS的实际应用，整理出一些较好的命名习惯。

1. 样式名称首字母统一为小写字母，不能为数字，下划线及特殊字符；
2. 样式名尽量语义化或简写；
3. 样式名需要组合拼写时，采用全部小写拼写并使用下划线连接，即：all_keyword；
4. 使用px(像素)为基本计量单位；
5. 页面中空格的使用：全角：中文空格半角；
6. 项目完成包中，文件夹及文件名称全部采用小写字母，不使用中文文件名；
7. 减少DIV的嵌套层数；
8. 给重要图片加上alt属性；给重要的元素和截断的元素加上title；
9. 使用正确的注释方法（详见“注释”章节）；
10. 特殊情况下要求表现和内容分离，代码中不要涉及任何表现的元素，例如：style、font 等；
11. 双标记签都要有开始和结束标签，单标记标签的后面一定要加“ /”,例如：等，并且有正确的层次；
12. 其它特殊符号：1) 2) >(>)

八、命名空间

外挂样式名称全局：
全局样式为全站公用，为页面样式基础，页面中必须包含。结构：
页面结构类型复杂，并且公用类型较多时使用。多用在首页级页面和产品类页面中。
私有：
独立页面所使用的样式文件，页面中必须包含。
模块
产品类页面应用，将可复用类模块进行剥离后，可与其
它样式配合使用。默认文章图片下载主题实现换肤功能时应用。补丁基于以上样式进行的私有化修补。
常用名称
(1)页面结构容器: container
页头：header
内容：content/container/content(A)
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper

---

九、前端常见专业名词

js：js是一种语言，跟java，c语言性质一样。

jQuery:是一个js库。就是给js这个语言封装了一系列方法，让大家去调用。

zepto.js：是一个兼容jQuery的js库，比jQuery更轻量更适用于移动端。

artTemplate:一个模板渲染技术，是前端开发mvc模式中视图跟数据分离的重要技术。通过这个技术，可以实现前后端工作分离。后端提供接口，前端请求接口拿到数据，用数据渲染模板，构建网页。

tomdjs：是一个管理模板的工具。优化artTemplate中将模板放在html里面的标签的方法，将模板工程化管理，放在html代码外面，用的时候通过写路径来调进来。

CommonJS：是一个规范。模块化js代码的规范。理想状态下，如果大家都遵循这个规范去封装模块，那么大家就可以互相用彼此已经写好的模块。

node.js：好像是一个框架，node.js的模块系统，就是参照CommonJS规范实现的。用nodejs就可以将js语言用于服务器端编程。像java/php等后端语言一样，处理数据与系统的其他应用程序互动，处理并发百万个进程的访问请求。

AMD：类似与CommonJS的另外一个模块化js代码的规范。它是为了解决CommonJS规范不太适用于浏览器端程序的问题。AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。服务器端的模块可以不异步加载，因为js模块就存在服务器电脑的硬盘里，存取速度很快。可是浏览器端的js模块大都放在服务器端，需要远程访问。一定要异步请求，不然网速慢就坑了。

require.js：是一个js库，采用的AMD规范，是AMD规范的实践。js代码模块化工具

vue.js：是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。就是说它能实现artTemplate的功能，而且当数据变化时页面的数据会自动变化（数据与视图绑定）。React ，angularjs，vuejs是相似的一类技术。

百度FIS：前端工程化解决方案（前端构建工具）

矢量图：一种类似字体的图片，矢量的不管放大缩小都不会失真，且可以按字体的属性来操作，跟字体一样大小不浪费资源。比如阿里的iconfont和weui的。

十、各种进制

1：各种进制转成十进制

二进制->十进制

1101100 转成 十进制

12^6 + 12^5 + 02^4 + 12^3 + 12^2 + 02^1 + 0*2^0
八进制->十进制

1507 转成十进制

18^3 + 58^2 + 08^1 + 78^0
十六进制->十进制

2AF5 转成十进制

216^3 + 1016^2 + 1516^1 + 516^0
2.十进制改成各种进制

十进制数字不停的除于要转的进制求余，直到商是0，再把所有余数从后往前转成要的进制就可以了。比如：255转成十六进制： 255不停的除于16求余，直到商是0，再把所有余数从后往前转成16进制就可以了。

十进制转成十六进制：

255=>FF

23785=>5ce9
十进制转成八进制：

255=>377
255不停的除于8求余，直到商是0，再把所有余数从后往前转成16进制就可以了。
十进制转成二进制：

255=>11111111
不会进制，遇到这种面试题，直接去世。

---

十一、控件

众所周知，html是一门标签语言，组成了网页的基本结构。比如：

<input type="text"></input>
表示单行文本输入框
<table></table>
表示表格
<button></button>
表示按钮

文本框、按钮、下拉框等最小的界面视觉元素就叫做控件。

十二、组件和组件库

1、组件

单纯的控件只是展示了简陋的视觉UI和基本行为，在实际开发中需要用到的是经过各种样式装饰和动画还有丰富行为的UI，而且还会被重复利用。所以为了降低代码重复率，提高开发效率，一般开发会把一个或多个控件的结构、样式、行为、联动封装到一个文件中，这样一个组合文件就称为“组件”。

我们来看下经过封装的表格组件，它具有表头的灰色样式、表头固定样式、行状态样式、间距样式等。同时它也具有表格行可伸缩、可排序、可拖拽、可内嵌展开等行为。

1)可以排序的表格

2）可以展开的表格

3）自带搜索的表格

注：现在市面上看到的UI,一般都是经过组合封装的，UI主题样式一般跟公司、项目有关。所以目前最多的叫法是“组件”。

2、组件库

多个组件通过一定的方式封装起来，可以提供给多个项目使用的同一套代码组件，就叫组件库。多个项目使用一套组件库，不仅可以让类似项目保持相同的UI主题，还能避免开发重复造轮子，提高开发效率。

现在市面上比较流行的组件库，有蚂蚁金服ant design，饿了么element ui、iView等。现在很多公司在做网站时，使用的是这几种组件库。当然也有部分公司使用自己研发的组件库。

十三、框架

框架是为解决一类问题而产生的产品。它面向的用户是开发者。现在市面上比较流行的前端类框架有：

• web端：js框架 --> react、vue、angular

• 客户端：react native、flutter

• 微信小程序端：wepy、mpvue

它们的诞生，大多是为了解决js操作界面元素的性能消耗、代码复用性、可维护性、可读性、健壮性等问题。

使用不同的js框架，代码的写法几乎不一样，对应的组件库也不一样。
react->ant design vue->element
所以如果想把项目换一种框架来写，成本是相当高的。如果想在不同端展示一样的UI怎么办？在web端、客户端、小程序端写3套代码？这时跨端跨框架的解决方案就诞生了，Taro框架 => 它支持只编写一套代码就能够适配到多端的能力。

十四、页面适配

页面适配一词一般用于移动端。因为现在的手机机型和手机屏幕种类很多，不同的屏幕大小下，一样的布局可能表现会错乱。不同的机型下，可能因为某个样式不兼容而表现异常。

对手机机型或手机屏幕大小或浏览器大小来对页面样式做兼容匹配，叫做页面适配。

当一个移动端页面做出来后，怎么知道要兼容哪些机型和屏幕呢？要看该产品的目标用户有哪些。

如果目标用户是东南亚等发展中国家，一般要考虑国外用户常用的机型，比如一加手机。如果目标用户是国内的中老年人，则要考虑大屏幕的安卓手机，比如华为、小米。如果目标用户是18-35岁之间的蓝领白领，需要适配的机型就比较多了，一般要考虑苹果6/7/8/x/plus/se/ipad、华为、小米、三星等主流机型。

十五、渲染

众所周知，一个网页基本是由html、css、js构成的。当前端请求回来html、css、js等静态文件后，浏览器引擎就开始按照规则解析语言，然后测量、排版、绘制页面，最后展现出我们眼前的网页视觉效果。这个过程就叫做渲染。

有时候你可能会看到网页展示有点慢或者是卡顿，那就是渲染比较慢。

十六、同源和跨域

先看个例子：

❝设想这样一种情况：A 网站是一家银行，用户登录以后，A 网站在用户的机器上设置了一个 Cookie，包含了一些隐私信息（比如存款总额）。用户离开 A 网站以后，又去访问 B 网站，如果没有同源限制，B 网站可以读取 A 网站的 Cookie，那么隐私信息就会泄漏。更可怕的是，Cookie 往往用来保存用户的登录状态，如果用户没有退出登录，其他网站就可以冒充用户，为所欲为。因为浏览器同时还规定，提交表单不受同源政策的限制。（注：以上例子来自阮一峰老师）
❞
为了保证用户信息的安全，1995年开始，所有浏览器都遵循了“同源策略”。同源策略指的是，网址在协议、域名、端口都相同的情况下才是同源的。

举个例子：

网址：http://a.com:80/page/index.html。http:// 是协议，域名是a.com，端口是80。

不同源的网址，不能获取对方的cookie、localstorage，不能给对方发送ajax异步请求，不能获取对方的页面元素。

如果你对不同源网址发起了请求，或者是去获取不同源的页面元素，就叫做跨域，浏览器会拦截报错。

十七、cdn

cdn是一个为了使用户就近获取内容，提高资源访问速度的一种内容分发网络，主要由内容分发技术和内容缓存设备组成。

一般我们会把html、css、js、图片等静态资源放在cdn上，当加载页面时，浏览器会请求cdn的静态资源。

假设你的目标用户是国际用户，cdn缓存设备分别在亚洲、欧洲、美洲、澳洲、非洲各有一台，如果你是一个美国用户，当前端请求静态资源时，就会被分配到最近的美洲cdn缓存设备获取资源。

这样不仅能提高资源加载速度，还能避免网络拥塞。