HTML 入門集錦
阿新 • • 發佈：2020-09-12
- HTML 的核心功能就是“標記”內容，進而給出結構，是為內容新增語義結構的一種手段；
- HTML 一般以標籤 < 開頭，以標籤 > 結尾；
- 標籤一般成對出現，一個開始標籤和一個結束標籤就在文件中建立了一個元素；
- 結束標籤一般用一個斜槓表示元素的關閉或結束，如</p>；
- 有些元素是可以巢狀的，子元素不能超出父元素的範圍；
常用元素：
- <!DOCTYPE html> 這是標準的文件型別宣告，必須放在文件的第一行；
- html 包含文件中的所有 HTML 內容；
- head 文件的頭部，包含所有文件的元資料，如標題和對外部樣式表、指令碼的引用；
- title 文章的標題，瀏覽器會把這個元素的內容顯示在視窗標題欄中，並在收藏網頁時使用這個標題；
- body 所有不包含在 head 中的元素都包含在 body 中，這裡的內容是網頁中看到的；
- h1、h2、h3、h4、h5、h6 用於標記不同級別的標題，分別表示頂級標題、二級標題……
- p 段落；
- ul、ol、li ul 用於標記無序列表，ol 標記有序列表，li 用於標記列表事項；
- em 表示強調，一般顯示為斜體；
- strong 表示額外強調，一般顯示為粗體；
- a 連結。一般顯示為帶下劃線的藍色文字，可另行設定；
- span 任意文字，一般都包含在 p 這樣的大容量元素中；
- div 任意文字塊，用於分組相關元素。
- table 列表，table 內的表頭標籤為 thread，表頭層標籤為 tr，表頭內容標籤為 th；
table 內表身標籤為 tbody，表身層標籤為 tr，表身內容標籤為 td；
- form 填表，可用於填寫資訊。
- img 插入影象，可從網頁插入，也可從本地插入。
<!DOCTYPE html> <!-- 標準的文件型別宣告 --> <html> <!-- HTML 開始標籤--> <head> <!-- head 開始標籤 --> <title>this is a page title</title> <!-- title 標籤，將顯示在瀏覽器的視窗標題欄中--> </head> <!-- head 結束標籤 --> <!-- paragraphe --> <!-- 以下內容將出現在網頁上被我們看見 --> <body> <!-- body 開始標籤 --> <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3> <h4>This is a heading</h4> <h5>This is a heading</h5> <h6>This is a heading</h6> <!-- h1 ~ h6 級標籤，不同級的標籤有不同的顯示效果 --> <p><a href="http://baidu.com" target="_blank">This is a page</a></p> <!-- p 元素內包含 a 元素，即一個連結，連結為“百度”，在網頁上顯示為 “This is a page" --> <!-- target="_blank" 表示在新開的視窗開啟網頁--> <p>This is a page</p> <!-- 新開一行，內容為“This is a page” --> <p>Lorem <strong><em>dolor</em> sit</strong> amet consectetur adipisicing elit. Nobis, accusamus ab at delectus veritatis aperiam fugiat placeat accusantium doloribus incidunt sint libero dolorum, architecto qui! Assumenda quod ex earum velit.</p> <!-- 自動填充的一段文字，其中 dolor 顯示為斜體和加粗 --> <!-- 無序列表 --> <ul> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> </ul> <!-- 有序列表 --> <ol> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> <li>List item 01</li> </ol> <!-- 表格 --> <table> <thead> <!-- 表格頭 --> <tr> <!-- 第一行表格頭 --> <th>First Name</th> <th>Last Name</th> <th>age</th> <th>email</th> <!-- 分別有四種內容，其名字為 First Name、Last Name、age、email --> </tr> </thead> <tbody> <!-- 表格尾 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>[email protected]</td> </tr> <!-- 第一行的四個值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>[email protected]</td> </tr> <!-- 第二行的四個值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>[email protected]</td> </tr> <!-- 第三行的四個值 --> <tr> <td>Bland</td> <td>Nancy</td> <td>18</td> <td>[email protected]</td> </tr> <!-- 第四行的四個值 --> </tbody> </table> <!-- 填表 --> <form> <div> <label>First Name</label> <!-- 要填的內容是 First Name --> <input type="text" name="firstname" placeholder="Enter First Name"> <!-- 輸入並記錄填入的值，在框內提示 Enter First Name --> </div> <input type="submit" name="submit" value="Submit"> <!-- 設定提交按鈕 --> </form> <img width="1000vw" src="flower.jpg"> <!-- 匯入圖片 flower.jpg 寬度為 1000vw （一種自適應寬度表達方式) --> </body> </html>