七月 5, 2016 | 前端與Vue

成為網頁設計師的第一步:html

html原本是網際網路之間的超文字,隨著網路生態的成熟,他逐漸變成一種文字標籤,他描述了一個網站的結構,並搭配CSS讓瀏覽器呈現出視覺化的網頁。

前言

HTML與CSS是一個網頁設計最基本的技術,相信看過成為網頁設計師的第一步:html與css的讀者們對html應該都有初步的認識了

html是殺毀

HyperText Markup Language:超文件標示語言。
html原本是網際網路之間的超文字,隨著網路生態的成熟,他逐漸變成一種文字標籤,他描述了一個網站的結構,並搭配CSS讓瀏覽器呈現出視覺化的網頁。

很多人會把html當成程式語言,但實際上html只是一種標記式語言而已。

html基本架構

一個完整的html應該如下:

<!doctype html>
<html>
    <head>
        <title>Hello world ! </title>
    </head>
    <body>
           網頁內容
    </body>
</html>

網頁在怎麼華麗,架構一定如上面所說的一樣。 網頁在怎麼簡單,架構一定如上面所說的一樣。

html標籤介紹

doctype:宣告此文件的html版本,需放在整體文件的最開頭。

<!doctype html>:宣告此文件文件html5版本。PS.其他版本宣告方式請參考W3School

html:宣告此份文件內容都是html的標籤。
head:此標籤是放該頁面的相關資訊,如下:

1.title:此標籤中的就是此網頁的標題,若沒設則只會顯示成此網頁所在的網址。

 <title> hello word </title>

2.Meta:讓瀏覽器判定網頁的資訊。

< meta charset="utf-8" >:瀏覽器由此判定此文件是用何種編碼方式。

其餘Meta參數請參考 W3School

3.Javascript 和 CSS:讓網站載入Javascript 和 CSS。

CSS:

<link rel="stylesheet" href="your-style.css">

Javascript:

<script src="your-script.js"></script>

body:此標籤中所寫的內容即會顯示於網頁裡面,排版架構介紹如下:

  1. <header>:包含該網站之Logo、Menu
  2. <nav>:包含該網站之導覽
  3. <article>:網站內之獨立區塊
  4. <section>:網站之內容區塊
  5. <aside>:補充性資訊標記。如:廣告、貼紙
  6. <footer>:包含該網站之版權宣告、 隱私條件 、合作提案...等訊息 以上6個是有各自含義的標籤。

h1~h5:標題標籤。h1是最重要的標題,其次則是h2,以此類推。適當的使用,有利於網頁重點部份突出。

<h1>這是h1</h1>
<h2>這是h2</h2>
<h3>這是h3</h3>

範例請點擊這裡

strong:加粗、加大。作為文字的強調之用。

<strong>Strong text</strong>

範例請點擊這裡

div:網頁中的區塊。透過DIV標籤搭配CSS可以在網頁中創造各個不同的排版。

 <div>
  <p>some text. some text. some text...</p>
 </div>

範例請點擊這裡

span:網頁中的區段。提供了一種添加到文本或文檔的一部分的一個組成,應用在較小的範圍裡。

<span>我是區段</span>

範例請點擊這裡

p:標籤內容就是一個段落。

<p>我是段落</p>

範例請點擊這裡

ul,li:無排序的項目清單列表。是網頁文章內容排版常用到的清單顯示技巧。

<ul>
 <li>列表</li>
 <li>列表</li>
</ul>

範例請點擊這裡

br:換行

範例請點擊這裡

a:連結到外部連結的功能

<a href="http://www.google.com.tw" target="_blank">我是超連結</a>
  • href :放置要外連的網址
  • target:該參數設置在何處打開連結 ,ex._black:開新分頁。詳細的參數請參考這裡
  • rel:定義該網頁與連結之間的關係

範例請點擊這裡

img :放置圖片

<img src ="http://mobilemarketingwatch.com/wp-content/uploads/2016/01/Is-Google-Searching-for-the-  Next-Big-Thing1.jpg"  width="200" heigt="200" alt="google">
  • src :圖片來源
  • width :設定圖片的寬
  • height :設定圖片的高
  • alt : 圖片替代文字

範例請點擊這裡

form:表單,允許使用者在裡面輸入內容的標籤。常搭配input、select使用。
input:輸入欄位,用於蒐集使用者的訊息。
select option:下拉式選單。

<form name="myform" action="index.php" method="get">
  <input type="text" value="5555" width="200px" height="50px"name="mytext ">
  <select name="myselect">
    <option value="1">選擇1</option>
    <option value="2">選擇2</option>
    <option value="3">選擇3</option>
  </select>
  <input type="submit">
</form>
  • form_name:定義form的名稱。
  • form_action:將當前的表單資料傳送到指定的位置。
  • form_method:規定用麼方式傳送資料。ex.get or post
  • input_type:定義input的類型。ex.text:默認。單行輸入的欄位,使用者可以輸入文字。詳細的參數請參考這裡
  • input_value:input的初始值。
  • input_width:設定input寬度。
  • input_height:設定input高度。
  • input_name:設定input名稱。
  • select_name:設定select名稱。
  • option_value:給伺服器還回傳值。

註解:註解是只有在檢視原始碼的時候看得到,一般是給網頁設計人員維護時用的。

<!--我是註解文字-->

正確的使用註解,在跟他人一起開發網站時,能讓別人一目了然你所寫的內容,省去不必要的說明,也有利於未來自己再回頭看這份html時,可以清楚自己寫了些什麼內容。

結論

看完了這篇文章的你,是否對html的架構與標籤用法更加清楚了呢?