HTML基本語法（慕課網學習筆記）
阿新 • • 發佈：2018-11-08
標題
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>學習html標題</title> </head> <body> <!-- 1em = 16px --> <h1>一級標題 字型大小32px</h1> <h2>二級標題 字型大小24px</h2> <h3>三級標題 字型大小18px(18.72) 約等於</h3> <h4>四級標題 字型大小16px</h4> <h5>五級標題 字型大小14px(13.28) 約等於</h5> <h6>六級標題 字型大小12px</h6> <h6>六級標題</h6> <h7>七級標題 不存在的</h7> <h8>八級標題 不存在的</h8> </body> </html>
段落
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTMl 段落標籤</title> <style> /*預設p標籤空是佔行的，在此處覆蓋預設css,借用除錯工具調整*/ p { margin:0; padding:0; } </style> </head> <body> <p>段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1段落內容1</p> <p></p> <p>段落內容2</p> </body> </html>
連結
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>連結</title> <style> /*設定class為content的元素的高度*/ .content { height:800px; } /*覆蓋a的預設值*/ a { color:#333333; text-decoration: none; } a:visited { color:#333333; } </style> </head> <body> <!-- target="_blank"在新視窗中開啟頁面 --> <a href="http://www.imooc.com/" target="_blank">慕課網-新視窗</a> <!-- target="_self"在本視窗開啟頁面 --> </br> <a href="http://www.imooc.com/" target="_self">慕課網-本視窗</a> </br> <!-- 跳轉到本頁面id="titleThird"的元素的位置 --> <a href="#titleThird">頁面內錨點</a> </br> <!-- 禁止點選 --> <a href="javascript:;">隨便你點 能跳走算我輸……</a> </br> <!-- 佔空 --> <div class="content">一堆內容</div> </br> <h3 id="titleThird">咳咳 第三章</h3> </body> </html>
影象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影象</title>
<style>
/*通過背景插入圖片*/
.imooc-logo {
background: url(https://www.imooc.com/static/img/index/logo.png);
width: 200px;
height: 80px;
}
</style>
</head>
<body>
<p class="imooc-logo">
</p>
<!-- 通過標籤插入圖片 -->
<img src="https://www.imooc.com/static/img/index/logo.png">
</body>
</html>
列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 無序列表 -->
<ul type="circle">
<li>蘋果</li>
<li>鴨梨</li>
<li>水蜜桃</li>
</ul>
<!-- 有序列表 -->
<ol type="square">
<li>烤冷麵</li>
<li>煎餅果子</li>
<li>麻辣燙</li>
</ol>
<!-- 定義(下定義的意思dd是dt的解釋)列表 -->
<dl type="disc">
<dt>正數</dt>
<dd>大於0的自然數</dd>
<dt>負數</dt>
<dd>小於0的自然數</dd>
</dl>
</body>
</html>
div、塊級元素與行級元素、註釋
div無敵神器，哈哈哈哈哈哈
div、h1等塊級元素(佔滿整行)
p、span等行級元素，依據內容數量決定長度
<!--這是一個註釋-->
格式化標籤-字型相關-很少使用盡量使用CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<b>加粗字型</b>
<br />
<strong>另一種粗體</strong>
<br />
<big>大號字型</big>
<br />
<em>強調字型</em>
<br />
<i>斜體</i>
<br />
<small>小號字型</small>
<br />
This text contains
<sub>下標</sub>
<br />
This text contains
<sup>上標</sup>
</body>
</html>
格式化標籤-其他
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>預格式標籤</title>
</head>
<body>
<h1>下面為一段javascript程式碼</h1>
<!-- pre宣告這是需要顯示的程式碼，不要編譯器解釋執行 -->
<pre>
var a = "";
a = "Hello World";
alert(a);
</pre>
<h1>刪除線</h1>
<!-- del刪除線 ins下劃線 -->
<p>其實我有一雙美麗的<del>大腿</del> <ins>請填空</ins></p>
<p>看起來很美好 然而相容性不好</p>
<h1>引用演示</h1>
<!-- 引用？沒看出有啥用 -->
<blockquote>
引用自w3c官方HTML標準文件
</blockquote>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>完整結構表格</title>
</head>
<body>
<style>
</style>
<!-- align設定位置，left左對齊right右對齊center居中顯示 -->
<!-- border外邊框的寬度（厚度） -->
<!-- cellspacing格與格之間的間距 -->
<table align="center" border=1 cellspacing="5">
<!-- 表頭 -->
<thead>
<tr>
<!-- th不同於td這個才是設定表頭的關鍵 -->
<th>學號</th>
<th>姓名</th>
<th>總分</th>
</tr>
</thead>
<!-- 表尾 -->
<tfoot>
<tr>
<!-- colspan="3"橫向合併3個單元格 -->
<!-- rowspan="2"縱向合併兩個單元格 -->
<td colspan="3">按鈕</td>
</tr>
</tfoot>
<tbody align="center">
<tr>
<td>20094071309</td>
<td>蘭蘭懶</td>
<td>400</td>
</tr>
<tr>
<td>20094071310</td>
<td>小新</td>
<td>400</td>
</tr>
</tbody>
</table>
</body>
</html>
表單元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!-- action表單提交的地址method提交的方式POST或GET -->
<form action="" method="">
<!-- 輸入文字 -->
姓名<input type="text" />
</br>
<!-- 單選框 -->
性別<input type="radio" value="1" />男<input type="radio" value="0" />女
</br>
喜歡玩的遊戲:
<!-- 複選框 -->
</br>
<input type="checkbox" value="農藥" />農藥
<input type="checkbox" value="西遊" />西遊
</br>
學歷:
<!-- delect下拉列表 -->
<select>
<option value="0">函授</option>
<option value="1">學士</option>
<option value="2">碩士</option>
<option value="3">非人</option>
</select>
</br>
<!-- date輸入日期 -->
選擇日期<input type="date" />
</br>
<!-- 只能輸入數字 -->
身高<input type="number" />
</br>
<!-- 一個顏色選擇器 -->
喜歡的顏色<input type="color" />
</br>
<!-- 橫向滑動條 -->
薪資<input type="range" min="1" max="5"/>
</br>
<!-- 校驗郵箱 -->
聯絡郵箱<input type="email" />
</br>
<!-- 密碼 -->
小祕密<input type="password" />
</br>
個性簽名:
</br>
<!-- 文字域rows="5"5行 cols="30"30個位元組長度 -->
<textarea rows="5" cols="30" ></textarea>
</br>
<!-- 清空 -->
<input type="reset" value="清空" />
<!-- 提交 -->
<input type="submit" />
</form>
</body>
</html>