登錄
登入

心智圖資源庫 HTML

HTML

關於HTML的心智圖，分享了網頁樣式、標籤及屬性的知識，有興趣的可以看看喲。

編輯於2023-05-27 23:46:10

PlotWizard

最近的作品檢視更多>>

bacteria
This is a mind map about bacteria, and its main contents include: overview, morphology, types, structure, reproduction, distribution, application, and expansion. The summary is comprehensive and meticulous, suitable as review materials.
Plant asexual reproduction
This is a mind map about plant asexual reproduction, and its main contents include: concept, spore reproduction, vegetative reproduction, tissue culture, and buds. The summary is comprehensive and meticulous, suitable as review materials.
Reproductive development of animals
This is a mind map about the reproductive development of animals, and its main contents include: insects, frogs, birds, sexual reproduction, and asexual reproduction. The summary is comprehensive and meticulous, suitable as review materials.

HTML

PlotWizard

最近的作品檢視更多>>

推薦給您
大綱

訂單類智慧硬體產品開發流程
- 11
- 1
Deu-Martina
新風換氣機產品開發流程及相關資料
- 4
Deu-Martina
新品開發流程
- 12
Deu-Martina
HTML5
- 12
PlotWizard
WP 心智圖
- 8
奔跑的梅子
云端应用心制图
- 11
江文吉
敏捷開發流程
- 9
LoganBennett_045

HTML

網頁樣式

選擇器

標籤選擇器

標籤名稱{屬性名稱：屬性；屬性名稱：屬性}

類別選擇器

.標籤名{屬性名：屬性；屬性名：屬性}

ID選擇器

#id{屬性名稱：屬性；屬性名稱：屬性}

<pre class="prettyprint linenums prettyprinted"><code class="language-html"><h1 style="font-size:18px">行內式的使用方法</h1></code></pre>

標籤名，.類名，＃ID｛並收集選擇器｝

標籤名.類別名稱｛交集選擇器｝

外部標籤名稱內部標籤名稱｛後代選擇器｝

引入CSS樣式的方式

行內樣式

嵌入樣式

導入樣式

規定目前文件與被連結文件之間的關係，只有stylesheet被所有瀏覽器所適用

子主題

CSS的屬性

類型

字體類型：font-family

字體渲染：text-shadow

字體大小：font-size

字體風格：font-style

oblique微斜

italic傾斜

字體粗細：font-weight

字體大寫：font-variant

字體屬性：font

font{風格粗細大小類型}

文字修飾樣式：text-decoration

底線：underline

刪除線：line-through

顏色：color

背景

背景顏色：background-color

背景圖像：background-image

背景圖片重複方式：bakground-repeat

背景圖片X,Y軸起始位置：background-position

背景關聯：background-attachment:fixed（背景不隨著文字滾動）

區塊

單字間距：word-spacing

字母間距：letter-spacing

垂直與文字對其方式：vertical-align,text-align

首行縮排：text-indent

顯示方式：display

行高：line-height

盒子模型

定義寬高：width,height

內邊距上下左右：padding-top,right,bottom,left

外邊距上下左右：margin-top,right,bottom,left

margin:0px auto;網頁居中

邊框：border

邊框風格：style；邊框厚度：width；邊框顏色上下左右

<pre>border-style:點dotted 實solid 雙double 虛dashed; </pre>

display控制元素的顯示與隱藏

display:block將元素顯示為區塊級元素，前後設定換行

display:inline將元素顯示為航跡元素，先後不換行

display:none將元素隱藏

浮動

float

clear清除浮動

both清除左右浮動

overflow盒子溢出處理

visible內容會被裁剪，被裁剪得內容出現在盒子外部

hidden內容會被裁剪，其餘內容不可見

定位

position

velative相對定位

將出現在它所在的位置上，讓這個元素「相對於」它的起點進行移動

absolute絕對定位

設定為絕對定位的元素框從文件流完全刪除，並相對於其包含區塊定位，包含區塊可能是文件中的另一個元素或初始包含區塊。元素原先在正常文件流程中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個區塊級框，而不論原來它在正常流中產生何種類型的框。

z-index設定層次

清單

項目編號類型：list-style-type

項目編號圖：list-style-image

項目標記位置：list-style-position

inside標記顯示在裡面

onside標記顯示在外頭

