整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
tml指超文本標記語言，通過標簽來控制文字和圖片的顯示方式，以.html結(jié)尾的文件是Html文檔，學(xué)習(xí)網(wǎng)站W(wǎng)3school。
Html文檔結(jié)構(gòu)
title標簽是標題標簽，body內(nèi)部存放能夠看到的所有內(nèi)容，包含文字，圖片，視屏等。
常見的基本標簽
p標簽是段落標簽，h1標簽是頭部標簽多用于文章標題或副標題，共有六個，img圖片標簽引入圖片，div是最常見的塊級標簽，可以將網(wǎng)頁中的內(nèi)容劃分出若干個矩形區(qū)域，用于存放不一樣的內(nèi)容。標簽可以分為單標簽和雙標簽。
無序列表
網(wǎng)頁中間有一些內(nèi)容相似，結(jié)構(gòu)相仿，布局接近的區(qū)域，像這一類區(qū)域我們就使用無序列表來進行區(qū)域劃分。
有序列表
網(wǎng)頁中間還有一些內(nèi)容相似，結(jié)構(gòu)相仿，布局接近但是每個區(qū)域的內(nèi)容是有先后關(guān)系的區(qū)域，像這一類區(qū)域我們就使用有序列表來進行區(qū)域劃分。
編輯軟件vscode
本篇文章開始成哥將帶大家一起學(xué)習(xí)一下前端的基礎(chǔ)知識，我們先講解前端的基礎(chǔ)HTML與CSS，這個講完我們將講解VUE前端框架，最后我們再講講Ant Design的VUE前端框架，從而形成前端一個系列的教程，下面就開始我們今天的內(nèi)容吧！
HTML的英文全稱是 Hyper Text Markup Language，即超文本標記語言。
HTML是由Web的發(fā)明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年創(chuàng)立的一種標記語言，它是標準通用化標記語言SGML的應(yīng)用。用HTML編寫的超文本文檔稱為HTML文檔，它能獨立于各種操作系統(tǒng)平臺(如UNIX， Windows等)。
使用HTML語言，將所需要表達的信息按某種規(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>我是標題</h1>
9. <p>我是段落。</p>
10. </body>
11. </html> 如上頁面中各個標簽代表的意思如下：
1）<!DOCTYPE html>是文檔聲明頭，它告訴游覽器當(dāng)前處理的內(nèi)容是HTML頁面
2）html是 HTML 頁面的根元素，用于標識HTML內(nèi)容的開始與結(jié)束
3） head是HTML頁面的頭，包含了文檔的一些屬性。其中meta是元數(shù)據(jù)這邊charset="UTF-8"標識當(dāng)前頁面編碼格式為UTF-8，title為文檔的標題
4）body是HTML主體也是游覽器在顯示頁面時的內(nèi)容。h1是body內(nèi)容中定義的標題，p是body內(nèi)容中定義的段落
我們現(xiàn)在通過游覽器打開編寫的HTML內(nèi)容，具體內(nèi)容如下
在HTML中的內(nèi)容可以通過以下格式進行內(nèi)容注釋具體如下：
（1）HTML標簽
HTML 標簽是 HTML 語言中最基本的單位，HTML 標簽是 HTML（標準通用標記語言下的一個應(yīng)用）最重要的組成部分。HTML標簽具有如下特點：
1）標簽一般是成對出現(xiàn)的 如:<div></div>;也有空標簽 如:<br />
2）標簽由<>包括,分為開始標簽(開放標簽)和結(jié)束標簽(閉合標簽)
3）標簽不區(qū)分大小寫,根據(jù)W3C(萬維網(wǎng)聯(lián)盟)推薦,統(tǒng)一使用小寫字母
標簽的示列如下：
標簽按照<>的對數(shù)可以分為如下兩類分別為雙標簽與單標簽，下面我們具體來了解一下這兩類標簽。
1）雙標簽
雙標簽指由開始和結(jié)束兩個標記符組成的標記。其基本語法格式如下：
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）到結(jié)束標簽（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>），屬性通常由屬性名="屬性值"構(gòu)成,存在于開始標簽中，示列如下:
（4）HTML實體編碼
對于部分不易通過鍵盤輸入的或和HTML沖突的部分符合,引入對應(yīng)的"實體編碼"，如< <> >空格 。
（5）HTML事件
通過某個動作,執(zhí)行某個操作/JS腳本的能力。如點擊按鈕,改變顏色，事件可以分為多類比多鼠標點擊、鼠標聚焦等，下面我看看看一個事件編寫示列：
（1）h標簽
h 標簽有六種分別為h1、h2、h3、h4、h5、h6，這六個分別對應(yīng)六種樣式的標題，我們現(xiàn)在來編寫這六種h標簽，演示代碼如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</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標簽有什么樣式差異，從示列中可以發(fā)現(xiàn)h1標簽字體最大然后依次減小。
（2）p標簽
p 標簽是文本標簽，現(xiàn)在我們來編寫一段含有p標簽的html文本，然后運行了看看p標簽的樣式具體操作如下：
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>HTML基礎(chǔ)教程</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標簽可以跳轉(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標簽
div標簽是一個塊級元素，它可用于組合其他 HTML 元素的容器。可以把div看成一個盒子，我們可以為這個盒子設(shè)置各種各樣屬性（如高度、寬度、顏色等），下面我們編寫一個div標簽并設(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）列表標簽
列表作為網(wǎng)頁設(shè)計的重要內(nèi)容之一，能夠用來制作導(dǎo)航欄和新聞列表等。HTML 列表分為：有序列表（ol），無序列表（ul）以及自定義列表（dl）
1）有序列表ul
有序列表的順序是有序的，默認情況下會以數(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. <!-- 有序列表，以默認方式數(shù)字排列 -->
10. <p>有序列表默認方式數(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
無序列表的順序是無序的，不會按照某個值來排序，無序列表中每個列表前默認都有一個實心圓，也可以通過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>無序列表默認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> 開始，其列表內(nèi)容是以<dd> 開始，自定義列表前面沒有任何標識，其具體示例如下：
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）其它標簽
1）換行標簽<br/>
在HTML中如果想給內(nèi)容進行換行可以使用換行標簽，具體示列如下：
2）分割線標簽<hr/>
<hr/> 標簽用于在 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. <!-- 分割線標簽 -->
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)容。期待與你相遇，和你一同成長。
文章推薦：
許多人來說，學(xué)習(xí)HTML是學(xué)習(xí)Web設(shè)計和開發(fā)的第一步--甚至是更高級的編程語言。大多數(shù)人認為HTML清晰易學(xué)。因為它是一種標記語言，它不同于編程語言。標記語言旨在描述文檔中內(nèi)容片段的用途。
關(guān)于HTML的一個常見誤解是它被用來設(shè)計網(wǎng)頁或網(wǎng)站。雖然HTML語言提供了結(jié)構(gòu)，但該結(jié)構(gòu)與實際外觀脫節(jié)。HTML結(jié)構(gòu)可以應(yīng)用于大屏幕顯示器，移動設(shè)備，甚至打印版本的文檔。所以當(dāng)你在HTML5培訓(xùn)機構(gòu)學(xué)有所成之后，你的就業(yè)選擇也是很多的，不僅僅只是做網(wǎng)站。
今天使用的HTML版本很多，最常用的是HTML5。使用HTML5，我們可以直接在Web瀏覽器中播放音頻和視頻。HTML5帶來了大量的新標簽，使我們能夠構(gòu)造文檔。這些新標簽包括頁眉、頁腳、文章、部分、旁邊和導(dǎo)航(用于導(dǎo)航元素)。
要想學(xué)好HTML5，首先要理解HTML5代碼背后的詞匯表是很重要的，如果你理解并能夠識別HTML5代碼中的標記、內(nèi)容、屬性和值，那么你就可以更好地理解代碼。我們在HTML5培訓(xùn)中學(xué)習(xí)時，要非常重視這一點，不懂的要及時問老師，加深對代碼的理解，這對你學(xué)習(xí)其他語言也有好處。
標記和元素
標記是HTML的基本構(gòu)建塊。標記是構(gòu)成HTML標記語言的單個內(nèi)容單元。HTML標記被配對成一個開始標記和一個結(jié)束標記。開始標記、結(jié)束標記和中間出現(xiàn)的任何內(nèi)容一起稱為元素。
內(nèi)容
內(nèi)容通常是用戶實際要閱讀、聆聽或查看的內(nèi)容。在瀏覽器中查看的所有文本都是存在于HTML代碼的某些元素中的內(nèi)容。
屬性和值
通常，需要以某種方式修改標記，或者需要關(guān)于標記應(yīng)該如何執(zhí)行的附加信息。通常，標記需要鏈接到CSS或Javascript代碼，以便使它們具有動態(tài)。在這兩種情況中，都使用屬性和值。
每個行業(yè)都有要使用的“工具”。在HTML的情況下，您會用一些程序來編寫和顯示代碼。有幾十種好工具。你可以通過反復(fù)嘗試找出你最喜歡的工具。HTML5培訓(xùn)中也會介紹很多種工具供你學(xué)習(xí)，你熟悉的越多，對你在工作上的幫助也就越大。
文本編輯器
文本編輯器是編寫HTML5代碼的程序。文本編輯器類似于精簡的字處理器。最重要的是，與文字處理器相比，它們保持文本“純凈”，并且不會注入格式代碼來混淆試圖解釋HTML的瀏覽器。
一個好的免費文本編輯器是Adobe的括號。括號適用于pc和mac。網(wǎng)上也有免費的供你下載
瀏覽器
瀏覽器的面貌總是在變化。大多數(shù)開發(fā)人員在他們的機器上安裝了幾個瀏覽器。目標通常是確保HTML和CSS代碼在這一系列瀏覽器上執(zhí)行相同的操作。GoogleChrome仍然是許多開發(fā)人員的最愛，因為它擁有廣泛的開發(fā)工具。Chrome中的開發(fā)人員工具提供了一種測試HTML和Javascript代碼以及跟蹤問題的方法。
除了Chrome之外，大多數(shù)Web開發(fā)人員都有Firefox、Safari甚至Opera來測試他們的HTML代碼。由于許多Windows用戶目前升級到Windows10，用戶也應(yīng)該考慮在WindowsEdge瀏覽器中進行測試。
熟悉關(guān)于HTML5培訓(xùn)的入門基礎(chǔ)知識，是為了讓你在HTML編碼方面有一個快速的開始。在掌握HTML編碼之前，還有更多的知識需要學(xué)習(xí)和了解。在HTML5培訓(xùn)機構(gòu)里，有專業(yè)的導(dǎo)師團隊，引領(lǐng)行業(yè)的先進課程，讓每位學(xué)員可以更快的掌握想學(xué)的知識，學(xué)習(xí)更有成效。
了解更多
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
