Blog

html 基本語法

HTML 文件架構

<!DOCTYPE html>
    1.DOCTYPE宣告
<html>
  <head>
    2.網頁檔頭
  </head>
  <body>
    3.網頁內容
  </body>
</html>

什麼是 DOCTYPE

放在網頁最上面，告知瀏覽器此網頁所使用的 HTML 標籤是什麼版本，請使用這個版本的規範來解析這份文件。

html 根元素

<html> 是網頁的根元素，包含 <head> <body> 兩個子元素。

<html> 元素支援 lang 屬性，該屬性可指定網頁文件所使用的語言，語法如下：

<html lang="zh-Hant-TW">

head 元素裡 meta 元素常用的屬性

<meta charset="utf-8">
<title> HTML 網站</title>
<meta name="keywords" content="">
<meta name="date" content="">
<meta name="description" content="">
<meta http-equiv="refresh" content="300"> <!--300秒更新-->
<meta http-equiv="refresh" content="20";url=>

標題元素

<h1>Headling 1</h1>
<h2>Headling 2</h2>
<h3>Headling 3</h3>
<h4>Headling 4</h4>
<h5>Headling 5</h5>
<h6>Headling 6</h6>

內容元素

<div>This is a division.</div> <!--block 元素>
<span>This is a span.</span> <!--inline 元素>
<p>This is a paragraph.</p>

inline 元素裡只能放 inline 元素

換行、分隔線

<br> <!--換行-->
<hr> <!--分隔線-->

清單元素

項目清單

<ul>
  <li>項目1
    <ul>
      <li>項目A</li>
      <li>項目B</li>
      <li>項目C</li>
    </ul>
  </li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

序號清單

<ol>
  <li>項目1
    <ol>
      <li>項目A</li>
      <li>項目B</li>
      <li>項目C</li>
    </ol>
  </li>
  <li>項目2</li>
  <li>項目3</li>
</ol>

定義清單

<dl>
  <dt>名稱：
  <dd>內容
</dl>

超連結元素

<a href="http://www.com.tw">字串</a>

連結到同一網頁內的特定位置(書籤)

使字 id 屬性建立書籤，例如：
<p id="bookmark1">書籤1</p>
再做超連結
<a href="#bookmark1">超連結</a>

連結電子郵件位址

<a href="mailto:contact@mail.com">聯絡我</a>

圖片元素

<img src="圖片路徑" alt="圖片無法顯示時的字串" title="圖片標題" width="300">

圖檔超連結

<a href="url"><img src="圖片路徑" >圖檔連結</a>

figure / figcaption

  • figure 元素：內容可以是圖片、相片、視訊或是一段引用文用、表格、程式碼…等等。
  • figcaption 元素：表示是 figure 元素的標題，它屬於 figure 元素，必需寫在 <figure> 元素內，一個 <figure> 元素內只需要放置一個 <figcaption> 即可。
<figure>
  <img src="圖片路徑" alt="圖片無法顯示時的字串" title="圖片標題" width="300">
  <figcaption>figure 標題</figcaption>
</figure>

發佈留言