零基礎HTML編碼學習筆記

標籤：script   技術分享   包含   獨立   常用   word   高亮   field   eset   

任務目的

• 瞭解HTML的定義、概念、發展簡史
• 掌握常用HTML標籤的含義、用法
• 能夠基於設計稿來合理規劃HTML文檔結構
• 理解語義化，合理地使用HTML標籤來構建頁面

任務描述：完成一個HTML頁面代碼編寫（不寫CSS，不需要關注樣式，只關注文檔結構）任務注意事項

• 只需要完成HTML代碼編寫，不需要寫CSS
• 樣本圖僅為參考，不需要完全實現一致，其中的圖片、文案均可自行設定
• 儘可能多地嘗試更多的HTML標籤

 

總結

一、涉及HTML標籤

1、<header>標籤(Header Element)：是一個裝載介紹性內容或一組導航連結的容器。

2、<nav>標籤：定義一組導航連結。

3、<main>標籤：頁面主體內容，該內容在頁面中是唯一的，且不包含頁面中的重複內容，比如：側邊欄、導航連結、著作權資訊、網站logo和搜尋方塊。

4、<aside>標籤：定義一些與周圍內容相關的其他內容。

5、<footer>標籤：定義頁面的腳部，可以為：作者資訊、著作權資訊、聯絡資訊、網站地圖、返回頁面頂部的連結、相關檔案。一個頁面中可有多個<footer>標籤。

6、<article>標籤：定義一段獨立、自成體系的內容，它本身有完整的含義，可以獨立於頁面其他內容存在。

7、<hgroup>標籤：是<h1>-<h6>標籤的集合，用來定義多層級標題。

8、<ul>標籤：無序列表（unordered list）。<li>標籤定義無序列表的清單項目。

9、<ol>標籤：有序列表（ordered list）。<li>標籤定義有序列表的清單項目。

10、<dl>標籤：描述性列表（description list）或定義列表。與<dt>標籤（defines terms/names，定義項即標題）和<dd>標籤（describes each term/name，定義描述即解釋）一起使用。

11、<form>標籤：可包含一個或多個以下標籤：<input>、<textarea>、<button>、<select>、<option>、<optgroup>、<fieldset>、<label>。

12、<input>標籤：定義一個使用者可以輸入資料的輸入地區。

（1）type屬性：type屬性定義輸入地區的形式，屬性值有：button、checkbox、color、 date、datetime-、local、email、file、hidden、image、month、number、password、radio、range、reset、search、submit、tel、text、time、url、week。

（2）checked屬性：使用於checkbox、radio等類型，定義頁面載入後預先選定<input>元素，屬性值：checked。

（3）name屬性：定義<input>元素的名稱。屬性值：文本。

（4）value屬性：定義<input>元素的值。屬性值：文本。

13、<select>標籤：產生下拉式清單。<select>標籤內部的<option>標籤定義列表的可選項。

14、<textarea>標籤：多行文本輸入框，可由cols和rows屬性定義文字框大小。

（1）cols屬性：文字框可視寬度，屬性值：數字。

（2）rows屬性：文字框可視行數，屬性值：數字。

15、<table>標籤：定義HTML表格。表格由一個或多個<tr>( defines a table row)、<th>( defines a table header)、<td>( defines a table cell)標籤組成。

（1）border屬性：圍繞表格的邊框的寬度。屬性值：pixels值。

（2）<td>標籤的colspan屬性：儲存格跨的行數。屬性值：數字。

16、<a>標籤：超連結，用於從一個頁面連結到另一個頁面。

（1）target屬性：開啟連結的方式。屬性值：_blank、_parent、_self、_top、framename。

 

二、遇到問題

1、字型加粗

HTML5中規定：使用<h1>到<h6>定義標題，強調內容(emphasized text)使用<em>標籤，重要文本使用<strong>標籤，突出高亮顯示的文本使用<mark>標籤，當以上情況都不符合時使用<b>標籤加粗字型。

同時，可以使用CSS的“font-weight”屬性加粗字型。

 

三、github地址：https://github.com/Nunawading2016/2017-IFE-Baidu.git

 

零基礎HTML編碼學習筆記