小編是一個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、跨行跨列單元格
