HTML標籤速記整理W3C

illusory_f發表於2018-10-18

標題 <h1>
段落<p>
連結< href=””>
影像<img src=””>自關閉元素,不需要結束標記
換行標誌<br>
HTML 元素以開始標籤起始
HTML 元素以結束標籤終止
HTML 文件由巢狀的 HTML 元素(可以包含其他 HTML 元素)構成
<html>
<head>
<meta charet=”utf-8″>
<title>頁面標題</title>
</head>
<body>
<h1>標題<h1>
<p>段落<p>
<ody>
<html>

標籤包含了文件的元(meta)資料,如<meta charset=”utf-8″>定義網頁編碼格式為utf-8。
<title>標籤定義文件的標題
<body> 標籤定義文件的主體,即網頁可見的頁面內容,該標籤的結束標誌為 </body>
<h1> 標籤作為一個標題使用,該標籤的結束標誌為 </h1>,–Html標題
<p> 標籤作為一個段落顯示,該標籤的結束標誌為 </p>

HTML 空元素
空元素即沒有內容的HTML
對大小寫不明確

HTML屬性:提供附加資訊
<a href=”http://www.w3cschool.cn”>這是一個連結</a>

class 為html元素定義一個或多個類名 類名能在樣式檔案中引入
id 定義元素的唯一id
style 規定元素的行內樣式
title 描述了元素的額外資訊 (作為工具條使用) 更多屬性如下表
屬性 描述
accesskey 設定訪問元素的鍵盤快捷鍵。
class 規定元素的類名(classname)
contenteditableNew 規定是否可編輯元素的內容。
contextmenuNew 指定一個元素的上下文選單。當使用者右擊該元素,出現上下文選單
data-*New 用於儲存頁面的自定義資料
dir 設定元素中內容的文字方向。
draggableNew 指定某個元素是否可以拖動
dropzoneNew 指定是否將資料複製,移動,或連結,或刪除
hiddenNew hidden 屬性規定對元素進行隱藏。
id 規定元素的唯一 id
lang 設定元素中內容的語言程式碼。
spellcheckNew 檢測元素是否拼寫錯誤
style 規定元素的行內樣式(inline style)
tabindex 設定元素的 Tab 鍵控制次序。
title 規定元素的額外資訊(可在工具提示中顯示)
translateNew 指定是否一個元素的值在頁面載入時是否需要翻譯

<body> 標籤表示 HTML 網頁的主體部分,該標籤內的內容使使用者可以看到的。

一個 HTML 檔案只能存在一個 <body> 標籤。
標題是 <h1>
段落是<p>This is another paragraph</p>
<p style=”font-family:times;color:green”>
屬性 描述
align 定義文字的對齊方式
bgcolor 定義背景顏色
color 定義文字顏色

文字格式化標籤
標籤 描述
<b> 定義粗體文字。
<big> 定義大號字。
<em> 定義著重文字。
<i> 定義斜體字。
<small> 定義小號字。
<strong> 定義加重語氣。
<sub> 定義下標字。
<sup> 定義上標字。
<ins> 定義插入字。
<del> 定義刪除字。
<s> 不贊成使用。使用 <del> 代替。
<strike> 不贊成使用。使用 <del> 代替。
<u> 不贊成使用。使用樣式(style)代替。

eg.
<html>

<body>

這是長的引用:
<blockquote>
這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。這是長的引用。
</blockquote>

這是短的引用:
<q>
這是短的引用。
</q>

<p>
使用 blockquote 元素的話,瀏覽器會插入換行和外邊距,而 q 元素不會有任何特殊的呈現。
</p>

</body>
</html>

外部樣式表
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css”>
</head>

內部樣式表
當單個檔案需要特別樣式時,就可以使用內部樣式表。你可以在 head 部分通過 <style> 標籤定義內部樣式表。

<head>

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

內聯樣式
當特殊的樣式需要應用到個別元素時,就可以使用內聯樣式。 使用內聯樣式的方法是在相關的標籤中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性。以下例項顯示出如何改變段落的顏色和左外邊距。

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

<a href=”url”>Link text</a>
首先,我們在 HTML 文件中對錨進行命名(建立一個書籤):

<a name=”tips”>基本的注意事項 – 有用的提示</a>
然後,我們在同一個文件中建立指向該錨的連結:

錨點跳轉
<a href=”#tips”>有用的提示</a>
您也可以在其他頁面中建立指向該錨的連結:

<a href=”http://www.w3school.com.cn/html/html_links.asp#tips”>有用的提示</a>

 

在指定位子插入圖片
<html>

<body>

<p>
來自另一個資料夾的影像:
<img src=”/i/ct_netscape.jpg” />
</p>

<p>
來自 W3School.com.cn 的影像:
<img src=”http://www.w3school.com.cn/i/w3school_logo_white.gif” />
</p>

表格
表格由 <table> 標籤來定義。每個表格均有若干行(由 <tr> 標籤定義),每行被分割為若干單元格(由 <td> 標籤定義)。字母 td 指表格資料(table data),即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
</body>
</html>

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

無序列表始於 <ul> 標籤。每個列表項始於 <li>。

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
有序是<ol>
HTML 塊元素<h1>, <p>, <ul>, <table>

HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。

例子:<b>, <td>, <a>, <img>

HTML <div> 元素
HTML <div> 元素是塊級元素,它是可用於組合其他 HTML 元素的容器。

<div> 元素沒有特定的含義。除此之外,由於它屬於塊級元素,瀏覽器會在其前後顯示折行。

如果與 CSS 一同使用,<div> 元素可用於對大的內容塊設定樣式屬性。

<div> 元素的另一個常見的用途是文件佈局。它取代了使用表格定義佈局的老式方法。使用 <table> 元素進行文件佈局不是表格的正確用法。<table> 元素的作用是顯示錶格化的資料。

使用 <div> 元素的 HTML 佈局
註釋:<div> 元素常用作佈局工具,因為能夠輕鬆地通過 CSS 對其進行定位。

這個例子使用了四個 <div> 元素來建立多列布局: