對於一個新手來說,
最重要的莫過於學習的資源,
在接下來的文章內,
我會參考書籍以及一些Youtube影片、網站等等來開始入門,
因為之前就有稍微了解了HTML的架構,
所以文章部分一開始會從標籤介紹與功能開始
<html lang="en">
表示這個網頁內容語言與地區設定,此設定用意是讓搜尋引擎做出判斷,不會影響到網頁內容。
例如:
<html lang="zh-Hant-TW"> 即為台灣使用的繁體中文。
<html lang="en-US">為美國英語
在HTML5中,lang屬性可用於任何HTML元素,如果整份 html 的語言是用 en,那在網頁中某個區塊想要另外標示為其他語言,就可以直接寫在那個元素上。
例如:
<p lang="fr">Je suis français</p>
<head>
網頁所需功能
</head>
head標籤沒有參數可以使用,以下是經常使用到的功能:
HTML title 標籤用來設計網頁標題,也就是網路瀏覽器上會顯示的網頁標題
<title>網頁標題</title>
此功能是用來設定網頁內需要導入的外部資源,例如導入CSS檔案,須注意此標籤並不是超連結
<link 屬性="" type="屬性種類" href="嵌入檔案">
例如:
<link rel="stylesheet" type="text/css" href="this_page.css" />
意思即為導入this_page.css檔案,並告知瀏覽器此語言是CSS
HTML base 標籤可以用來控制網頁內的連結屬性
<base href="超連結網址" target="屬性">
也可以分開寫成兩個標籤:
<base target="屬性">、<base href="超連結網址">
屬性有分為以下四種:
1. target="_blank"。在新的視窗開啟連結。
2. target="_parent"。在父層視窗開啟連結。
3. target="_self"。在框架內直接開啟連結,若無框架則等同於直接在同一的視窗開啟。
4. target="_top"。以 top 模式開啟連結。
<meta>為自我閉合標籤,也就是不需要加上閉合標籤。如同放在<head>裡的標籤,一樣都是用來告訴瀏覽器訊息的標籤。
meta元素可以定義文件的各種後設資料,提供各種文件資訊,通俗點說就是可以理解為提供了關於網站的各種資訊。html文件中可以包含多個meta元素,每個meta元素只能用於一種用途,如果想定義多個文件資訊,則需要在head標籤中新增多個meta元素。
<meta name="屬性值" content="內容">
HTML meta name 常用屬性
name="description" content="網頁簡短描述"
有機會顯示在搜尋結果的網頁摘要中
name="keywords" content="關鍵字1.關鍵字2"
關鍵字標籤,但現在已少用(Google引擎已不使用此屬性)
name="author" content="作者姓名"
記錄網頁的作者名稱
meta name="renderer" content="webkit|ie-comp|ie-stand"
用於預設用哪種瀏覽器核心渲染版面
name="generator" content="編輯器名稱"
記錄網頁編輯器名稱
name="copyright" content="網頁版權"
用來標示網頁的版權或著作權聲明
name="distribution" content="網頁發佈地區"
用來記錄網頁的發佈地區
name="viewport" content="width=device-width, initial-scale=1.0"
設定手機網頁的螢幕解析度
註1:設定為 width=device-width 就可以自動符合所有不同手機的預設最佳解析度
註2:設定 initial-scale=1 手機螢幕畫面的初始縮放比例為 100%
每個 meta 使用 name 的時候,都會搭配 content 來呈現資訊內容,簡單來說,name 代表資訊項目,content 代表資訊值。
<meta http-equiv="屬性值" content="內容">
HTML5中能使用的屬性
http-equiv="Content-Type" content="text/html"; charset="uft-8″
網頁內容的種類以及編碼
http-equiv="Refresh" content="time"
指定一個時間間隔(以秒為單位),在此時間過去之後從伺服器重新載入當前頁面,也可以另外指定一個頁面
http-equiv="default-style" content="text/css"
定義預設的樣式表
<meta charset="UTF-8">
網頁編碼,UTF-8是萬國碼
<body>標籤內會放置給使用者看到的內容</body>
下篇文章中會介紹可以在文章內使用到的一些基本標籤
HTML5 基礎語法-結構 : head, body
小事之 HTML lang Attribute
HTML head 標籤
SEO網站優化教學 2-1如何被收錄-建立Meta Title,Description,Keywords
SEO 網站搜尋優化 - 不要再用 Meta Keywords 關鍵字了,改用 Description 吧!
應該避免的過時語法
HTML meta標籤常用屬性及其作用總結
【HTML】瀏覽器內核控制meta name="renderer" 說明文檔