HTML 基礎

發表於

HTML基礎架構

在HTML架構中會有三個主要標籤：html、head、body，大部分的標籤(tag)都會有開始和結束標籤相對應，格式如下：

1
2
3
4
5
6
<tagName>content...</tagName>
<html></html>
<head></head>
<body></body>
<h1>Hello world!</h1>

基本的HTML template格式如下：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
 <head>
  <title>My WebPage</title>
  <meta charset="utf-8">
 </head>
 <body>
  ......
 </body>
</html>

  • <!DOCTYPE html>這一行是用來告訴瀏覽器這個檔案是HTML5檔。
  • <html> </html> 用來包裹整個html程式碼的標籤，可以在這個標籤中定義 lang 屬性，來指定這個網頁的語言， e.g. <html lang=”en-US”>
  • <head> </head> 這個標籤像是在載入網頁所需要的資源檔和css樣式等等，常用的標籤有 title, meta, link, script , style等等。
  • <body></body> 這個標籤裡就是拿來放你整個網頁內容的程式碼，會用到的標籤相當多，像是 h1, p, span, a, form, br等等，族繁不及備載。
  • HTML 標籤名不分大小寫，<p>和<P>是一樣的，但是建議一率使用小寫來撰寫。

head 標籤

在head標籤中一般定義了以下幾個標籤來使用:

  • <title>
  • <style>
  • <meta>
  • <link>
  • <script>
  • <base>

title

定義這一頁在Browser Tab上所顯示的名稱。

1
<title>Login Page</title>

style

定義這一頁所使用到的 CSS 樣式資訊。

1
2
3
4
5
<style>
 body {background-color: powderblue;}
 h1 {color: red;}
 p {color: blue;}
</style>

用來連結外部的css檔案。

1
<link rel="stylesheet" href="myStyle.css">

meta

用來定義像是 character set, page description, keywords, author, other metadata等等資訊。

  • character set

    1
    <meta charset="utf-8">

  • description of your web page

    1
    <meta name="description" content="Free Web content">

  • keywords for search engines

    1
    <meta name="keywords" content="HTML, CSS, XML, JavaScript">

  • author of a page

    1
    <meta name="author" content="Derrick Chao">

  • refresh document every 30 seconds

    1
    <meta http-equiv="refresh" content="30">

  • Viewport

HTML5 新增的這個屬性，隨著智慧型手機普及為了調整網頁在不同裝置上顯示的大小，可藉由這個Viewport設置達到調整。
width根據裝置螢幕寬度設置。
initail-scale初始載入時的縮放比。

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

script

用來定義client-side 的Javascripts，下面範例是用Javascript將 “Hello JavaScript!” 寫入 html id為demo的元素中。

1
2
3
4
5
<script>
function myfunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!"
}
</script>

base

用來定義這一個頁面常用到的預設網址，可用在此頁的所有link之中。

1
2
3
4
5
6
7
<head>
  <base href="https://www.w3schools.com/images" target="_blank">
</head>
<body>
  <img src="stickman.gif" width="24" height="39" alt="Stickman">
  <a href="https://www.w3schools.com/">W3Schools</a>
</body>

body標籤

在 body 裡面主要是顯示整個網頁內容的程式碼，這會用到的標籤種類較多，先簡單列一些基本的標籤：

  • Headings
  • Paragraphs
  • Links
  • Images

Headings

Headings定義了六種大小的標籤h1 ~ h6， h1 字體為最大，h6為最小的字體。

1
2
3
4
5
6
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>

Horizontal Rules，用來顯示水平線可以切分內容。

1
<hr>

Paragraphs

<p>用來顯示一個段落的文字，內容中多餘的空白或是行數都會被瀏覽器移除。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<p>This is a paragraph!</p>
<!-- 下面這兩個顯示會是一樣的 -->
<p>
This is a line
contains a lot of lines
in the source code.
</p>
<p>
This is a      line
contains   a     lot of lines
in the       source code.
</p>
<!-- This is a line contains a lot of lines in the source code. -->

Line Break：<br>，可以用來換行。

1
2
3
4
5
6
<p>This is<br>a paragraph<br>with line breaks.</p>
<!-- 
This is
a paragraph
with line breaks.
-->

Syntax

1
2
3
4
<a href="url">link text</a>
<!-- Example -->
<a href="https://www.w3schools.com/html/">Visit HTML tutorial</a>

href:設定要連結網站的URL。
link text:顯示超連結的文字。

Local Links
local link的url會以relative URL來做為參考。

1
<a href="html_images.asp">Html Images</a>

Links - target Attribute
用來決定開啟link時，要以什麼方式呈現，有以下五種：

  • _blank - Opens the linked document in a new window or tab
  • _self - Opens the linked document in the same window/tab as it was clicked (this is default)
  • _parent - Opens the linked document in the parent frame
  • _top - Opens the linked document in the full body of the window
  • framename - Opens the linked document in a named frame
1
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Links - Image as Link
以圖片當作link的顯示。

1
2
3
<a href="default.asp">
  <img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;">
</a>

Links - Create a bookmark
Bookmark提供User在瀏覽某頁時，可以跳轉到文章中的某段落。

  1. Create a bookmark with id attribute.

    1
    <h2 id="C4">Chapter 4</h2>

  2. Add a link to the bookmark with the same page.

    1
    <a href="#C4">Jump to Chapter 4 </a>

  3. Or add a link to the bookmark from another page.

    1
    <a href="html_demo.html#C4">Jump to Chapter 4</a>

Images

Syntax

1
<img src="url" alt="some_text" style="width:width;height:height;">

  • img tag不需要結束標籤
  • alt 的文字是當圖片無法顯示時，會顯示給User看的文字。
  • style 用來定義圖片的寬高
    1
    2
    3
    <img src="html5.png" alt="HTML5 icon" style="width:100px; height:100px;">
    <!-- 也可以寫成這樣 -->
    <img src="html5.png" alt="HTML5 icon" width="100" height="100">

記得圖片都要定義width和height。
設定width和height時，建議使用style來做設定，才不會被外部的styles sheets所更改。
支援Gif 動態圖示。

Images Floating
可以透過 CSS 的 float property來讓圖片靠在文字左或右。

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

Reference

W3C School HTML