w3school之HTML學習筆記

阿新 • • 發佈：2019-01-12

由於html標記語言是網頁自動化測試所必須要掌握的，所以重新學習html語言（這似乎是我第四次學習html，這次得堅持了）,這次歸納總結了下，希望能幫助到大家。

HTML 指的是超文字標記語言 (Hyper Text Markup Language)，用來描述網頁的。Web 瀏覽器的作用是讀取 HTML 文件，並以網頁的形式顯示出它們。瀏覽器不會顯示 HTML 標籤，而是使用標籤來解釋頁面的內容。HTML文件是由HTML元素定義的。HTML元素指的是開始標籤到結束標籤的所有程式碼。

7.塊標籤

各個標籤說明

注：所有標籤建議小寫，所有屬性及屬性值建議小寫。

一般標籤的屬性有：

id（元素唯一id），name（元素名稱值），class（元素類名），dir（文字方向），style（元素行內CSS樣式），title（元素額外資訊）。

特殊標籤屬性有：

href（連結地址），target（標籤開啟方式），src（來源），alt（代替的文字資訊）

HTML元素語法：

HTML元素以開始標籤開始，以結束標籤結束，開始標籤與結束標籤之間的內容為元素內容。

某些HTML元素具有空內容，無結束標籤。

大多數元素可擁有屬性（屬性總是以名稱/值對出現，如name="value",總是在開始標籤中規定）。

1.基礎標籤

<html>元素內容</html>:為文件的根元素，定義整個文件。

<head>元素內容</head>：為文件的頭資訊，頭資訊的元素大都不會顯示在瀏覽器上。

<head></head>中使用的標籤如下：

<title>網頁標題</title>：將文件的題目放在瀏覽器的標題欄中（tab頁標題）。<head>中唯一可見的標籤。

<base />：該標籤為頁面上的所有連結規定預設地址屬性href或預設目標屬性target。空標籤。

<body>元素內容</body>:為文件的正文，其資訊會顯示在瀏覽器上。屬性有bgcolor="yellow"（背景顏色），但要避免使用，請用樣式代替<body style="background-color:yellow">。

2.常用標籤

2.1標題

<h1>元素內容</h1>：標題（Heading）是通過 <h1> - <h6> 等標籤進行定義的。前後有空行。屬性有：align="center"（居中），但要避免使用，請用樣式代替<h1 style="text-align:center">。

2.2段落

<p>元素內容</p>：段落。前後有空行。可以使用style屬性定義段落樣式：以下分別定義了字型，顏色，字型大小。

<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>

2.3連結

<a href="連結地址或#錨名">元素內容</a>：連結。href為屬性，屬性值可以是url也可以是“mailto：郵件地址”具體可以檢視w3cschool。屬性target：target="_blank"（設定連結在新視窗開啟）。

<a name="錨名">元素內容</a>：被連結。name為屬性，設定錨。

有兩種使用 <a> 標籤的方式：

通過使用 href 屬性 - 建立指向另一個文件的連結，跳轉到另外一個文件頁面。
通過使用 name 屬性 - 建立文件內的書籤。在同一個文件頁面中跳轉。用name屬性設定錨。

2.4圖片

<img src="圖片來源" width="寬畫素點" height="高畫素點" alt="無法載入圖片時的替代文字" align="圖形對齊方式" border="0" usemap="#map元素的id或者name值"/>：圖片。空元素（無結束標籤）。

<map name="" id=""><area 屬性值對 /></map>：影象對映。

<area shape="" coords="" href="url" target="_blank" alt="替代文字"/>：影象對映中可點選區域。空標籤。

2.5其他

換行，水平線，註釋。

<br/>:換行。空元素。

<hr/>:水平線。空元素。

：註釋。瀏覽器會忽略註釋，不會顯示它們。

3.指令碼標籤

script 元素既可包含指令碼語句，也可通過 src 屬性指向外部指令碼檔案。必需的 type 屬性規定指令碼的 MIME 型別（如text/javascript）。JavaScript 最常用於圖片操作、表單驗證以及內容動態更新。

在html檔案中的js：例項如下：

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>

引用外部的js：例項如下：

<script src="script.js"></script>

script.js檔案如下：

