初識HTML
HTML框架，CSS裝修，JS動態的交互
編輯器：sublime
HTML :超文本標記語言
1.標籤
（1）、根標籤 <html> </html>
（2）、結構化標籤 <head> 瀏覽器看的 </head> <body> 展示在瀏覽器上</body>
HTML示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- 萬國碼 --> <title>HTML的初步學習</title> <!-- 標題 --> <meta content="學習" name="keywords"> <!-- 關鍵字 --> <meta content="HTML 的初步學習" name="description"> <!-- 描述信息 --> </head> <body> Hello world! </body> </html>
（3）、單標籤
img，input，meta，link，br，hr
（4）、雙標籤
div，span，h1~h6，p，script，style a form
a標籤的作用： 超鏈接，利用id來定位錨點 ，打電話（href="tel:1861******2"）
form表單發送信息
數據名=數據值
<form method="get" action="">
<p>
用戶名：<input type="text" name="username">
</p>
<p>
密 碼:<input type="password" name="password">
</p>
<input type="submit" name="">
</form>
（5）、成組標籤
ol li 有序列表 例子：
type reversed start屬性
<ol type="i" reversed="reversed"> <!-- 一共五種 計數方式 A a 1 i I reversed 倒序-->
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
</ol>
ul li 無序列表 例子：
可以用於導航欄的製作
<ul type="circle"> <!-- 並列的父子結構 -->
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
1.1標籤的嵌套
重要標籤
<div> </div>
<span></span>
（1）.充當容器，功能塊
（2）.捆綁操作的作用
<div style="color: #f40">
<strong>div的可操作性</strong>
<em>也包含了標籤的嵌套</em>
<del>以及簡單的 CSS在標籤上直接使用的方法</del>
</div>
HTML編碼
常用 空格：  小於號< : < 大於號>:>
<div style="width: 100px; height: 300px; background-color: red" >
空格和回車 在瀏覽器裏有文本分隔符的含義。
HTML 編碼：<br>
你 好<br> <!-- 你 好 -->
< div > <!-- < div > -->
</div>
表單標籤 form
單選項表達
<form>
<h1>現在練習單選框實例</h1>
1.選項1 <input type="radio" name="danxuan" value="xuanxiang1">
2.選項2 <input type="radio" name="danxuan" value="xuanxiang2">
3.選項3 <input type="radio" name="danxuan" value="xuanxiang3">
4.選項4 <input type="radio" name="danxuan" value="xuanxiang4">
5.選項5 <input type="radio" name="danxuan" value="xuanxiang5">
<input type="submit" name="">
</form>
複選框表達
<!-- ----------複選框--------------- -->
<form>
<h1>現在練習單選框實例</h1>
1.選項1 <input type="checkbox" name="danxuan" value="xuanxiang1">
2.選項2 <input type="checkbox" name="danxuan" value="xuanxiang2">
3.選項3 <input type="checkbox" name="danxuan" value="xuanxiang3">
4.選項4 <input type="checkbox" name="danxuan" value="xuanxiang4">
5.選項5 <input type="checkbox" name="danxuan" value="xuanxiang5">
<input type="submit" name="">
</form>
表單小應用--默認選項
<!-- ----------默認選項--------------- -->
<form>
<h4>選擇性別：</h4>
男性<input type="radio" name="morenxuanxiang" value="nanxing" checked="checked">
女性<input type="radio" name="morenxuanxiang" value="nvxign">
<input type="submit" name="">
</form>
<!-- ----------下拉菜單--------------- -->
<form>
<h3>練習下拉菜單——哪年生人</h3>
<select name="xuanzenian">
<option>1990年</option>
<option>1991年</option>
<option>1992年</option>
<option>1993年</option>
<option>1994年</option>
<option>1995年</option>
<option>1996年</option>
<option>1997年</option>
<option>1998年</option>
</select><br>
<br>
<input type="submit" name="">
</form>
好的編寫習慣：
有代碼必註釋