UI學習HTML的入門重點知識分享

小編是一個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)的標簽 (

屏幕快照 2019-05-06 下午6.12.20.png
<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、跨行跨列單元格

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容

  • HTML 5 HTML5概述 因特網(wǎng)上的信息是以網(wǎng)頁的形式展示給用戶的,因此網(wǎng)頁是網(wǎng)絡信息傳遞的載體。網(wǎng)頁文件是用...
    阿啊阿吖丁閱讀 4,033評論 0 0
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,786評論 1 92
  • 瀏覽器與服務器的基本概念 瀏覽器(安裝在電腦里面的一個軟件) 作用: ①將網(wǎng)頁內(nèi)容渲染呈現(xiàn)給用戶查看。 ②讓用戶通...
    云還灬閱讀 1,146評論 0 0
  • 學習目標: 了解常用瀏覽器 掌握WEB標準 理解標簽語義化 掌握常用的排版標簽 掌握常用的文本格式化圖像鏈接等標簽...
    淡淡瘋閱讀 1,274評論 0 3
  • --- 學習目標: - 了解常用瀏覽器 - 掌握WEB標準 - 理解標簽語義化 - 掌握常用的排版標簽 ...
    紅豆丁244閱讀 1,384評論 0 2