Day4:網頁開發學習之路-網頁製作

2022 iThome 鐵人賽

DAY 4

自我挑戰組

網頁開發（html.css）系列第 4 篇

14th鐵人賽

claireyang

2022-09-04 09:04:34

842 瀏覽

分享至

要開始一個網頁之前必須先有一個HTML的基本骨架，在VS Code裡面
按下「! 」，就可選取內建已經預設的內容

VS Code
VS Code

裡面的內容包含<!DOCTYPE html>、<html>、<head>、<body>
<html lang="en">是用來標註網頁的語系，讓瀏覽器能更正確的解析與編碼
例：<html lang="zh-Hant">為繁體中文，最新的語言標籤標記可在以下連結查詢：https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry

<head>裡面的各項標籤包含<title>、<meta>、<style>、<link>、<base>
<meta>用法可以參考前一篇

<title>就是網頁的標籤
<style> 用來設定 HTML 文件的樣式
舉例要將一個h1的標題改為藍色字體，在html標籤中增加style，就可以達到效果

<h1 style="color: blue" >html的基本介紹</h1>

<link>標籤有很多功能（例如 href、media、rel、type）
瀏覽器會根據網頁所使用的屬性判斷這個 link tag 要做什麼用途

href -- 指定需要載入的資源(CSS檔案)的地址URI
media -- 用於為不同的媒體類型指定不同的樣式（默認是all）
rel -- 指定連結型別,設定是指物件和連結目標的關係,可選值, link還可以用Shortcut Icon等
type -- 指定所連線文件的MIME型別，css的MIME是type/css,一般使用type="text/css"

舉例比較常用的情境：
用來嵌入一個外部的CSS，href是指向CSS文件的位置

<link rel="stylesheet" href="./style.css" />

網頁的icon(網頁在瀏覽器上顯示的小圖示)，href是指向圖片的位置

<link rel="shortcut icon" href="./html5.png" />

<base>主要是控制網頁的連結屬性，可以指定網頁頁面的文檔與連結根目錄
也可以指定網頁超連結的開啟方式，HTML base 屬性有 href , target

href 用來設定所有相對路徑的根 URL
舉例將https://ithelp.ithome.com.tw/ 設定為所有相對路徑的根 URL
當我點擊網頁中的❮markdowm❯，就會連結到
https://ithelp.ithome.com.tw/markdowm
當我點擊❮技術文章❯，就會連結到
https://ithelp.ithome.com.tw/articles?tab=tech

<head>
    <base href="https://ithelp.ithome.com.tw/" target="_blank" />
  </head>
  <body>
    <a href="markdown">markdowm</a>
    <a href="articles?tab=tech">技術文章</a>
    <a href="2022ironmanutm_source=ithelp&utm_medium=navbar&utm_campaign=ironman14"
      >2022鐵人賽</a>
  </body>

target 用來設定網頁中點擊連結後開啟方式（另開網頁或直接在相同的網頁開啟）