b95902HW 板


鑒於助教似乎沒有講解很多有關HTML跟PHP的關係,小弟我就獻醜一下囉。 HTML並不難學,最基本的HTML一行就說完了: 「把想要套用屬性的東西放進標籤裡。」 <標籤> 接下來稍微解說一下標籤的意義。 所謂的標籤就是類似<font></font>為一組的東西,後方的標籤帶有斜線,表示標籤結束 的意思。所謂的把東西放進標籤,大約就是像這樣的意思: <font>hello</font> 這樣就代表我要把文字hello套用一些font標籤的屬性,至於什麼屬性則視標籤而異。 <屬性> 那什麼是屬性呢?可以看成是標籤的一些性質。究竟字型標籤要套用什麼大小?什麼顏色 ?什麼字型?圖片的寬度和高度是多少?圖片的邊框要設成多少? 舉例來說,想要讓hello變成紅色,只要把標籤加入以下的屬性: <font color="#FF0000">hello</font> 這樣就可以把標籤內的文字變成紅色(FF0000是紅色的RGB色碼)。 一個標籤可以有數個屬性,被標籤包住的東西將會套用到所有標籤的屬性。例如: <font color="#FF0000" size=12>hello</font> 就會輸出紅色12點大小的hello。 <網頁的基本> 一個基本的網頁非常簡單,最基本什麼都沒有的網頁是如此: <html> <head></head> <body></body> </html> 在上面的HTML中一共可以看到三個標籤:<html>、<head>跟<body> <html>:告訴瀏覽器"這是html原始碼",然後瀏覽器就會把標籤內的東西當做html處裡。 <head>:這個標籤裡通常擺放網頁的一些資訊,包括語系、標題、css宣告、引入檔案 等。 <body>:這個標籤裡面擺放網頁的真正內容,凡是想要給使用者看見的東西都是寫在這。 接下來試試把網頁增加一點東西,我們在網頁顯示hello,並讓標題列出現hello world! 的文字。我們只需要把修改如下: <html> <head> <title>hello world!</title> </head> <body> hello. </body> </html> 其中,<title>標籤內擺放的是標題列文字。 要注意的是,在HTML的<body>標籤中,不管內容的文字是否經過編排,出來的內容都 是一樣的。也就是說: <html> <head></head> <body> hello! I'm Joe. </body> </html> 跟 <html> <head></head> <body> hello! I'm Joe. </body> </html> 都會輸出一樣的網頁(不會換行),雖然是有標籤可以做到這件事...但並不推薦。 接下來稍微講解一些很容易用到的標籤,可能有不全我想到再繼續補吧XD。 <一般文字處理> <font></font>字型 就是套用所有字型的最基本標籤,在不使用CSS的狀況下只能這樣更動字型。 <font>屬性: color:顏色(可使用RGB16進位碼或是字型顏色的名稱) dir:文字方向,有兩種值: rtl:左向右 ltr:右向左 face:字體名稱 size:字型大小 style:允許使用CSS的樣式規則定義字形 weight:字體粗細,值在100~900間的100倍數正整數 <b></b>粗體 將內容文字變成粗體。 <i></i>斜體 將內容文字變成斜體。 <u></u>底線 將內容文字加入底線。 <del></del> <strike></strike>刪除線 將內容文字加上刪除線。 <h1></h1>(<h1~6>)大標文字 內容文字會變成比正常文字略大的粗體,<h1>是最大的字體,<h6>則是最小。 <sub></sub>下標 <sup><sup>上標 將內容文字以上標或下標顯示,同時字體會較小。 <big></big>大一級 <small></small>小一級 將內容文字字體放大一級或縮小一級。 <strong></strong>重點字體 將內容文字粗體,通常是強調重點用。 <address></address>作者字體 將內容文字斜體略粗,通常是顯示網站作者資訊用的。 <cite></cite>引用字體 將內容斜體,通常是標示引用文字用。 <basefont>自訂預設字體 沒有結束標籤,通常是寫在<head>標籤的裡面,可以指定網頁的預設字型,使用方法 同<font>。 <格式控制> <center></center>置中 將內容置中。 <blockquote></blockquote>縮排 將內容向右縮排40個像素。 <p></p>段落 將內容標記為一段落,會在開頭的位置多加一行空白。這個標籤也可以單獨使用(<p>), 這樣等於是空兩行的意思。 <p>屬性: align:對齊方式,有7種值: absbottom:內容底端與相鄰文字底端對齊 absmiddle:內容中央與相鄰文字中央對齊 baseline:內容底端與相鄰文字底線對齊 bottom:同baseline left:向左對齊(預設值) right:向右對齊 middle:置中對齊 dir:文字方向 style:CSS定義樣式表 <br>斷行 單獨使用,這個標籤可以將內容斷行。 <spacer>空白控制 單獨使用,用來精確的控制空白量,可以用來取代斷行或是空白字元&nbsp。 <spacer>屬性: align:對齊方式 height width:高、寬,值可以是數字或百分比,數字則單位是像素,百分比則是螢幕 寬為單位。 type:決定spacer標籤的顯示模式,可用值有三種: block:依照標籤的寬高設定顯示空白 horizontal:依據size屬性來插入水平空間 vertical:依據size屬性來插入垂直空間 size:指定水平或垂直空白量 <ul></ul>無序列表 <ol></ol>有序列表 建立一份列表,就是所謂的項目符號或是編號,其中的語法如下: <ul> <li>a</li> <li>b</li> <li>c</li> </ul> <ul>或<ol>標籤利用子標籤<li></li>描述每一項用項目符號開始的內容。 <ul>屬性: type:指定項目符號的樣式,可用值有三種: disc:實心圓 circle:空心圓 square:空心方塊 <ol>屬性: type:指定編號樣式,可用值有五種: 1:數字列表(預設值) a:小寫字母列表 A:大寫字母列表 i:小寫羅馬數字列表 I:大寫羅馬數字列表 <li>屬性: value:可以指定該項目的開始編號,後面的項目會接續這個編號。 <nobr></nobr>不斷行 內容將不會斷行,即使是被視窗切到,多餘的文字會造成網頁必須左右捲動。 <div></div>區域 內容將會被裝入一個模擬的區域,共享區域所有屬性。通常是使用id屬性來呼叫CSS樣 式表用的。此外,透過給予其xy座標位置,可以讓區域有浮動的效果。 <div>屬性: align:對齊方式 id:標籤代碼,可以用CSS的id選取器來呼叫之,值是任意文字 style:CSS樣式表,所有有關區域的定位、樣式、寬高等都可以在此設定 <pre></pre>格式化顯示 類似<div>,不過這個區域內的文字會以html碼中的編排作輸出,所以 <pre> aaa aaa aaa </pre> 會輸出 aaa aaa aaa 而不是aaaaaaaaa。 剩下的標籤我另外開個文慢慢打... ※ 編輯: joehuang92 來自: 59.121.11.252 (12/25 22:31) ※ 編輯: joehuang92 來自: 59.121.11.252 (12/25 22:32)
1F:推 sam9595:大推 12/25 22:52
2F:推 silentlich:推~~ 12/25 22:54
3F:推 cyril928:推~~~~~~~ 12/25 23:00
4F:→ TARK:喬喬我愛你 >///< 12/25 23:07
5F:推 scan33scan33:喬喬大好>W< 12/25 23:16
6F:推 tobyhuang:推推推推 12/25 23:22
7F:推 edwardhw:好強大...推一個~ 12/25 23:42
8F:推 princeyan:強者!! 12/25 23:46
9F:推 hideys:大喬你根本是天才 >< 12/26 00:04
※ 編輯: joehuang92 來自: 59.121.11.252 (12/26 00:09)
10F:推 waterwinds:太帥了= =+ 12/26 00:32
11F:推 allcyril:喬喬我愛你 >///< 12/26 00:40
12F:推 kuokuo321:喬喬是神!!!! 12/26 10:45
13F:推 et220870:喬喬...今晚我去你房間...>///<... 12/26 13:07
14F:推 fakewen: 喬喬好色~~ 12/30 12:15
15F:推 yease:太厲害了^^ 01/01 20:18







