HTML5 基礎語法-結構 : <head>, <body>
HTML Hyper Text Markup Language(超文本標記語言),由 W3C定義與維護的標準網頁語言。
這裡是有個概念系列,適合想要入門的同學,先知道點概念再來找自學的資源是不錯的開始~
1.結構
一個html程式碼的基本架構會長這樣,會有基本的宣告還有頭 <head> 與身體 <body>
<!DOCTYPE html>
起頭命令句,告訴瀏覽器這個檔案是一個 html檔。
<html></html>
用來包裹整個html內含的程式碼。在開頭 <html> 可以加入語言判定的標籤,例如
<html lang="en-US">
表示這個網頁的內容為英語,且地區為美國,這行代碼是告訴搜尋引擎判斷網頁的內容為何,並不會影響網頁呈現。若寫作 <html lang="en">
,便是沒有特定的地區。
2.Head
就像人由頭跟身體組成,一個html檔也有頭 <head> 跟身體 <body>。基本上 <head> 裡面的內容都不是給”人”看得,而是給機器運作、搜尋用得。
<head></head>
主要放置得標籤用來告訴搜尋引擎這個網頁有什麼樣的內容、控制網頁與外部程式碼的連結、定義網頁使用的樣式等等(例如你的css檔如何跟html運作)。常用的標籤有 <title>、<meta>、<link>、<script>、<style>、<base> 等等。
<title>This is a title</title>
網頁的標題,每個網頁只能有一個標題,裡面的內容會顯示在書籤頁上。
接著是學網頁通常會最先接觸的連結css的程式碼
<link rel="stylesheet" type="text/css" href="main.css"/>
這行程式的意思是導入一個 stylesheet 樣式表(告訴瀏覽器要用stylesheet編碼來解讀此文件)的 text/css 文件,外部連結(href)和名字為 main.css (這裡放的是完整的路徑連結,但如果只是在電腦裡同一個資料夾做測試就不需要路徑,他會自己抓)。
<meta>
Metadata
Metadata是自我閉合標籤(也就是不需要 </標籤> 就可以跑的標籤),如同放在 <head> 裡的標籤一樣都是用來告訴瀏覽器訊息的標籤。
最常用的就三個,
<meta charset="UTF-8">
告訴瀏覽器這個網頁所用的編碼方式。UTF-8是一種字元的編碼方式,我們知道電腦只看得懂0101(也就是二進位編碼),例如大寫A寫成二進位編碼就是01100001。
<meta name="description" content="網頁簡短描述">
用來寫網頁的簡短描述。
<meta name="keywords" content="網頁關鍵字">
用來放置網頁關鍵字。
3.Body
給瀏覽器讀得部分寫完了,接下來開始寫網頁內容了。網頁真正會跑給使用者看的東西全部都在 <body>
3–1.文句:
<h1>This is headline</h1>
headline
一篇文章會有標題與內文,標題會有六種大小,從 <h1> ~ <h6>,預設字體大小為24pt ~ 8pt,但主要用來分類,不會特地用這個來改字體大小。
先知道html的註解寫法 <!--This is a comment—>
從這邊開始我直接寫在html裡面讓大家熟悉
3–2.超連結:
3–3.目錄:
Jerry Lin, 目前動態:穩定過勞中…
你可以拍多點手👏(壓著就會一直噴小花很舒壓喔!),為你喜歡的內容投票,或是用Like Coin ↓ 抖內我,一起創造更多值得擁有的內容/