2024年设计网页术语 篇1
你好,我是柏小陌OK,一名UI设计师,很荣幸可以回你的答问题,以下是我个人的一些见解,希望对您有帮助。
我猜你肯定是个新手,想学习这些知识之后去找工作。告诉你个秘密,面试官在面试新手设计师的时候,往往不会问太多的设计逻辑和商业逻辑。
但是往往会问你一些偏基础的内容,比如问你UED,GUI什么意思?他们是干什么的?这些最基础的知识如果答不上来就很尴尬。所以掌握这些知识就变得非常有必要。
其实你所谓的UI,UX,UE都是再简化后的名称,全称叫GUI,UED/UXD,还有个IXD,那为什么会这样呢?下面系统介绍一下。
很多新手设计师和很多自媒体公众号。常常把GUI,UED/UXD,IXD,这几个专业术语搞混,层级关系也不准确。有人曾经做过一个调查,列举了以上几个关系,结果发现高达70%以上的人都做错了,也说明了,即使一些从业多年的设计师对他们彼此间的定位仍然还不清楚。
如果你能回答对,就比70%的人都要厉害。GUI
当前,对于GUI有两种解释。一种是图形用户界面,简称GUI,也就是我们常说的UI设计师职位的正确称呼.而另外一种是Game Interface Design,即游戏界面设计,也叫GUI。
但是在很多公司在招聘时都写成GUI了,这就容易让人误解,不知道他到底是招什么类型的设计师。
因此让很多人都误解了G的含义,并且觉得3个字母比Ul这两个字母长,认为GUI的级别就是最高的,这是非常严重的理解错误也是很荒唐的一件事.
所以现在国内很多招聘平台的设计岗位写的是招聘UI设计师,其实正确的说法是GUI设计师,但是害怕混乱所以才做了统称UI设计师
GUI更多体现的是视觉部分,请大家注意两个关键词图形和界面,也就是软件程序呈现的画面都是图形界面。WUI
其中W是Web的缩写,顾名思义,WUI就是网页界面设计师的意思。早期的网页设计不在Ul设计师的工作职责范围内,但是由于现在设计的全能化、多样性,如今网页设计也成为UI设计师工作职责的一部分.
但是网页设计与界面设计还是有很多不同之处的,这二者有一个很明显的区别,就是操作的方式和区域范围不同。网页是利用鼠标.
指针操作其选择单击的精准度在4px左右,而手机是手指在操作,低于24px的触碰操作基本上就非常难了.
一个得满分100分的网页设计的设计师未必做得出60分的界面设计。同样一个做得出满分100分的界面设计的设计师未必能做得出60分的网页设计.UED/UXD是什么?
UED和UXD其实是一个意思,都是用户体验设计师,那么为什么会有两种叫法呢?
因为国内和国外的缩写是不同的,这才导致了很多人产生了误解。
UX和UE都是User Experience的缩写,D是Design的缩写,UE是咱们国内的叫法。因为国外习惯把EX缩写成X,微软和谷歌等知名公司都曾经这么缩写过,渐渐也就成为约定俗成的了,所以国外习惯叫UX。IXD是什么?
维基百科:交互设计(Interaction Design)是定义和设计人造系统行为的设计领域。它既包括软件界面的交互,也包括硬件设备的交互,很多人也称为互动设计。
其实这么叫并不准确,
其实交互设计和互动设计是有很大区别的。早期的很多带Flash动效的网站被称为互动网站,互动设计更多地存在于网络公司,所招聘的互动设计师通常就是另一种网页设计师,介于网页和广告之间,它更倾向于将创意视觉和网络技术结合的手法创造出作品!
我们再来看交互设计,交互设计涉及的领域就广泛得多了,如果要给它们俩一个更容易解释的定义,那么可以说互动设计相当于你在跟系统对话,而交互设计就是你在跟系统心灵沟通。
举个例子,当用户第一次使用App的时候,他如何能在不阅读说明书的情况下就知道这个App怎么使用?
用户如何知道自己现在在什么位置?在这个位置能做什么?下一步可以去哪里?如何才能回到刚才那个位置。自己这个操作行为是否会有结果?会有什么样的结果。而这些设计逻辑就是有交互设计师来做的,这就是交互设计师要干的事!关于培训
至于培训班的选择,其实各培训班讲的内容都差不多,所以参考的维度无非就是线上和线下,如果你自制力比较差,喜欢别人带着学,那么选择线下可能比较适合你,如果你自制力比较强,那么选择线上可能比较适合你,没有太多的说道。
希望能帮到你!
2024年设计网页术语 篇2
您好!很高兴回答您的问题!
一、平面
平面设计是这三种设计里最“古老”的专业了,可以说平面设计是一切设计的鼻祖,学任何设计都绕不开它。因为所有的设计理论比如配色,排版,字体等都是平面的基础也是设计的基础。同时平面设计也是比较复杂的,因为除了要了解基本的设计技巧以外也要了解材质,工艺等,不同的工艺和材质出来的效果也是千差万别,甚至在预算上都会差出好几个层级。
1.1载体
平面的载体在三类专业中算是比较多的,最常见的就是纸了,当然纸也分为了很多种,最常用的是铜版纸。铜版纸又根据克数的不同用途也有所区别。用到纸质的设计有画册,单折页,海报,杂志,名片等。这里关于名片多说一句,很多人说名片那么小的尺寸,如何才能有设计感?加的内容和装饰多了会显着很乱很拥挤,加的内容少了又给人的感觉没有设计感,这个问题如何解决呢?最简单的方法就是简约的设计+高档的纸+恰当的印刷工艺。不过这里所说的名片是比较高档的名片了,在公司里也是处于中高管理层的,一般的业务员因为分发的名片量比较大,所以就用最普通的纸就可以了,控制成本。
平面设计中还会用到的载体是喷绘和灯箱片用到的一种类似塑料的材质。此类材质的设计手法与其他设计无异,关于此类材质多说一句就是设计时的分辨率设置。一提到平面设计的分辨率很多人的第一反应就是300,这是个绝对的误区,其实在平面中也会用到150,72,甚至30。那这是如何划分的呢?最简单的一种解释方式就是阅读距离。一般捧在手上看的设计分辨率为300,比如杂志/单折页/画册等,因为阅读距离很近,如果分辨率比较低,会出现很明显的不清楚情况。
再有海报的设计一般是挂在墙上的,我们阅读时是有一些距离的,所以分辨率设置为150到200即可,很多人会问设计成300可不可以?当然可以,但有几个前提,首先你能找到那么大尺寸同时是300分辨率的素材图片,再有就是你的电脑是不是都能够带起来这么大尺寸同时分辨率又很高的文件,还是建议大家不要尝试了,结果一般比较惨。
再有还有72和30的分辨率,此类分辨率会用在阅读距离更远的设计上,比如马路上的大型围挡,商场大厦外面的五六层楼高的大型海报。
最后要提的一个材质是最近几年流行起来用的比较多的就是电子屏,在商场大厅,电梯墙壁,写字楼前台等地方现在都会用到电子屏来展示一些海报/通知/活动等。此类材质的好处就是更新内容方便,节省印刷成本,最重要的是没有印刷后果。印刷的风险比较大,因为印刷不可逆,印刷出来后出现了问题,基本没有补救的措施,而电子屏则没有这个风险。当然它的缺点就是没有很强的流通性,一般只能在固定的一个地方进行展示。
1.2用途
平面设计包含的品类是比较多,常见的画册/海报/单折页/名片/书籍装帧甚至包装等传统设计基本都是平面设计师的工作。除了这些印刷品以外还有logo设计,VI设计等工作。平面设计的品类就是比较多,所以想做一个优秀的平面设计师没有个几年的历练是很难达到的,这也是最初平面设计师转UI设计师和电商设计师比较容易比较多而网页转平面不容易的原因所在了。
平面设计师设计出来的内容很多,刚才提到了logo,VI我们统一称为品牌设计。画册,海报,包装我们统一称之为物料设计。两类设计统一归放到平面的名下一定是有原因的,品牌设计是用来宣传企业品牌的,规范企业的设计视觉,统一企业的宣传口径。
画册,海报,包装等物料是用宣传企业产品的,使自己的产品在原有的基础上更具商业价值。最具代表性的就是包装,我们经常会看到很多普普通通的产品包裹上漂亮的包装后,价格就会成倍的增长。所以不管是品牌也好还是物料也好都是用来做“宣传”的。这也是平面设计师最鲜明的特点,设计出来的东西用来做宣传。这个东西本身并不是产品,也不具备什么商业交易价值,都是为了公司为了产品服务的。
1.3技能
因为平面设计师需要做的内容涵盖的比较多,所以对于技能方面的要求也比较全面。比如除了最基本的PS/AI/ID等设计软件以外,还有了解到排版印刷工艺,材质使用,字体设计等。如果各位将来是做平面设计的话,印刷材质是关键,就像刚才说名片时提到的,同样的设计,如果材质不同给人的感觉也是完全不一样的。所以这一块除了看书学习以外,更直接的方式就是泡在印刷厂里,跟着老师傅走几遍流程,学到的东西会受益匪浅的。
二、网页设计
网页设计在现在的工作中又分成了两个工种,一种就是常规的网页设计师,设计企业的官网,或者是一些具备功能性的网站。另一种是电商设计师,在五年前,这个工种依然不被人看重,即便是现在也有很多电商企业称自己家的设计师为美工,这也就造成了很多设计师会不愿意来做电商设计,更不想承认自己是美工。但实际上做的好的电商设计师工资也是非常可观的,尤其是在一些大型的店铺,此类店铺的视觉自然也是能够在圈里数一数二的了。
2.1载体
网页的载体比较单一,在之前就主要是在PC端运用,后来移动互联网的流行与普及,使得网页在手机上也流行起来,还有平板等。为了保证能够多端正常显示,在html5和css3的帮助下流行开的一个名词叫着“响应式设计”,也就是使我们的网页能够在任何平台上都正常显示。
2.2用途
刚才我们说平面设计时提到了一个名词就是“宣传”。如果给网页也用一个名词概括的话,我觉着就是“载体”。没错,网页本身就是载体,企业站乘载了公司的产品信息,企业文化,品牌宣传等,是普通人了解一家企业的最基础入口。而类似于天猫淘宝此类的功能性网站,也是将网页作为了一个平台一个载体,来进行产品的销售的。网页本身是一个“容器”,里面“装”的内容决定了一个网页的价值。
2.3技能
在说平面时我提到了平面设计师转网页设计师是比较好转的,因为网页设计师同样需要具备对于色彩,排版和字体的敏感度。软件除了要会PS和AI以外还要需要了解Html和Dw。这里一定要跟大家强调的是网页视觉设计师不用对代码有非常深入的研究,因为在一家健康的运行公司里网页视觉设计师和前端工程师是两个工种。对于代码的态度是了解基础即可,深入了解如虎添翼。如果是做电商设计的话,从现在的趋势和2016年双十一的店铺设计来看最近一年是3D轻质感的天下,所以有心的设计师一定要会一款3D软件,市面上很多,3D MAX/MAYA/C4D等,给大家推荐的是C4D,出效果易上手。
三、总结
设计这个行业是一个充满了很多无奈的地方,表面光鲜,后面因为客户、资金、想法等所经历的坎坷只有自己体验了才知道。之前说过一句话,如果是因为看到了这个行业挣钱就来这里做的话,可以,没有问题。但是如果你很难使自己喜欢上设计的话,那还是奉劝各位需要慎重啊。因为如果不是真心喜欢的话,挣在再多钱也很难坚持下来,半途而废虎头蛇尾的事在这行里很常见的。
最后我一直跟人分享的一句话就是师父领进门 ,修行在个人。作为设计师你需要了解的是这个世界上最新的东西,紧跟时代,任何新东西的产生没有设计师是出不来的。所以无论是科班出身还是专业培训,一直都要做的就是自学。不要想着通过喷几句大品牌的设计来凸显自己的逼格更高,你自己的专业度和审美是无法和苹果几百人的团队来比拼的。喷Instagram的图标丑的都是没有用过的人。有心的人能谦虚的去看比自己优秀的作品,找出好处加以学习使自己进步。
最后说一句设计这个行业对于学历没有特别的门槛,你可以没有学历,但不能停止学习。
2024年设计网页术语 篇3
时间推移,社会高速发展,我们的生活已经被互联网全面辐射。
企业若想在瞬息万变的商海中立于不败之地,网络营销推广,势在必行。既然要做网络营销推广,企业官网,就是我们的前提跟基础。
就好似我们要卖产品,首先得有自己的摊子或者是店铺。而企业网站,就是企业在网络上的摊子跟店铺。
既然网站是网络营销推广的前提跟基础,它的地位是很重要的,市面上做网站的公司也很多,到底一个好的网站怎么判断呢?
佛山华企立方根据十三年做网站建设的经验,跟大家分享自己的几个观点:
第一,颜值。
人都是视觉动物,第一印象很重要。当客户打开我们的企业网站,最先呈现在客户面前的就是网站的外观。如果一个网站排版乱七八糟的,图片也不清晰,产品描述也不清楚,那客户肯定不会再愿意看下去。
就像我们去相亲,出门前肯定得将自己好好拾掇一般,穿件好看的衣服,梳理好头发,女生还要化个妆。
同样的道理,好的网站在外观上首先要给人呈现出大气干净整洁的感觉,色彩搭配也要有设计感,图片更要清晰;另外,要让客户一目了然,一进网站就知道这是一家什么样的企业,有什么样的产品,有什么优势跟实力,拿过什么荣誉等等。
这样就能第一时间抓住了客户的眼球。
第二,服务器
支撑网站运行的服务器关系到客户打开网站的速度,如果一个网站打开需要半天,客户肯定不会在那里等。毕竟现在生活节奏快。
既然服务器那么重要,我们该怎么选择网站的服务器呢。
中国的三大服务器,阿里云,腾讯云,华为云。
阿里云,就是阿里巴巴的服务器,每年双十一天猫淘宝破亿的成交量都是靠阿里云在支撑的,可见阿里云有多强大。腾讯云,微信用的就是腾讯云,微信起码有几个亿的用户,但出错率极其少,所以腾讯云肯定也不会差。至于华为云,那是华为的服务器,更加不用多说。
第三,独立的域名IP
网站域名和网站后台空间组成一个完整的网站,网站域名分为很多种,一般有顶级域名、二级域名和三级域名等,其中顶级域名就是我们所说的独立域名。如果不是独立域名,有可能几个网站共享一个域名,这样我们所占的空间跟资源,就要跟别人去分享。
独立域名跟其他域名的区别就好像,一个人独占一间办公室办公和一群人一间办公室办公的道理一样。
另外,拥有独立域名的好处还有,容易被人记住,因为独立域名比较短,一般是企业名字拼音加后缀,同时独立域名也方便客户搜索,增加流量。独立域名还能增加企业的信誉度,它会给人一种感觉,独立域名的拥有者一般都是正规的企业、商家。最重要的,独立域名具有所有权,一旦你注册了这个域名,只要在过期前续费,这个域名不会被人抢注。
第四,SSL证书
SSL证书是数字证书的一种,类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上,也称为SSL服务器证书。SSL 证书就是遵守 SSL协议,由受信任的数字证书颁发机构CA,在验证服务器身份后颁发,具有服务器身份验证和数据传输加密功能。
网站拥有SSL证书,可以防止中间人流量劫持,并且Https加密使网站更安全,还能保障用户隐私信息安全帮助用户识别钓鱼网站,提升搜索排名,提升公司形象和可信度。
SSL证书还能防止网上交易时黑客盜走客户的银行卡,帐号等机密信息,防止非法恶意篡改客户的银行卡号等个人信息,验证网站的真实性,保证每笔交易都有可靠的记录。
当网站添加了SSL证书以后,浏览器上都显示安全可信赖的网址,使用户不必担心自己浏览的网站是否存在病毒,提高网站的点击量。
另外,没有SSL证书的网站是不能连接微信小程序服务端跟抖音的。
那怎么去辩解网站带不带SSL证书呢,有两个小诀窍,看网站网址前面有没有一个绿色的锁,还有就是网站的开头是HTTPS的就是带证书的,而开头是HTTP的则是不带证书的。
第五,一些有助于优化推广的设定
例如301跳转。
如果我们足够细心,我们会发现,打开好多排名靠前的网站,会发现他们的域名都是带www的,就算把域名www去掉后再打开这个网站,域名同样自动跳转到www上面了。这就是301跳转。
301跳转书面定义为永久重定向,是SEO中的一个基础名词。通常叫做301跳转,也叫301重定向,301转向,指的是当用户点击一个网址时,通过技术手段,跳转到指定的一个网站。
它的优势是转向传递权重,可促进搜索引擎优化效果,避免原来的流量丢失。
又例如404页面错误
404,是一种HTTP状态码,指网页或文件未找到。HTTP 404或Not Found错误信息是HTTP的其中一种“标准回应信息”(HTTP状态码),此信息代表客户端在浏览网页时,服务器无法正常提供信息,或是服务器无法回应且不知原因。
像我们有的时候输入了错误的链接或者是访问了不存在的网页时,会出现一个这样的页面
要是设置了404,就算客户输入了错误的链接,也能自动跳转回我们设定好的主页。而不是像上图一样,卡在错误页面上。
设置404页面的好处,引导用户不关闭网站,增强用户体验;防止网站出现死链接。
……
建一个网站不难,但是建一个好的网站却是不简单。小伙伴们,都学会了么?
欢迎来跟我们一起交流,让我们互相学习。
我们是佛山华企立方,一家经营了13年的技术型公司。
公司技术团队有40余人,目前服务的佛山企业近1400家,政府扶持上市的顺德龙腾企业近50家。公司专业定制高端网站(营销型网站、品牌网站、外贸网站)、百度SEO优化推广、阿里巴巴诚信通店铺装修代运营、腾讯企业邮箱、400电话、视频制作、画册LOGO设计等企业应用服务。
自公司成立以来,一直秉着:致力于帮助传统企业网络营销落地的初心理念。从企业形象设计到网络营销推广落地,一站式帮助企业通过互联网获取订单,提升企业品牌知名度。
2024年设计网页术语 篇4
301重定向:网址重定向最为可行的一种办法。当用户或搜索引擎向网站服务器发出浏览请求时,服务器返回的HTTP 数据流中头信息(header)中的状态码的一种,表示本网页永久性转移到另一个地址。404:404页面就是当用户输入找不着链接的网址,返回找不着内容的页面。
Alt :展示给终端用户的图片的描述. 加入Alt Tag 后,如果图片没有显示,浏览器就会在本来图片的位子用文字的方式显示Alt Tag 的内容,来帮助浏览者浏览网页。
back link :反向链接,链接到网站地址的网页。如果B 网站指向A 网站,那么B 网站就是A 网站的反向链接。
拔毛:俗语被K ,在搜索引擎中找不到网站收录的信息。black hat :黑帽。简单的讲就是SEO 作弊。
bounce rate :跳出率,当一个用户进入一个网页,接着在一个会话时间内没有看过该站其他的页面就离开了该网站,就被称作Bounce 。Bounce Rate 越低越好,说明用户访问了更多的页面。
bread crumbs :面包屑,又称位置导航。“面包屑型”架构方便用户了解当前页面在网站的层次结构。
Directory :目录是由人为编辑的搜索结果。大多数目录依靠的是人为提交而不是爬行器。
Dmoz :(OpenDirectory Project) ,简称ODP ,多语种开放编辑公益性互联网网站目录。
Doorway Page :" 门页/桥页" ,这些页面都指向你站点的主要页面,同时每个“桥页”还专门针对某一个搜索引擎做了优化,以保证能迎合该搜索引擎的一些特别要求(算法)而在该引擎中获得高的排名。duplicate content :" 重复内容" 是一个页面的内容和互联网中另一个页面相同或非常相似.
Google dance :Google 跳舞。由于Google 数据库或算法引起的搜索引擎结果页面的大幅变动,或者,当Google 索引更新的时候,不同数据中心数据不一致也会导致搜索结果的变动。
in bound link :(inlink,incoming link) 可直译为“来自外部网站的链接”,也即导入链接,也就是我们通常所说的一个网站“被其他网站链接的数量”。
indexed Pages :" 索引页" 就是被搜索引擎索引的页面。
keyword density :关键字密度。是一个网页中目标关键字所占的比率。keyword spam :(keywordstuffing) 关键字堆砌。为了提升目标关键字排名增加关键字的密度。
landing page :登陆页面。是指用户在搜索引擎结果页里点击进入的页面。
link bait :链接诱饵。是指一个网页通过特殊定位和布局来吸引反向链接。
link exchange :交换链接。是指互惠链接的建立, 通常把它说为" 友情链接" 。
link popularity :链接广度。是指一个站点外部链接的多少。
link text :(Anchortext) 链接文本,锚文本。是指用户能看见的一个链接。搜索引擎通过链接文本来判断被链接的站点是什么内容. 一般都将关键字设为锚文本.
long tail :长尾词比一般的搜索字符串要长。比如" 旅游" 是广泛词,而" 北京旅游指南" 就是一个长尾短语,而大多数用户都是使用长尾短语的。
META :定义描述网页参数\属性的代码。主要包括title 、keywords 、description 字段。
mirror site :镜像站点。是指在不同的域名下找到相同的网站, 一般被视为作弊手段。
nofollow :链接的一个属性,它能使搜索引擎蜘蛛忽略这些页面的一部分链接。一般博客评论下都有Nofollow 属性。此类外部链接对SEO 无用。
Noindex :禁止索引是指在一个网页的head 部分有一个禁止索引的命令,它能告诉搜索引擎不要索引当前这个页面。
Pagerank :(PR)网页级别是Google 衡量网页重要性的工具,测量值范围为从1至10分别表示某网页的重要性。新网站的pr 为0,一般pr 每3个月更新一次。
Redirect :重定向是指当你打开一个页面, 它自动跳转到另外一个域名或地址.
regional long tail :(RLT)地域性长尾短语是指带地区名称的长尾短语. 比如" 北京旅游指南" 这个短语就是地域性长尾短语。
robots.txt :机器人文件是指在网站根目录下的一个文件, 通过书写的一些代码, 能控制搜索引擎蜘蛛的抓取行为. 通过它我们能让搜索引擎禁止或者快速抓取我们的网站。
Sandbox :沙盒是指google 会把所有的新站放入沙盒,并且不给于好的排名,直到这个网站通过google 的考察期。
SEM :(searchengine marketing) 搜索引擎营销只要包括两点,一个是SEO 搜索引擎优化服务,另一个是付费SEM 搜索引擎营销,比如PPC 、竞价等。
SEO :(searchengine optimization) 搜索引擎优化就是通过对网站的关键词、内链、外链等优化,使搜索引擎更容易搜索网站的内容,并且让网站的各个网页在搜索引擎中获得较高的评分,从而获得较好的排名。
SERP :(SearchEngine Results Page) 搜索引擎结果页是指用户在搜索引擎上搜索某一关键字而出现的结果页面。
Sitemap :网站地图是一个拥有网站所有或部分重要链接的页面,xml 类型的网站地图是提交给google 的。它能帮助网站更快的被搜索引擎收录。
social bookmark :社会书签。是收藏分享网页的地方. 如网络收藏夹等。Spamming :垃圾技术是一种欺诈性的SEO 手段,它尝试欺骗爬行器(spider ),并利用排名算法中的漏洞来影响针对目标关键词的排名,垃圾技术可以表现为多种形式。根据是否采用垃圾技术,SEO 方法可分为两大类:黑帽SEO (Black hat SEO ),用垃圾技术欺骗搜索引擎。黑帽SEO 以伪装、欺诈和窃取的方式骗取在SERP 中的高排名;白帽SEO (White hat SEO ),以正当方式优化站点,使它更好地为用户服务并吸引爬行器的注意。
spider :(bot,crawler) 搜索引擎蜘蛛是搜索引擎用来增加网页数据库的一个特殊机器人。
static page :静态页面是指在网址URL 中没有任何变量和参数, 静态页面往往对搜索引擎蜘蛛是最友好的。
supplemental index :(supplementalresults) 补充材料是Google 辅助索引的一部分。对辅助索引进行抓取的限制少于主要索引。
text link :文字链接是指以文本形式的连接, 它不包括图片或java script 等。
TITLE :定义网页的标题。
user generated content :(UGC)是指“用户生产内容”,即网友将自己DIY 的内容通过互联网平台进行展示或者提供给其他用户。W3C :(WorldWide Web Consortium)W3C 组织对网络标准制定一种协议。
DIV :一种以标签的行式,提供网页内容与结构等样式的标签。CSS :(CascadingStyle Sheets) 层叠样式表,一种标记语言,它不需要编译,可以直接由浏览器执行,用于更好的设计网页。
降权:在搜索引擎中搜索特定关键词找不着网站信息,网页内容靠后。通常是由于优化过度或不符合搜索引擎规范造成的搜索引擎惩罚。white hat :白帽是SEO 的正规技术,它于黑帽正好相反。
2024年设计网页术语 篇5
一、HTML部分
首先是要掌握一些常用标签的使用和他们的各个属性,这些常用的标签总结了一下有以下这些:
html:页面的根元素。
head:页面的头部标签,是所有头部元素的容器。
body:页面的主体标签,页面展现的内容就放置在这里面。
title:页面的标题。
meta:位于文档的头部,提供页面的元信息,包括关键字、描述等等。
link:定义文档与外部资源的关系,常用的用途就是引入样式表。
script:脚本标签,可以把js脚本代码放置在这个标签内,也可以使用这个标签的src属性引入一个外部标签。
style:样式标签,可以把css代码写在这个标签中。
a:超链接,href属性代表要链接到的地方,target属性代表打开方式。
img:图像标签,src属性表示图片的位置。
form:表单元素,它内部的input、select、textarea等标签都是比较重要的。
div:定义文档中的分区或节,可以使用div来进行页面的布局等操作。
另外还有ul、li、p、button、iframe、p、table等标签也很常用,nav、section、article、header、aside、footer等语义化标签也需要了解一下。
除了要了解上面这一些标签之外,还需要对一些新的HTML5的API有一定的了解:
audio、video标签。
Canvas:定义图形,比如图表和其他图像。
input标签的accept属性,email、phone、url等类型。
getElementByClassName根据class名来获取一个元素结点。
Multiplefileselection多文件选择属性。
html的import、template
process标签,webGL等内容。
还有一些要知道的知识点:
1.doctype的作用。
2.unicode、utf8等编码的原理和区别。
3.如何进行页面性能优化。
4.png、jpg、webp、gif等图片格式的不同的优势。
5.HTML行内元素与块级元素的区别。
6.移动web端开发常用head标签。
7.web语义化。
8.浏览器中的缓存原理
二、CSS部分
关于css这一块,我的看法就是网上下载一个chm格式的css的参考手册,然后根据手册里面写的一个个的都敲一下。
css大体分为下面这几块知识点:
①定位布局
1.position属性的7个值(static|relative|absolute|fixed|center|page|sticky)分别有什么作用和不同?
2.实现品字形布局或者是三栏布局(左右宽度固定,中间适应屏幕)。
3.浮动与清除浮动的方法,flex布局,grid布局。
②盒子模型
1.margin、padding、border这三个属性。
2.伸缩盒相关内容。
3.Multi-columnLayoutModule多列布局模型。
③文本字体
1.强制换行与不换行,清除空白。
2.文本对齐、大小(如何设置chrome小于12px的字体)、缩进、转换。
3.单位(em、rem、px等),颜色(rgb、rgba,hls)。
④变换、过渡和动画
1.transform的各种取值的作用与兼容性。
2.transition过渡的动画类型,贝塞尔曲线的原理。
3.animation动画的各种设置,@keyframes规则。
4.浏览器的重绘与重排。
⑤选择器
1.选择器的分类,权值和优先级。
2.有哪些属性可以被继承,哪些属性没法继承。
3.伪类和伪元素分别是什么,有什么作用。
上面这些都是基础的东西,除了这些基础的内容之外需要了解Less、Sass、stylus等css预处理器,这将会大幅度提升你的css开发效率,也需要了解一下Autoprefixer、PostCSS等css后处理器。
三、JavaScript部分
在这里就不说js的基础知识了,我把js按照语法的层次和使用的层次分为了两大块。
按照语法的层次来说:
首先是javascript的面向对象方面的内容:在javascript中实现封装、继承和多态。
①封装:在js中可以通过闭包、作用域和作用域链来实现封装,ES6的const、let的作用。
②继承:基于原型链的继承、基于构造函数的继承、组合式继承、寄生式继承等,外加ES6的class关键字,prototype和proto。
③多态:在javascript中多态是使用arguments来实现的,关于arguments会引申出来很多内容:
1.arguments的caller、callee等方法的作用。
2.方法的apply和call的作用和不同。
3.使用Array.prototype.slice.call来把一个数组对象转化为数组。
4.array的各种方法,如shift、splice、push、filter、map、reduce、forEach等等。
然后是Js的设计模式,比如说那三种工厂模式啊,建造者模式啊等等。
有多少人不知道电脑上东西是这样生产出来的,web前端必学知识点
然后是在不同情况下的this分别都代表什么。
按照使用的层次来说:
首先主要的就是ajax,ajax的原理,ajax跨域的方法:jsonp、使用iframe的location.hash、postMessageAPI、websocket、服务器代理等等。
然后是tcp协议、udt协议以及http协议的协议头、状态码等内容。浏览器的缓存,客户端存储方面的内容:localstorage、sessionstorage、indexDB、cookie等等。
然后是一些新的js的API,例如文件读取(fileReader)、fetch、Promise、WebSockets等等内容,可以去caniuse上面看一下有哪些新的东西。