HTML
1、HTML簡介
HTML是一個網頁的主體部分，也是一個網頁的基礎。由於一個網頁能夠沒有樣式，能夠沒有交互，可是必需要有網頁須要呈現的內容。因此HTML部分是整個前端的基礎。javascript
HTML，全稱是超文本標記語言（HyperText Markup Language），它是一種用於建立網頁的標記語言。
標記語言是一種將文本（text）以及文本相關的其餘信息結合起來，展示出關於文檔結構和數據處理細節的計算機文字編碼。
與文本相關的其餘信息（包括例如文本的結構和表示信息等）與原來的文本結合在一塊兒，可是使用標記（markup）進行標識。css
一、什麼是標記語言？
<問題> <問題標題>Alex老師是否是很帥？ <問題描述>這是你說的啊，我可沒說 <回答> <回答者>二狗子 <回答者簡介>我就叫二狗子 <回答內容>你說什麼就是什麼啦，與我不要緊了，反正我是個男的！！ <回答> <回答者>三袍子 <回答者簡介>我就叫三袍子 <回答內容>我反對，我以爲武sir更帥。
標記語言既描述了文檔自己的信息（問題內容和回答的狀況）也描述了文檔的結構和各部分的做用。
而HTML則是世界通用的、用於描述一個網頁的信息的標記語言，咱們使用的瀏覽器具備將HTML文檔渲染並展現給用戶的功能（當你訪問知乎網站的時候，實際上你得到了一份由知乎提供給你的HTML文檔。瀏覽器將根據HTML文檔渲染出你看到的網頁）。上面這一段僞標記語言翻譯成「HTML」以下：html
<header> <h1>Alex老師是否是很帥？</h1> <p>這是你說的啊，我可沒說</p> </header> <div> <div> 二狗子<span>,我就叫二狗子</span> </div> <p> 你說什麼就是什麼啦，與我不要緊了，反正我是個男的！</a> </p> <div> 三袍子,<span>我就叫三袍子</span> </div> <p> 我反對，我以爲武sir更帥。 </p> </div>
帶尖括號的這些東西是標籤，標籤描述了文本的做用，好比p標籤表示其內部的文本是一個段落，a標籤標識內部的文本是超連接等；與此同時，經過標籤的互相嵌套，表示了這個文檔的結構。
至於哪一個標籤表示什麼意思、總共有多少個種類的標籤這類的問題，由W3C(萬維網聯盟)這一組織規定。HTML做爲標記語言沒有什麼邏輯，就是一些有意義的符號。前端
二、開發者寫好的HTML文件瀏覽
HTML文件最終都會運行在瀏覽器上，由瀏覽器來解析。java
三、開發環境
開發環境：Hbuild、Sublime Text、Dreamweare均可以用來開發html,pycharm也支持html開發。python
四、文件後綴名規範
文件後綴規範：通常使用.html或.htm，二者都是靜態網頁後綴名。網頁文件沒有區別與區分，html與htm後綴網頁後綴能夠互換，對網頁徹底沒有影響同時也沒有區別。能夠認爲html與htm沒有本質區別，惟一區別即多與少一個「l」。linux
2、HTML標籤
HTML做爲一門標記語言，是經過各類各樣的標籤來標記網頁內容的。 程序員
什麼是標籤？瀏覽器
- 在HTML中規定使用英文的尖括號即'<'和'>'包起來，如‘<html>’、‘<p>’都是標籤
- 在HTML中標籤一般是成對出現的，分爲開始標籤和結束標籤，結束標籤
比開始標籤多了一個`/`，如`<p>標籤內容</p>`和`<div>標籤內容</div>`。開始標籤和結束標籤之間的就是標籤的內容。 -
標籤之間是能夠嵌套的。例如：div標籤裏面嵌套p標籤的話，那麼`</p>`必須放在`</div>`的前面。安全 -
HTML標籤不區分大小寫，`<h1>`和`<H1>`是同樣的，可是咱們一般建議使用小寫，由於大部分程序員都以小寫爲準。
注意：不是全部的標籤都支持互相嵌套。
3、HTML文檔結構
一個HTML文件是有本身固定結構的。
<!DOCTYPE HTML> <html> <head>...</head> <body>...</body> </html>
解釋說明上述代碼：
首先，<!DOCTYPE HTML>是文檔聲明，必須寫在HTML文檔的第一行，位於<html>標籤以前，代表該文檔是HTML5文檔。
<html></html>稱爲根標籤，全部的網頁標籤都在<html></html>中。<head></head>標籤用於定義文檔的頭部，它是全部頭部元素的容器。常見的頭部元素有<title>、<script>、<style>、<link>和<meta>等標籤，頭部標籤在下一節中會有詳細介紹。- 在
<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在<body>標籤中的內容（圖中淡綠色部份內容）最終會在瀏覽器中顯示出來。
HTML文檔包含了HTML標籤及文本內容，不一樣的標籤在瀏覽器上會顯示出不一樣的效果，因此咱們須要記住最多見的標籤的特性。
4、HTML註釋
編輯器中，能夠經過「command」+「/」快捷鍵寫出註釋。HTML中註釋的格式以下：
<!--這裏是註釋的內容-->
注意：註釋中可使用回車換行，寫入多行註釋內容，格式以下：
<!--html中的標籤都是閉合標籤 閉合標籤包含雙閉合和單閉合 雙閉合：<html></html> 單閉合：<meta> 或 <meta />均可以 -->
使用中習慣用註釋的標籤將HTML代碼包裹起來，如：
<!-- xx部分 開始 --> 這裏放你xx部分的HTML代碼 <!-- xx部分 結束 -->
HTML註釋的注意事項：
一、HTML註釋不支持嵌套；
二、HTML註釋不能寫在HTML標籤中。
5、head標籤相關內容
文檔的頭部描述了文檔的各類屬性和信息，包括文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其餘方面（移動端）的應用的等。 如下標籤是能夠用在head標籤中的：
<head lang='en'> <title>標題信息</title> <meta charset='utf-8'> <link> <style type='text/css'></style> <script type='text/javascript'></script> </head>
一、title標籤
<title>和</title>標籤之間的文字內容是網頁的標題信息，它會顯示在瀏覽器標籤頁的標題欄中。
能夠把它當作是一個網頁的標題。主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。
<!DOCTYPE html> <html lang="en"> <head> <!--文檔的標題--> <title>茂勉科技</title> <meta charset="utf-8"> </head> <body> </body> </html>
而後用瀏覽器打開，能夠看到下面的內容：
二、meta標籤
從上面的例子能夠看到有使用meta標籤，元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。
標籤位於文檔的頭部，不包含任何內容。提供的信息是用戶不可見的。
meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。
1.http-equiv屬性
它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容。
與之對應的屬性值爲content，content中的內容就是各個參數的變量值。
<!--重定向 2秒後跳轉到對應的網址，注意分號--> <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com"> <!--指定文檔的內容類型和編碼類型 --> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge">
2.name屬性
主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠用多個「,」號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
<meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="路飛學城">
三、link標籤
引入外部樣式表。在目錄下建立index.css文件。能夠在網頁控制檯看到以下信息。
<!--引入外部的樣式表--> <link rel="stylesheet" type="text/css" href="index.css">
link還能夠用來定義網站圖標
<!--icon圖標（定義網站圖標）--> <link rel="icon" href="fav.ico">
先下載好圖片並命名爲fav.ico，刷新後效果如圖：
四、style標籤
<style></style>定義內部樣式表。
<!--定義內部樣式表--> <style type="text/css"></style>
五、script標籤
<script></script>定義內部腳本文件。
<!--定義內部腳本文件--> <script type="text/javascript"></script> <!--連接資源--> <script src="./index.js"></script>
建立index.js文件後。刷新瀏覽器，能夠在控制檯看到index.js信息。
<!DOCTYPE html> <html lang="en"> <head> <!--文檔的標題、編碼方式及URL等信息,這些信息大部分是用於提供索引,辯認或其餘方面（移動端）的應用--> <!--文檔的標題--> <title>茂勉科技</title> <!--經常使用的兩個屬性 http-equiv:它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容， 與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。 --> <!--指定文檔的內容類型和編碼類型--> <meta http-equiv="content-type" content="text/html;charset=UTF-8" > <!--5秒後重定向到路飛學城的網站--> <!--<meta http-equiv="refresh" content="5;URL=https://www.luffycity.com" />--> <!--告訴IE瀏覽器以最高級模式渲染當前網頁--> <meta http-equiv="x-ua-compatible" content="IE=edge"> <!--爲了SEO優化，寫給搜索引擎查找--> <meta name="keywords" content="meta總結,html meta,meta屬性,meta跳轉"> <meta name="description" content="路飛學城"> <!--引入外部的樣式表--> <link rel="stylesheet" type="text/css" href="index.css"> <!--icon圖標（定義網站圖標）--> <link rel="icon" href="fav.ico"> <!--定義內部樣式表--> <style type="text/css"></style> <!--定義內部腳本文件--> <script type="text/javascript"></script> <!--連接資源--> <script src="./index.js"></script> </head> <body> </body> </html>
6、body標籤相關內容——經常使用標籤
想要在網頁上展現出來的內容必定要放在body標籤中。
一、標題標籤h1~h6
<h1> - <h6> 標籤可定義標題。<h1> 定義最大的標題。<h6> 定義最小的標題。 因爲 h 元素擁有確切的語義，所以須要慎重地選擇恰當的標籤層級來構建文檔的結構。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>經常使用標籤一</title> </head> <body> <!--body相關標籤--> <!--heading:標題h1~h6，沒有h7標題--> <h1>一級標題</h1><h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </body> </html>
標題標籤h1~h6屬於塊級元素，特色一：獨佔一行；特色二：能夠設置寬高。請看上面代碼 <h1>和<h2>書寫在一行上展現，可是在瀏覽器的效果倒是換行了。
所以，不要利用標題標籤來改變同一行中的字體大小。相反，咱們應當使用css來定義來達到漂亮的顯示效果。 標題標籤一般用來製做文章或網站的標題。
文本樣式標籤主要用來對HTML頁面中的文本進行修飾，好比加粗、斜體、線條樣式等... 1. `<b></b>`：加粗 2. `<i></i>`：斜體 3. `<u></u>`：下劃線 4. `<s></s>`：刪除線 5. `<sup></sup>`：上標 6. `<sub></sub>`：下標 如今若是想在一段文字中特別強調某幾個字，這時候就能夠用到`<em>`或`<strong>`標籤。 這兩個標籤都是表示強調，可是二者在強調的語氣上有區別:`<em>`表示強調，`<strong>`表示更強烈的強調。 在瀏覽器中`<em>`默認會用斜體表示，`<strong>`會用粗體來表示。兩個標籤相比，咱們一般會推薦你們使用`<strong>`表示強調
在一行文本中使用文本樣式標籤：
<p><b>路飛學城</b><i>立志幫助</i><u>有志向的</u><s>年輕人經過努力</s><sup>學習得到</sup><sub>體面的工做和生活</sub>! 路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p>
顯示效果以下圖所示：
二、段落標籤 p
<p>,paragraph的簡寫。定義段落
<body> <p>經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> <p>經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> </body>
瀏覽器展現的特色：
1.跟普通文本同樣，可是能夠經過css來設置當前段落的樣式。
2.段落標籤也是塊級元素，獨佔一行。
三、超連接標籤 a
超級連接<a>標記表明一個連接點，是英文anchor（錨點）的簡寫。它的做用是把當前位置的文本或圖片鏈接到其餘的頁面、文本或圖像。
（1）目標爲網址，target:_blank 在新的網站打開連接的資源地址
target:_self 在當前網站打開連接的資源地址 title: 表示鼠標懸停時顯示的標題
<!--target:_self 默認值，在當前網站打開資源 _blank 在新的網站打開資源
title: 表示鼠標懸停時顯示的標題 --> <a href="https://www.luffycity.com" target="_blank" title="luffy_code_test">路飛學城網站</a>
效果以下圖所示：
（2）目標爲下載的壓縮包資源
<!--點擊下載壓縮包資源--> <a href="./a.zip">下載壓縮包</a>
（3）目標爲電子郵件連接，前提是計算機有安裝郵件客戶端，並配置好了郵件相關信息。
<!--點擊跳轉到郵箱頁面給目標寫郵件--> <a href="mailto:443614404@qq.com">聯繫交友</a>
（4）返回頁面頂部的空連接或具體id值的標籤
<!--返回頁面頂部的內容--> <a href="#">跳轉到頂部</a> <!--返回某個id--> <a href="#p1">跳轉到頂部的段落標籤id爲p1</a>
（5）觸發執行javascript代碼
<!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼--> <a href="javascript:alert(1)">內容</a>
效果如圖所示，點擊內容後，頁面彈窗：
javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應。
<!-- javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應。 把a標籤的默認動做取消--> <a href="javascript:;">內容</a>
四、列表標籤 ul, ol
網站頁面上一些列表相關的內容好比說物品列表、人名列表等等均可以使用列表標籤來展現。一般後面跟<li>標籤一塊兒用，每條li表示列表的內容
<ul>:unordered lists的縮寫，無序列表 <ol>:ordered listsde的縮寫，有序列表
<!-- 無序列表 type能夠定義無序列表的樣式--> <ul type="circle"> <li>個人帳戶</li> <li>個人訂單</li> <li>個人優惠券</li> <li>個人收藏</li> <li>退出</li> </ul> <!-- 有序列表 type能夠定義有序列表的樣式 --> <ol type="a"> <li>個人帳戶</li> <li>個人訂單</li> <li>個人優惠券</li> <li>個人收藏</li> <li>退出</li> </ol>
顯示效果以下：
ul標籤的屬性：
type：列表標識的類型
- disc：實心圓(默認值)
- circle：空心圓
- square：實心矩形
- none：不顯示標識
<!--無序列表--> <ul type="none"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ul>
上例中再也不顯示標識。
ol標籤的屬性：
type：列表標識的類型
- 1：數字
- a：小寫字母
- A：大寫字母
- i：小寫羅馬字符
- I：大寫羅馬字符
<!--有序列表--> <ol type="I"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ol>
列表標識的起始編號默認爲1
五、盒子標籤 div
<div>可定義文檔的分區 ，div是division的縮寫，翻譯爲：區 。
<div> 標籤能夠把文檔分割爲獨立的、不一樣的部分。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>經常使用標籤一</title> </head> <body> <!--class用來取名字--> <div class="p1"> <!--設置id爲p1--> <p style="height: 2000px" id="p1">頂部</p> </div> <!--body相關標籤--> <div class="heading"> <!--heading:標題h1~h6，沒有h7標題--> <!--塊級元素，獨佔一行--> <h1>一級標題</h1><h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </div> <div class="p1"> <!--段落標籤--> <p><b>路飛學城</b><i>立志幫助</i><u>有志向的</u><s>年輕人經過努力</s><sup>學習得到</sup><sub>體面的工做和生活</sub>!路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> <p><sub>路飛學城</sub>立志幫助有志向的年輕人經過努力學習得到體面的工做和生活!路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> </div> <div class="anchor"> <!--a標籤屬於行內標籤：在一行內顯示--> <!--_self：默認值，在當前網站打開資源 _blank：在新的網站打開資源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy_code_test">路飛學城網站</a> <!--點擊下載壓縮包資源--> <a href="./a.zip">下載壓縮包</a> <!--點擊跳轉到郵箱頁面給目標寫郵件--> <a href="mailto:443614404@qq.com">聯繫咱們</a> <!--返回頁面頂部的內容--> <a href="#">跳轉到頂部</a> <!--返回某個id--> <a href="#p1">跳轉到頂部的段落標籤id爲p1</a> <!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應。 把a標籤的默認動做取消--> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </div> <div class="list"> <!--無序列表--> <ul type="none"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ul> <!--有序列表--> <ol type="I"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ol> </div> </body> </html>
分析上面代碼能夠下面的層次結構（在控制檯中也可查看到這個層次結構）
<div id='wrap'> <div class='para'></div> <div class='anchor'></div> <div class='para'></div> <div class='lists'></div> </div>
將文檔放在一個父級的區（div）中，它裏面包含四塊區（div）域，瀏覽器查看效果,你會發現每小塊區域都是獨佔一行的，因此div是塊級元素。另外，每塊區域表示獨立的一塊，id屬性和class屬性其實很簡單，你能夠當作給這個區域起個名字。id是惟一的，一個頁面中不能有兩個重複的id，跟身份證號碼同樣，class能夠設置一樣的屬性值，而且能夠設置多個，例如class=’para n1‘。
六、圖片標籤 <img/>
一個網頁除了有文字，還會有圖片。咱們使用<img/>標籤在網頁中插入圖片。語法以下：
<img src="圖片地址" alt="圖片加載失敗時顯示的內容" title = "提示信息" />
注意：
- src設置的圖片地址能夠是本地的地址也能夠是一個網絡地址。
- 圖片的格式能夠是png、jpg和gif。
- alt屬性的值會在圖片加載失敗時顯示在網頁上。
- 還能夠爲圖片設置寬度(width)和高度(height)，不設置就顯示圖片默認的寬度和高度瀏覽器查看效果：行內塊元素
<div> <span>與行內元素展現的標籤<span> <span>與行內元素展現的標籤<span> <img src="./machine-right.png" alt="金融量化分析" style="width:200px;height:200px"> <img src="./finance-right.png" alt="人工智能實戰" style="width: 200px;height: 200px"> </div>
- 與行內元素在一行內顯示
- 能夠設置寬度和高度(a標籤是行內標籤，設置寬高不起做用)
- span標籤能夠單獨摘出某塊內容，結合css設置相應的樣式
小練習：展現兩張圖片獨佔一行，鼠標移上去顯示小手的狀態。
<div class="image"> <!--一、可設寬高；二、在一行內顯示，它叫行內塊標籤--> <!--<img src="./homesmall.png" alt="python的圖片">--> <!--<img src="./homesmall2.png" alt="linux的圖片">--> <!--改寫爲兩個圖片獨佔一行，鼠標移動上去顯示小手的狀態--> <div class="python"> <a href="#p1"><img src="./homesmall.png" alt="python的圖片"></a> </div> <div class="linux"> <a href="#p1"><img src="./homesmall2.png" alt="linux的圖片"></a> </div> </div>
七、換行標籤 <br>
<p>路飛學城立志幫助有志向的年輕人經過努力學習得到<br> 體面的工做和生活!路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p>
<br>標籤用來將內容換行，其在HTML網頁上的效果至關於咱們平時使用word編輯文檔時使用回車換行。
八、分割線 <hr>
<hr>標籤用來在HTML頁面中建立水平分隔線，一般用來分隔內容。
<div class="list"> <!--無序列表--> <ul type="none"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ul> <hr> <!--有序列表--> <ol type="I"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ol> </div>
九、特殊符號
瀏覽器在顯示的時候會移除源代碼中多餘的空格和空行。 全部連續的空格或空行都會被算做一個空格。須要注意的是，HTML代碼中的全部連續的空行（換行）也被顯示爲一個空格。
因此HTML代碼對縮進的要求並不嚴格，咱們一般使用縮進來讓咱們的代碼結構更清晰，僅此而已。
所以，在html中想實現多個空格和空行必須用到特殊符號。
| 內容 | 代碼 |
| 空格 | |
| > | > |
| < | < |
| & | & |
| ￥ | ¥ |
| 版權 | © |
| 註冊 | ® |
HTML特殊符號對照表:http://tool.chinaz.com/Tools/HtmlChar.aspx
特殊符號使用示例：
<!--無序列表--> <ul type="none"> <li>個人帳戶 >></li> <li>個人訂單 ¥></li> <li>個人優惠券 ©></li> <li>個人收藏 ®></li> <li>退出></li> </ul>
十、<span>標籤——組合文檔中行內元素
<span></span>也是行內標籤。用它來組合行內元素，能夠方便經過樣式來格式化它們。
span沒有固定的格式表現，對它應用樣式時，它纔會產生視覺上的變化。
十一、總結標籤類型
三種標籤：
一、塊級元素（塊級標籤）：獨佔一行，可設寬高，若是不設寬度，瀏覽器的寬度。(<div>, <p>, <h1>, <form>, <ul> 和 <li>等)
二、行內元素：在一行內展現，不能設置寬高，它的寬高根據內容去填充。（<span>, <a>, <label>, <input>, <img>, <strong> 和<em>）
三、行內塊元素：在一行內展現，可設寬高。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>經常使用標籤一</title> </head> <body> <!--class用來取名字--> <div class="p1"> <!--設置id爲p1--> <p style="height: 2000px" id="p1">頂部</p> </div> <!--body相關標籤--> <div class="heading"> <!--heading:標題h1~h6，沒有h7標題--> <!--塊級元素，一、獨佔一行 二、能夠設置寬高--> <h1>一級標題</h1><h2>二級標題</h2> <h3>三級標題</h3> <h4>四級標題</h4> <h5>五級標題</h5> <h6>六級標題</h6> </div> <div class="p1"> <!--段落標籤--> <p><b>路飛學城</b><i>立志幫助</i><u>有志向的</u><s>年輕人經過努力</s><sup>學習得到</sup><sub>體面的工做和生活</sub>!路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> <p>路飛學城立志幫助有志向的年輕人經過努力學習得到<br>體面的工做和生活!路飛學員經過學習Python ,金融分析,人工智能等互聯網最前沿技術,開啓職業生涯新可能</p> </div> <div class="anchor"> <!--a標籤屬於行內標籤：在一行內顯示 設置寬高不起做用--> <!--_self：默認值，在當前網站打開資源 _blank：在新的網站打開資源 --> <a href="https://www.luffycity.com" target="_blank" title="luffy_code_test">路飛學城網站</a> <!--點擊下載壓縮包資源--> <a href="./a.zip">下載壓縮包</a> <!--點擊跳轉到郵箱頁面給目標寫郵件--> <a href="mailto:443614404@qq.com"style="width: 500px;height: 100px">聯繫咱們</a> <!--返回頁面頂部的內容--> <a href="#">跳轉到頂部</a> <!--返回某個id--> <a href="#p1">跳轉到頂部的段落標籤id爲p1</a> <!-- javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼，而 javascript:; 表示什麼都不執行，這樣點擊<a>時就沒有任何反應。 把a標籤的默認動做取消--> <a href="javascript:alert(1)">內容</a> <a href="javascript:;">內容</a> </div> <div class="list"> <!--無序列表--> <ul type="none"> <li>個人帳戶 >></li> <li>個人訂單 ¥></li> <li>個人優惠券 ©></li> <li>個人收藏 ®></li> <li>退出></li> </ul> <hr> <!--有序列表--> <ol type="I"> <li>個人帳戶></li> <li>個人訂單></li> <li>個人優惠券></li> <li>個人收藏></li> <li>退出></li> </ol> </div> <div class="image"> <!--一、可設寬高；二、在一行內顯示，它叫行內塊標籤--> <!--<img src="./homesmall.png" alt="python的圖片">--> <!--<img src="./homesmall2.png" alt="linux的圖片">--> <!--改寫爲兩個圖片獨佔一行，鼠標移動上去顯示小手的狀態--> <div class="python"> <a href="#p1"><img src="./homesmall.png" alt="python的圖片"></a> </div> <div class="linux"> <a href="#p1"><img src="./homesmall2.png" alt="linux的圖片"></a> </div> </div> <!-- 三種標籤： 一、塊級元素（塊級標籤）：獨佔一行，可設寬高，若是不設寬度，瀏覽器的寬度。 二、行內元素：在一行內展現，不能設置寬高，它的寬高根據內容去填充。 三、行內塊元素：在一行內展現，可設寬高。 --> </body> </html>
7、body標籤相關內容——表格標籤table
表格由<table> 標籤來定義。每一個表格均有若干行（由 <tr> 標籤訂義），每行被分割爲若干單元格（由<td>標籤訂義）。字母 td 指表格數據（table data），即數據單元格的內容。數據單元格能夠包含文本、圖片、列表、段落、表單、水平線、表格等等（能夠包含任何標籤）。
<div class="table"> <table> <!--表格頭--> <thead> <!--表格行--> <tr> <!--表格列，【注意】這裏使用的是th--> <th></th> </tr> </thead> <!--表格主體--> <tbody> <!--表格行--> <tr> <!--表格列，【注意】這裏使用的是td--> <td></td> </tr> <tr> <td></td> </tr> </tbody> <!--表格底部--> <tfoot> <tr> <td></td> </tr> </tfoot> </table> </div>
上述格式寫好後，表格是沒有框線的，這時須要用到table的border屬性來設置邊框，這樣設置的邊框，單元格是有間隙的，能夠用屬性cellspacing來調整間隙。
<!--表格，border設置邊框,cellspacing設置間隙--> <table border="1" cellspacing="0">
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格，border設置邊框,cellspacing設置間隙--> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <!--表格行--> <tr> <!--表格頭裏的單元格，【注意】這裏用的是th--> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <!--表格主題內的單元格，【注意】這裏用的是td--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--<tfoot></tfoot>--> </table> </body> </html>
示例運行以下圖所示：
關於表格行和列的合併
rowspan：合併行(豎着合併)
colspan：合併列(橫着合併)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格</title> </head> <body> <!--表格，border設置邊框,cellspacing設置間隙--> <table border="1" cellspacing="0"> <!--表格頭--> <thead> <!--表格行--> <tr> <!--標題欄這一列顯示爲空--> <th></th> <!--表格頭裏的單元格，【注意】這裏用的是th--> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> </tr> </thead> <!--表格主體--> <tbody> <!--表格主體的每一行--> <tr> <!--合併行（豎着合併），合併三行，內容是上午--> <td rowspan="3">上午</td> <!--表格主題內的單元格，【注意】這裏用的是td--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <td rowspan="2">下午</td> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> <tr> <!--表格主題內的單元格--> <td>語文</td> <td>數學</td> <td>英語</td> <td>生物</td> <td>化學</td> </tr> </tbody> <!--表格底部--> <tfoot> <!--表格行--> <tr> <!--合併列（橫着合併），--> <td colspan="6">課程表</td> </tr> </tfoot> </table> </body> </html>
示例運行效果以下圖：
8、body標籤相關內容——表單標籤form
表單是一個包含表單元素的區域
表單元素是容許用戶在表單中輸入內容，好比：文本域(textarea)、輸入框(input)、單選框（）
一、表單的做用
表單用於顯示、收集信息，並將信息提交給服務器。
二、表單的語法
<form>容許出現表單控件</form>
三、表單標籤屬性
action：定義表單被提交時發生的動做提交給服務器處理程序的地址。
method：定義表單提交數據時的方式。
method="get"，get是默認值，明文提交，提交數據時能夠顯示在地址上，安全性低；提交數據有大小限制，最大爲2KB。
method="post"，隱式提交所提交的內容，不會顯示到地址欄，安全性高；數據無大小限制。
<!--form標籤是一個塊級元素 被提交--> <form action="https://www.baidu.com" method="get"></form>
enctype：編碼類型，即表單數據進行編碼的方式，容許表單將什麼樣的數據提交給服務器；取值分如下三種：
1.application/x-www-form-urlencoded默認。容許將普通字符、特殊字符，都提交給服務器，不容許提交文件。
2.multipart/form-data，容許將文件提交給服務器。
3.text/plain，只容許提交普通字符，特殊字符、文件都沒法提交。
注意：若是有文件須要提交給服務端，method必須爲post，enctype必須爲multipart/form-data。
四、表單控件分類
label功能：關聯文本與表達元素的，點擊文本時，如同點擊表單元素同樣。
label標籤的"for"屬性可把label綁定到另一個元素，所以要把for屬性值與input的id屬性相同。當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控件。
for屬性：表示與該label相關聯的表單控件元素的ID值。
<label for="user">用戶名：</label>
input組元素：input是行內塊元素。
type="text"，明文顯示用戶輸入的數據。placeholder設置默認值
<label for="user">用戶名：</label>
<input type="text" name="username" id="user" placeholder="請輸入用戶名" value="小馬">
type="password"，密文顯示用戶輸入的數據
<lable for="password">密碼：</lable> <input type="text"name="password" id="password" placeholder="請輸入密碼">
type="file"，上傳文件所用
<input type="file" name="textfile">
type="submit"，功能固定化，負責將表單中的表單控件提交給服務端
<input type="submit" name="btn" value="submit">
type="reset"，重置按鈕，恢復默認狀態
<!--重置按鈕,恢復默認狀態--> <input type="reset" name="">
type="button"，按鈕
<input type="button" name="btn" value="提交">
type="radio"，單選框，checked設置值後會被默認選中，要產生互斥效果name值必須相同。
<!--單選框checked會被默認選中，要產生互斥的效果name值要相同--> <p> 用戶性別： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p>
type="checkbox"，複選框，checked設置值後會被默認選中，要統計複選數name須要設置相同。
<!--複選框--> <p> 用戶愛好： <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="樂">樂 </p>
input組元素在使用時，須要注意的是：
1.value控件的值就是要提交給服務端的數據。
2.name控件的名稱，服務端用
3.disabled屬性只要出如今標籤中，表示禁用該控件。
<!--disable是禁用按鈕屬性--> <input type="button" name="btn" value="提交" disabled="disabled">
textarea文本域：容許用戶錄入多行數據到表單控件中。
cols屬性指定文本區域的列數，變相設置當前元素寬度。
rows指定文本區域的行數，變相設置當前元素高度。
<p> 自我介紹： <textarea cols="20" rows="5" name="txt" placeholder="請作自我介紹"> </textarea> </p>
select和option選擇框：用來生成下來列表或滾動條
select屬性：size取值大於1的話，則爲滾動列表，不然就是下拉選項框。
multiple設置多選，該屬性出如今<select>中，則容許多選（針對滾動列表）
option屬性：value選項的值
selected預選中，注意若是不設置selected屬性的話，那麼選項框中的第一個選項會默認被選中。
<p> <!--下拉列表,size生成滾動條(每次顯示3個)--> <select name="sel" size="3"> <!--selected設置預選中--> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山東">山東</option> <option value="福建">福建</option> </select> </p>
本身製做一個form表單控件以下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單控件</title> </head> <body> <div class="form"> <!--form標籤是一個塊級元素 被提交--> <form action="https://www.baidu.com" method="get"> <p> <!--lable功能：關聯文本與表單元素的，點擊文本時，如同點擊表單元素同樣；label屬於行內元素 for屬性：表示與該label相關聯的表單空間元素的id值 --> <label for="user">用戶名：</label> <!--input是行內塊元素--> <input type="text" name="username" id="user" placeholder="請輸入用戶名" value="小馬"> </p> <p> <lable for="password">密碼：</lable> <input type="text"name="password" id="password" placeholder="請輸入密碼"> </p> <!--單選框checked會被默認選中，要產生互斥的效果name值要相同--> <p> 用戶性別： <input type="radio" name="sex" value="男" checked="">男 <input type="radio" name="sex" value="女">女 </p> <!--複選框--> <p> 用戶愛好： <input type="checkbox" name="checkfav" value="吃" checked="check">吃 <input type="checkbox" name="checkfav" value="喝">喝 <input type="checkbox" name="checkfav" value="玩">玩 <input type="checkbox" name="checkfav" value="樂">樂 </p> <!--文件選擇框--> <p> 請上傳文件： <input type="file" name="textfile"> </p> <!--文本域--> <p> 自我介紹： <textarea cols="20" rows="5" name="txt" placeholder="請作自我介紹"> </textarea> </p> <p> <!--下拉列表,size生成滾動條(每次顯示3個)--> <select name="sel" size="3"> <!--selected設置預選中--> <option value="深圳" selected>深圳</option> <option value="北京">北京</option> <option value="沙河">沙河</option> <option value="山東">山東</option> <option value="福建">福建</option> </select> </p> <p> <!--顯示普通的按鈕--> <!--disable是禁用按鈕屬性--> <input type="button" name="btn" value="提交" disabled="disabled"> <!--重置按鈕,恢復默認狀態--> <input type="reset" name=""> <!--提交form表單使用type=submit按鈕--> <input type="submit" name="btn" value="submit"> </p> </form> <button type="button">註冊</button> </div> </body> </html>
表單效果圖以下：
9、HTML標籤屬性
HTML標籤能夠設置屬性，屬性通常以鍵值對的方式寫在開始標籤中。如
<div id="i1">這是一個div標籤</div> <p class='p1 p2 p3'>這是一個段落標籤</p> <a href="http://www.luffycity.com">這是一個連接</a> <input type='button' onclick='addclick()'></input>
爲何能設置屬性呢？
其實呢，你能夠這樣簡單理解，由於最終咱們這些標籤會經過css去美化，經過javascript來操做，那麼這些標籤咱們能夠當作是一個對象，對象就應該有它本身的屬性和方法。那麼你像上面說到input標籤，type=‘button’就是它的屬性，onclick=‘addclick()’就是它的方法。後面會詳細講JavaScript和css，你們不用擔憂這裏很差理解。
關於標籤屬性的注意事項：
1.HTML標籤除一些特定屬性外能夠設置自定義屬性，一個標籤能夠設置多個屬性用空格分隔，多個屬性不區分前後順序。
2.屬性值要用引號包裹起來，一般使用雙引號也能夠單引號。
3.屬性和屬性值不區分大小寫，可是推薦使用小寫。
10、HTML標籤分類
HTML中標籤元素三種不一樣類型：塊狀元素，行內元素，行內塊狀元素。
經常使用的塊狀元素：
<div>區 <p>段落 <h1>~<h6>標題 <ol>有序列表 <ul>無序列表 <table>表格 <form>表單 <li>列表中列
經常使用的行內元素:
<a>超連接 <span>span標籤組合行內元素 <br>換行 <i>加粗 <em>斜體 <strong>加粗 <label>表單文本
經常使用的行內塊狀元素：（這個最特殊）
<img>圖片 <input>
這三種標籤元素特色：
塊級元素特色：display:block;
一、每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。獨佔一行
二、元素的高度、寬度、行高以及頂和底邊距都可設置。
三、元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。
行內元素特色：display:inline;
一、和其餘元素都在一行上；
二、元素的高度、寬度及頂部和底部邊距不可設置；
三、元素的寬度就是它包含的文字或圖片的寬度，不可改變。
行內塊狀元素的特色：display:inline-block;
一、和其餘元素都在一行上；
二、元素的高度、寬度、行高以及頂和底邊距都可設置
注意：咱們能夠經過display屬性對塊級元素、行內元素、行內塊元素進行轉換，爲後面頁面佈局作好了準備。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標籤分類</title> </head> <body> <div class="wrapper"> <!--塊級元素：div p h1~h6 ul table form li 特性：獨佔一行；能夠設置寬度和高度，若是設置了寬度和高度，則是當前的寬高 若是寬度和高度沒有設置，寬度是父盒子的寬度，高度根據內容填充。 --> <div class="left"> 這是路飛學城的戰場 <p>這是個人段落 <div style="width: 500px;height: 100px">這是個人愛好</div> <ul> <li> <h2>抽菸</h2> </li> <li> <ol> <li>喝酒</li> <li>燙頭</li> </ol> </li> </ul> </p> </div> <div class="right"> <!--行內元素：a span br i em strong 特性：在一行內展現；不能設置寬度和高度，寬度和高度根據內容填充 （下面的示例設置的高度和寬度，在頁面中顯示時，毫無影響） --> <a href="#" style="width: 200px;height: 100px">百度</a> <a href="#">路飛</a> <span style="width: 100px;height: 200px;"></span> </div> <div class="inline-block"> <!--行內塊 特性：1.在一行內展現； 2.能夠設置寬度和高度 --> <img src="./homesmall.png" alt="一張圖片"> <input type="text" name="username" style="width: 200px;height: 100px"> </div> </div> </body> </html>
11、標籤嵌套規則
一、塊元素能夠包含內聯元素或某些塊元素，但內聯元素卻不能包含塊元素，它只能包含其它的內聯元素。
<div><div></div><h1></h1><p><p></div> ✔️ <a href=」#」><span></span></a> ✔️ 都是行內元素 <span><div></div></span> ❌
二、塊級元素不能放在p標籤（塊級元素）裏面
<p><ol><li></li></ol></p> ✔️ <p><div></div></p> ❌
三、有幾個特殊的塊級元素只能包含內嵌元素，不能再包含塊級元素，這幾個特殊的標籤是：
h一、h二、h三、h四、h五、h六、p
<ul> <li> <ul> <li> <div> </div> </li> <li> <ol> <li></li> <li></li> <li></li> <li></li> </ol> </li> </ul> </li> </ul>
- 1. HTML+CSS vs HTML
- 2. 【HTML】HTML概述
- 3. HTML---初識HTML
- 4. 【HTML】初識HTML
- 5. [HTML]HTML表格
- 6. 【HTML】HTML屬性
- 7. HTML vs HTML+CSS
- 8. 【html】html教程3
- 9. 【html】html教程1
- 10. html_01 | HTML——① HTML 基礎
- 更多相關文章...
- • HTML 指南 - 網站建設指南
- • W3C HTML 活動 - W3C 教程
- • 適用於PHP初學者的學習線路和建議
- • JDK13 GA發佈：5大特性解讀
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
- 1. HTML+CSS vs HTML
- 2. 【HTML】HTML概述
- 3. HTML---初識HTML
- 4. 【HTML】初識HTML
- 5. [HTML]HTML表格
- 6. 【HTML】HTML屬性
- 7. HTML vs HTML+CSS
- 8. 【html】html教程3
- 9. 【html】html教程1
- 10. html_01 | HTML——① HTML 基礎