html css基本知識及應用

2021-10-01 05:29:00 字數 3892 閱讀 8097

基礎知識

action 提交 先執行form表單的提交,然後再執行下乙個

formaction 靈活提交

formmethod

formtarget target屬性從瀏覽器中開啟新的視窗

required 必填項

定義聲音

定義音訊

輸入框下拉列表 select option

html5表單屬性

placeholder 主要用在文字框,規定可描述輸入字段預期值的簡短的提示資訊

autofocus 當為某個表單控制項增加該屬性後,當瀏覽器開啟這個頁面, 這個表單控制項會自動獲得焦點

list 為文字框指定乙個可用的選項列表,當使用者在文字框中輸 入資訊時,會根據輸入的字元,自動顯示下拉列表提示,供使用者從中選擇

pattern 用於驗證表單輸入的內容,通常 html5 的 type 屬性,比如email、tel、 number、url 等,已經自帶了簡單的資料格式驗證功能了,加上 pattern 屬性後, 驗證會更加高效

required 必需在提交之前填寫輸入字段

spellcheck 拼寫檢查,為、等元素新增屬性

multiple 一次上傳多個檔案

maxlength 新增

maxlength:用於規定文字區域最大字元數。

wrap:是否包含換號符(soft/ hard) -->

兄弟選擇器

.box~~p{} 只顯示和box同級的東西,//box後所有的p都會被選擇

.box+p{} 只顯示box的後乙個

屬性選擇器

e[attribute^=value]用於選取帶有以指定值開頭的屬性值的元素

e[attribute=va

lue]

用於選取

屬性值以

指定值結

尾的元素

e[at

trib

ut

e=value]用於選取屬性值以指定值結尾的元素 e[attribute

=value

]用於選

取屬性值

以指定值

結尾的元

素e[a

ttri

bute

=value]用於選取屬性值中包含指定值的元素,位置不限,也不限制整個單詞

偽類選擇器

:root 選擇文件的根元素,html 裡,永遠是元素

:last-child 向元素新增樣式,且該元素是它的父元素的最後乙個子元素

:nth-child(n) 向元素新增樣式,且該元素是它的父元素的第 n 個子元素

:nth-last-child(n) 向元素新增樣式,且該元素是它的父元素的倒數第 n 個子 元素

:only-child 向元素新增樣式,且該元素是它的父元素的唯一子元素

:first-of-type 向元素新增樣式,且該元素是同級同型別元素中第乙個元 素

:last-of-type 向元素新增樣式,且該元素是同級同型別元素中最後乙個 元素

:nth-of-type(n) 向元素新增樣式,且該元素是同級同型別元素中第 n 個元 素

:nth-last-oftype(n)向元素新增樣式,且該元素是同級同型別元素中倒數第 n 個元素

:only-of-type 向元素新增樣式,且該元素是同級同型別元素中唯一的元素

:empty 向沒有子元素(包括文字內容)的元素新增樣式

偽元素選擇器(不常用)偽元素兩個冒號,偽類乙個冒號

:enabled 向當前處於可用狀態的元素新增樣式,通常用於定義表單的樣式或者超連結的樣式

:disabled 向當前處於不可用狀態的元素新增樣式,通常用於定義表單的 樣式或者超連結的樣式

:not(selector) 向不是 selector 元素的元素新增樣式 :target 向正在訪問的錨點目標元素新增樣式

基本應用

盒子屬性

border-radius 設定所有四個邊框半徑屬性的速記屬性

border-radius:15px 50px 30px 5px(四個值)

第乙個值是左上角,第二個為右上角,第三個為右下角,第四個為左下角

border-radius:15px 50px 30px(三個值)

第乙個值是左上角,第二個為右上角和左下角,第三個為右下角

border-radius:15px 50px(兩個值)

第乙個值為左上角和右下角,第二個值為右上角和左下角

border-radius:15px (乙個值)

四個圓角相同

border-image 設定所有邊框影象速記屬性

border-shadow 附加乙個或多個下拉框的陰影

浮動

浮動原理

1.浮動使元素脫離文件普通流,漂浮在普通流之上的。

2.浮動元素依然按照其在普通流的位置上出現,然後盡可能的根據設定的浮動方向向左或者向右浮動,直到浮動元素的外邊緣遇到包含框或者另乙個浮動元素為止,且允許文字和內聯元素環繞它。

3.浮動會產生塊級框(相當於設定了 display:block),而不管該元素本身是什麼。

清除浮動的方法:

1.給浮動元素的後面新增乙個空的塊級元素用clear:both;

例項:浮動

1 2底部版權

定位

相對定位(相對於原位置)

1.需要設定 position:relative(相對定位),

2.它通過 left、right、top、bottom 屬性確定元素在正常文件流中的偏移位置。

3.相對於原位置移動,移動的方向和幅度由 left、right、top、bottom 屬性確定,偏移前的位置保留不動。

4.z-index 層級設定

絕對定位(相對於父類)

1.需要設定 position:absolute(絕對定位),這條語句的作用將元素從文件流中拖出來

2.使用 left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。

3.如果不存在這樣的包含塊,則相對於 body元素,即相對於瀏覽器視窗。

4.z-index 層級設定

固定定位(相對於網頁視窗)

與 absolute 定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,

除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位

的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,這與background-attachment:fixed 屬性功能相同。

例項:

css定位

頁面布局

布局思路:

從整體到區域性

從外向裡

從上至下

從左至右

編寫順序:

1.定位(float position left right bottom top z-index)

2.寬、高、邊距

3.文字樣式

4.背景樣式

5.過渡 動畫

常見問題:

1.亂碼問題 編碼

2.樣式引入無效問題(屬性丟失,路徑錯誤)

3.清除浮動問題

4.定位亂的問題—找絕對定位的父級新增相對定位

5.a標籤滑鼠經過無效問題–a:link a:visited a:hover a:active

例項:頁面布局

logo

search

tel

banner

neirong

footer

唯有一直奮進,方可不負本心。

html ,css基本知識

1.html基本知識 1 定義 html是用來組成靜態基礎頁面的一種標誌語言,它由一系列的元素組成。2 標籤 開始標籤,表示元素從這裡開始起作用。結束標籤,表示元素的結尾。開始標籤,結束標籤與內容相結合就是乙個完整的元素。3 常見標籤 塊級標籤 在頁面中預設以塊的形式展現 行級標籤 在頁面中預設以行...

Audio CODEC 基本知識及應用

一 dac 部分 dac 部分的框圖 數字音訊介面 1 i2s 介面 i2s inter ic sound bus 是飛利浦公司為數字音訊裝置之間的音訊資料傳輸而制定的一種匯流排標準。在飛利浦公司的i2s 標準中,既規定了硬體介面規範,也規定了數字音訊資料的格式。i2s 有3 個主要訊號 資料是2 ...

Git的基本知識及應用

方法一 在windows點選安裝 方法二 安裝 github desktop 檢視配置 git config list git config list show origin 配置使用者資訊 git config global user.name john doe git config global...