like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草
伺服器連線錯誤,造成您的不便還請多多包涵!
「贊助商連結」






like.gif 您可能會有興趣的文章
icon.png[問題/行為] 貓晚上進房間會不會有憋尿問題
icon.pngRe: [閒聊] 選了錯誤的女孩成為魔法少女 XDDDDDDDDDD
icon.png[正妹] 瑞典 一張
icon.png[心得] EMS高領長版毛衣.墨小樓MC1002
icon.png[分享] 丹龍隔熱紙GE55+33+22
icon.png[問題] 清洗洗衣機
icon.png[尋物] 窗台下的空間
icon.png[閒聊] 双極の女神1 木魔爵
icon.png[售車] 新竹 1997 march 1297cc 白色 四門
icon.png[討論] 能從照片感受到攝影者心情嗎
icon.png[狂賀] 賀賀賀賀 賀!島村卯月!總選舉NO.1
icon.png[難過] 羨慕白皮膚的女生
icon.png閱讀文章
icon.png[黑特]
icon.png[問題] SBK S1安裝於安全帽位置
icon.png[分享] 舊woo100絕版開箱!!
icon.pngRe: [無言] 關於小包衛生紙
icon.png[開箱] E5-2683V3 RX480Strix 快睿C1 簡單測試
icon.png[心得] 蒼の海賊龍 地獄 執行者16PT
icon.png[售車] 1999年Virage iO 1.8EXi
icon.png[心得] 挑戰33 LV10 獅子座pt solo
icon.png[閒聊] 手把手教你不被桶之新手主購教學
icon.png[分享] Civic Type R 量產版官方照無預警流出
icon.png[售車] Golf 4 2.0 銀色 自排
icon.png[出售] Graco提籃汽座(有底座)2000元誠可議
icon.png[問題] 請問補牙材質掉了還能再補嗎?(台中半年內
icon.png[問題] 44th 單曲 生寫竟然都給重複的啊啊!
icon.png[心得] 華南紅卡/icash 核卡
icon.png[問題] 拔牙矯正這樣正常嗎
icon.png[贈送] 老莫高業 初業 102年版
icon.png[情報] 三大行動支付 本季掀戰火
icon.png[寶寶] 博客來Amos水蠟筆5/1特價五折
icon.pngRe: [心得] 新鮮人一些面試分享
icon.png[心得] 蒼の海賊龍 地獄 麒麟25PT
icon.pngRe: [閒聊] (君の名は。雷慎入) 君名二創漫畫翻譯
icon.pngRe: [閒聊] OGN中場影片:失蹤人口局 (英文字幕)
icon.png[問題] 台灣大哥大4G訊號差
icon.png[出售] [全國]全新千尋侘草LED燈, 水草

請輸入看板名稱,例如:Tech_Job站內搜尋

TOP