一、什麼是html
- html是用來描述網頁的超文本標記語言，不是編程語言（c、c++等）
- html使用標記標籤來描述網頁
- html標籤是由尖括號和關鍵字組成，一般有開始標籤和結束標籤構成，中間就是在網頁上顯示的內容。
<div>這是一個div標籤</div>
二、html文檔
html文檔是由html標籤和文本組成的。我們寫好的html文件，在瀏覽器打開之後，內容會在瀏覽器上顯示，但是標籤不會顯示。因爲瀏覽器的作用是讀取 HTML 文檔，並以網頁的形式顯示出它們。瀏覽器會對html文檔進行解析。
HTML基本結構
第一行的<!DOCTYPE html> 是一個聲明告訴瀏覽器以html5文檔標準來解析此文檔，並且會向下兼容。
1）head部分是關於文檔的描述信息。charset="UTF-8" 這個是國際通用的編碼格式，gb2312是中國的。很多時候網頁出現亂碼就是因爲編碼格式不正確。除此之外，在head部分也可以在“style”標籤內部寫樣式。
2）body是網頁的主體部分，網頁的佈局以及將要顯示在網頁的內容都寫在這裏
3）script部分，寫相關的javascript語句，對dom進行操作實現動態效果。另外你也可以引入js庫，比如jquery等，這可以極大提高我們的工作和學習效率
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>第一個網頁</title>
</head>
<body>
<p>this is a paragraph</p>
</body>
</html>
<script></script>三、html編輯器
寫一個html文檔有電腦上有記事本就可以了，把文檔的後綴名改成’.html’就好了。但是這樣做的效率會很低，這裏推薦幾款實用的編輯器
sublime text3
notepad++
webstorm
四、html元素
1. 寫一個hello,world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第一個html</title>
</head>
<body>
<p>Hello,world</p>
</body>
</html>2. 常用標籤
html標籤分爲行內元素和塊級元素。
塊級元素：瀏覽器顯示時，通常會以新行來開始（和結束）。簡單說獨佔一行。（div、p、form、ul、address、table、h1….）
行內元素： 在顯示時通常不會以新行開始（一行可以寫多個）。（span、a、b、strong、small…）
3. 通過一個例子來認識標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>第一個html</title>
</head>
<body>
<h1>這是一個div</h1>
<div style="width:500px;height:600px;border:1px solid gray">
<h3>(1)格式化和引用標籤</h3>
<p><b>孔子</b>說:"<i>見賢思齊焉，見不賢而內自省也。</i>"</p>
<hr>
<p><strong>李白</strong>說:"舉頭望明月，低頭思故鄉。"</p>
<hr>
<p><big>薛之謙</big><small>說:</small>"<blockquote> 該配合你演出的我演視而不見，在逼一個最愛你的而你即興表演</blockquote>"</p>
<hr>
住址：<address>廣東省深圳市南山區XX鎮XX街道XXX號</address>
鏈接：衆裏尋她千<a href="http://www.baidu.com" >百度</a>，驀然回首那人卻在燈火闌珊處。
<h3>(2)刪除效果和下劃線效果</h3>
<p>都說十五的月亮，<del>石榴</del>十六圓</p>
<h3>(3)上標和下標</h3>
<p>
2<sup>3</sup>=8
<span>A<sub>1</sub>=x</span></p>
</div>
</body>
</html>效果圖(沒寫什麼樣式，有點醜哈，湊合看看)：
h1、h2、h3、h4、h5爲標題，他們的字體大小依次向下變小。
p 爲段落，裏面可以嵌套span標籤
b、strong都可以達到加重字體的效果，small爲小字體相反big爲大字體，i爲斜字體。
a爲一個超鏈接，上圖點擊則會跳到百度頁面。
sup爲上標，sub爲下標。del刪除效果，ins下劃線效果。
blockquote爲長引用（會插入行和外邊距）
五、幾種樣式的寫法
我們在瀏覽網頁是會看到很多絢麗多彩的網頁，這些很多要歸功於樣式。樣式即style,通俗地說就是給html穿上衣服，讓他們看起更漂亮、美觀一點。下面介紹幾種樣式的寫法：
- 內聯樣式：寫在標籤的內部，樣式寫在style屬性裏。
<div style="width:100px;height:100px;background:purple">Hello,World</div>
- 外部樣式：外部保存樣式文件，通過link標籤來引入頁面使用。
id是一個唯一的標識，通過box，可以找到頁面中的這個div，併爲它添加樣式。
#box{
width:100px;
height: 100px;
background:purple;
font-size: 30px;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box">這是一個盒子</div>
</body>
</html>- 內嵌樣式：寫在head內部，對當前文檔的修飾。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{
width:100px;
height: 100px;
background:purple;
font-size: 30px;
}
</style>
<body>
<div id="box">這是一個盒子</div>
</body>
</html>六、HTML表格
表格元素：tr是行元素，td是表頭，th是表格元素，caption是表明。
表格屬性：cellpadding是單元格和邊框的距離，cellspacing 是單元格之間的距離，colspan跨多列的單元格，rowspan跨多行的單元格，bgcolor設置背景顏色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table</title>
<body>
<table border="1px solid gray" cellpadding="10" cellspacing="3" >
<caption><h2>學生信息表</h2></caption>
<tr >
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>愛好</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td >安東尼</td>
<td>20</td>
<td>男</td>
<td>籃球</td>
<td>18720988802</td>
</tr>
<tr>
<td>杜蘭特</td>
<td>18</td>
<td>男</td>
<td>網遊</td>
<td>13269901273</td>
</tr>
<tr>
<td>露絲卡</td>
<td>21</td>
<td>女</td>
<td>蹦極</td>
<td>0712-3301018</td>
</tr>
</table>
</html>
七、HTML列表
1. 有序列表
默認是從數字1開始的，ol的start屬性設置開始的數字，type屬性設置有序列表的類型，A爲大寫字母，a爲小寫字母，I爲羅馬字母列表，i爲小寫羅馬字母。
<ol start='10'>
<li>詹姆斯</li>
<li>杜蘭特</li>
<li>庫裏</li>
</ol>
2. 無序列表
type屬性設置無序列表的項目符號類型，默認是disc，circ是空心圓，square正方形
<ul type="circle">
<li>詹姆斯</li>
<li>杜蘭特</li>
<li>庫裏</li>
</ul>
3. 定義列表
定義列表不僅僅是一列項目，而是項目及其註釋的組合。自定義列表以 dl 標籤開始。每個自定義列表項以 dt開始。每個自定義列表項的定義以 dd 開始。
<dl>
<dt>前端知識</dt>
<dd>html,css</dd>
<dd>bootstrap,jquery</dd>
<dt>水果</dt>
<dd>菠蘿</dd>
<dd>榴蓮</dd>
<dt>書籍</dt>
<dd>偷影子的人</dd>
<dd>匆匆那年</dd>
</dl>
八、HTML表單
1. html表單元素
1）input元素
根據type類型的不同，有不同的形態。這裏是文本類型，placeholder是對輸入框內容的一個提示
<input type="text" name="username" placeholer="請輸入你的用戶名">
2）select元素
option是待選擇的項，value值是實際傳給後臺的值
<select name="city">
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="guangzhou">廣州</option>
<option value="shenzhen">深圳</option>
</select>3）textarea元素
文本域可以輸入多行，rows和cols定義所佔的行列數。
<textarea name="message" rows="10" cols="30">
這是一個叫做message的文本域
</textarea>
</body>4）button元素
html事件很多時候是通過按鈕來觸發的，onclick是說當點擊按鈕的時候會觸發謀個函數，這個函數是寫在script裏面的
<button name='btn1' onclick="sayHello()">問候</button>2. 輸入類型和屬性
1）action是提交給後臺的地址，label一般和文本框搭配使用，告訴我們文本框填的是什麼，for屬性對應文本框的id,當點擊label文字是，光標會自動跳到輸入域。
2)type=’password’，輸入的密碼將會看不見，以黑色實心點替代，maxlength是可輸入的最大長度。
3)type=’radio’,單選框，必須把它們的name設爲一樣的，這樣才能把它們當作一組。否則的話，兩個都可以被選中。
4)type=’checkbox’複選框，可以同時選中多個
<form action="XXX">
<p> <label for="username">用戶名:</label>
<input type="text" id="username" ></p>
<p><label for="pws">密 碼: </label>
<input type="password" id="pwd" maxlength="6"></p>
<p><input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="woman">女 </p>
<p><input type="checkbox" name='interests' value='basketball'>籃球
<input type="checkbox" name='interests' value='swimming'>游泳
<input type="checkbox" name='interests' value='climbing'>攀登</p>
<input type="submit" value="提交">
</form>
