iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
自我挑戰組

網頁前端工程探討系列 第 3

認識HTML(一)

現在大多數人使用網路的方式是瀏覽網頁,透過網頁可以讀取資訊,再經由網頁上的超連結前往網路上的任何地方。
網頁是由HTML語言組成,透過標籤來結構化資訊,也有描述文件外觀和語意的功能。但HTML的缺點就是互動性不足,而且語法較為複雜,所以後來發展出了HTML5,解決了這些問題,HTML5不但簡化了原先HTML語法較為複雜的結構,也提供了許多新的功能標籤。
HTML5新增的標籤:
<section>用來標示文件中的區域
<article>用來標示文件中內容的區域
<main>用來標示文檔或應用的主體內容
<header>用來標示文件中的頁首
<footer>用來標示文件中的頁尾
<nav>用來標示文件中的導覽列
<aside>用來標示文件中的側邊攔
<figuer>用來標示圖片跟影片的區域

【HTML文件結構】
(一) HTML基本上是由元素架構起來的,其中包括了標籤(Tag)、內容(Content)與屬性(Attributes)。
元素又分為二種

  1. 容器元素:
    一般的元素都是使用成對的起始標籤與結束標籤,將要顯示的內容包括起來,標籤的名稱一樣,所不同的是結束標籤會加上「/」的符號。
    格式為:<起始標籤>內容</結束標籤>
  2. 單一元素:
    這類元素只有起始標籤,沒有結束標籤。
    例如:<hr><img>
    HTML元素的屬性
    在HTML元素中可以設定屬性賦予標籤要執行的動作或相關資訊,要特別注意
  3. 屬性都必須設定在起始標籤中
  4. 一個元素可以設定多個屬性
  5. 屬性包含了名稱與值,格式為:
    屬性名稱=”屬性值”

【HTML網頁結構】
以下是一個簡單的HTML5頁面
https://ithelp.ithome.com.tw/upload/images/20210918/20141905QYWA4pjm5A.png

由以上頁面可以看到整份文件是由<html></html>圍繞起來的。
其中包含:<head></head>的網頁資訊區域與<body></body>的網頁內容區域。
<!DOCTYPE html>
文件類型的宣告,HTML5文件必須在一開始即設定DOCTYPE宣告所使用的標準規範
<html></html>
HTML文件的開始與結束
<head></head>
在這個區域提供文件的訊息跟資料。包括文件的標題、內容概述、關鍵字、文件型態等。
<title></title>
HTML頁面的標題(顯示在瀏覽器的標題欄)
<body></body>
放置網頁主要顯示的內容
<html lang=”zh”>:在文件中宣告正確的語系
<meta charset=”UTF-8”>:設定編碼的語法,瀏覽器在顯示內容的時候就不容易產生亂碼。


上一篇
網頁三巨頭:HTML、CSS、JavaScript的關聯性
下一篇
認識HTML(二)
系列文
網頁前端工程探討30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言