版權(quán)聲明：本文為博主原創(chuàng)文章瘤泪，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議顽分，轉(zhuǎn)載請(qǐng)附上原文出處鏈接和本聲明确虱。
歡迎大家去我的個(gè)人技術(shù)博客看看觅彰，點(diǎn)贊收藏注冊(cè)的都是好人哦~
思考了很久決定還是從最基礎(chǔ)的html開(kāi)始吩蔑，千里之行始于足下。HTML很容易學(xué)習(xí)填抬！你會(huì)喜歡它的烛芬！(html標(biāo)簽/html基礎(chǔ))
一、網(wǎng)頁(yè)介紹
最開(kāi)始，我們需要知道赘娄，一個(gè)完整的網(wǎng)頁(yè)是怎么樣從大腦中仆潮，從圖紙上，慢慢到最后大家能通過(guò)鏈接點(diǎn)擊進(jìn)入網(wǎng)站的遣臼。
1性置、首先我們需要有一個(gè)域名，有了這個(gè)域名揍堰，我們做好了網(wǎng)站就可以租用服務(wù)器蚌讼，綁定這個(gè)域名從而讓用戶來(lái)訪問(wèn)。
類似于 https://www.xiaowu.xyz 或者 http://www.baidu.com
或者簡(jiǎn)寫(xiě)成只寫(xiě)域名xiaowu.xyz个榕，都是可以從瀏覽器的鏈接欄輸入去直接訪問(wèn)網(wǎng)站的篡石，這樣的一段英文和符號(hào)的組合，就是一個(gè)鏈接西采，而域名 只是中間的一段：xiaowu.xyz
最前面的http://或（https://）就是http協(xié)議,是基于TCP/IP協(xié)議的一套互聯(lián)網(wǎng)傳輸協(xié)議凰萨。
HTTP協(xié)議（HyperText Transfer Protocol，超文本傳輸協(xié)議）是因特網(wǎng)上應(yīng)用最為廣泛的一種網(wǎng)絡(luò)傳輸協(xié)議械馆，所有的WWW文件都必須遵守這個(gè)標(biāo)準(zhǔn)胖眷。
HTTP是一個(gè)基于TCP/IP通信協(xié)議來(lái)傳遞數(shù)據(jù)（HTML 文件, 圖片文件, 查詢結(jié)果等）。
好了霹崎，現(xiàn)在假設(shè)我們已經(jīng)擁有了一個(gè)域名珊搀，我們進(jìn)入下一步。
2尾菇、我們需要去租一個(gè)服務(wù)器境析，常見(jiàn)的服務(wù)器運(yùn)營(yíng)商有國(guó)內(nèi)有：阿里云，騰訊云派诬，七牛云劳淆，又拍云等。
國(guó)外有：cloudfire默赂，godaddy等沛鸵。
很多很多，這里不一一列舉缆八。
3曲掰、接著就是網(wǎng)站的建設(shè)了，需要收集資料奈辰，規(guī)劃網(wǎng)站栏妖，UI出設(shè)計(jì)圖，前端工程師寫(xiě)前臺(tái)頁(yè)面冯挎，也就是我們看到的那些花里胡哨的頁(yè)面底哥、非常炫酷的特效等等咙鞍。后臺(tái)工程師開(kāi)發(fā)后臺(tái)功能房官，建立數(shù)據(jù)庫(kù)趾徽，然后整合在一起，把做好的一整套網(wǎng)站傳到服務(wù)器上翰守，用戶就可以訪問(wèn)了孵奶。
4、網(wǎng)站的推廣蜡峰，網(wǎng)站做好了之后了袁，沒(méi)有用戶訪問(wèn)也是沒(méi)有太多作用了，這里就需要相應(yīng)的推廣人員去做網(wǎng)站的推廣湿颅，常見(jiàn)的形式有掛其他各大網(wǎng)站的廣告位载绿，做搜索引擎的優(yōu)化，SEO排名等等油航。
5崭庸、網(wǎng)站的維護(hù)，一個(gè)網(wǎng)站會(huì)出現(xiàn)的問(wèn)題會(huì)有很多谊囚，我們開(kāi)發(fā)完網(wǎng)站之后怕享，可能還要進(jìn)行版本的更新，增加新功能或者修改出現(xiàn)的bug镰踏，一個(gè)網(wǎng)站并不是傳到服務(wù)器就不用管了函筋，還需要默默的進(jìn)行維護(hù)，防止出現(xiàn)問(wèn)題奠伪。
差點(diǎn)給整跑題了跌帐，回歸正題，今天绊率，我們的任務(wù)是html的基礎(chǔ)含末。
那么。即舌。佣盒。
什么是HTML?
HTML 是用來(lái)描述網(wǎng)頁(yè)的一種語(yǔ)言。
HTML 指的是超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)
HTML 不是一種編程語(yǔ)言顽聂，而是一種標(biāo)記語(yǔ)言 (markup language)
標(biāo)記語(yǔ)言是一套標(biāo)記標(biāo)簽 (markup tag)
HTML 使用標(biāo)記標(biāo)簽來(lái)描述網(wǎng)頁(yè)
HTML 標(biāo)簽
HTML 標(biāo)記標(biāo)簽通常被稱為 HTML 標(biāo)簽 (HTML tag)肥惭。
HTML 標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，
<p></p>
HTML 標(biāo)簽通常是成對(duì)出現(xiàn)的
<p>這是一段文本</p>?
<h2>我是一個(gè)標(biāo)題</h2>
標(biāo)簽對(duì)中的第一個(gè)標(biāo)簽是開(kāi)始標(biāo)簽紊搪，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
開(kāi)始和結(jié)束標(biāo)簽也被稱為開(kāi)放標(biāo)簽和閉合標(biāo)簽
我們可以這樣理解：
HTML 文檔 = 網(wǎng)頁(yè)
HTML 文檔描述網(wǎng)頁(yè)
HTML 文檔包含 HTML 標(biāo)簽和純文本
HTML 文檔也被稱為網(wǎng)頁(yè)
Web 瀏覽器的作用是讀取 HTML 文檔蜜葱，并以網(wǎng)頁(yè)的形式顯示出它們。瀏覽器不會(huì)顯示 HTML 標(biāo)簽耀石，而是使用標(biāo)簽來(lái)解釋頁(yè)面的內(nèi)容：
(下面是一段html代碼)
<!DOCTYPE html>
<html lang="en">
<head>
? ? <meta charset="UTF-8">
? ? <title>小五技術(shù)blog</title>
</head>
????<body>
? ? ? ? ? ?<h1>我是一個(gè)標(biāo)題</h1>?
? ??????? ?<p>這是一段文本</p>?
????</body>
</html>
例子解釋
<html> 與 </html> 之間的文本描述網(wǎng)頁(yè)
<body> 與 </body> 之間的文本是可見(jiàn)的頁(yè)面內(nèi)容
<h1> 與 </h1> 之間的文本被顯示為標(biāo)題
<p> 與 </p> 之間的文本被顯示為段落
二牵囤、html發(fā)展歷史
XHTML指可擴(kuò)展超文本標(biāo)記語(yǔ)言（標(biāo)識(shí)語(yǔ)言）（EXtensible HyperText Markup Language）是一種置
標(biāo)語(yǔ)言，表現(xiàn)方式與超文本標(biāo)記語(yǔ)言（HTML）類似，不過(guò)語(yǔ)法上更加嚴(yán)格揭鳞。
HTML5指的是HTML的第五次重大修改（第5個(gè)版本）(HTML5 是 W3C 與 WHATWG 合作的結(jié)果)
組織解析：
（1）W3C（World Wide Web Consortium）?萬(wàn)維網(wǎng)聯(lián)盟炕贵，創(chuàng)建于1994年是Web技術(shù)領(lǐng)域最具權(quán)威和
影響力的國(guó)際中立性技術(shù)標(biāo)準(zhǔn)機(jī)構(gòu)。
W3C (制定了結(jié)構(gòu)(xhtml野崇、xml)和表現(xiàn)(css)的標(biāo)準(zhǔn)称开，非贏利性的。)
（2）ECMA（European Computer Manufactures Association）歐洲電腦廠商聯(lián)合會(huì)
ECMA制定了行為(DOM(文檔對(duì)象模型)乓梨，ECMAScript鳖轰、bom)標(biāo)準(zhǔn)
（3）WHATWG網(wǎng)頁(yè)超文本應(yīng)用技術(shù)工作小組是：
一個(gè)以推動(dòng)網(wǎng)絡(luò)HTML 5 標(biāo)準(zhǔn)為目的而成立的組織。在2004年扶镀，由Opera蕴侣、Mozilla基金會(huì)和
蘋(píng)果這些瀏覽器廠商組成。
三臭觉、html的基本語(yǔ)法
1昆雀、<常規(guī)標(biāo)記>
<標(biāo)記 屬性=“屬性值” 屬性=“屬性值”>?雙標(biāo)記
2、空標(biāo)記胧谈、單標(biāo)記
<標(biāo)記 屬性=“屬性值” />
說(shuō)明：
1.寫(xiě)在<>中的第一個(gè)單詞叫做標(biāo)記忆肾，標(biāo)簽，元素菱肖。
2.標(biāo)記和屬性用空格隔開(kāi)客冈，屬性和屬性值用等號(hào)連接，屬性值必須放在“”號(hào)內(nèi)稳强。
3.一個(gè)標(biāo)記可以沒(méi)有屬性也可以有多個(gè)屬性场仲，屬性和屬性之間不分先后順序。
4.空標(biāo)記沒(méi)有結(jié)束標(biāo)簽退疫，用“/”代替渠缕。
四、HTML常用的標(biāo)記
1褒繁、文本標(biāo)題（h1-h6）
<h1>最重要的標(biāo)題H1</h1>
<h2>次要欄目或標(biāo)題-小標(biāo)題H2</h2>
<h3>再次要欄目或分類小標(biāo)題H3</h3>
<h4>文中分類小標(biāo)題H4</h4><h5>五級(jí)標(biāo)題</h5>
<h6>六級(jí)標(biāo)題</h6>
2亦鳞、段落文本(p)
<p>段落文本內(nèi)容</p>
3、空格??
4棒坏、換行??
<br /> 強(qiáng)制換行
5燕差、加粗
<b>加粗內(nèi)容</b>
<strong>加粗內(nèi)容</strong>
6、文字傾斜
<em></em>
<i></i>
7坝冕、水平線
<hr />
8徒探、插入圖片
<img src="目標(biāo)文件路徑及全稱" alt="圖片替換文本" title="圖片標(biāo)題" />
注:所要插入的圖片必須放在站點(diǎn)下
① title的作用: 在你鼠標(biāo)懸停在該圖片上時(shí)顯示一個(gè)小提示，鼠標(biāo)離開(kāi)就沒(méi)有了喂窟，HTML的絕大多數(shù)標(biāo)
簽都支持title屬性测暗，title屬性就是專門(mén)做提示信息的央串。
② alt的作用:alt屬性是在你的圖片因?yàn)槟撤N原因不能加載時(shí)在頁(yè)面顯示的提示信息，它會(huì)直接輸出在
原本加載圖片的地方碗啄。
9质和、div和span的用法
div ：沒(méi)有具體含義，統(tǒng)稱為塊標(biāo)簽挫掏，
用來(lái)設(shè)置文檔區(qū)域侦另，是文檔布局常用對(duì)象
span：文本結(jié)點(diǎn)標(biāo)簽
可以是某一小段文本秩命，或是某一個(gè)字尉共。
10、數(shù)據(jù)表格的作用及組成 作用：顯示數(shù)據(jù)
表格組成
<table width="value" height="value" border="value" bgcolor="value" cellspacing="value" cellpadding="value">
????<tr>
????????<td></td>
????????<td></td>
????</tr>
</table>
注意：一個(gè)tr表示一行弃锐，一個(gè)td表示一列（一個(gè)單元格）
*數(shù)據(jù)表格的相關(guān)屬性
1）width="表格的寬度"
2）height="表格的高度"
3）border="表格的邊框"
4）bgcolor="表格的背景色" bg=background
5）bordercolor="表格的邊框顏色"
6）cellspacing="單元格與單元格之間的間距"
7）cellpadding="單元格與內(nèi)容之間的空隙" 這倆必須給table,其他隨便給
8）對(duì)齊方式：align="left/center/right";
9)合并單元格屬性：
colspan=“所要合并的單元格的列數(shù)"合并列;
rowspan=“所要合并單元格的行數(shù)”合并行;
合并之后需要把多余的單元格刪除
11袄友、超鏈接的應(yīng)用
語(yǔ)法：
<a href="目標(biāo)文件路徑及全稱/連接地址" title="提示文本">鏈接文本/圖片</a>
<a href="#"></a>空鏈接
屬性：target:頁(yè)面打開(kāi)方式，默認(rèn)屬性值_self霹菊。屬性值：_blank 新窗口打開(kāi)
<a href="#" target="_blank">新頁(yè)面打開(kāi)</a>
12剧蚣、列表(ul,ol,dl)
*無(wú)序列表
<ul>? ? (unordered list)
????<li></li>? ?(list item)
????<li></li>
</ul>
*有序列表
<ol >(ordered list)
????<li></li>
????<li></li>
</ol>
*自定義列表
<dl>? ?(definition list)
????<dt>名詞</dt>? ?(definition term)
????<dd>解釋</dd>? ?(definition description）
</dl>
13、表單的作用及組成 表單的作用：用來(lái)收集用戶數(shù)據(jù)（常見(jiàn)的地方為登錄旋廷，注冊(cè)鸠按，用戶信息收集）
1）、表單框
<form name="表單名稱" method="post/get" action="表單驗(yàn)證成功后跳轉(zhuǎn)的地址"></form>
2）饶碘、文本框
<input type="text" value="默認(rèn)值" name=”名稱”/>
3）目尖、密碼框
<input type="password" placeholder="密碼" />
4）、提交按鈕
<input type="submit" value="按鈕內(nèi)容" />或者<button></button>
5）扎运、重置按鈕
<input type="reset" value="按鈕內(nèi)容" />
擴(kuò)展知識(shí)點(diǎn)：Html廢棄的標(biāo)簽都有哪些瑟曲？
1. u : 可以加下劃線
2. del strike s : 刪除線
3. basefont：規(guī)定頁(yè)面上的默認(rèn)字體顏色和字號(hào) 只有IE低版本瀏覽器
4. big?標(biāo)簽呈現(xiàn)大號(hào)字體效果。
5. center 居中效果
6. font 字體標(biāo)簽
7. tt 呈現(xiàn)類似打字機(jī)或者等寬的文本效果豪治。
