學習HTML的一些筆記，方便記憶和以後翻閱
阿新 • • 發佈：2018-12-28
學習HTML的一些筆記，方便記憶和以後翻閱
大體結構
<!--第一行是宣告文件，告訴瀏覽器以什麼HTML版本解析程式碼--> <!DOCTYPE html> <!--HTML是網站中最大的標籤，根元素--> <html lang="en"> <!--主要寫不直接顯示在網頁中的內容,一般是做一些網頁的設定--> <head> <!--設定網頁的編碼格式--> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <!--網頁的標題--> <title>第一個頁面</title> </head> <!--body是網頁的主體內容，是直接顯示在頁面上的東西--> <body> <p style="text-align:center">sdsds</p> </body> </html>
標籤結構
標籤是由一對尖括號<>包裹起來的關鍵字。
標籤分為雙標籤和單標籤。
雙標籤有一個開始標籤和結束標籤，雙標籤有開始就必須有結束。
<開始標籤>內容</結束標籤>
HTML標籤元素可以設定屬性
屬性一般放在開始標籤中
屬性一般以名稱:值對的形式出現，例如 color:red
屬性必須用雙引號包裹起來
HTML常用的塊元素，也可以叫行元素
塊級標籤獨佔一行，常用的有：div, ul, ol, li, p, dl, dt, dd, h1~h6等
<!--標題標籤<h1>~~~~<h6--> <h1>一級標題</h1> <h2>二級標題</h2>
無序列表，每個li預設獨佔一行
<ul>
<li>無序列表1</li>
<li>無序列表2</li>
<li>無序列表3</li>
</ul>
- 專案1
- 專案2
- 專案3
有序列表，每個< li >也是獨佔一行
<ol> <li>有序列表項1</li> <li>有序列表項2</li> <li>有序列表項3</li> </ol>
- 有序列表項1
- 有序列表項2
- 有序列表項3
自定義列表
<dl> //定義一個自定的列表，也是一個塊級元素
<dt>這是定義列表的標題 </dt> //定義標題
<dd>這是內容</dd> //這是列表的內容項
</dl>
- 這是定義列表的標題
- 這是內容
table標籤是定義一個表格
### <thead>標籤是定義表頭元素，<thead>中使用<th>寫表頭內容
### <tbody>定義表格內容的具體內容，<tr>代表一行，<td>是一個單元格
### border屬性顯示錶格的邊框， cellspacing屬性會讓表格內邊框消失，表格更好看
<table border="1", cellspacing="0>
<thead>
<th>這是表頭1</th>
<th>這是表頭2</th>
</thead>
<tr>
<td>這是第一行的第一粒</td>
<td>這是第一行的第二列</td>
</tr>
<tr>
<td>這是第二行的第一列</td>
<td>這是第二行的第二列</td>
</tr>
</table>
| 這是表頭1 | 這是表頭2 |
|---|---|
| 這是第一行的第一粒 | 這是第一行的第二列 |
| 這是第二行的第一列 | 這是第二行的第二列 |
區塊元素div，沒有預設的樣式，一般用來劃定一塊區域，配合CSS在佈局中來使用
<div> 文字內容 </div>