天天看點

html+ol+從+開始,從0開始學習HTML5+CSS3(1)

寫在前面的話:之前學過一點基礎的HTML,寒假思考人生的時候覺得還是要把這個撿起來,就買了本書從頭開始學習。看了這麼久的書,總結了一些筆記,慢慢發出來,可能沒有案例,因為發案例挺麻煩的。

第一章,就從最基礎的開始吧。

第一章 HTML5基礎

HTML元素

一、結構元素

用于建構網頁文檔的結構,多指塊狀元素①。

div:在文檔中定義一塊區域,即包含框、容器。

ol:根據一定的排序進行清單。

ul:沒有排序的清單。

li:每條清單項。

dl:以定義的方式進行清單。

dt:定義清單中的詞條。

dd:對定義的詞條進行解釋。

del:定義删除的文本。

ins:定義插入的文本。

h1~h6:标題1到标題6,定義不同級别的标題。

p:定義段落結構。

hr:定義水準線。

header:表示頁面中一個内容區塊或整個頁面的标題。

footer:表示整個頁面或頁面中一個内容區塊的腳注。(包含創作者的姓名、創作日期以及創作者聯系資訊)

section:表示頁面中一個内容區塊,如章節、頁眉、頁腳或頁面中的其他部分。可與h1、h2等元素結合使用,标示文檔結構。

nav:表示頁面中導航連結的部分。

main:表示網頁中的主要内容。

aside:表示article元素的内容之外的、與article元素的内容相關的輔助資訊。

figure:表示一段獨立的流内容,一般表示文檔主體流内容中的一個獨立單元。

article:表示頁面中的一塊與上下文不相關的的獨立内容

二、内容元素

定義了元素在文檔中的語義,一般指文本格式化元素,他們多是行内元素。

span:在文本行中定義一個區域,即行内包含框。

a:定義超連結。

abbr:定義縮寫詞。

address:定義位址。

dfn:定義術語,以斜體顯示。

kbd:定義鍵盤鍵。

samp:定義樣本。

var:定義變量。

tt:定義列印機字型。

code:定義計算機源代碼。

pre:定義預定義格式文本,保留源代碼格式。

blockquote:定義大塊内容引用。

cite:定義引文。

q:定義引用短語。

strong:定義重要文本。

em:定義文本為重要。

三、修飾元素

定義文本的顯示效果

b:視覺提醒,顯示為粗體。

i:語氣強調,顯示為斜體。

center:定義文本居中。

font:定義文字的樣式、大小和顔色。

s/strike:定義删除線。

br:定義換行。

u:非文本注解,顯示下劃線。

big:定義較大文本。

small:表示細則一類旁注,文本縮小顯示。

sup:定義上标。

sub:定義下标。

bdi/bdo:定義文本顯示方向。

四、功能元素

video:定義視訊,比如電影片段或其他視訊流。

audio:定義音頻,比如音樂或其他音頻流。

embed:用來插入各種多媒體,格式可以是MIDI、WAV、AIFF、AU、MP3等。

mark:主要用來在視覺上向使用者呈現那些需要突出顯示或高亮顯示的文字。例如在搜尋結果中向使用者高亮顯示搜尋關鍵詞。

dialog:定義對話框或視窗。

dbi:定義文本的文本方向,使其脫離其周圍文本的方向設定。

figcapton:定義figure元素的标題。

time:表示日期或時間,也可以同時表示兩者。

canvas:表示圖形,如圖表和其他圖像。這個元素本身沒有行為,僅提供一塊畫布,但它把一個繪圖API展現給用戶端JavaScript,以使腳本能夠把想繪制的東西繪制到這塊畫布上。

output:表示不同類型的輸出,比如腳本的輸出。

source:為媒介元素(如video和audio)定義媒介資源。

menu:表示菜單清單。當希望列出表單控件時使用該标簽。

ruby:表示ruby注釋。

rt:表示字元(中文注音或字元)的解釋或發音。

rp:在ruby注釋中使用,以定義不支援ruby元素的浏覽器所顯示的内容。

wbr:表示軟換行。與br的差別:br元素表示此處必須換行;而wbr元素的意思是浏覽器視窗或父級元素的寬度足夠寬(沒必要換行)時,不進行換行,而當寬度不夠時,主動在此處進行換行。

command:表示指令按鈕,如單選按鈕、複選框或按鈕。

details:表示使用者要求得到并且可以得到的細節資訊。可與summary元素配合使用。summary元素提供标題或圖例。标題是可見的,使用者單擊标題時,會顯示出細節資訊。summary元素應該是details元素的第一個子元素。

summary:為details元素定義可見的标題。

datalist:表示可選資料的清單,與input元素配合使用,可以制作出輸入值的下拉清單。

datagrid:表示可選資料的清單,它以樹形清單的形式來顯示。

Keygen:表示生成秘鑰。

progress:表示運作中的程序,可用其來顯示JavaScript中耗費時間的函數程序。

meter:度量給定範圍(gauge)内的資料。

track:定義用在媒體播放器中的文本軌道。

五、表單元素

tel: 表示必須輸入電話号碼的文本框。

search: 表示搜素文本框。

url: 表示必須輸入URL位址的文本框。

email: 表示必須輸入電子郵件位址的文本框。

datetime: 表示日期和時間文本框。

date: 表示日期文本框

month: 表示月份文本框

week: 表示周幾文本框

time: 表示時間文本框

datetime-local: 表示本地日期和時間文本框

number: 表示必須輸入數字的文本框

range: 表示範圍文本框

color: 表示顔色文本框

注:

① HTML将元素分類方式分為行内元素、塊狀元素和行内塊狀元素三種。可用display屬性将三者任意轉換。