iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 6
1

終於要開始技術文的分享了,我剛開始學習撰寫網頁的編輯器是用 Subline 3,後來開始使用 vscode ,之後的分享文內嵌的程式碼我會使用 codepen 線上編輯器的服務,至於這幾個關鍵字如果還不知道是什麼東西的話也沒關係,可以自行去 google,因為不是本文要討論的重點,所以暫時不贅述。


HTML5 初始文件環境:
codepen連結
https://ithelp.ithome.com.tw/upload/images/20190912/20119529VAObKouYOl.png
開頭第一行的<!DOCTYPE html>這一小段文字很重要,比較文謅謅的解釋是,此標籤是用來進行HTML文件的版本宣告,講白話一點就是告訴瀏覽器,這個文件是由哪一種 HTML 寫成的,這樣瀏覽器才可以在一開始讀取網頁的時候就認得這個文檔。
再來你從第二行開始會看到這個標籤<html lang=”en”></html>,將<head></head><body></body>包在一起,加上第一行的<html lang=”en”>,就會變以下這樣,這就是一個完整的 HTML 初始環境設置。

<!DOCTYPE html>
<html lang=”en”>
<head>
 <meta charset=”UTF-8">
 <title>Document</title>
</head>
<body>
為了讓網頁有內容所以打這一段字 
</body>
</html>

其中<html lang=”en”></html>網頁的所有內容都必須要被包含在這一個標籤內,再來你看到的<head></head>內是記載很多要給瀏覽器看的重要訊息,除了<meta charset=”UTF-8">此網頁是使用萬國碼 UTF-8 (Unicode Transformation Format)撰寫及<title>Document</title>在瀏覽器顯示網頁名稱,例如:
https://ithelp.ithome.com.tw/upload/images/20190912/20119529UhSzG995u6.png
除了這些還有很常會用到的<link rel=”stylesheet” href=””>用來加載自行撰寫的 CSS 或是導入外部 CSS 框架(之後介紹 CSS 會分享),或是<meta name=”viewport” content=”width=device-width, initial-scale=1.0">這是要撰寫響應式網頁 RWD( Responsive web design) 時必須要的標籤(之後介紹 RWD 時也會分享),還有很多其他的標籤可使用,之後有機會在介紹,大家只要先記得這些即可。


<head></head>之後你就會看到<body></body>標籤,所有的網頁可顯示內容,全部都是包含在這個<body></body>標籤內,這邊會針對幾個很常用的網頁標籤來做介紹,先送上 codepen 如下:
https://ithelp.ithome.com.tw/upload/images/20190912/20119529Vp64bVU9VF.png

  1. <h1>~<h6>
    <h1>~<h6>是網頁的標題標籤,最重要的是就是<h1>只能有一個,對於網頁的 SEO 設定是非常重要的,其他<h2>~<h6>都可以有很多個,但重要性會繼續降低,然後字也會繼續變小,這些標籤都需要結尾標籤做包覆,例如</h1>
  2. <a>是超連結標籤
    可以在網頁中設置一個超連結,點選之後可以連到外部網頁,或是自身網站的其他頁面,要連到的目的地要用標籤屬性href=”https://www.google.com/"來指定,此標籤需要結尾標籤</a>做包覆。
  3. <ol><li><ul><li>是清單標籤
    若要使用條列的方式在網頁內製作一個清單,要先設立<ol>或是<ul>,接著才在後面加上許多的<li>,每一個內容都用<li>包起來,而<ol><ul>的差異就是清單的條列會有(1.2.3)或是(●)條列,此標籤需要結尾標籤</ol></ul></li>做包覆。
  4. <img>加入圖片
    <img>標籤內有一個屬性src=''圖片目的地”是要標明圖片目的地的地方,可以是網址也可以是本機的位置,此標籤可以單獨存在,沒有結尾標籤。
  5. <p>段落標籤
    <p>段落標籤所包覆的文字,通常是網站的主要文字內容,每一個<p>標籤都會直接從新的一開始顯示,就算是網頁原始碼並排寫在一起,每一個<p>標籤都還是會從新的一行開始。
    但若是有一大段文字被包覆在<p>段落中,然後在中間加入了一個<br>標籤,文字則會在<br>標籤後自行換行。
  6. <div><span>排版用標籤
    <div>是區塊元素,只要是在這一個標籤內的內容,都會被視為同一個範圍,而且都 會占用一整個段落,內容不會並排,未來通常會搭配 class 屬性來做 CSS 樣式的設定。
    <span>是行內元素,和<div>不一樣的是,只有被<span>標籤包覆的內容才會自成自己的小範圍,不會佔用整個段落,所以<span>會並排在一起。

今天介紹的 HTML 文件環境以及各常用網頁標籤的說明,請配合 codepen 的原始碼及網頁顯示內容一起觀看,之後會開始介紹一些常用的 CSS 樣式,我們下次見~


上一篇
所以我下定決心要成為軟體工程師了嗎?
下一篇
如何添加 CSS 內容及選擇器
系列文
破釜沉舟的轉職路-37歲從0開始成為一個軟體工程師38

尚未有邦友留言

立即登入留言