HTML複習整理-基本標籤介紹

參考來源:

HTML5 基礎語法-結構 : head, body
小事之 HTML lang Attribute
HTML head 標籤

網頁的地區與語言設定

1	<html lang="en">

表示這個網頁內容語言與地區設定，此設定用意是讓搜尋引擎做出判斷，不會影響到網頁內容。

例如:

1 2	<html lang="zh-Hant-TW"> 即為台灣使用的繁體中文。 <html lang="en-US">為美國英語

在HTML5中，lang屬性可用於任何HTML元素，如果整份 html 的語言是用 en，那在網頁中某個區塊想要另外標示為其他語言，就可以直接寫在那個元素上。

例如：

1	<p lang="fr">Je suis français</p>

各國語系代碼

head 標籤

1
2
3

<head>
   網頁所需功能
</head>

head標籤沒有參數可以使用，以下是經常使用到的功能:

網頁標題

HTML title 標籤用來設計網頁標題，也就是網路瀏覽器上會顯示的網頁標題

1	<title>網頁標題</title>

HTML link 標籤

此功能是用來設定網頁內需要導入的外部資源，例如導入CSS檔案，須注意此標籤並不是超連結

1	<link 屬性="" type="屬性種類" href="嵌入檔案">

例如:

1	<link rel="stylesheet" type="text/css" href="this_page.css" />

意思即為導入this_page.css檔案，並告知瀏覽器此語言是CSS

HTML base 標籤

HTML base 標籤可以用來控制網頁內的連結屬性

1	<base href="超連結網址" target="屬性">

也可以分開寫成兩個標籤:

1	<base target="屬性">、<base href="超連結網址">

屬性有分為以下四種:
1. target=”_blank”。在新的視窗開啟連結。
2. target=”_parent”。在父層視窗開啟連結。
3. target=”_self”。在框架內直接開啟連結，若無框架則等同於直接在同一的視窗開啟。
4. target=”_top”。以 top 模式開啟連結。

Meta標籤

＜meta＞為自我閉合標籤，也就是不需要加上閉合標籤。如同放在＜head＞裡的標籤，一樣都是用來告訴瀏覽器訊息的標籤。
常用標籤如下:

1	<meta charset="UTF-8">

告知瀏覽器這個網頁所用的編碼

1	<meta name="description" content="網頁簡短描述">

用來寫網站的簡短描述

1	<meta name="keywords" content="網頁關鍵字">

用來放網頁關鍵字

更多關於meta用法語標籤:點我

body標籤

body標籤內會放置給使用者看到的內容

標題與段落

標題標記:
標題總共有六階

1
2
3

<h1>主標題</h1>
<h2>次標題</h2>
....以下類推

此元素用來顯示標題內容，h1~h6的標籤顯示文字會由大到小，如果要控制文字大小要用CSS語法。

段落:
在預設值下使用段落元素，瀏覽器會使用新的一行來顯示段落，也會在段落中保留空間。

1	<p>文章內容</p>

文章內容

文字部分:

<b></b>粗體
<i></i>斜體
<sup></sup>上標，例如數學式裡的次方
<sub></sub>下標，例如化學式
<br />斷行
<hr >水平線
<strong></strong>
 語意強調，代表內容有強烈的重要性、嚴重性或緊急性，相較<em>標籤語氣來的重，
 在預設值中瀏覽器會以粗體顯示內容。
 
<em></em>
 語意強調、著重，代表需要用戶著重閱讀的內容，在預設值中會以斜體顯示內容。
 
<blockquote></blockquote>
 整個段落篇幅的引述，需注意的是此元素內需再使用<p>元素來撰寫文章，瀏覽器會將此元素的文章內容縮排，
 不過如果只是單純要使文章縮排，使用CSS才是正確做法。
 用法如下:
 <blockquote cite="文章引述網址">
 <P>文章內容</p>
 </blockquote>

<q></q>用在段落當中較短的引述上，一般瀏覽器會在文章前後加上引號，
但IE不會，所以很多人會避免使用<q>元素。

<abbr></abbr>縮寫與縮略字，可加入title屬性註明全名。
用法如下:
<abbr title="全名">縮寫</abbr>

<cite></cite>註解，瀏覽器會將元素內容顯示為斜體，在HTML5中不應該用在人名上。

<dfn></dfn>標示出新術語的定義實例，通常會用在學術概念或是一些專業術語上，
有些瀏覽會將內容顯示為斜體，Sarafi和Chrome則不會改變外觀。

<address></address>用來包含網頁作者的聯絡細節，可包含電話、E-mail、實際地址等，
瀏覽器通常會將內容顯示為斜體。

<ins></ins>被插入文件的內容，瀏覽器顯示通常會將內容加上底線。
<del></del>顯示被刪除的文字，瀏覽器顯示通常會將內容加上刪節線。
<s></s>標示了不再正確或不再相關的內容，瀏覽器視覺顯示通常會將內容用線劃掉。