小編是一個UI設(shè)計(jì)師没龙，但是行業(yè)現(xiàn)狀不是很樂觀，有人說這個行業(yè)有可能3年后會消失缎玫，從而一些分工明確的崗位會替代UI設(shè)計(jì)硬纤；也有人說UI已經(jīng)飽和，整個互聯(lián)網(wǎng)行業(yè)需要一些更大牛的人赃磨。不管都有誰說筝家，說了些什么，希望有才華有前途的小牛也不要放棄煞躬。術(shù)業(yè)有專攻肛鹏，學(xué)一門精一門逸邦，既然選擇就不要放棄。
身為一個UI設(shè)計(jì)師在扰，你的能力應(yīng)該不局限于UI這一區(qū)域內(nèi)缕减，你只要會設(shè)計(jì)平面，那么你就會設(shè)計(jì)UI芒珠，會原畫桥狡，甚至?xí)螒騏I，雖然細(xì)分不同皱卓，但是整體不會變裹芝。只要你掌握規(guī)范，那么還有什么能難住設(shè)計(jì)師的呢娜汁？
前面說了嫂易，UI行業(yè)不是很樂觀，為了避免淘汰掐禁，所以我們要盡量多充實(shí)自己怜械，相信UI設(shè)計(jì)師在找工作的時候都會遇到一些公司要求我們會HTML，為什么會要求這個呢傅事，目的是要我們UI設(shè)計(jì)師能夠知道代碼是怎么還原設(shè)計(jì)圖的缕允，細(xì)點(diǎn)講就是我們做完的圖交給前端開發(fā)人員，他們會根據(jù)我們圖的樣式用代碼還原蹭越，以H5/網(wǎng)頁的形式展現(xiàn)出來障本，那么我們做的圖就要考慮開發(fā)人員實(shí)現(xiàn)的問題與工期問題。不能異想天開不根據(jù)實(shí)際就出圖响鹃，界面做的是很炫驾霜，但是開發(fā)費(fèi)時、費(fèi)精力會影響整個項(xiàng)目的工期茴迁，所以就是白設(shè)計(jì)寄悯！還有一個原因就是，真的會有大牛自己設(shè)計(jì)圖自己寫代碼開發(fā)堕义，這樣公司就節(jié)省了資源輸出猜旬，你既能出圖又能開發(fā)何樂而不為？是不是后背有點(diǎn)發(fā)麻倦卖？嗯洒擦。。怕膛。這樣的要求畢竟只有那么幾家會無厘頭壓榨熟嫩，也只占少數(shù)，所以大家不用擔(dān)心啦褐捻！
現(xiàn)在你能明白為什么會要求我們會HTML了吧掸茅？
好啦椅邓，說正題，小編把之前學(xué)過的一些知識點(diǎn)整理了一下昧狮，方便大家對比景馁，這也是我學(xué)習(xí)HTML的筆記，所以做筆記是有好處滴逗鸣，哈哈合住，后期還會更新，敬請期待撒璧！
標(biāo)簽
1透葛、HTML基礎(chǔ)標(biāo)簽
Head、body
2卿樱、HTML標(biāo)題
<h1>標(biāo)題一</h1>——<h6>標(biāo)題六</h6>
3僚害、HTML段落
<p> </p>標(biāo)簽定義段落
4、HTML鏈接
<a href="[https://www.baidu.com](https://www.baidu.com/)">百度鏈接</a>標(biāo)簽定義鏈接
5殿如、HTML圖像
<img src=“image／XXXXX.jpg">標(biāo)簽定義圖像
元素
1贡珊、元素是指從開始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼
<p>內(nèi)容</p>
<br/>空元素（沒有元素內(nèi)容）在開始標(biāo)簽中進(jìn)行關(guān)閉
2最爬、元素語法：
元素的內(nèi)容是開始標(biāo)簽與結(jié)束標(biāo)簽之間的內(nèi)容
大多數(shù)HTML元素可擁有屬性
3涉馁、嵌套的HTML元素
大多數(shù)的HTML元素都是可以嵌套的
屬性
1、標(biāo)簽可以擁有屬性為元素提供更多的信息
2爱致、屬性總是以名稱／值對的形式出現(xiàn)烤送，比如：href="https://www.baidu.com">
3、屬性總是在HTML元素的開始標(biāo)簽中規(guī)定
4糠悯、HTML屬性實(shí)例：
<body bgcolor=“yellow”>擁有關(guān)于背景顏色的附加信息（ <body background=“yellow”>）
<h1 align=“center">擁有關(guān)于對齊方式的附加信息 （align-排列 right-右 center-中間）
<a target=“blank">擁有關(guān)于頁面在何處打開鏈接的附加信息
網(wǎng)絡(luò)連接：<a href="[https://www.baidu.com](https://www.baidu.com/)">百度鏈接</a>
5帮坚、通用屬性：
class：規(guī)定元素的類名 <h2 class="h2id">標(biāo)題二</h2>
id：規(guī)定元素唯一ID
style：規(guī)定元素的樣式 <style type="text/css"></style>在head標(biāo)簽下
title：規(guī)定元素的額外信息
格式化
1、 <big> 定義大號字
2互艾、 <em> 定義著重文字
3试和、 < I > 定義斜體字
4、 <small> 定義小號字
5纫普、<strong> 定義加重語氣
6阅悍、 定義下標(biāo)字
7、 定義上標(biāo)字
8昨稼、<ins> 定義插入字
9节视、 <del> 定義刪除字
樣式
1、標(biāo)簽：
<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">
鏈接
超鏈接可以是一個字、一個詞匾荆、或者一組詞拌蜘、也可以是一副圖像杆烁，您可以點(diǎn)擊這些內(nèi)容來跳轉(zhuǎn)到新的文檔或者當(dāng)前文檔中的某部分。
當(dāng)您把鼠標(biāo)指針移動到網(wǎng)頁中的某個鏈接上時简卧，箭頭會變?yōu)橐恢恍∈帧?/p>
我們通過使用<a>標(biāo)簽在HTML中建鏈接连躏。
1、鏈接數(shù)據(jù)：
文本鏈接
圖片鏈接
2贞滨、屬性：
href屬性：指向另一個文檔的鏈接入热，規(guī)定鏈接的目標(biāo)，開始標(biāo)簽和結(jié)束標(biāo)簽之間
的文字被作為超級鏈接來顯示晓铆。
<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標(biāo)簽屬性：
alt：替換文本屬性
表格
1、 <table> 定義表格
2骄噪、 <caption> 定義表格標(biāo)題
3尚困、 < th > 定義表格表頭
4、 < tr > 定義表格的行
5链蕊、 < td > 定義表格的單元
6事甜、 < thead > 定義表格的項(xiàng)目
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宴卖、帶有標(biāo)題的表格 （<caption>表格</caption>）
5滋将、表格內(nèi)的標(biāo)簽 （
<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肝谭、跨行跨列單元格
