整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
天給大家介紹的是小碼哥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小時內與您取得聯系。
