「HTML+WIKI(二)」修訂間的差異

出自不錯學群
跳至導覽 跳至搜尋
行 3: 行 3:
 
{{jendo::HTML/簡介與基本規則}}
 
{{jendo::HTML/簡介與基本規則}}
 
==重要的標記、屬性、樣式==
 
==重要的標記、屬性、樣式==
{{jendo:HTML/重要的標記、屬性、樣式}}
+
{{jendo::HTML/重要的標記、屬性、樣式}}
 +
 
 
==用到的英文單字==
 
==用到的英文單字==
 
{{jendo:HTML/英文單字}}
 
{{jendo:HTML/英文單字}}

於 2020年9月20日 (日) 22:37 的修訂

HTML的簡介與基本規則

簡介

  • http 超文件傳輸協定(HyperText Transfer Protocol),其文件格式稱為 HTML(HyperText Markup Language)
  • 柏納李:HTTP 的發明人,在 1990年12月25日 實現第一次的 HTTP 傳輸,1991年8月6日第一個網頁伺服器上線。1994年柏納-李宣布全球資訊網完全免費的,不申請專利權,不徵收專利費,因此,人人都能輕易用上全球資訊網。
  • wiki 是 HTML 的簡記法,一定會翻譯成 HTML ,所以可以從 wiki 頁複製 HTML 段落。

HTML語法的基本規則

HTML 的標籤內容分為三個層級:標籤、屬性、樣式指示

(一)標籤(標記)

  • 標籤必須成對:一般由開始標籤(opening tag)和結束標籤(closing tag)構成一對,如:<×>……</×>其中的×代表標籤命令。以上角括號及斜線均為英文半形。
  • 開始與結束標籤合體(空元素:Empty Element / Void Element):meta(對自身的說明)、img(圖照)、br(換行)、hr(水平線)、input(表單輸入元素),以及 HTML5 video 之下的source、track,寫成<meta />、<img />、<br/>、<hr/>、<input />…

(二)屬性

  • 開始標記命令可以用「屬性」加以修飾,例如 img 標記可以有:
    1. src 屬性,指示圖的位置
    2. width 屬性,指示圖的寬度
    3. height 屬性,指示圖的高度
  • 屬性名後面是屬性值,屬性名與屬性值之間用「=」相連。同標記內兩組屬性是用空白相隔開。
  • 屬性值通常用一對單引號「'」或雙引號「"」包起來,如果屬性值當中不含空白,則引號通常可以省略;如果屬性值當中含空白,則引號絕對不可以省略。
  • class 屬性:引用已經定義的樣式。
  • style 樣式屬性:指示後面的內容應該長什麼樣子

(三)樣式指示

  • style 的值包含的常常超過一項以上的樣式指示
  • 兩組樣式指示以「;」間開
  • 名與值以「:」相連

重要的標記、屬性、樣式

標籤
====
html     超文件(HyperText Markup Language)
head     文件頭
meta     對自身的描述
title    標題
body     本文

h1~h6    標題一級到六級(head)
a        超連結(anchor)
img      圖(image)
p        段(paragraph)
br       跳行(break space)
hr       水平線(Horizontal Rule)

table    表
tr       表內之列(table row)
td       放數據的表內之格(table data)
th       放標題或欄名的表內之格(table header)

ol       有次序的列表(order list)
ul       沒有次序的列表(unorder list)
li       列表項目(list item)

b        字加粗(bold)
u        字畫底線(under)
i        斜體字(italic)

style    宣告樣式(修飾一個超文件)
link     載入另一個檔,如 CSS 檔
span     文字小片段
div      區塊(division)
pre      保留原有斷行及排列之式(preserve)

form     表單

屬性(用=連等號兩邊)
====
http-equiv= http項目
src=      圖照來源(source)
href=     跳往那一個連結(hyper ref)(hyper reference)
target=   跳往瀏覽器的那裡,預設值為本頁的本窗框,值_blank為新的空白頁。
style=    樣式屬性(修飾一個標籤)
width=    寬度,可以用點(px,pt)或長度(cm)或百分比表示
height=   高度,可以用點(px,pt)或長度(cm)或百分比表示
border=   邊框。
align=    靠左或調中或靠右
class=    引用 CSS 類別
id=       賦予標籤惟一的名字
xmlns=    指出 xml 的名字空間
type=     指示檔案的類別
content=  指示 http-equiv 屬性代表項目的值

樣式(用:連冒號兩邊)
====
font-family: 字體
font-size:   字的大小
font-weight: 字有多粗
text-align:  字的對齊方式
color:       字的顏色
width:       寬度
height:      高度
border:      邊框
border-collapse:collapse 合併框線


用到的英文單字

[模板 http://jendo.org/wiki1231/index.php?title=Template:HTML/%E8%8B%B1%E6%96%87%E5%96%AE%E5%AD%97&action=render 讀取失敗:HTTP 404]