︿
✖ CLOSE

HTML基本介紹及語法介紹篇

2 年 之前│
Jin

本系列文章是要介紹Web網頁以及WordPress佈景主題製作方法,因為這兩種製作方法皆有很大的關聯性,本篇會先來介紹最基本的html架構及語法標籤。

先介紹一下一些HTML基本標籤語法概念。

網頁的標籤開始 <語法標籤> 內容 </語法標籤> 加上斜線符號則代表結束。

目前大部分主流網頁都已經逐漸使用HTML5撰寫,所以實際上HTML5的標籤來做教學,但是還是會提及到一些常見的html標籤。

HTML5 結構

<header>

 <nav>…</nav>

  <section>…</section>

<article>…</article>

<aside>…</aside>

<footer>…</footer>

以下為HTML結構標籤代表的意思說明

<!DOCTYPE html>

則代表宣告這個網頁是一個 html5 網頁,將它放置在網頁的最上方。

<header>…</header>

用於網頁頂部、頂部logo、網站資訊、標記章節標題、名稱,可以使用多次、每個區域。

<nav>…</nav>

通常用於選單、導覽列。

<article>…</article>

獨立的內容、每篇文章、文章每篇留言、相關性,<article> 主要是使用於獨立的區塊,所以當然也可以包含許多的 <section> 區塊 

<section>…</section>

類似於內容章節、文章的段落、不同類別的區塊,<section> 可以包含 <article>,但如果有獨立內請用 <article>,此外 <section> 不等於 <div> 不適用於排版,但若需要排版請改為 <article> 取代,或者還是用 <div> 吧。

<aside>…</aside>

通常用於側邊欄位。

<footer>…</footer>

通常用於網頁底部欄位、版權資訊。

HTML常見標籤語法

<html>…</html>

則代表告訴瀏覽器這是一個 html

<head>…</head>

通常放置標題、JS 語法、檔案CSS 樣式表meta 資料等等…

<body>…</body>

通常放至於 html 的內容,如:<div>、<nav>、<header>、<article>⋯等等標籤。

<div>…</div>

為區塊標籤,常使用於排版。

<title>…</title>

為標題標籤,常使用於標題。

其餘常見的語法(陸續會整理在下方)

字體大小相關

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>
<h6>h6</h6>

字體粗細相關

<strong>粗體</strong>

粗體

▪ 相關文章