七月 5, 2016 | 前端與Vue

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

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

前言

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

html是殺毀

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

html基本架構

一個完整的html應該如下：

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

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

html標籤介紹

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

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

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

 <title> hello word </title>

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

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

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

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

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

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

<header>：包含該網站之Logo、Menu
<nav>：包含該網站之導覽
<article>：網站內之獨立區塊
<section>：網站之內容區塊
<aside>：補充性資訊標記。如：廣告、貼紙
<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>