整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天给大家介绍的是小码哥UI就业课超级大牛老师——韩奇峰老师！
以往大家都是认为IT就是代码编程，今天要给大家介绍一下啊IT的另一个领域UI
通常意义上，UI是User Interface的缩写。UI其实是一个广义的概念，《现代汉语词典》将“界面”定义为：物体与物体之间的接触面，泛指人和物（人造物、工具、机器）互动过程中的界面（接口）。以车为例，方向盘、仪表盘、中控都属于用户界面。从字面上看由用户与界面两个部分组成，但实际上还包括用户与界面之间的交互关系，所以可分为三个方向：用户研究、交互设计、界面设计。
（图源网络，侵删）
首先，UI是指人与信息交互的媒介，它是信息产品的功能载体和典型特征。UI作为系统的可用形式而存在，比如以视觉为主体的界面，强调的是视觉元素的组织和呈现。这是物理表现层的设计，每一款产品或者交互形式都以这种形态出现，包括图形、图标( Icon)、色彩、文字设计等，用户通过它们使用系统。在这一层面，UI可以理解为User Interface，即用户界面，这是UI作为人机交互的基础层面。
其次，UI是指信息的采集与反馈、输入与输出，这是基于界面而产生的人与产品之间的交互行为。在这一层面，UlbJ以理解为User Interaction，即用户交互，这是界面产生和存在的意义所在。人与非物质产品的交互更多依赖于程序的无形运作来实现，这种与界面匹配的内部运行机制，需要通过界面对功能的隐喻和引导来完成。因此，UI不仅要有精美的视觉表现，也要有方便快捷的操作，以符合用户的认知和行为习惯。
最后，UI的高级形态可以理解为User Invisible。对用户而言，在这一层面UI是“不可见的”，这并非是指视觉上的不可见，而是让用户在界面之下与系统自然地交互，沉浸在他们喜欢的内容和操作中，忘记了界面的存在（糟糕的设计则迫使用户注意界面，而非内容）。这需要更多地研究用户心理和用户行为，从用户的角度来进行界面结构、行为、视觉等层面的设计。大数据的背景下，在信息空间中，交互会变得更加自由、自然并无处不在，科学技术、设计理念及多通道界面的发展，直至普适计算界面的出现，用户体验到的交互是下意识甚至是无意识的。
用户研究工程师一般是心理学人文学背景比较合适。
综上所述UI设计师就是：软件图形设计师、交互设计师、用户研究工程师。
（图源网络，侵删）
小码哥为了给学员更好的学习体验，其实早就已经开发出了UI就业课程，这次给大家主要是想介绍一下UI大牛讲师——韩奇峰。
韩奇峰老师目前已经在UI教学方面深耕11年工作了。
是我们高薪聘请的专职老师，在小码哥之前韩奇峰老师也曾担任国内知名教育机构课程研发专员，教学总监、院长，创立过两个学院,UI学院+html5前端学院。创立过两个学院,UI学+html5前端学院。
在实践经历上也不差，韩老师曾经参与制作BMW宝马Usage Training项目，设计奥迪全息投影项目。
（以上为全息投影效果图）
作为资深UI设计师，动画设计师。动画设计全国竞赛三等奖。
最厉害的是大家都知道好的记忆力对UI设计师有多重要，韩老师自学记忆术2分钟速记一副纸牌，1分钟记忆50位数字。
吹的这么厉害，不如来看看课程更实在，韩老师课程正在更新中哦
篇目录
本篇目录
什么是HTML
HTML的作用
HTML发展史
IETF简介
W3C简介
网页的固定格式
html标签
head标签
title标签
body标签
head内部标签
meta标签
HTML标签
HTML标签分类
HTML标签关系分类
DTD文档声明
HTML和XHTML、HTML5区别
htm 和 .html扩展名区别
什么是HTML
HTML其实是HyperText Markup Language的缩写, 超文本标记语言
HTML的作用
1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开
2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…., 所以导致了显示的格式不正确
正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.
这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来的
所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"
注意事项:
虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的
H1标签它的作用是什么?
错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗
正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义的
HTML发展史
IETF简介
IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”
IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统（DNS）、用于发送邮件的简单邮件传输协议（SMTP）等
W3C简介
W3C是英文World Wide Web Consortium的缩写， 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.
W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee
W3C负责web方面标准的制定，像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。
Tim Berners-Lee（蒂姆·伯纳斯-李），万维网之父、html设计者、w3c创始人
百度百科
网页的固定格式
1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式
2.写信基本结构
3.编写网页的步骤:
3.1.新建一个文本文档
3.2.利用记事本打开
3.3.编写THML代码
3.4.保存并且修改纯文本文档的扩展名为.html
3.5.利用浏览器打开编写好的文件
4.网页基本结构:
5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签html标签
作用:
用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档
注意点:
其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间
head标签
作用:
指定网站的标题 / 指定网站的小图片
添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)
外挂一些外部的css/js文件
添加一些浏览器适配相关的内容
用于给网站添加一些配置信息
例如:
注意点:
一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到
title标签
作用:
专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题
注意点:
title标签必须写在head标签里面
body标签
作用:
专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)
注意点:
虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中
一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签
head内部标签
meta标签
1.为什么会有乱码现象?
因为我们在编写网页的时候没有指定字符集
2.如何解决乱码现象?
在head标签中添加<meta charset="GBK" />, 指定字符集
3.什么是字符集
字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的”活字印刷术”, 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题
假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取”李”字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就导致了乱码问题
这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子
所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容
4.GBK(GB2312)和UTF-8区别
提交比较大
体积比较小
GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文
UTF-8里面存储的世界上所有的文字
5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?
如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快
如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8
懒人推荐: 不管三七二十一, 一律写UTF-8即可
6.注意点:
在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码
所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题
HTML标签
HTML标签分类
单标签
只有开始标签没有结束标签, 也就是由一个<>组成的
双标签
有开始标签和结束标签, 也就是由一个<>和一个</>组成的
HTML标签关系分类
并列关系(兄弟/平级)
嵌套关系(父子/上下级)
DTD文档声明
什么是DTD文档声明?
由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页
DTD文档声明格式:
注意事项:
不写也能运行
H5网页里面用H4也能运行
<!DOCTYPE>声明必须是 HTML 文档的第一行，位于 <html> 标签之前
<!DOCTYPE> 声明不是 HTML 标签
<!DOCTYPE> 声明没有结束标签
<!DOCTYPE> 声明对大小写不敏感
这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制
HTML5之前有2大种规范, 每种规范中又有3小种规范
| 大规范 | 小规范 |
|---|---|
| HTML | Strict (严格的) |
| HTML | Transitional(过度的,普通的,宽松的) |
| HTML | Frameset(带有框架的页面) |
| XHTML | Strict (严格的) |
| XHTML | Transitional(过度的,普通的,宽松的) |
| XHTML | Frameset(带有框架的页面) |
HTML的DTD文档声明和XHTML的DTD文档声明有何区别?
XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格
Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用
例如font标签/u标签等
font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签
u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签
Transitional表示普通的, 这种模式是没有一些别的要求
例如可以使用font标签、u标签等
但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用
Frameset表示框架, 在框架的页面使用
后面学到框架/NodeJS 再做详细了解
常见的DOCTYPE有如下几种
有这么多规范我们学习过程中到底使用哪一种比较合适呢?
www.baidu.com (B)
www.taobao.com (A)
www.qq.com (T)
www.sohu.com(大奇葩)
无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明
但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)
目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明
HTML和XHTML、HTML5区别
在HTML的早期发展中，大部分标准都是所谓的retro-spec，即先有实现后有标准。在这种情况下，HTML标准不是很规范，浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面
html语言本身有一些缺陷（例如： 内容和形式不能分离；标签单一；数据不能复用等等），随着xml的兴起人们希望xml来弥补html的不足，但是目前有成千上万的网页都是用html编写的，所以完全使用xml来替代html还为时过早，于是W3C在2000年推出了xhtml1.0， 建立xhtml的目的就是实现从html向xml的过度
为了规范HTML，W3C结合XML制定了XHTML 1.0标准，这个标准没有增加任何新的标签，只是按照XML的要求来规范HTML，并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查，如果页面有HTML错误，就要显示错误信息。但是由于已有的web页面中已经有了大量的错误，很多开发者拒绝使用新的MIME type。W3C不得已，在XHTML 1.0的标准之后增加了一个附录C，允许开发者使用XHTML语法来写页面，同时使用旧的MIME type，application/html，来分发页面
W3C随后在XHTML 1.1中取消了附录C，即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用
有了XHTML的教训，W3C在制定下一代HTML标准时（HTML5），就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性，但是它最重要的一个特性是，不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>，它就成也一个HTML5页面，并且可以照样在浏览器里正常的展示。
简而言之
HTML语法非常宽松容错性强;
XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;
HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性
.htm 和 .html扩展名区别
DOS操作系统（win95或win98）下只能支持长度为3的后缀名，所以是htm
但在windows后缀长度可以大于3位，所以windows下无所谓htm与html，html是为长文件的格式命名的
所以htm是为了兼容过去的DOS命名格式存在的
关于课程的疑问和讨论，可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。
单(form)
作用: 用于收集用户信息, 让用户填写、选择相关信息
格式:
注意事项:
所有的表单内容，都要写在form标签里面
form标签中有两个比较重要的属性action和method, 但就现目前大家的知识储备而言暂时无法理解, 所以放到后面的课程中讲解
input标签
如果说td是表格最核心的标签, 那么input就是表单最核心的标签. nput标签有一个type属性, 这个属性有很多类型的取值, 取值的不同就决定了input标签的功能和外观不同
明文输入框
作用: 用户可以在输入框内输入内容
账号:<input type="text"/>
暗文输入框
作用: 用户可以在输入框内输入内容
密码:<input type="password"/>
给输入框设置默认值
账号:<input type="text" value="123"/>
密码:<input type="password" value="123"/>
规定输入字段中的字符的最大长度
账号: <input type="text" name="fullname" maxlength="8" />
单选框(radio)
作用: 用户只能从众多选项中选择其中一个
单选按钮，天生是不互斥的，如果想互斥，必须要有相同的name属性
多选框(checkbox)
作用: 用户只能从众多选项中选择多个
复选框，最好也是有相同的name（虽然他不需要互斥，但是也要有相同的name）
给单选、多选设置默认值
指定radio和checkbox默认值, 前提是同一组内容必须设置相同name属性
label标签
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定
作用: label标签不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性
注意事项:
表单元素要有一个id，然后label标签就有一个for属性，for属性和id相同就表示绑定了
所有表单元素都可以通过label绑定
按钮
作用: 定义可点击按钮（多数情况下，用于通过 JavaScript 启动脚本）
<input type="button" value="点我丫" />
图片按钮
作用:定义图像形式的提交按钮
<input type="image" src="lnj.jpg" />
重置按钮
这个按钮不需要写value自动就有“重置”文字
reset只对form表单中表单项有效果
作用: 定义重置按钮。重置按钮会清除表单中的所有数据
<input type="reset" />
注意事项:
提交按钮
这个按钮不需要写value自动就有“提交”文字
要想通过submit提交数据到服务器, 被提交的表单项都必须设置name属性
默认明文传输(GET)不安全, 可以将method属性设置为POST改为非明文传输(学到Ajax再理解)
作用:定义提交按钮。提交按钮会把表单数据发送到action属性指定的页面
<input type="submit" />
注意事项:
隐藏域
作用: 定义隐藏的输入字段
<input type="hidden">
暂时不用掌握, 在Ajax中对数据的CRUD操作有非常大的作用
取色器
<input type="color">
HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
日期选择器
<input type="date">
HTML5中input类型增加了很多type类型, 例如color、date但是都不兼容, 后面讲到浏览器兼容时会重点讲解
数据列表
作用: 给输入框绑定待选项
格式:
如何给输入框绑定待选列表
搞一个输入框
搞一个datalist列表
给datalist列表标签添加一个id
给输入框添加一个list属性,将datalist的id对应的值赋值给list属性即可
多行文本框(文本域)
作用: textarea标签用于在表单中定义多行的文本输入控件
cols属性表示columns“列”, 规定文本区内的可见宽度
rows属性表示rows“行”, 规定文本区内的可见行数
格式:
<textarea cols="30" rows="10">默认
关于课程的疑问和更多讨论，可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2429
*请认真填写需求信息，我们会在24小时内与您取得联系。