document.write("Hello World!")

注：外部指令碼script.js中不能包含 <script> 標籤。

4.CSS樣式表標籤

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>

<標籤名 style="樣式說明">元素內容</標籤名>：內聯樣式：定義某個元素的樣式。

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，然後優先順序依次：內部樣式表，外部樣式表，瀏覽器中預設值。

5.表格標籤

<table></table>:該標籤定義表格：border屬性設定邊框粗細大小。cellpadding屬性定義元素邊框與元素內容之間的空間。cellspacing屬性設定單元格間距。frame屬性來控制圍繞表格的邊框。

<tr></tr>:該標籤定義行標籤。

<td>元素內容</td>:該標籤定義列標籤：“ ”代表空表格。align屬性定義單元格內容對齊方式。

<th>元素內容</th>:該標籤定義表格頭：colspan屬性設定橫跨n列，rowspan屬性設定橫跨n行。align屬性定義單元格內容對齊方式。

<caption>我的標題</caption>：該標籤定義表格標題。

6.列表標籤

6.1無序列表

無序列表是一個專案的列表，此列專案使用粗體圓點（典型的小黑圓圈）進行標記。

<ul></ul>：無序列表始於 <ul> 標籤。

<li> 元素內容</li>：每個列表項始於 <li>標籤。

6.2有序標籤

有序列表有序列表也是一列專案，列表專案使用數字進行標記。

<ol></ol>：有序列表始於 <ol> 標籤。

<li> 元素內容</li>：每個列表項始於 <li> 標籤。

6.3定義列表

自定義列表不僅僅是一列專案，而是專案及其註釋的組合。

<dl></dl>：自定義列表以 <dl> 標籤開始。

<dt>元素內容</dt>:每個自定義列表項以 <dt> 開始。

<dd>元素內容</dd>:每個自定義列表項的定義以 <dd> 開始。

7.塊標籤

可以通過 <div> 和 <span> 將 HTML 元素組合起來。

7.1塊元素

塊元素的前後會自動加上空行。

如：<div>,<h1>,<p>,<ul>,<table>

<div></div>:非常常用，用於組合其他HTML元素的容器。與CSS一同使用，可用於對大的內容塊設定樣式屬性。

如下：

<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
}    
</style>
</head>

<body>
<div class="cities">
<h2>標題</h2>
<p>段落1</p>
<p>段落2</p>
</div> 
</body>

</html>

.cities：表示類class屬性值為cities的標籤內容樣式為style中.cities設定的樣式。

7.2內聯元素

塊元素的前後會自動加上空行。

如：<span>,<b>,<td>,<a>,<img>

<span></span>:非常常用，用於文字的容器。與CSS一同使用，可用於部分文字設定樣式屬性。

如下：

<!DOCTYPE html>
<html>
<head>
<style>
span.red {
    color:red;
}
</style>
</head>
<body>
<h1>我的<span class="red">重要的</span>標題</h1>
</body>
</html>

span.red：表示span標籤下的類class屬性值為red的標籤內容樣式為style中span.red設定的樣式。

8.框架標籤

通過使用框架，你可以在同一個瀏覽器視窗中顯示不止一個頁面。每份HTML文件稱為一個框架，並且每個框架都獨立於其他的框架。

8.1框架標籤

<frameset></frameset>：該標籤定義HTML框架。rows/columns 的屬性值規定了每行或每列佔據螢幕的面積。

<noframes>元素內容</noframes>：元素內容的文字就必須將這段文字巢狀於 <body></body> 標籤內。
<frame />：定義每個框架。屬性有src（來源），noresize（框架邊緣不可改變大小）。空標籤。
如下：

<html>
<frameset cols="50%,*,25%">
  <frame src="/example/html/frame_a.html" noresize="noresize" />
  <frame src="/example/html/frame_b.html" />
  <frame src="/example/html/frame_c.html" />
</frameset>
<noframes>
<body>您的瀏覽器無法處理框架！</body>
</noframes>
</html>

8.2內聯框架標籤

126郵箱登入內聯框架例項如下：

