HTML全名超文本標(biāo)記語言（Hyper Text Markup Language），可以拿來制作網(wǎng)站。它有一套語法規(guī)則，通過這種語法規(guī)則，就可以設(shè)計出豐富多彩的網(wǎng)頁了。
首先，HTML標(biāo)簽定義格式為：
<標(biāo)簽名>標(biāo)簽內(nèi)容標(biāo)簽名>
以開頭，以結(jié)尾。
還有億點要表明，HTML代碼最常使用兩個空格進(jìn)行縮進(jìn)，當(dāng)然，也可以為4格，3格，甚至可以不用縮進(jìn)。但我建議縮進(jìn)代碼，因為這促使網(wǎng)站后期開發(fā)時的更改。
開始那天的學(xué)習(xí)吧！
HTML學(xué)習(xí)目錄
html 標(biāo)簽
用于標(biāo)志網(wǎng)站代碼的起初位置與結(jié)束位置，如：
<html>
網(wǎng)頁代碼
html>
注：第一行的代碼用于標(biāo)示這個文件使用的HTML規(guī)范。
head 標(biāo)簽
用于定義網(wǎng)頁的頭部信息，格式：
<html> <head>頭部信息head> html>
這個標(biāo)簽嵌套在html標(biāo)簽里。
meta 標(biāo)簽
用于表述HTML文檔的屬性，例如作者，創(chuàng)建日期等。經(jīng)常用于聲明HTML文檔在內(nèi)部腳本文件中使用的字節(jié)編碼。 如果內(nèi)部文件中的字符編碼與主文件中的編碼方法不同，就要用到 charset 屬性。
<html> <head> <meta charset="UTF-8">
其它標(biāo)簽
head> html>
注：要嵌套在head標(biāo)簽內(nèi)。
title 標(biāo)簽
用于顯示網(wǎng)站的標(biāo)題，格式如下：
<html> <head> <title>測試標(biāo)題title>
其它標(biāo)簽
head> html>
注：也要嵌套在head標(biāo)簽里。
body 標(biāo)簽
定義網(wǎng)頁的主體，一般HTML代碼都在這上面編寫有源標(biāo)簽，位置在head標(biāo)簽的前面：
<html> <head>
頭部標(biāo)簽
head> <body>
HTML網(wǎng)頁主體
body> html>
h1-h6 標(biāo)簽
這些標(biāo)簽通常在body標(biāo)簽里，可以將嵌套的文字的大小進(jìn)行改變，h1最大，h6最?。?/p>
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <h1>我是h1h1> <h2>我是h2h2> <h3>我是h3h3> <h4>我是h4h4> <h5>我是h5h5> <h6>我是h6h6> body> html>
用瀏覽器打開此網(wǎng)站，看到的需要是一段從大至小的文字。
i 標(biāo)簽 創(chuàng)建斜體文字
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <i>斜體測試i> body> html>
i標(biāo)簽主要將標(biāo)簽內(nèi)的文字成為斜體。
b 標(biāo)簽 創(chuàng)建粗體文字
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <b>斜體測試b> body> html>
b標(biāo)簽主要將標(biāo)簽內(nèi)的文字成為粗體。
p 標(biāo)簽 創(chuàng)建段落
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <p>我正在開發(fā)網(wǎng)頁。我很開心。p> <p>我正在開發(fā)網(wǎng)頁。我很開心。p> body> html>
p標(biāo)簽將會把標(biāo)簽內(nèi)的文字起新的一段來展示。
ul 標(biāo)簽 創(chuàng)建無序列表
用于展示一個無序列表，格式為：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <ul> <li>第一項li> <li>第二項li> <li>第三項li> ul> body> html>
里面要嵌套li標(biāo)簽，每個li標(biāo)簽就是列表的其中一項。
ol 標(biāo)簽 創(chuàng)建有序列表
用于展示一個有序列表，格式為：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <ol> <li>第一項li> <li>第二項li> <li>第三項li> ol> body> html>
里面也要嵌套li標(biāo)簽，每個li標(biāo)簽就是列表的其中一項。
table 標(biāo)簽 創(chuàng)建表格
table標(biāo)簽用于創(chuàng)建表格，如：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <table> <tr> <td>測試1td> <td>測試2td> tr> <tr> <td>測試1td> <td>測試2td> tr> table> body> html>
這個標(biāo)簽內(nèi)必須嵌套tr標(biāo)簽，tr標(biāo)簽為表格的一行，內(nèi)部的td標(biāo)簽定義這一行每個列顯示的內(nèi)容。
a 標(biāo)簽 鏈接網(wǎng)址
此標(biāo)簽用于鏈接至某個網(wǎng)址：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <a href="https://blog.csdn.net/">CSDN博客網(wǎng)站a> body> html>
a標(biāo)簽的屬性href定義跳轉(zhuǎn)到的網(wǎng)址，文字內(nèi)容定義這個標(biāo)簽在哪樣的文字上創(chuàng)建鏈接。
div 標(biāo)簽 劃分板塊
用于將頁面分成獨立的版塊，為頁面分區(qū)或節(jié)：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <div> <ul> <li>第一項li> <li>第二項li> <li>第三項li> ul> div> <div> <ol> <li>第一項li> <li>第二項li> <li>第三項li> ol> div> body> html>
span 標(biāo)簽
HTML的行內(nèi)標(biāo)簽，方便了幫行內(nèi)元素設(shè)定單獨的風(fēng)格。
```html
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <span>文字內(nèi)容span> body> html>
br 標(biāo)簽 換行符
這個標(biāo)簽沒有結(jié)尾，和換行符作用一樣，可以插入文本內(nèi)：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <p>第一段文字<br>第二段文字p> body> html>
script 標(biāo)簽 加載或編寫js代碼
這個標(biāo)簽用于在網(wǎng)站中編寫或讀取javascript文件代碼：
加載：（一般在head內(nèi)加載，body也行）
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> <script src="js腳本文件.js">script> head> <body> <p>測試網(wǎng)頁p> body> html>
編寫：（一般在主體body內(nèi)編寫）
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <script type="text/javascript"> var a = 1; var b = 2; alert(a + b); script> body> html>
如上，我們在script標(biāo)簽內(nèi)寫了億些簡單的js代碼，這些代碼在瀏覽器瀏覽時時將會運行。
img 標(biāo)簽 加載圖片
img標(biāo)簽主要用來加載圖片，上代碼：
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> head> <body> <img src="test.png" /> body> html>
屬性src指定圖片模式，這里為test.png，當(dāng)然，網(wǎng)絡(luò)截圖只是可以加載顯示的。
（注：img標(biāo)簽沒有結(jié)束標(biāo)簽，只是在">“前寫一個”/"即可）
style 樣式設(shè)置
CSS又叫做層疊樣式表(英文名稱：Cascading Style Sheets)，主要用來設(shè)定HTML網(wǎng)頁的樣式。
CSS提供來選取器來指定HTML標(biāo)簽設(shè)定相應(yīng)的風(fēng)格，常用的選擇器是類選擇器和ID選擇器。
類選擇器
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> <style type="text/css"> .test1{ width:300px; height:50px; background:red; } .test2{ width:100px; height:50px; background:green; } style> head> <body> <div class="test1">style測試1div> <div class="test2">style測試2div> body> html>
首先，我們定義了style標(biāo)簽，在外部寫上了兩個類選擇器，一個叫test1，另一個叫test2，在每個選擇器里邊，我們定義了width，height，background屬性（什么含義可以自己上網(wǎng)查一下），然后在body內(nèi)定義了兩個div標(biāo)簽，都有屬性class（類），這里面我們寫上了類選擇器名稱，就可以讀取顯示對應(yīng)的樣式了。
ID選擇器
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> <style type="text/css"> #test1{ width:300px; height:50px; background:red; } #test2{ width:100px; height:50px; background:green; } style> head> <body> <div id="test1">style測試1div> <div id="test2">style測試2div> body> html>
首先，我們定義了style標(biāo)簽，在內(nèi)部寫上了兩個ID選擇器，一個叫test1，另一個叫test2，在每個選擇器里邊，我們定義了width，height，background屬性有源標(biāo)簽，然后在body內(nèi)定義了兩個div標(biāo)簽，都有屬性id，這里面我們寫上了ID選擇器名稱，就可以讀取顯示對應(yīng)的顏色了（其實就是把div的class換成id，style標(biāo)簽里的“.”換成“#”而已）。
link 標(biāo)簽 鏈接資源
<html> <head> <meta charset="UTF-8"> <title>測試標(biāo)題title> <link rel="stylesheet" href="test.css" /> head> <body> <p>測試段落p> body> html>
link標(biāo)簽用于定義HTML文檔與內(nèi)部資源的關(guān)系，經(jīng)常用于鏈接CSS樣式表文件，外部資源等。link標(biāo)簽后面的代碼加載了test.css文件，也就是CSS文件。
（注：link標(biāo)簽沒有結(jié)束標(biāo)簽，只是在">“前寫一個”/"即可）
課程就到此處，有些不懂的地方可以發(fā)在評論區(qū)，大家一起來討論呀！
