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