整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
本篇文章開始成哥將帶大家一起學(xué)習(xí)一下前端的基礎(chǔ)知識，我們先講解前端的基礎(chǔ)HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內(nèi)容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標(biāo)記語言。
HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標(biāo)記語言，它是標(biāo)準(zhǔn)通用化標(biāo)記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。
使用HTML語言，將所需要表達(dá)的信息按某種規(guī)則寫成HTML文件，通過專用的瀏覽器來識別，并將這些HTML文件"翻譯"成可以識別的信息，即現(xiàn)在所見到的網(wǎng)頁。HTML 不需要編譯，可以直接由瀏覽器執(zhí)行，非常方便開發(fā)時調(diào)試。
我們現(xiàn)在創(chuàng)建一個典型的HTML結(jié)構(gòu)具體如下：
1. <!DOCTYPE html>
2. <html lang="ch">
3. <head>
4. <meta charset="UTF-8">
5. <title>HTML實例</title>
6. </head>
7. <body>
8. <h1>我是標(biāo)題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁面中各個標(biāo)簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當(dāng)前處理的內(nèi)容是HTML頁面
2）html是 HTML 頁面的根元素，用于標(biāo)識HTML內(nèi)容的開始與結(jié)束
3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數(shù)據(jù)這邊charset="UTF-8"標(biāo)識當(dāng)前頁面編碼格式為UTF-8，title為文檔的標(biāo)題
4）body是HTML主體也是游覽器在顯示頁面時的內(nèi)容。h1是body內(nèi)容中定義的標(biāo)題，p是body內(nèi)容中定義的段落
我們現(xiàn)在通過游覽器打開編寫的HTML內(nèi)容，具體內(nèi)容如下
在HTML中的內(nèi)容可以通過以下格式進(jìn)行內(nèi)容注釋具體如下：
（1）HTML標(biāo)簽
HTML 標(biāo)簽是 HTML 語言中最基本的單位，HTML 標(biāo)簽是 HTML（標(biāo)準(zhǔn)通用標(biāo)記語言下的一個應(yīng)用）最重要的組成部分。HTML標(biāo)簽具有如下特點：
1）標(biāo)簽一般是成對出現(xiàn)的 如:<div></div>;也有空標(biāo)簽 如:<br />
2）標(biāo)簽由<>包括,分為開始標(biāo)簽(開放標(biāo)簽)和結(jié)束標(biāo)簽(閉合標(biāo)簽)
3）標(biāo)簽不區(qū)分大小寫,根據(jù)W3C(萬維網(wǎng)聯(lián)盟)推薦,統(tǒng)一使用小寫字母
標(biāo)簽的示列如下：
標(biāo)簽按照<>的對數(shù)可以分為如下兩類分別為雙標(biāo)簽與單標(biāo)簽，下面我們具體來了解一下這兩類標(biāo)簽。
1）雙標(biāo)簽
雙標(biāo)簽指由開始和結(jié)束兩個標(biāo)記符組成的標(biāo)記。其基本語法格式如下：
1. <標(biāo)記名></標(biāo)記名>
常見的雙標(biāo)簽有如下幾種：
1. <html></html>
2. <head></head>
3. <title></title>
4. <body></body>
5. <h1></h1>
6. <p></p>
7.
8. <!-- 塊級元素 -->
9. <div></div>
10. <span></span>
11.
12. <!-- 超鏈接元素 -->
13. <a></a>
14.
15. <!-- 列表元素 -->
16. <ul></ul> 2）單標(biāo)簽
單標(biāo)簽是指用一個標(biāo)記符號即可完整地描述某個功能的標(biāo)記。其基本語法格式如下：
1. <標(biāo)記名/>
常見的單標(biāo)簽有如下幾種：
1. <!-- 換行標(biāo)簽 -->
2. <br />
3.
4. <!-- 分隔線標(biāo)簽 -->
5. <hr />
6.
7. <!-- 圖片標(biāo)簽 -->
8. <img /> （2）HTML元素
HTML 元素指的是從開始標(biāo)簽（start tag）到結(jié)束標(biāo)簽（end tag）的所有代碼，如<p>段落</p>。元素可以進(jìn)行嵌套具體如下：
1. <div>
2. <h1>我是標(biāo)題</h1>
3.
4. <div>
5. <p>元素嵌套示列</p>
6. </div>
7.
8. </div> （3）HTML屬性
屬性為 HTML 元素提供附加信息，可分為全局屬性（即所有元素均可使用的屬性，如id,class等）和元素屬性（部分元素可使用的屬性，例如<a href="http://www.baidu.com">搜索</a>），屬性通常由屬性名="屬性值"構(gòu)成,存在于開始標(biāo)簽中，示列如下:
（4）HTML實體編碼
對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應(yīng)的"實體編碼"，如< <> >空格 。
（5）HTML事件
通過某個動作,執(zhí)行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標(biāo)點擊、鼠標(biāo)聚焦等，下面我看看看一個事件編寫示列：
（1）h標(biāo)簽
h 標(biāo)簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應(yīng)六種樣式的標(biāo)題，我們現(xiàn)在來編寫這六種h標(biāo)簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <h1>H1標(biāo)題</h1>
9. <h2>H2標(biāo)題</h2>
10. <h3>H3標(biāo)題</h3>
11. <h4>H4標(biāo)題</h4>
12. <h5>H5標(biāo)題</h5>
13. <h6>H6標(biāo)題</h6>
14. </body>
15. </html> 我們來運行該HTML文件，來看看這六種h標(biāo)簽有什么樣式差異，從示列中可以發(fā)現(xiàn)h1標(biāo)簽字體最大然后依次減小。
（2）p標(biāo)簽
p 標(biāo)簽是文本標(biāo)簽，現(xiàn)在我們來編寫一段含有p標(biāo)簽的html文本，然后運行了看看p標(biāo)簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <h4>標(biāo)題一</h4>
10. <p>我是段落1</p>
11.
12. <h4>標(biāo)題二</h4>
13. <p>我是段落2</p>
14.
15. </body>
16. </html> （3）a標(biāo)簽
a標(biāo)簽是超鏈接標(biāo)簽，點擊a標(biāo)簽可以跳轉(zhuǎn)到其設(shè)置的網(wǎng)站，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8. <div>
9. <a href="http://www.baidu.com">點我跳轉(zhuǎn)到百度頁面</a>
10. </div>
11.
12. <div>
13. <a href="http://www.qq.com">點我跳轉(zhuǎn)到騰訊頁面</a>
14. </div>
15.
16. </body>
17. </html> （4）div標(biāo)簽
div標(biāo)簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設(shè)置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標(biāo)簽并設(shè)置其長為300px，寬度為200px，同時給其一個背景顏色，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <div style="width: 200px;height: 300px;background: #2eabff">我是div元素</div>
10.
11. </body>
12. </html> （5）列表標(biāo)簽
列表作為網(wǎng)頁設(shè)計的重要內(nèi)容之一，能夠用來制作導(dǎo)航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認(rèn)情況下會以數(shù)字來排列，但也可以通過設(shè)置其type屬性以大寫字母、小寫字母、大寫羅馬數(shù)字、小寫羅馬數(shù)字來排列，我們現(xiàn)在來寫一個示列，具體如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <!-- 有序列表，以默認(rèn)方式數(shù)字排列 -->
10. <p>有序列表默認(rèn)方式數(shù)字排列</p>
11. <ol>
12. <li>列表1</li>
13. <li>列表2</li>
14. <li>列表3</li>
15. </ol>
16.
17. <!-- 有序列表，以大寫字母排列 -->
18. <p>有序列表大寫字母排列</p>
19. <ol type="A">
20. <li>列表1</li>
21. <li>列表2</li>
22. <li>列表3</li>
23. </ol>
24.
25. </body>
26. </html> 2）無序列表ol
無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認(rèn)都有一個實心圓，也可以通過type屬性來設(shè)置成空心圓或者小方塊，無序列表示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>無序列表默認(rèn)type樣式</p>
10. <ul>
11. <li>列表1</li>
12. <li>列表2</li>
13. <li>列表3</li>
14. </ul>
15.
16. <p>無序列表方塊樣式</p>
17. <ul type="square">
18. <li>列表1</li>
19. <li>列表2</li>
20. <li>列表3</li>
21. </ul>
22.
23. </body>
24. </html> 3）自定義列表dl
自定義列表以 <dl> 標(biāo)簽開始。每個自定義列表項以 <dt> 開始，其列表內(nèi)容是以<dd> 開始，自定義列表前面沒有任何標(biāo)識，其具體示例如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>自定義列表</p>
10. <dl>
11. <dt>東岳</dt>
12. <dd>泰山</dd>
13.
14. <dt>南岳</dt>
15. <dd>衡山</dd>
16.
17. <dt>西岳</dt>
18. <dd>華山</dd>
19.
20. <dt>北岳</dt>
21. <dd>恒山</dd>
22.
23. <dt>中岳</dt>
24. <dd>嵩山</dd>
25. </dl>
26.
27. </body>
28. </html> （6）其它標(biāo)簽
1）換行標(biāo)簽<br/>
在HTML中如果想給內(nèi)容進(jìn)行換行可以使用換行標(biāo)簽，具體示列如下：
2）分割線標(biāo)簽<hr/>
<hr/> 標(biāo)簽用于在 HTML創(chuàng)建一條分割線，具體示列如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</title>
5. <meta charset="utf-8" />
6. </head>
7. <body>
8.
9. <p>我是張三</p>
10. <!-- 分割線標(biāo)簽 -->
11. <hr/>
12. <p>我是李四</p>
13. </body>
14. </html> 至此我們《HTML基礎(chǔ)教程上篇》就講完了，下篇內(nèi)容主要講解HTML樣式、HTML表單、Tabel等，敬請期待。最后如果喜歡本篇文章不要忘了點贊、關(guān)注與轉(zhuǎn)發(fā)哦！
-END-
@IT管理局專注計算機領(lǐng)域技術(shù)、大學(xué)生活、學(xué)習(xí)方法、求職招聘、職業(yè)規(guī)劃、職場感悟等類型的原創(chuàng)內(nèi)容。期待與你相遇，和你一同成長。
文章推薦：
網(wǎng)頁中文字作為信息的主要載體，非常重要，之前學(xué)習(xí)過HTML中關(guān)于文本、段落等格式的知識，這些只是簡單排版，如果想制作更好看的文本樣式，就的使用css 字體和文本樣式了。
css 字體屬性主要包括字體系列、字體大小、字體風(fēng)格等其它樣式。
1、設(shè)置字體系列 —— font-family
這個屬性用來設(shè)置網(wǎng)頁使用哪種類型的字體顯示文本，語法如下：
font-family: "字體1"，"字體2"，"字體3"...font-family 屬性可以定義多個字體，瀏覽器會從前到后優(yōu)先選擇使用字體，當(dāng)瀏覽器不支持第一個字體，則會嘗試使用第二個字體，以此類推。如果瀏覽器不支持所有字體，則使用默認(rèn)字體。
如下示例：
2、字體樣式—— font-style
字體樣式有三種：
如下示例：
這里有2種斜體，它們有什么區(qū)別？
italic 和 oblique 都是向右傾斜的文字, 但區(qū)別在于 italic 是指斜體字，而 oblique 是傾斜的文字，對于沒有斜體的字體應(yīng)該使用 oblique 屬性值來實現(xiàn)傾斜的文字效果。
3、字體大小 —— font-size
“font-size”屬性來設(shè)置字體大小，它的值可以使用預(yù)定義關(guān)鍵字、絕對大小、相對大小。
預(yù)定義關(guān)鍵字
預(yù)定義關(guān)鍵字有 xx-small、x-small、small、medium、large、x-large、xx-large，尺寸按順序依次增大。它的可選范圍只有這幾種，且不同瀏覽器廠商定義的預(yù)定義關(guān)鍵字對應(yīng)的字體大小不一致，所以相同的屬性值，在不同瀏覽器看到的大小不一樣，建議不要使用這種方式。
絕對大小
絕對大小使用比如：px(像素)、pt(點，1pt 相當(dāng)于 1/72in)、in(英寸)、cm(厘米)、mm(毫米)等單位設(shè)置字體大小。
如下示例：
絕對大小不會隨著頁面大小改變而改變，如果要想使文字大小自適應(yīng)不同的屏幕或設(shè)備就需要使用相對大小。
相對大小：
相對大小使用 em、%、rem等來設(shè)置大小，它們都是相對于某個參考基準(zhǔn)的字體大小，來計算當(dāng)前字體的大小，只是參考基準(zhǔn)不同而已。
如果你不指定一個字體的大小，默認(rèn)大小和普通文本段落一樣，是16像素（1em = 16px,100%=16px）。
em和%都是相對于父級元素的字體大小，其子級元素會在其父級元素的計算結(jié)果上繼續(xù)計算大小，如下示例：
如上p元素的字體大小是36px，而不是12px * 200%等于24px，它是在其父級div元素的計算結(jié)果上繼續(xù)計算的值。
使用em 或 %雖然可以方便修改文字大小，但是當(dāng)元素嵌套很深的時候，就變得比較復(fù)雜，深層的元素文字大小就變得不可控，所以css3 新增加了rem 來設(shè)置字體大小。
rem 是相對于根元素 （html 元素） font-size屬性的值，每一層級都會參考html根元素的字體大小來計算，這樣一來，無論嵌套多少層，字體大小的計算就變得統(tǒng)一了。
rem 是CSS3新增的一個相對單位，IE9 以下版本的老瀏覽器卻不支持它，這也是很多編程人員尚未使用 rem 的原因。
在定義字體大小時，建議在 html 元素中定義絕大多數(shù)元素所需要的字體大小，并讓所有子元素繼承 html 的字體大小。如果某個子元素要改變字體大小，則使用相對尺寸 em 或 % 或 rem 重新定義。
4、復(fù)合屬性—— font
font 屬性可以看成是字體的簡寫，它可以定義字體系列、大小、風(fēng)格、粗細(xì)、等樣式，語法如下：
font："font-style font-variant font-weight font-size/line-height font-family"其中font-size和font-family的值是必需的。如果缺少了其他值，將使用瀏覽器的默認(rèn)值。
如下示例：
除了以上設(shè)置，font還有其它的屬性值，如下：
這些屬性，只有部分瀏覽器支持，具體使用時請查看瀏覽器是否支持。
5、其它字體屬性
字體還有 font-weight（設(shè)置粗細(xì)的屬性）、font-variant（設(shè)置小型大寫字母的字體顯示文本）如下示例：
font-weight 字體粗細(xì)：有normal、lighter、bold、數(shù)值三種，數(shù)值范圍從 100 ~ 900 依次變粗，900 相當(dāng)于 bold。
font-variant值有normal（標(biāo)準(zhǔn)字體顯示）、small-caps（瀏覽器會顯示小型大寫字母的字體）、inherit（繼承父元素的設(shè)置）
如下示例：
font-variant 屬性設(shè)置小型大寫字母的字體顯示文本，這意味著所有的小寫字母均會被轉(zhuǎn)換為大寫，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小。
css 文本屬性主要設(shè)置比如字符間隔，文本顏色、單詞間隔、行高、文字修飾、對齊方式等效果。
1、文字顏色 —— color
color 使用以“#”開頭16進(jìn)制的顏色代碼或顏色關(guān)鍵詞（如red、blue），如下示例：
2、字符間隔 —— letter-spacing
設(shè)置字符水平間距，如下示例：
3、單詞間隔 —— word-spacing
設(shè)置單詞之間的間距，如下示例：
這里注意中文比較特殊，一個中文字不等同于英文的一個單詞。
4、行高 —— line-height
設(shè)置字體行之間垂直間距，如下示例：
5、文字修飾 —— text-decoration
可以設(shè)置文字下劃線、刪除線等樣式，如下示例：
還可以定義波浪線效果，如下示例：
6、水平對齊 —— text-align
有三種水平方向的對齊方式，居左，居中、居右，如下示例：
7、垂直對齊—— vertical-align
vertical-align 屬性設(shè)置一個元素的垂直對齊方式。
該屬性定義行內(nèi)元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負(fù)長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設(shè)置單元格框中的單元格內(nèi)容的對齊方式。
如下示例，對齊圖片：
還有很多其它屬性，在此不每個都介紹了，可參考如下：
8、文字大小寫轉(zhuǎn)換—— text-transform
可用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫。如下示例：
9、文本縮進(jìn) —— text-indent
文本縮進(jìn)屬性是用來指定文本的第一行的縮進(jìn)。如下示例：
文本縮進(jìn)可以使用絕對值如：px、pt、cm等，也可以是相對單位 %。且可以是負(fù)值，如果是負(fù)值，就相當(dāng)于變成向左縮進(jìn)了。
10、空白處理 —— white-space
white-space屬性指定元素內(nèi)的空白怎樣處理。如下示例：
11、文字陰影 —— text-shadow
text-shadow 可以設(shè)置文字陰影效果，比如內(nèi)陰影或外陰影，語法：
text-shadow: x坐標(biāo) y坐標(biāo) 模糊大小 顏色;其中x/y 坐標(biāo)相對于文本左上角的偏移量，如下示例：
12、文本溢出 —— text-overflow
text-overflow 屬性指定當(dāng)文本溢出時包含它的元素應(yīng)該如何顯示。可以設(shè)置文本被剪切、顯示省略號 (...) 或顯示自定義字符串（不是所有瀏覽器都支持）。
text-overflow 需要配合以下兩個屬性使用：
如下示例：
本篇講述了文字和文本的大部分樣式設(shè)置，掌握這些css用法非常重要，網(wǎng)頁大部分都是文本，要想制作一個漂亮的頁面，這些是必須要學(xué)會的，且要學(xué)會融會貫通。
本篇主要講了以下內(nèi)容：
以上都是最基本的，要多加練習(xí)，才能夠理解學(xué)會使用。感謝關(guān)注，祝學(xué)習(xí)愉快！
上篇：前端入門——css 盒子模型
言
頁面總少不了字體吧，字體還有家族font-family，那好吧
字體格式
TTF (TrueType Font) 字體格式是由蘋果和微軟為 PostScript 而開發(fā)的字體格式。在 Mac 和 Windows 操作系統(tǒng)上，TTF 一直是最常見的格式，所有主流瀏覽器都支持它。然而，IE8 不支持 TTF；且 IE9 上只有被設(shè)置成 "installable" 才能支持（譯注：別想了，轉(zhuǎn)別的格式吧）。
TTF 允許嵌入最基本的數(shù)字版權(quán)管理標(biāo)志————內(nèi)置標(biāo)志可以告訴我們字體作者是否允許改字體在 PDF 或者網(wǎng)站等處使用，所以可能會有版權(quán)問題。另一個缺點是，TTF 和 OTF 字體是沒壓縮的，因此他們文件更大。
OTF (OpenType Font) 由 TTF 演化而來，是 Adobe 和微軟共同努力的結(jié)果。OTF 字體包含一部分屏幕和打印機字體數(shù)據(jù)。OTF 有幾個獨家功能，包括支持多平臺和擴(kuò)展字符集。OTF 字體可以在 Macintosh 和 Windows 系統(tǒng)上使用。
OTF 也允許多達(dá) 65000 個字符的存儲。這個額外的空間讓設(shè)計師可以自由地添加附加元素，比如小帽子、老式數(shù)字體、代替的字符和其他一些以前必須作為獨立字體分發(fā)的附加材料。
實踐
1、CSS引入TTF或OTF文件
@font-face {
font-family: HansKendrick-Regular;
src:url('../fonts/HansKendrick-Regular.otf');
}
備注：
otf文件由設(shè)計同學(xué)提供或自行下載。
url使用的是相對路徑。絕對路徑測不管是放在public還是src下均沒有測試成功。2、CSS樣式的使用
font-family: 'HansKendrick-Regular';
font-style: normal;
font-weight: 400;
font-size: 14px;
line-height: 17px;
text-align: center;
color: rgba(255, 255, 255, 0.8);
備注：以上是樣例，根據(jù)實際情況配置即可。資料來源：
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
