小編是一個UI設計師,但是行業(yè)現(xiàn)狀不是很樂觀,有人說這個行業(yè)有可能3年后會消失,從而一些分工明確的崗位會替代UI設計;也有人說UI已經(jīng)飽和,整個互聯(lián)網(wǎng)行業(yè)需要一些更大牛的人。不管都有誰說,說了些什么,希望有才華有前途的小牛也不要放棄。術業(yè)有專攻,學一門精一門,既然選擇就不要放棄。
身為一個UI設計師,你的能力應該不局限于UI這一區(qū)域內(nèi),你只要會設計平面,那么你就會設計UI,會原畫,甚至會游戲UI,雖然細分不同,但是整體不會變。只要你掌握規(guī)范,那么還有什么能難住設計師的呢?
前面說了,UI行業(yè)不是很樂觀,為了避免淘汰,所以我們要盡量多充實自己,相信UI設計師在找工作的時候都會遇到一些公司要求我們會HTML,為什么會要求這個呢,目的是要我們UI設計師能夠知道代碼是怎么還原設計圖的,細點講就是我們做完的圖交給前端開發(fā)人員,他們會根據(jù)我們圖的樣式用代碼還原,以H5/網(wǎng)頁的形式展現(xiàn)出來,那么我們做的圖就要考慮開發(fā)人員實現(xiàn)的問題與工期問題。不能異想天開不根據(jù)實際就出圖,界面做的是很炫,但是開發(fā)費時、費精力會影響整個項目的工期,所以就是白設計!還有一個原因就是,真的會有大牛自己設計圖自己寫代碼開發(fā),這樣公司就節(jié)省了資源輸出,你既能出圖又能開發(fā)何樂而不為?是不是后背有點發(fā)麻?嗯。。。這樣的要求畢竟只有那么幾家會無厘頭壓榨,也只占少數(shù),所以大家不用擔心啦!
現(xiàn)在你能明白為什么會要求我們會HTML了吧?
好啦,說正題,小編把之前學過的一些知識點整理了一下,方便大家對比,這也是我學習HTML的筆記,所以做筆記是有好處滴,哈哈,后期還會更新,敬請期待!
標簽
1、HTML基礎標簽
Head、body
2、HTML標題
<h1>標題一</h1>——<h6>標題六</h6>
3、HTML段落
<p> </p>標簽定義段落
4、HTML鏈接
<a href="[https://www.baidu.com](https://www.baidu.com/)">百度鏈接</a>標簽定義鏈接
5、HTML圖像
<img src=“image/XXXXX.jpg">標簽定義圖像
元素
1、元素是指從開始標簽到結(jié)束標簽的所有代碼
<p>內(nèi)容</p>
<br/>空元素(沒有元素內(nèi)容)在開始標簽中進行關閉
2、元素語法:
元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容
大多數(shù)HTML元素可擁有屬性
3、嵌套的HTML元素
大多數(shù)的HTML元素都是可以嵌套的
屬性
1、標簽可以擁有屬性為元素提供更多的信息
2、屬性總是以名稱/值對的形式出現(xiàn),比如:href="https://www.baidu.com">
3、屬性總是在HTML元素的開始標簽中規(guī)定
4、HTML屬性實例:
<body bgcolor=“yellow”>擁有關于背景顏色的附加信息( <body background=“yellow”>)
<h1 align=“center">擁有關于對齊方式的附加信息 (align-排列 right-右 center-中間)
<a target=“blank">擁有關于頁面在何處打開鏈接的附加信息
網(wǎng)絡連接:<a href="[https://www.baidu.com](https://www.baidu.com/)">百度鏈接</a>
5、通用屬性:
class:規(guī)定元素的類名 <h2 class="h2id">標題二</h2>
id:規(guī)定元素唯一ID
style:規(guī)定元素的樣式 <style type="text/css"></style>在head標簽下
title:規(guī)定元素的額外信息
格式化
1、 <big> 定義大號字
2、 <em> 定義著重文字
3、 < I > 定義斜體字
4、 <small> 定義小號字
5、<strong> 定義加重語氣
6、 定義下標字
7、 定義上標字
8、<ins> 定義插入字
9、 <del> 定義刪除字
樣式
1、標簽:
<style>:樣式定義
<link>:資源引用
2、屬性:
rel=“stylesheet":外部樣式表
type="text/css”:引入文檔的類型
href=“規(guī)定被鏈接文檔的位置"
3、三種樣式表插入方法:
外部樣式表:<link rel=“stylesheet” type=“text/css” href=“app.css">
內(nèi)部樣式表:<style type=“text/css”>
body {background-color:red}
</style>
內(nèi)聯(lián)樣式表:<p style=“color:red">
鏈接
超鏈接可以是一個字、一個詞、或者一組詞、也可以是一副圖像,您可以點擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當前文檔中的某部分。
當您把鼠標指針移動到網(wǎng)頁中的某個鏈接上時,箭頭會變?yōu)橐恢恍∈帧?/p>
我們通過使用<a>標簽在HTML中建鏈接。
1、鏈接數(shù)據(jù):
文本鏈接
圖片鏈接
2、屬性:
href屬性:指向另一個文檔的鏈接,規(guī)定鏈接的目標,開始標簽和結(jié)束標簽之間
的文字被作為超級鏈接來顯示。
<a href=“http://www.baidu.com”>;
<img src=“圖片名稱” width=“100px” height=“100px” alt=“圖片解釋"
name屬性:創(chuàng)建文檔內(nèi)的鏈接
<a name=“tip”>名稱</a>
<a href=“#tip”>鏈接到名稱</a>
3、img標簽屬性:
alt:替換文本屬性
表格
1、 <table> 定義表格
2、 <caption> 定義表格標題
3、 < th > 定義表格表頭
4、 < tr > 定義表格的行
5、 < td > 定義表格的單元
6、 < thead > 定義表格的項目
7、 < tbody > 定義表格的主體
8、 < tfoot > 定義表格的頁腳
9、 < col > 定義表格的列屬性
<body>
<table border="1”>
<caption>表格</caption>
<tr><th>表頭一</th><th>表頭二</th></tr>
<tr><td>內(nèi)容一</td><td>內(nèi)容二</td></tr>
<tr><td>內(nèi)容一</td><td>內(nèi)容二</td></tr>
注:border是邊框,1代表像素
1、沒有邊框的表格 (沒有border)
2、表格中的表頭 (<tr><th>表頭一</th><th>表頭二</th></tr>)
3、空單元格 (沒有內(nèi)容<tr><td></td><td>內(nèi)容二</td></tr> 但是有邊框)
4、帶有標題的表格 (<caption>表格</caption>)
5、表格內(nèi)的標簽 (
<body>
<table border="1">
<tr><th>水果</th><th>蔬菜</th></tr>
<tr>
<td>
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>草莓</li>
</ul>
</td>
<td>
<ul>
<li>菠菜</li>
<li>白菜</li>
<li>油菜</li>
</ul>
</td>
</tr>
</table>
</body>)
6、單元格邊距 (內(nèi)容邊距變大:<table border="1" cellpadding="10">)
7、單元格間距 (邊框間距變大:<table border="1" cellspacing="10">)
8、表格內(nèi)的背景顏色和圖像 (<table border="1" cellspacing="10" bgcolor="#f5f5dc" background=“XXXXX.PNG">)
9、單元格內(nèi)容排列
10、跨行跨列單元格