基本HTML (持續更新中)
在Sublime Text上的小撇步
「!+Tab」或「html:5+Tab」召喚出整體架構
前提：有先在Sublime Text內加入Emmet
如果沒有或是還不知道如何加入外掛的話，可以先閱讀下面連結的文章
Sublime Text 先備知識
基本架構
<!DOCTYPE>
<html></html> 定義HTML檔
<head></head> HTML檔的資訊
<title></title> HTML檔的標題
<body></body> 文件的主體
<h1></h1> 定義字的大小 (大)
<h2></h2> 定義字的大小 |
<h3></h3> 定義字的大小 |
<h4></h4> 定義字的大小 |
<h5></h5> 定義字的大小 |
<h6></h6> 定義字的大小 (小)
<p></p> 出現在網頁內的段落
<br> 換行
<hr> 長長的水平線
<!-- --> 註記(類似C/C++語言的/* */)
一些常用的東東
<meta charset="UTF-8> 其實...有人證實，用就對了><
<button></button> 出現按鈕，可添加 align (屬性)
<img> 加入圖片
● src="" 圖源(URL)
● alt="" 圖的替代文字(簡言之就是圖出不來了，網頁就會用這段字替代那張圖)
● title="" 鼠標滑到這張圖上時會浮現出這段文字
● width height="" 長寬(圖出不來時會保持原來大小)
(網頁開啟時，它比較好知道給你多少大小)
(下圖與程式碼：比較 p、div、span)
<header></header> 這是區域元素的的網頁內容標題，而title是整份往頁文件的標題
● title="" 滑鼠移到那個連結時，會跑出一串字
● target="" 可以用"_blank"使點下超連結後開出新分頁
這三者都可以放在div、section裡使用
<li></li> 很直觀地，它可以套<a>，當作內容清單的連結
<ul></ul>
<ol></ol>
<nav></nav> 負責規劃網頁的導覽區域，使用它時就會放其他網站的連結
<section></section> 這個就像一個獨立的段落，理論上使用它就會包含標題
<article></article> 裡面會包含一個或多個section
<aside></aside> 正如字面的意思，它可以拿來使用在文章內的側邊攔或標註框
<footer></footer> 用來放在置底區域，顯示如版權、與作者聯絡相關資訊、其他連結等
● Copyright圖示(圓圈圈內有個c) 可以用 © 表示
一些常用的符號
< <
> >
& &
" "
  的用法
伸縮網頁時想把 Hello my friend 一起搬到下一行（就是黏在一起啦）那就寫 Hello my friend
「!+Tab」或「html:5+Tab」召喚出整體架構
前提：有先在Sublime Text內加入Emmet
如果沒有或是還不知道如何加入外掛的話，可以先閱讀下面連結的文章
Sublime Text 先備知識
基本架構
<!DOCTYPE>
<html></html> 定義HTML檔
<head></head> HTML檔的資訊
<title></title> HTML檔的標題
<body></body> 文件的主體
<h1></h1> 定義字的大小 (大)
<h2></h2> 定義字的大小 |
<h3></h3> 定義字的大小 |
<h4></h4> 定義字的大小 |
<h5></h5> 定義字的大小 |
<h6></h6> 定義字的大小 (小)
<p></p> 出現在網頁內的段落
<br> 換行
<hr> 長長的水平線
<!-- --> 註記(類似C/C++語言的/* */)
一些常用的東東
<meta charset="UTF-8> 其實...有人證實，用就對了><
<button></button> 出現按鈕，可添加 align (屬性)
<img> 加入圖片
● src="" 圖源(URL)
● alt="" 圖的替代文字(簡言之就是圖出不來了，網頁就會用這段字替代那張圖)
● title="" 鼠標滑到這張圖上時會浮現出這段文字
● width height="" 長寬(圖出不來時會保持原來大小)
(網頁開啟時，它比較好知道給你多少大小)
<div></div> 類似<p></p>，但這個是創造網頁區塊用的
● id=""
● class=""
● style=""
● background-color: 區塊底色(ex: background-color:orange)
● border: 可設定外框框的顏色、粗度(ex: border:2px blue solid;)
● padding: 離外框的大小(ex: padding:10px;)
<span></span> 這是不會換行的
● div裡面可以套span，但span裡不能套div
<p>Hello </p> <p>my friend.</p> <hr> <div>Hello.</div> <div>How are you?</div> <hr> <div style="background-color:orange;border:2px blue solid; padding:10px"> Hello. How are you? </div> <hr> <span>Hello.</span> <span>How are you?</span>
(上述code所呈現出的樣子)
<header></header> 這是區域元素的的網頁內容標題，而title是整份往頁文件的標題
<a></a> 可通往其他地方的超連結，裡面可以套div
● href="" 就是連結該網站的網址(URL)● title="" 滑鼠移到那個連結時，會跑出一串字
● target="" 可以用"_blank"使點下超連結後開出新分頁
(下圖與程式碼：a 的應用)
<a href="https://www.facebook.com/ryan.su.946517" target="_blank" title="click here!">
This is my FB.</a>
(上述code所呈現的樣子)
這三者都可以放在div、section裡使用
<li></li> 很直觀地，它可以套<a>，當作內容清單的連結
<ul></ul>
<div> My shopping list(Dot version): <ul> <li>Fruit</li> <li>Pizza</li>
<li>Chicken</li>
<li>Cake</li>
<ul> <li>Eggs</li>
<li>Flower</li>
<li>Sugar</li>
<li>Butter</li>
</ul> <li>Salt</li>
<li>Pasta</li>
</ul> </div>
(上述code所呈現的樣子)
<ol></ol>
<div>
My shopping list(Number version):
<ol>
<li>Fruit</li>
<li>Pizza</li>
<li>Chicken</li>
<li>Cake</li>
<ol>
<li>Eggs</li>
<li>Flower</li>
<li>Sugar</li>
<li>Butter</li>
</ol>
<li>Salt</li>
<li>Pasta</li>
</ol>
</div>
(上述code所呈現的樣子)
<nav></nav> 負責規劃網頁的導覽區域，使用它時就會放其他網站的連結
<section></section> 這個就像一個獨立的段落，理論上使用它就會包含標題
<article></article> 裡面會包含一個或多個section
<aside></aside> 正如字面的意思，它可以拿來使用在文章內的側邊攔或標註框
<footer></footer> 用來放在置底區域，顯示如版權、與作者聯絡相關資訊、其他連結等
● Copyright圖示(圓圈圈內有個c) 可以用 © 表示
一些常用的符號
< <
> >
& &
" "
  的用法
伸縮網頁時想把 Hello my friend 一起搬到下一行（就是黏在一起啦）那就寫 Hello my friend
留言
張貼留言