HTML的結構(文章測試)

椰子 · 發表於 2011-3-30 00:57:17

本文章最後由椰子於 2011-3-30 14:26 編輯

以下Html 代碼為高階使用者使用，初級入門請參考回覆第一篇的img代碼

<html> ... </html> 之間就是html的內容，有了這個語法就能界定這個是使用了HTML的文件了；
<head> ... </head> 的位置是用來放一些這個HTML文件的設定，而這個範圍內的內容是不會在瀏覽器內顯示出來的；
<body> ... </body> 就是這個檔案的重心，所有要顯示的內容都要放在這裡；
<title> ... </title> 是整個檔案的標題，會顯示在視窗最頂處的標題列。

 這個標籤（tag）能使文章換行
 這個也是一樣，不過它是用來分段的，所以分隔比較大；也可以 ... 來顯示


這是用來設定該段落文字的對齊位置，而align="xxx"就是的參數，這個是置左

這個也是同上，把段落置中

如此類推，這個當然是置右啦！
 .... 也可以 <center> .... </center> 來代替

<pre> 這個是用來把文字的格式保存的標籤
<blockquote>這個可用來把該段文字往右縮排一段距離
<hr>這是分隔線標籤，水平分隔版面。也可以加上屬性：color、size、width、align、noshade

<img src="xxx">插入圖像，xxx為網址名稱

width 及 height
<img src="位置" width="數字" height="數字">
若果圖像不用width和height來指定其長闊，就會用回原來的大小，如果使用了，就會按長闊來放大縮小

alt
<img src="位置" alt="文字">
若果我們把mouse放在圖片上等待一秒，就會出現一行文字，這就是alt的功能了，可作補充、解釋之用。

border
<img src="位置" border="數字">
border是邊緣，可設定它的粗幼度。如果是 0 的話就會隱形

設定字體格式
<h1>文字</h1>
設定文字為標題，被Tag包著的字成為標題，會變得大起來、粗黑些。最細的是<h6>，最大是<h1>。

a) size
這是設定字體大小的參數
b) color
這是設定字體顏色的參數
c) face
這是設定字體字型的參數

文字的其他效果。
a) ... 
這是用來把文字變粗
b) ... 
這是用來把文字變斜
c) ... 
這是用來把文字加上底線
d) <strike> ... </strike>
這是用來把文字劃掉
e) ... 
這是用來把文字提高一些
f) ... 
這是用來把文字下降一些
g) <tt> ... </tt>
這是用來把所有英文字母都變成一樣闊，像打字機的字一樣

超連結的運用
<a> .... </a>

<a href="網頁位置"> 表面文字 </a>
這是用來指示要連結的文件所在。

....這是2004年逛論壇留的資料，拿來測試文章留言，至於文章出處......不是很清楚(汗

椰子 · 發表於 2011-3-30 14:00:26

本文章最後由椰子於 2011-3-30 14:31 編輯

IMG代碼...BB代碼(BBcode)、Discuz!代碼
使用方法：將發文右上角的源碼打勾勾開啟將可看到

它是一種類似HTML的語法，可以為您的文章增加效果或格式化，您可以在文章發表的表格上方使用便捷的BB代碼按鈕。為了讓大家能認識並正確的使用語法，BB代碼必須要有起始標籤及相對應的結束標籤，以下是常用的BB代碼使用範例：

粗體:

[b]粗體[/b]

複製代碼

斜體：

[i]斜體[/i]

複製代碼

底線：

[u]底線[/u]

複製代碼

歡迎加入九藏喵窩(點選此連結)(網頁超連結)：

[url=http://www.dnaxcat.net/dnaxtalk/?fromuid=30]歡迎加入九藏喵窩(點選此連結)[/url](網頁超連結)

複製代碼

登錄/註冊後可看大圖

(貼圖)：

[img]http://statics.plurk.com/e3baa9d0d78c35e955a6b07c39f530fa.gif[/img](貼圖)

複製代碼

引言內容:[quote=作者]作者的文章內容...[/quote]←測試無效，可能是權限不足吧= w=

小型字體：

[size=4]小型字體[/size]

複製代碼

大型字體：

[size=9]大型字體[/size]

複製代碼

顏色(red)：

[color=red]顏色(red)[/color]

複製代碼

(標籤結合應用)
有超連結的圖片

登錄/註冊後可看大圖

[url=http://www.dnaxcat.net/dnaxtalk/?fromuid=30][img]http://i209.photobucket.com/albums/bb294/cocona_photos/NEKOHOME/Signature%20Map/1234548082191.png[/img][/url]

複製代碼

小結：測試了一下，很多代碼是無效化(權限不足或未開放)
簡單列一下所有常用img代碼

BB 代碼列表
[b], [i], [u] 粗體 / 斜體 / 底線
[color] 顏色
[size] 大小
[font] 字體
[highlight] 高亮
[left], [right], [center] 左對齊 / 右對齊 / 居中
[indent] 縮進
[email] Email Linking
[url] 超級連結位址
[thread] 主題連結
[post] 文章連結
[list] 列表 / 高級列表
[img] 圖片
[code] 代碼
[php] PHP 代碼
[html] HTML 代碼
[quote] 引用
[noparse] 停止解析 BB 代碼
[attach] 附件
[color=Red]請留意
BB代碼必須要有起始標籤及相對應的結束標籤，以上範例皆只有起始標籤說明[/color]

複製代碼

其實這裡都有教...
我如何使用Discuz!代碼

星星喵 · 發表於 2011-3-30 21:44:00

連測試都這麼糟糕.......

浮雲浪犬 · 發表於 2011-3-30 22:00:11

是椰子~
一點都不意外(茶

我沒有喵頭可以換(跪)
現在哈啦可以發文了嗎?!
想開個樓@@!!

椰子 · 發表於 2011-3-30 22:27:26

連測試都這麼糟糕.......
星星喵發表於 2011-3-30 21:44

登錄/註冊後可看大圖

很正直呦~~>wo~*

是椰子~
一點都不意外(茶

我沒有喵頭可以換(跪)
現在哈啦可以發文了嗎?!
想開個樓@@!! ...
浮雲浪犬發表於 2011-3-30 22:00

登錄/註冊後可看大圖

可以吧，這裡的哈啦版又沒版主，不用問我啦~~哈喵喵(撇頭)

瓔 · 發表於 2011-3-30 23:03:13

那張圖真的好正(ㄗㄠ)直(ㄍㄠ)！
而且好像比之前的還正(ㄗㄠ)直(ㄍㄠ)耶！！

果然是正(ㄗㄠ)直(ㄍㄠ)椰阿....

admin · 發表於 2011-3-30 23:07:39

{:5_154:} 真想看-完整-的測試...

默貓 · 發表於 2011-3-30 23:12:47

還不夠完(ㄗㄠ)整(ㄍㄠ)嗎？XD

是說，之前發在V3的文章會轉過來嗎？

GINSEI · 發表於 2011-3-31 11:23:06

好久沒玩HTML了，只記得基本的，改天再來試。

憨喵 · 發表於 2011-4-1 19:05:46

感覺好複雜@@
(憨喵的腦袋記憶體容量不足,無法輸入)

		自動登錄	找回密碼
密碼			成為喵居民