HTML note

示範

1.標題

< h1 >標題 < /h1 >

< h2 >標題 < /h2 >

< h3 >標題 < /h3 >

示範

h1

h2

h3

2.水平線

< hr>

3.段落

< p>...< /p>

4.換行

< br>

5.文字效果

< b> ...< /b>
< strong> ...< /strong>

< u> ...< /u>
< ins> ...< /ins>

< i> ...< /i>
< em> ...< /em>

< s> ...< /s>
< del> ...< /del>

示範

加粗
傾斜
~~刪除線~~

6.路徑

絕對路徑:< img src="Users/xxx/projects/.../resource/../.." alt="錯誤時顯示" >

相對路徑:< img src=".../resource/img/圖.png" alt="錯誤時顯示" >

7.標籤

(1)圖片

程式碼:< img src="" alt="" >

src:路徑
alt:失敗
title:鼠標放置時出現的文字
width,height:寬,高

(2)音頻

程式碼:< audio src="" controls autoplay loop >

src:路徑
controls:播放控制
autoplay:自動播放
loop:循環播放

(2)連結

程式碼:< a href="..." target=_self>連結< /a>

target:頁面打開方式
target=_self:當前窗口打開
target=_blank:新窗口打開

(4)表單

input

程式碼:< input type="">

text:文本

程式碼:< input type="text" placeholder="用戶名" name="" id="">
範例:

password:密碼

程式碼:< input type="password" placeholder="密碼">
範例:

radio:單選

程式碼:
< input type="radio" name="choose">yes

< input type="radio" name="choose">no
範例:yes no

checkbox:多選

程式碼:
< input type="checkbox" checked>多選1

< input type="checkbox" checked>多選2
範例:多選1>yes 多選2

file:上傳文件

程式碼:< input type="file" multiple>
範例:

submit,reset,button:按鈕

程式碼:
< input type="submit" value="註冊>"

< input type="reset" value="重置>"

< input type="button" value="普通按鈕>"
範例:

(5)button

程式碼:< button>...< /button>

範例:

(6)select,option:前者為下拉菜單,後者為菜單中的每一項

程式碼:< select name=""id=""> < option>蛋糕 < option>糖果 < option>飲料 < /select>

範例:

(7)textarea:多行文字框

程式碼:< textarea cols="?" rows="?">...< /textarea>

屬性:

cols:文本寬度

rows:文本行數

範例:hiii 你好

(8)列表

屬性:

無順序列表:ul,li

有順序列表:ol,li

自定義列表:dl,dt,dd

程式碼:
< ul>< li>第一< /li>< li>第二< /li>< /ui>

< ol>< li>第一< /li>< li>第二< /li>< /ol>

< dl>< dd>第一< /dd>< dt>第二< /dt>< /dl>

範例:

第一
第二

第一
第二

第一: 第二

(9)表格

屬性:

table:表格整體,可含多個tr

tr:每行表格,可含多個td

td:格,放內容

程式碼:
< table border="1" width="600" heigth="400">
< tr>
< td>性別< /td>
< td>姓名< /td>
< /tr>
< tr>
< td>男< /td>
< td>林小明< /td>
< /tr>
< tr>
< td>女< /td>
< td>林曉美< /td>
< /tr>
< /table>

範例:

性別	姓名
男	林小明
女	林曉美

(10)布局

屬性:

div:一行顯示一個

spa:一行顯示多個

header:網頁頭部

footer:網頁底部

aside:網頁側邊