<iframe id="x-URS-iframe" frameborder="0" name="" scrolling="no" style="width: 100%; height: 100%; border: medium none; background: none repeat scroll 0% 0% transparent;" src="http://passport.126.com/webzj/m126_1.0.1/pub/index_dl.html?wdaId=">
<html>
......
</html>
</iframe>

設定frameborder屬性值為 "0" 就可以移除邊框。src屬性指向隔離頁面的位置。

還可以使用 iframe 作為連結的目標

iframe 可用作連結的目標（target）。連結的 target 屬性必須引用 iframe 的 name 屬性：

<!DOCTYPE html>
<html>
<body>
<iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
<p><b>註釋：</b>由於連結的目標匹配 iframe 的名稱，所以連結會在 iframe 中開啟。</p>
</body>
</html>

9.文字格式化標籤

<b>元素內容</b>:加粗。

<i>元素內容</i>:斜體。

<em>元素內容</em>：定義著重文字。

<strong>元素內容</strong>：定義加重語氣。

<big>元素內容</big>:定義大字號。

<small>元素內容</small>:定義小字號。

<sub>元素內容</sub>:定義下標。

<sup>元素內容</sup>:定義上標。

<ins>元素內容</ins>:定義插入字。

<del>元素內容</del>:定義刪除字。

<pre>元素內容</pre>:定義預格式文字，保留原來的空格。

<abbr>元素內容</abbr>:定義縮寫。

<address>元素內容</address>:定義地址。

<address>
Written by <a href="mailto:[email protected]">Donald Duck</a>.
</address>

10.表單標籤

<form></form>:該標籤定義HTML表單。HTML 表單用於收集使用者輸入。表單元素指的是不同型別的 input 元素、複選框、單選按鈕、提交按鈕等等。屬性有：action：指定表單處理程式，submit提交到此。method：規定提交表單時所用的HTTP方法（GET或POST）。name：識別表單名稱。accept-charset：使用的字符集。

<fieldset></fieldset>:定義域。用於組合表單資料。

<legend>標題</legend>定義域標題。

<input>:輸入框或單選框或提交按鈕等通過type屬性值設定。

type屬性：text：文字輸入。password：密碼域。radio：單選框。checkbox：複選框。submit：提交表單。button：按鈕。number：數字。

value屬性：規定輸入欄位的初始值。

readonly屬性：只讀。

disabled屬性：禁用。

size屬性：規定輸入欄位的尺寸（以字元計）。

maxlength 屬性：規定輸入欄位允許的最大長度。

屬性還有，id，name。屬性值checked="checked"，表示預設被選中的選項。

<select></select>:定義下拉列表。

<option></option> ：定義待選擇的選項。屬性值selected="selected"，表示預設被選擇的選項。

<textarea></textarea>:文字域。屬性rows和cols。

<button></button>:定義按鈕。

<datalist></datalist>:h5新增的元素，使用者輸入資料時看到預定義選項的下拉列表。<input> 元素的 list 屬性必須引用 <datalist> 元素的 id 屬性。元素內容：<option value="">。

w3school之HTML學習筆記

w3school之HTML學習筆記

w3school之CSS學習筆記

Python:GUI之tkinter學習筆記3事件綁定（轉載自https://www.cnblogs.com/progor/p/8505599.html）

Python:GUI之tkinter學習筆記3事件繫結（轉載自https://www.cnblogs.com/progor/p/8505599.html） Python:GUI之tkinter學習筆記3事件繫結

HTML學習筆記之標簽基礎

HTML學習筆記之基本介紹

HTML學習筆記之標簽進階

構建之法學習筆記04

python框架之 Tornado 學習筆記（一）

初探boost之noncopyable學習筆記

強哥HTML學習筆記

html學習筆記五

html學習筆記二

HTML學習筆記 CSS學習選擇器第五節（原創）

HTML學習筆記 CSS樣式第六節（原創）

HTML學習筆記基礎表格第二節（原創）

HTML學習筆記 CSS塊元素加偽類選擇器第三節（原創）

HTML學習筆記 css定位浮動及瀑布流第十三節（原創）

HTML學習筆記 w3sCss盒子模型應用第十一節（原創）

HTML學習筆記 CSS學習選擇器案例第五節（原創）參考使用表

w3school之HTML學習筆記

相關推薦