HTML基礎語法總結
阿新 • • 發佈：2019-01-06
所有內容參考自：www.imooc.com
在慕課網上學習了一些HTML的基本語法，由於慕課網需要一節一節檢視，特總結成一個文件便於後續自己查閱。
<!DOCTYPE HTML>
<!--all from https://www.imooc.com/ -->
<!--HTML語法不區分大小寫 H1和h1是一個意思（注：我就是個註釋語法）-->
<!--html是根標籤，意思是一個html檔案只能有一個這個標籤-->
<html>
<!--head 是頭部元素的容器-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--set title-->
<title>Summary of HTML instroductory Grammar</title>
<style type="text/css">
h1{
font-size:32px;
color:#930;
text-align:center;
}
span{
font-size:32px;
color:blue;
}
table tr td,th{border:0.1px solid #111;}
</style>
</head>
<!--網頁顯示的內容需要些到body裡面。 只有一個body？-->
<body>
<!--新增一個標題標籤，效果：字型比較大&黑，分了6級標題，效果跟word標題等級相似（h1已經使用css定義顯示樣式） <h1-6>-->
<h1>標題等級效果1</h1>
<h2>標題等級效果2</h2>
<h3>標題等級效果3</h3>
<h4>標題等級效果4</h4>
<h5>標題等級效果5</h5>
<h6>標題等級效果6</h6>
<!--hr 增加分割線-->
<hr />
<h1>勇氣</h1>
<!--增加段落，效果：每一個<p>都會新生產一個段落 <p>-->
<p> (段落標籤) 三年級時，我還是一個膽小如鼠的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p> 到了三年級下學期時，我們班上了一節公開課，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
<!--呼叫一個圖片<img>-->
<img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" alt="no thing" title="圖片引用" > <br />
<label>無圖片提示</label> <br>
<img src="200.jpg" alt="no thing" title="滑鼠顯示提示" >
<hr />
<!--em strong span（效果在css裡面）標籤的強調字型效果及空格-->
<p><em>強調em標籤效果：斜體</em> <br> { （空格效果） } <br><strong>strong效果:加黑</strong> <span>span標籤效果</span> <br></p>
<hr />
<!--短文引用<q>,會增加一個雙引號-->
<p><q>聰明秀出為之英，膽略過人為之雄。（短文引用效果）</q></p>
<hr />
<!--長文引用<blockquote>,會增加縮排-->
<p><blockquote>明月出天山，蒼茫雲海間。長風幾萬裡，吹度玉門關。漢下白登道，胡窺青海灣。由來征戰地，不見有人還。 戍客望邊色，思歸多苦顏。高樓當此夜，嘆息未應閒。（長文引用效果）</blockquote></p>
<hr />
<!--換行<br>-->
<p>暗淡輕黃體性柔，(br標籤換行效果)<br />
情疏跡遠只香留。<br />
何須淺碧深紅色，<br />
自是花中第一流。</p>
<hr />
<!--code可以執行一行程式碼，pre可以執行一段程式碼-->
<code>可執行程式碼<br /></code>
<pre>可執行程式碼1<br />
可執行程式碼2<br />
可執行程式碼3<br />
可執行程式碼4<br />
可執行程式碼5<br />
</pre>
<hr />
<!--div 邏輯容器-->
<div id=ullable>
<!--<ul><li> / <ol><li>標籤效果 -->
<ul>
<label>無排序列表</label>
<li>我的第1個列表資訊</li>
<li>我的第2個列表資訊</li>
<li>我的第3個列表資訊</li>
<li>我的第4個列表資訊</li>
<li>我的第5個列表資訊</li>
<li>我的第6個列表資訊</li>
</ul>
</div>
<div id=ollable>
<ol>
<label>排序列表</label>
<li>我的第1個列表資訊</li>
<li>我的第2個列表資訊</li>
<li>我的第3個列表資訊</li>
<li>我的第4個列表資訊</li>
<li>我的第5個列表資訊</li>
<li>我的第6個列表資訊</li>
</ol>
</div>
<hr />
<!--table標籤效果 -->
<label>表格顯示</label><br />
<table summary="不顯示的摘要">
<caption>成績（標題）</caption>
<tbody>
<tr>
<th>班級</th>
<th>學生數</th>
<th>平均成績</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</tbody>
</table>
<hr />
<label>連結的兩種方式</label> <br />
<a href="http://www.imooc.com" title="點選進入慕課網">慕課網(不跳轉新網頁)!</a> <br />
<a href="http://www.imooc.com" target="_blank" title="點選進入慕課網">慕課網(跳轉到新頁面)!</a>
<hr />
<form method="post" action="save.php">
<label>提交表格</label><br />
<label for="username">使用者名稱:</label>
<input type="text" name="username" id="username" value="" />
<label for="pass">密碼:</label>
<input type="password" name="pass" id="pass" value="" />
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" /> <br />
<hr />
<label>多行輸入框與提交按鈕</label><br />
<label>個人簡介：</label><br />
<textarea cols="50" rows="10">在這裡輸入內容...</textarea>
<input type="submit" value="確定" name="submit" />
<input type="reset" value="重置" name="reset" /><br />
<hr />
<label>單選框</label><br />
<label>性別:</label>
<label>男</label>
<input type="radio" value="1" name="gender" />
<label>女</label>
<input type="radio" value="2" name="gender" /><br />
<hr />
<label>多選框</label><br />
你是否喜歡旅遊？<br />
<input type="checkbox" value="跑步" name="checkbox1" />跑步
<input type="checkbox" value="打球" name="checkbox2" />打球
<input type="checkbox" value="登山" name="checkbox3" />登山
<input type="checkbox" value="健身" name="checkbox4" />健身
<input type="checkbox" value="吃飯" name="checkbox5" />吃飯<br />
<hr />
<label>愛好(單選框):</label><br />
<select selected="selected">
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option><br />
<hr />
</select>
<label>愛好（多選框）:</label><br />
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option><br />
<hr />
</select>
</form>
<hr />
<!--address 效果 href新增加一個郵件地址連結-->
<label>地址與郵箱</label>
<p>地址：<address>銀河系地球村</address></p>
<address>本文的作者：<a href="mailto: 如果有需要你可以自己把程式碼貼到一個txt檔案，然後把txt的字尾改成html