Html是一種腳本語言，單單就html來說都是由一個個的標籤構成的，標籤又具有不同的屬性，他並不是一個嚴謹的語言。
你可以把他理解爲一個樹形結構，標籤就是一個一個的節點，但是他最後的子節點一定會是字符串
html的固定格式如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<body>
</body>
</html>所有的標籤都包含在html標籤中，head標籤裏只添加聲明性的東西，body部分纔是真正的正文部分，<meta
charset="utf-8">這是編碼類型說明
html的常用標籤：
1.<h1>文本</h1>標題標籤，共6種h1到h6
2.文本標籤有<p></p>段落標籤<span></span>文本塊<a href=""></a>超鏈接標籤<a></a>，有兩個特點：1，超鏈接是不會提交表單的。2.超鏈接永遠是get方式發送請求
3.ul與ol分別是有序的與無序的列表
代碼如下：
<pre name="code" class="html"><ol>
<li>1</li>
<li>2</li>
<li>3</li>
</ol>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>效果分別如下：
ol：1. 1 ul：. 1
1. 2 . 2
1. 3 . 3
4.表格標籤<tr></tr>表示行<th></th>跟<td></td>都是表示列，區別是th固定好格式加粗居中適合寫標題，如果有需要將td替換爲th即可
案例代碼如下：
<span style="font-size: 12pt;"><pre name="code" class="html"><!doctype html></span><html>
<head>
<meta charset="utf-8">
<title>homework1</title>
</head>
<table border="1px" bordercolor="#2E24AB" width="500px" align="center">
<caption>This is a Table</caption>
<tr>
<td rowspan="2">1</td>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td><td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td><td colspan="2">3</td><td rowspan="2">4</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td><td>3</td><td>4</td>
</tr>
<tr>
<td colspan="2">2</td><td>3</td><td>4</td>
</tr>
</table>
<body>
</body>
</html>效果如圖：
5.其他標籤:form以及input<pre name="code" class="html"><form action="http://www.baidu.com" method="get/post">
用戶名:<input type="text" name="user" id="user"><br>
密 碼:<input type="password" name="password"><br>
性 別:<input type="radio" name="sex" value="1" checked/>男
<input type="radio" name="sex" value="0"/>女<br>
愛 好：<input type="checkbox" name="hobby" value="h1">看書
<input type="checkbox" name="hobby" value="h2">籃球
<input type="checkbox" name="hobby" value="h3">lol
<input type="checkbox" name="hobby" value="h4">java<br>
<textarea rows="5" cols="5" style="width:300px"></textarea><br>
<input type="button" value="提交">
<input type="submit" value="百度">
<input type="reset" value="重置">
</form>
這裏的button不給他添加事件的話他就只是一個按鈕點了並沒有什麼用，submit的樣式是按鈕，但是他的作用卻是提交，點擊就會觸發form表單的action跳轉到百度，reset字面意思，重置。
這裏說一下get提交方式與post提交方式的不同：
1.關於傳輸方式：get標籤是以字符流的方式進行傳輸，而且是不可更改的，post方式則可更改，字符字節通用。
2.關於網頁地址欄：get方式提交表單，表單內容會在地址欄顯示，post不會
3.關於地址欄長度：地址欄長度默認512字節長度，get方式提交有可能表單內容多餘512可能造成精度的損失，post理論上則是無限的，不存在長度限制
4.關於http數據包：get提交方式會在數據包的第一行將表單內容顯示，post則會在正文body中顯示。
6.其他常用標籤很重要的一個東西就是div，我管它叫“盒子”，作用就是將數據包括文本圖片等封裝到一個盒子裏，然後對盒子進行選址修飾，所以他一般可能更多與css結合使用，更多標籤盡在w3scool。
爲什麼要引入css？爲了解決html的缺點：
div與css通過一個案例來看，只說核心
先看效果是這樣的，並沒有插入圖片：
代碼如下：html部分
<span style="font-family: Arial, Helvetica, sans-serif;"><!doctype html></span><html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="homework2.css">
<title>homework2</title>
</head>
<body bgcolor="#6E6E6E">
<div class="div">
<div class="div1"><div style="height:16px; position:relative;top:5px;left:5px;">用戶登錄</div>
</div>
<div class="div2">用戶名：<input type="text" ></div>
<div class="div2">密 碼：<input type="password" ></div>
<div class="div2">用戶類型：<select>
<option >管理員</option>
<option >教師</option>
<option >學生</option>
</select></div>
<div align="center" class="div3"><input type="button" value="登錄" class="button"></div>
</div>
</body>
</html>
<span style="font-family:KaiTi_GB2312;font-size:14px;background-color: rgb(255, 255, 255);"></span><pre name="code" class="css">.div{
width:400px;
height:300px;
border-radius:10px;
background-color:#444444;
margin-top:200px;
margin-left:450px;
}
.div1{
width:400px;
height:33px;
background-color:#3A3A3A;
border-top-right-radius:10px;
border-top-left-radius:10px;
font-weight:bold;
font-size:16px;
color:#787878;
}
.div2{
width:300px;
height:30px;
margin-top:20px;
margin-left:70px;
}
.div3{
width:300px;
height:30px;
margin-top:40px;
margin-left:50px;
}
.button{
border-color:#1377EF;
border-radius:5px;
background-color:#444444;
width:100px;
height:30px;
font-weight:bold;
font-size:18px;}
select{
size:70px;}到底是怎麼實現的？核心css中所看到的以.開頭的都叫class選擇器，前邊沒有點的是標籤選擇器，大括號中所看到的全是屬性，與標籤中的屬性意義相同，選擇器分多種，但是作用相同。
總結：
在頁面中可以編寫css代碼的位置：
1.在標籤中的style屬性中
2.可以寫在head標籤中的style標籤中
3.可以寫在外部的而一個css文件中。
然後通過引入的方式：（1）<link type="text/css" href="path/.css">
指令標籤：@import url(path/.css)
css的屬性語法：
基本語法：屬性：值;
color:設置字體顏色
font-size:字號
background:設置背景色
font-weight:字體寬度
font-family: 字體
font-style:字型(標準，傾斜的。。)
margin-top:
margin-lefg:
margin:層距離瀏覽器內邊框的位置
padding:內容距離border的位置
border:邊框
position:absolute（距離瀏覽器上左的絕對位置）|relative(距離相鄰的層的相對位置)
background-image:設置背景圖片
background-repeat:背景是否允許重疊....
關於css選擇器：1.標籤選擇器：標籤名{樣式內容} 適用於html文件中所有的該標籤
2.組合選擇器：標籤名1,標籤名2{樣式內容} 當2個標籤中的樣式內容完全相同時我爲了避免代碼冗餘可以將兩個標籤組合起來。
3.class選擇器：*.選擇器名{樣式內容}*表示通配符與.選擇器名{}相同，標籤名.選擇器名 {} 只作用於該標籤，需要class屬性的支持
4.id選擇器：#選擇器名{} 與類選擇器的不同就是id在html中一般都是具有唯一性的，id選擇器一般是對某一個內容進行修改
5.標籤屬性選擇器：標籤[任何一個屬性]{樣式內容}，只要是具有該屬性的該標籤都會通過樣式內容進行修飾
6.結構選擇器：父節點標籤 子節點 [孫節點]{樣式}利用html解析完成後的樹形結構進行樣式更改