整合營銷服務(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語言，將所需要表達的信息按某種規(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)容可以通過以下格式進行內(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>。元素可以進行嵌套具體如下：
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 元素的容器?？梢园裠iv看成一個盒子，我們可以為這個盒子設(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)容進行換行可以使用換行標(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)容。期待與你相遇，和你一同成長。
文章推薦：
oogle HTML/CSS 規(guī)范
本文介紹了 Google 推薦的 HTML 和 CSS 編寫格式規(guī)范，以建立良好的個人編碼習(xí)慣。
通用樣式規(guī)范
省略圖片、樣式、腳本以及其他媒體文件 URL 的協(xié)議部分（http:,https:），除非文件在兩種協(xié)議下都不可用。這種方案稱為 protocol-relative URL，好處是無論你是使用 HTTPS 還是 HTTP 訪問頁面，瀏覽器都會以相同的協(xié)議請求頁面中的資源，同時可以節(jié)省一部分字節(jié)。
<!-- 不推薦 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>
<!-- 推薦 -->
<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
/* 不推薦 */
.example {
background: url("https://www.google.com/images/example");
}
/* 推薦 */
.example {
background: url("http://www.google.com/images/example");
}
通用格式規(guī)范
縮進
一次縮進2個空格，不要使用 tab 或者混合 tab 和空格的縮進。
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
大小寫
以下都應(yīng)該用小寫：HTML 元素名稱，屬性，屬性值（除非 text/CDATA），CSS 選擇器，屬性，屬性值。
<!-- 不推薦 --> <A HREF="/">Home</A> <!-- 推薦 --> <img src="google.png" alt="Google"> /* 不推薦 */ color: #E5E5E5; /* 推薦 */ color: #e5e5e5;
結(jié)尾空格
<!-- 不推薦 --> <p>What?_ <!-- 推薦 --> <p>Yes please.
通用元規(guī)范
編碼
在 HTML 中通過 <meta charset="utf-8"> 指定編碼方式，CSS 中不需要指定，因為默認(rèn)是 UTF-8。
注釋
使用注釋來解釋代碼：包含的模塊，功能以及優(yōu)點。
任務(wù)項
用 TODO 來標(biāo)記待辦事項，而不是用一些其他的標(biāo)記，像 @@。
<!-- TODO: remove optional tags --> <ul> <li>Apples</li> <li>Oranges</li> </ul>
HTML 風(fēng)格規(guī)范
文檔類型
HTML 文檔應(yīng)使用 HTML5 的文檔類型：<!DOCTYPE html>。
孤立標(biāo)簽無需封閉自身，<br> 不要寫成 <br />。
HTML 正確性
盡可能使用正確的 HTML。
<!-- 不推薦 --> <title>Test</title> <article>This is only a test. <!-- 推薦 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
語義化
<!-- 不推薦 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推薦 --> <a href="recommendations/">All recommendations</a>
多媒體元素降級
對于像圖片、視頻、canvas 動畫等多媒體元素，確保提供其他可訪問的內(nèi)容。圖片可以使用替代文本（alt），視頻和音頻可以使用文字版本。
<!-- 不推薦 --> <img src="spreadsheet.png"> <!-- 推薦 --> <img src="spreadsheet.png" alt="Spreadsheet screenshot.">
關(guān)注分離
標(biāo)記、樣式和腳本分離，確保相互耦合最小化。
實體引用
如果團隊中文件和編輯器使用同樣的編碼方式，就沒必要使用實體引用，如 —， ”，?，除了一些在 HTML 中有特殊含義的字符（如 < 和 &）以及不可見的字符（如空格）。
<!-- 不推薦 --> The currency symbol for the Euro is “&eur;”. <!-- 推薦 --> The currency symbol for the Euro is “€”.
type 屬性
在引用樣式表和腳本時，不要指定 type 屬性，除非不是 CSS 或 JavaScript。
因為 HTML5 中已經(jīng)默認(rèn)指定樣式變的 type 是 text/css，腳本的type 是 text/javascript。
<!-- 不推薦 --> <link rel="stylesheet" type="text/css"> <!-- 推薦 --> <link rel="stylesheet" > <!-- 不推薦 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js" type="text/javascript"></script> <!-- 推薦 --> <script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>
HTML 格式規(guī)范
HTML 引號
屬性值用雙引號。
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a> <!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
CSS 風(fēng)格規(guī)范
ID 和 Class 命名
使用有含義的 id 和 class 名稱。
/* 不推薦: 含義不明確 */
#yee-1901 {}
/* 不推薦: 按直覺來的 */
.button-green {}
.clear {}
/* 推薦: 指定含義 */
#gallery {}
#login {}
.video {}
/* 推薦: 通用 */
.aux {}
.alt {}
ID 和 Class 命名風(fēng)格
id 和 class 應(yīng)該盡量簡短，同時要容易理解。
/* 不推薦 */
#navigation {}
.atr {}
/* 推薦 */
#nav {}
.author {}
選擇器
除非需要，否則不要在 id 或 class 前加元素名。
/* 不推薦 */
ul#example {}
div.error {}
/* 推薦 */
#example {}
.error {}
屬性簡寫
盡量使用 CSS 中可以簡寫的屬性 (如 font)，可以提高編碼效率以及代碼可讀性。
/* 不推薦 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推薦 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
0 和單位
值為 0 時不用添加單位。
margin: 0; padding: 0;
開頭的 0
值在 -1 和 1 之間時，不需要加 0。
font-size: .8em;
16進制表示法
/* 不推薦 */ color: #eebbcc; /* 推薦 */ color: #ebc;
前綴
使用帶前綴的命名空間可以防止命名沖突，同時提高代碼可維護性。
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
ID 和 Class 命名分隔符
選擇器中使用連字符可以提高可讀性。
/* 不推薦: “demo” 和 “image” 之間沒有分隔符 */
.demoimage {}
/* 不推薦: 使用下劃線 */
.error_status {}
/* 推薦 */
#video-id {}
.ads-sample {}
CSS 格式規(guī)范
書寫順序
按照屬性首字母順序書寫 CSS 易于閱讀和維護，排序時忽略帶有瀏覽器前綴的屬性。
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
塊級內(nèi)容縮進
為了反映層級關(guān)系和提高可讀性，塊級內(nèi)容都應(yīng)縮進。
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
聲明結(jié)束
每行 CSS 都應(yīng)以分號結(jié)尾。
/* 不推薦 */
.test {
display: block;
height: 100px
}
/* 推薦 */
.test {
display: block;
height: 100px;
}
屬性名結(jié)尾
屬性名和值之間都應(yīng)有一個空格。
/* 不推薦 */
h3 {
font-weight:bold;
}
/* 推薦 */
h3 {
font-weight: bold;
}
聲明樣式塊的分隔
在選擇器和 {} 之間用空格隔開。
/* Not recommended: missing space */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break */
#video
{
margin-top: 1em;
}
/* 推薦 */
#video {
margin-top: 1em;
}
選擇器分隔
每個選擇器都另起一行。
/* 不推薦 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推薦 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
規(guī)則分隔
規(guī)則之間都用空行隔開。
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
CSS 引號
屬性選擇器和屬性值用單引號，URI 的值不需要引號。
/* 不推薦 */
@import url("http://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
/* 推薦 */
@import url(//www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
CSS 元規(guī)則
分段注釋
用注釋把 CSS 分成各個部分。
*******HTML********
**Web服務(wù)本質(zhì)**
import socket
sk = socket.socket()
sk.bind(("127.0.0.1", 8080))
sk.listen(5)
while True:
conn, addr = sk.accept()
data = conn.recv(8096)
conn.send(b"HTTP/1.1 200 OK\r\n\r\n")#http協(xié)議 簡化
conn.send(b"<h1>Hello world!</h1>")#發(fā)送內(nèi)容
conn.close()
sk.close()
瀏覽器發(fā)送請求-->HTTP協(xié)議-->服務(wù)器接受請求-->服務(wù)端返回響應(yīng)-->服務(wù)端把HTML文件內(nèi)容發(fā)送給瀏覽器-->瀏覽器渲染頁面
What HTML?
*超文本標(biāo)記語言（Hypertext Markup Language，HTML）是一種用于創(chuàng)建網(wǎng)頁標(biāo)記語言
*本質(zhì)上是瀏覽器可識別的規(guī)則，我們按照規(guī)則寫網(wǎng)頁，瀏覽器根據(jù)規(guī)則渲染我們的頁面。
對于不同的瀏覽器，對于同一個標(biāo)簽可能會有不同的解釋。（兼容性問題）
*網(wǎng)頁文件的擴展名：.html或.htm
*HTML是一種標(biāo)記語言，他不是一種編程語言，HTML使用標(biāo)簽來描述網(wǎng)頁。
****HTML文檔結(jié)構(gòu)****
*最基本的HTML文檔**
<!DOCTYPE html>
<html lang = 'zh-CN'>
<head>
<meta chrset = 'UTF-8'>
<title> 標(biāo)題 </title>
</head>
<body>
</body>
</html>
#解釋
1.<!DOCTYPE html>聲明為HTML5文檔
2.<html></html>是文檔的開始標(biāo)記語言和結(jié)束標(biāo)記，是HTML頁面的根本元素，在他們之間是文檔的頭部(head)和主題(body)
3.<head></head>定義了HTML文檔的開頭部分。他們之間的內(nèi)容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數(shù)據(jù)
4.<title></title>定義了網(wǎng)頁標(biāo)題，在瀏覽器標(biāo)題欄顯示
5.<body></body>之間的文本是可見的網(wǎng)頁主體內(nèi)容
注意：
對于中文網(wǎng)頁需要使用<meta charset='utf-8'>聲明編碼。否則會出現(xiàn)亂碼。這些瀏覽器會設(shè)置GBK為默認(rèn)編碼，則需要我們設(shè)為
<meta charset='gbk'>
****HTML標(biāo)簽格式****
*HTML標(biāo)簽是由尖括號包圍的關(guān)鍵字
*HTML標(biāo)簽通常是成對出現(xiàn)的，比如：<div>和</div>，第一個標(biāo)簽是開始，第二個標(biāo)簽是結(jié)束。結(jié)束標(biāo)簽會有斜線。
*也有一部分標(biāo)簽是單獨呈現(xiàn)的，比如：<br/>、<hr/>、<img src="1.jpg" />等。
*標(biāo)簽里面可以有若干屬性，也可以不帶屬性。
****標(biāo)簽的語法
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”……>內(nèi)容部分</標(biāo)簽名>
<標(biāo)簽名 屬性1=“屬性值1” 屬性2=“屬性值2”…… />
幾個很重要的屬性：
id：定義標(biāo)簽的唯一ID，HTML文檔樹中唯一
class：為html元素定義一個或多個類名（classname）(CSS樣式類名)
style：規(guī)定元素的行內(nèi)樣式（CSS樣式
****HTML注釋
<!--注釋內(nèi)容-->
****<!DOCTYPE>標(biāo)簽****
<!DOCTYPE> 聲明必須是HTML文檔的第一行，位于<html>標(biāo)簽之前
<!DOCTYPE> 聲明不是HTML標(biāo)簽，他是指示web瀏覽器關(guān)于頁面使用哪個HTML版本進行編寫的指令
****HTML常用標(biāo)簽****
**head內(nèi)常用的標(biāo)簽**
1.<title></title> 定義網(wǎng)頁的標(biāo)題
2.<style></style> 定義內(nèi)部樣式表
3.<script><script>定義JS代碼或引入外部JS文件
4.<link/> 引入外部樣式文件
5.<meta/>定義網(wǎng)頁原信息
****Meta標(biāo)簽
Meta標(biāo)簽介紹：
<meta>元素可提供有關(guān)頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關(guān)鍵詞。
<meta>標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容。
<meta>提供的信息是用戶不可見的。
meta標(biāo)簽的組成：meta標(biāo)簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不
同的參數(shù)值，這些不同的參數(shù)值就實現(xiàn)了不同的網(wǎng)頁功能。
1.http-equiv屬性：相當(dāng)于http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示
網(wǎng)頁內(nèi)容，與之對應(yīng)的屬性值為content，content中的內(nèi)容其實就是各個參數(shù)的變量值。
<!--2秒后跳轉(zhuǎn)到對應(yīng)的網(wǎng)址，注意引號-->
<meta http-equiv="refresh" content="2;URL=https://www.baidu.com">
<!--指定文檔的編碼類型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告訴IE以最高級模式渲染文檔-->
<meta http-equiv="x-ua-compatible" content="IE=edge">
2.names屬性：主要用于描述網(wǎng)頁，與之對應(yīng)的屬性值為content，content中的內(nèi)容主要是便于搜索引擎
機器人查找信息和分類信息用的
<meta name="keywords" content="meta總結(jié),html meta,meta屬性,meta跳轉(zhuǎn)">
<meta name="description" content="Python">
******body內(nèi)常用表標(biāo)簽******
****基本標(biāo)簽（塊級標(biāo)簽和內(nèi)聯(lián)標(biāo)簽）****
<b>加粗</b>
<i>斜體</i>
<u>下劃線</u>
<a>刪除</a>
<p>段落標(biāo)簽</p>
<h1>標(biāo)題1</h1>
<h2>標(biāo)題2</h2>
<h3>標(biāo)題3</h3>
<h4>標(biāo)題4</h4>
<h5>標(biāo)題5</h5>
<h6>標(biāo)題6</h6>
<!--換行-->
<br>
<!--水平線-->
<hr>
****特殊字符****
空格------
>-------->
<--------<
&--------&
￥--------￥
版權(quán)(??)---?
注冊(??)---?
****div標(biāo)簽和span標(biāo)簽****
div標(biāo)簽用來定義一個塊級元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
span標(biāo)簽用來定義內(nèi)聯(lián)(行內(nèi))元素，并無實際的意義。主要通過CSS樣式為其賦予不同的表現(xiàn)。
塊級元素與行內(nèi)元素的區(qū)別：
所謂塊元素，是以另起一行開始渲染的元素，行內(nèi)元素則不需另起一行。如果單獨在網(wǎng)頁中插入這兩個元素，不會對頁面產(chǎn)生任何的影響。
這兩個元素是專門為定義CSS樣式而生的。
注意：
關(guān)于標(biāo)簽嵌套：通常塊級元素可以包含內(nèi)聯(lián)元素或某些塊級元素，但內(nèi)聯(lián)元素不能包含塊級元素，它只能包含其它內(nèi)聯(lián)元素。
p標(biāo)簽不能包含塊級標(biāo)簽，p標(biāo)簽也不能包含p標(biāo)簽。
****img標(biāo)簽****
<img src='圖片路徑' alt='圖片未加載成功時的提示' title='鼠標(biāo)懸浮時提示信息' width='寬' height='高（寬高只有一個會等比縮放）'>
****a標(biāo)簽****
超鏈接標(biāo)簽
所謂的超鏈接是指從一個網(wǎng)頁指向一個目標(biāo)的連接關(guān)系，這個目標(biāo)可以是另一個網(wǎng)頁，
也可以是相同網(wǎng)頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，
甚至是一個應(yīng)用程序。
什么是URL？
URL是統(tǒng)一資源定位器(Uniform Resource Locator)的縮寫，也被稱為網(wǎng)頁地址，是因特網(wǎng)上標(biāo)準(zhǔn)的資源的地址。
URL舉例
http://www.baidu.com/stu/index.html
http://111.13.100.91/stu/index.html
URL地址由4部分組成
第1部分：為協(xié)議：http://、ftp://等
第2部分：為站點地址：可以是域名或IP地址
第3部分：為頁面在站點中的目錄：stu
第4部分：為頁面名稱，例如 index.html
各部分之間用“/”符號隔開。
<a target='_blank'>點擊我</a>
href屬性指定目標(biāo)網(wǎng)頁地址。該地址可以有幾種類型：
1.絕對URL-指向另一個站點（不如 ）
2.相對URL-指向當(dāng)前站點中確切的路徑（href = 'index.html'）
3.錨URL-指向頁面中的錨（href = '#top'）
target:
1._blank表示在新標(biāo)簽頁中打開目標(biāo)頁面
2._self表示在當(dāng)前標(biāo)簽頁中打開目標(biāo)頁面
****列表*****
1.無序列表
<ul type="disc">
<li>第一項</li>
<li>第二項</li>
</ul>
type屬性：
1.disc（實心圓點，默認(rèn)值）
2.circle（空心圓圈）
3.square（實行方塊）
4.none（無樣式）
2.有序列表
<ol type="1" start="2">
<li>第一項</li>
<li>第二項</li>
</ol>
type屬性：
1.1數(shù)字列表，默認(rèn)值
2.A大寫字母
3.a小寫字母
4.I大寫羅馬
5.i小寫羅馬
3.標(biāo)題列表
<dl>
<dt>標(biāo)題1</dt>
<dt>內(nèi)容1</dt>
<dt>標(biāo)題2</dt>
<dt>內(nèi)容1</dt>
<dt>內(nèi)容2</dt>
</dl>
****表格****
表格是一個二維數(shù)據(jù)空間，一個表格由若干行組成，一行又有若干單元格組成，單元格里面可以
包括文字。列表。圖案。表單。數(shù)字符號。預(yù)置文本和其它的表格等內(nèi)容。
表格最重要的目的是顯示表格類數(shù)據(jù)。
表格類數(shù)據(jù)是值最適合組織為表格格式（即按行和列組織）的數(shù)據(jù)
表格基本結(jié)構(gòu)：
<table>
<thead>
<tr>
<td>序號</td>
<td>姓名</td>
<td>愛好</td>
</tr>
</theaf>
<tbody>
<tr>
<td>1</td>
<td>tom</td>
<td>吃老鼠</td>
</tr>
<tr>
<td>2</td>
<td>Jacl</td>
<td>吃奶酪</td>
</tr>
</tbody>
</table>
屬性：
1.border：表格邊框
2.cellpadding：內(nèi)邊距
3.cellspacing：外邊距
4.width：像素百分比（最好通過css來設(shè)置長度）
5.rowspan：單元格豎跨多少行
6.colspan：單元格橫跨多少列（即合并單元格）
****form（表單）****
功能；
表單用于向服務(wù)器傳輸數(shù)據(jù)，從而實現(xiàn)用戶與web服務(wù)器的交互
表單能夠包含input系列標(biāo)簽，比如文本字段、復(fù)選框、單選框、提交按鈕等等
表單還可以包含textarea、select、fieldest和lable標(biāo)簽
***表單屬性
1.accept-charset 規(guī)定在被提交表單中使用的字符集（默認(rèn)：頁面字符集）
2.action 規(guī)定在何處提交表單的地址（URL）（提交頁面）
3.autocomplete 規(guī)定瀏覽器應(yīng)該自動完成表單（默認(rèn)：開啟）
4.enctype 規(guī)定被提交數(shù)據(jù)的編碼（默認(rèn)：url-encoded）
5.method 規(guī)定在提交表單時所用的HTTP方法（默認(rèn)GET）
6.name 規(guī)定識別表單的名稱（對于DOM使用：document.forms.name）
7.novalidate規(guī)定瀏覽器不驗證表單
8.target規(guī)定action屬性中地址的目標(biāo)（默認(rèn)_self）
***表單元素
基本概念：
HTML表單是HTML元素中較為復(fù)雜的部分，表單往往和腳本、動態(tài)頁面、數(shù)據(jù)處理等功能相結(jié)合，因此它是制作動態(tài)網(wǎng)站很重要的內(nèi)容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網(wǎng)頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務(wù)器上。
服務(wù)器上專門的程序?qū)@些數(shù)據(jù)進行處理，如果有錯誤會返回錯誤信息，并要求糾正錯誤。
當(dāng)數(shù)據(jù)完整無誤后，服務(wù)器反饋一個輸入完成的信息。
******input******
<input>元素會根據(jù)不同的type屬性，變化為多種形態(tài)
type屬性值表現(xiàn)形式對應(yīng)代碼
text單行輸入文本<input type="text" />
password密碼輸入框<input type="password" />
date日期輸入框<input type="date" />
checkbox復(fù)選框<input type="checkbox" checked="checked" />
radio單選框<input type="radio" />
submit提交按鈕<input type="submit" value="提交" />
reset重置按鈕<input type="reset" value="重置" />
button普通按鈕<input type="button" value="普通按鈕" />
hidden隱藏輸入框<input type="hidden" />
file文本選擇框<input type="file" />
屬性說明：
1.name：表單提交時的“鍵”，注意和id的區(qū)別
2.value：表單提交時對應(yīng)項的值
type = “button”，“reset”，“submit”時，為按鈕上顯示的文本信息
type = “text”，“password”，“hidden“時，為輸入框的初始值
type = ”checkbox“，”radio“，”file“時，為輸相關(guān)聯(lián)的值
3.checked：radio和checkbox默認(rèn)被選中的項
4.readonly：text和password設(shè)置只讀
5.disabled：所有input均適用
******select標(biāo)簽******
<from action="" method="post">
<select name="city" id="city">
<option value="1">北京</option>
<option selected="selected" value="2">成都</option>
<option value="3">西安</option>
</select>
</form>
屬性說明：
1.multiple：布爾屬性，設(shè)置后為多選，否則默認(rèn)單選
2.disabled：禁用
3.selected：默認(rèn)選中該項
4.value：定義提交時的選項值
******lable標(biāo)簽******
定義：<lable>標(biāo)簽為input元素定義標(biāo)注（標(biāo)記）
說明：
1.label元素不會向用戶呈現(xiàn)任何特殊效果
2.<lable>標(biāo)簽的for屬性值應(yīng)當(dāng)與相關(guān)元素的id屬性值相同
<form>
<lable for="username">用戶名</lable>
<input type="text" id="username" name="username">
</form>
******textarea多行文本******
<textarea name="memo" id="memo" cols="30" rows="10">
默認(rèn)內(nèi)容
</textarea>
屬性說明：
1.name:名稱
2.rows:行數(shù)
3.cols:列數(shù)
4.disable:禁用
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