超連結偽類

未點選造訪時超連結樣式 a:link

點擊訪問後超連結樣式 a:visited

滑鼠懸浮其上的超連結樣式 a:hover

滑鼠點選未釋放的超連結樣式 a:active

設定滑鼠形狀：cursor

預設遊標：default

超連結的指標：pointer

span{cursor:pointer;}

指示程式正在忙碌：wait

指示可用的幫助：help

指示文字：text

標籤及屬性

<html> 與 </html> 之間的文字描述網頁

<head> 與 </head> 之間的文字是網頁頭部可見內容

<title> 與 </title> 之間的文字是網頁標題

<body> 與 </body> 之間的文字是可見的頁面內容

<h1> 到 </h6> 之間的文字被顯示為標題

與 之間的文字被顯示為段落

換行 <hr/> 水平線

與 與 之間的文字為斜體

與 之間的文字加重

<img/> 與 </img>HTML 影像是透過 <img> 標籤進行定義的。

<pre><img src="圖片位址" width="寬度" height="長度" <code>alt="</code><code>用來為影像定義一串預備的可替換的文字"</ code> title="滑鼠懸停出文字"/></pre>

<a> 與 </a> HTML 連結是透過 <a> 標籤進行定義的。

·······

錨連結（跳到指定標籤）：<a href="#name"></a>

特殊符號

空格

> 大於號

< 小於號

www.w3school.com.cn

UTF-8，GB2312，GBK

清單

<ul><li> 與 </li></ul> 無序列表

屬性type：disc實心圓，square方塊，circle空心圓

<ol><li> 與 </li></ol> 有序列表

屬性type：1aAIi

<dl><dt><dd> 與 </dd>備註</dt></dl> 定義清單

<table> 與 </table> 表格標籤，裡面可以嵌套列表

<th> 與 </th> 定義表頭

<tr> 與 </tr> 定義表格的行

<td> 與 </td> 定義表格的單元

<thead> 與 </thead> <tbody> 與 </tbody> <tfoot> 與 </tfoot>。。。

屬性（水平對齊align：left左對齊，center居中，right右對齊；absmiddle圖片居中對齊 垂直對齊valign：top頂端對齊，middle居中對齊，bottom底端對齊，baseline基線對齊）

水平合併colspan，列表合併rowspan

<frameset> 與 </frameset>(寫在body外面)

屬性（定義框架橫向排序cols="200px,*,100px"縱向排序rows）

<form> 與 </form> 表單標籤，裡面可以巢狀表單元素

如果表單提交是被動的（例如搜尋引擎查詢），且沒有敏感資訊。當您使用 GET 時，表單資料在頁面網址列中是可見的如果表單正在更新數據，或包含敏感資訊（例如密碼）。 POST 的安全性更加，因為在頁面網址列中被提交的資料是不可見的。

<input type="text"> 定義用於文字輸入的單行輸入字段

<input type="password"> 定義密碼框。

<input type="radio"> 定義單選按鈕。

<pre><input type="radio" name="sex"（相同單選按鈕的name要一致） value="female">Female</pre>

<input type="checkbox" name="複選框之間的name要一致"> 定義複選框。

<input type="submit"> 定義提交表單的按鈕。

<input type="reset"> 定義重設表單的按鈕。

<input type="button"> 定義表單的普通按鈕。

<pre><button type="button" onclick="alert('Hello World!')">Click Me!</button></pre>

<input type="file"> 定義檔案選擇框。

<input type="hidden">隱藏域

<select> 定義下拉清單<option> 定義待選擇的選項</option></select>

<pre><select name="cars" size="每次出現的長度"> <option value="volvo" selected = "selected"（預設選取）>Volvo</ option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></pre>

<textarea> 元素定義多行輸入欄位（文字域）</textarea>

<pre><textarea name="message" rows="10" cols="30"> 這是預先定義的文字內容 </textarea></pre>

<datalist> 元素規定預先定義選項清單。 <option value="預先定義內容"></datalist>

<fieldset域><legend域標題>語意化表單</legend></fieldset>

關聯表單

<pre id="line1"><label for="<a class="attribute -value">male</a>">男</label> <input type="<a class="attribute -value">radio</a>" name="<a class="attribute-value">gender</a>" id="<a class="attribute-value">male</a>"/></pre>