自己總結的HTMLcss

2021-08-02 09:42:08 字數 4396 閱讀 3559

css

css是為了修飾html的

css是cascading style sheet(層疊樣式表)的縮寫。是用於(增強)控制網頁樣式並允許將樣式資訊與網頁內容分離的一種標記性語言。 

css不需要編譯,可以直接由瀏覽器執行(屬於瀏覽器解釋型語言)。

命名規則:使用字母、數字或下劃線和減號構成,不要以數字開頭

格式: 選擇器

css中注釋:/* ... */

html中嵌入css的方式三種,1行內,2內嵌3外部鏈入

行內樣式,簡單的說就是寫在html標籤中的樣式,一般專案不用,看起來太亂

格式: 被修飾的內容在html中如何使用css樣式

特點:僅作用於本標籤。

內嵌樣式,簡單的說就是用一對這種是不常用的,一般為了**的簡潔,會把樣式資訊寫到css檔案中,然後再引用.

這個是直接在是直接從外部鏈結乙個css檔案./>

title是定義網頁的標籤

網頁的主體部分常見的標籤,這些是文字標籤

標籤表示格式化輸出,首先,html中的空格和回車是不顯示出來的,但是用這個標籤包裹的內容可以將空格和回車的效果輸出顯示

html的注釋

是水平線,

是換行鏈結標籤

錨點定義和用法

標籤可定義錨。錨 (anchor) 有兩種用法:

通過使用 href 屬性,建立指向另外乙個文件的鏈結(或超連結) 

通過使用 name 或 id 屬性,建立乙個文件內部的書籤(也就是說,可以建立指向文件片段的鏈結) 

元素最重要的屬性是 href 屬性,它指定鏈結的目標。

第一章:三打白骨將

第二章:倒拔垂楊柳

第三章:火燒赤壁

第四章:劉姥姥進大觀園

錨點的原理很簡單,定義幾個a標籤,把要跳轉的id號碼給他,然後通過這個id就能找到要鏈結到的位置

定義和用法

標籤的 target 屬性規定在何處開啟鏈結文件。

如果在乙個 標籤內包含乙個 target 屬性,瀏覽器將會載入和顯示用這個標籤的 href 屬性命名的、名稱與這個目標吻合的框架或者視窗中的文件。如果這個指定名稱或 id 的框架或者視窗不存在,瀏覽器將開啟乙個新的視窗,給這個視窗乙個指定的標記,然後將新的文件載入那個視窗。從此以後,超連結文件就可以指向這個新的視窗。

英雄聯盟官網

target屬性的值1._blank在新視窗中開啟被鏈結文件。

2._self預設。在相同的框架中開啟被鏈結文件。

3._parent在父框架集中開啟被鏈結文件

4._top,在整個視窗中開啟被鏈結文件

5.framename在指定的框架中開啟被鏈結文件

多**相關標籤,

熱區繪製的步驟:

1.img標籤引入一張,注意,影象需要時原大小

2.給img標籤乙個usemap屬性,使用乙個地圖區域

3.然後使用map定義一塊地圖區域,注意,map需要給定id

4.使用area定義乙個圖形的圖區

οnclick="alert('別看了,再看嫁給你!')"/>

:影象標籤

屬性:值:

src:

引入影象的路徑

width:

設定影象的寬度(單位:畫素px)

height:

設定影象的高度(單位:畫素px)

alt:

影象載入失敗時顯示的資訊

title:

滑鼠移入影象時的提示資訊

標籤屬性

值shape

形狀,值有矩形rectangle,圓形circle,多邊形polygon

coords

座標,圓有三個座標,原點佔兩個點,半徑佔乙個長度,

矩形是對角兩個點的座標,

多邊形是有幾個角,就寫幾個點的座標

螢幕座標是從左上角開始的.

標籤音訊標籤:audio

屬性:值:

src:

路徑引入音訊的路徑

controls:

controls

autoplay:

autoplay

border:

數字邊框線粗細

屬性:值:

src:

路徑引入音訊的路徑

controls:

controls

autoplay:

autoplay

height

高度width

寬度標籤為媒介元素(比如 和 )定義媒介資源。

屬性      

值media

media query

srcurl

**相關標籤,

標籤table**:

屬性:值:

含義:border:

畫素值(px)

設定**邊框粗細的

width:

寬度(px)

設定**的寬度

height:

畫素設定**的高度

cellspacing:

畫素設定單元格和單元格之間的間距

cellpadding:

相許設定單元格中的值和單元格邊框之間的間距

table中的標籤:

caption標籤:標題標籤

th標籤:表頭標籤(字型加粗,預設居中)

tr標籤:**中的一行

屬性:值:

align:

對齊方式(left、center、right)

td標籤:**中的乙個單元格

屬性:值:

rowspan:

合併行colspan:

合併列align:

對齊方式(left、center、right)

表單相關標籤--表單標籤

form標籤常用屬性:

*action屬性:提交的目標位址(url)

*method屬性:提交方式:get(預設)和post

get方式是url位址列可見,長度受限制(ie2k 火狐8k),相對不安全.

post方式是url位址不可見,長度不受限制,相對安全.

enctype:提交型別

target: 在何處開啟目標 url。

name:屬性為表單起個名字.html5不支援。用 id 代替。

標籤表單項標籤input定義輸入字段,使用者可在其中輸入資料。在 html 5 中,type 屬性有很多新的值。

表單項中的屬性,可以提供

*type屬性:表示表單項的型別:值如下:

text:單行文字框

password:密碼輸入框

checkbox:多選框 注意要提供value值

radio:單選框   注意要提供value值

file:檔案上傳選擇框

button:普通按鈕 

submit:提交按鈕

image:提交按鈕

reset:重置按鈕, 還原到開始(第一次開啟時)的效果

hidden:主表單隱藏域,要是和表單一塊提交的資訊,但是不需要使用者修改

*name屬性:表單項名,用於儲存內容值的

*value屬性:輸入的值(預設指定值)

size屬性:輸入框的寬度值

maxlength屬性:輸入框的輸入內容的最大長度

readonly屬性:對輸入框唯讀屬性

*disabled屬性:禁用屬性

*checked屬性:對選擇框指定預設選項

accesskey屬性:指定快捷鍵(不常用) (ie:alt+鍵  火狐:alt+shift+鍵)

tabindex屬性:通過數字指定tab鍵的切換順序(不常用)

下拉列表標籤

標籤建立下拉列表。

*name屬性:定義名稱,用於儲存下拉值的

size:定義選單中可見專案的數目,html5不支援

disabled 當該屬性為 true 時,會禁用該選單。 

multiple 多選

*下拉選擇項標籤,用於嵌入到標籤中使用的;

*value屬性:下拉項的值

*selected屬性:預設下拉指定項.

標籤文字域

多行的文字輸入區域

*name :定義名稱,用於儲存文字區域中的值。

*cols :規定文字區內可見的列數。

*rows :規定文字區內可見的行數。

disabled: 是否禁用

readonly: 唯讀

...預設值是在兩個標籤之間

標籤按鈕

您可以在 button 元素中放置內容,比如文件或影象。這是該元素與由 input 元素建立的按鈕的不同之處。

框架分幀框架

行內框架

iframe行內框架:

屬性:值:

src:

引入檔案的路徑

frameborder:

框架的邊框

width:

框架的寬度

height:

框架的高度

html css筆記總結

完整的html結構 樣式的引用 一。內部編寫 哈,我是乙個帥哥 是不是哦,我暈你 我看看行不行。執行結果為 哈我是乙個帥哥 是不是哦,我暈你 我看看行不行。解釋 哈我是乙個帥哥 用的是absolute 絕對定位,它相對於第乙個div來定位,因為第乙個div是它的父級元素,將它包含在裡面。所以它出現在...

HTML CSS基礎總結

自學html和css,學習 為慕課網和w3school。html裡較為容易忘記的有以下 1,html的宣告如下 在xhtml中 宣告如下 html5中最簡便 2.html標籤 表示強調,斜體 表示更強烈的強調,粗體 短文本引用,長文字引用。輸入空格的方法 標籤引入文字 為橫線,預設灰色。一行 多行 ...

html css基礎總結

總結 常用的標籤 標題 段落粗體斜體 上標下標換行符 水平線加粗強調斜體引用 空格列表 有序列表 無序列表 定義列表 標籤 target blank 表示在新的視窗開啟預設 self 格式 jpg png gif h5中的語義標籤圖形和圖形說明 行 標題單元格 屬性 colspan跨列 rowspa...