WEEK4 Day4 H5表單,css選擇器

2021-10-23 05:16:32 字數 2999 閱讀 4549

今日總結:今天學習的東西比較雜而且單詞量也比較多,不容易記憶。通過今日的學習,學習了h5中的表單新加的屬性、css中的漸進增強和優雅降級、css3中的屬性選擇器、css中的結構性偽類選擇器、ui元素狀態偽類、動態偽類和層次選擇器。1:新增加的type型別

email

urlnumber

range

color

search

time 時間型別

month 月份

week 周

datetime-local 選取本地時間

date 只有年月日

2: 新增的html屬性

min 最小值

max 最大值

required 如果表單沒有輸入內容的情況下,禁止提交

step 確定乙個法定值eg : 3 -6 -3 0 3 6 9

autocomplete 自動提示資訊 屬性值 on/off

placeholder 文字框的提示資訊

autofocus 自動聚焦

pattern 屬性值是乙個 正規表示式(高效的字串處理規則)

novalidate 取消驗證

multiple 選擇(上傳)多個 \ 輸入框裡面把逗號分隔的當作兩個提交的資訊

list屬性 必須和datalist 標籤結合使用,繫結的datalist的id名稱

3:表單裡面新增標籤

< datalist> 做提示資訊的 必須和list屬性結合使用

< option value=""> 可以追加乙個label屬性

< /datalist>

< output for=「關聯的是要做運算的元素的id名稱」> 做輸出的(計算結果的輸出)

css3 存在一些瀏覽器不能識別的語法規則 ( 瀏覽器字首 )為了考慮相容: 低版本 高版本

漸進增強\優雅降級

漸進增強:舉例說明:

需求: 乙個貧窮的小山村,為了能讓所有的村民都能 通過照明工具進行照明,並進行日常生活。

方案:通過通電進行照明。

根據現實情況: 小山村地勢\交通情況, 不能短時間通電

先保證最基本的業務需求 -> 「照明」 -> 每戶發蠟燭(使用者體驗不好)

然後保證基本功能實現之後 -> 通電 ( 提公升使用者體驗度 )

漸進增強過程:先從最基本的版本開始,保證最基本的功能的實現,然後針對性的考慮高版本,提公升使用者體驗.

優雅降級:舉例說明:

需求: 乙個貧窮的小山村,為了保障人均gdp的增長,縮小貧富差距

方案: 劫富濟貧 -> 打土豪.

優雅降級: 開始就構造特別完美的需求方案, 再針對性的 例如:通過減少使用者體驗,向低版本過渡.。

css屬性選擇器: 通過html屬性選擇對應的標籤

1 選擇符[屬性名] 當乙個元素有當前html屬性值名稱則匹配成功.

2 選擇符[屬性名=「屬性值」] 屬性和屬性名都匹配成功才做選中

3 選擇符[屬性~=「屬性值」] 當前屬性的屬性值為乙個詞列表(多個單詞以空格隔開) , 只要有當前指定的詞就能匹配.

4 選擇符[屬性^=「字元」] 當這個屬性值開頭的時候被匹配(只要開頭匹配就行)

5 選擇符[屬性$=「字元」] 當這個屬性值結尾的時候被匹配(只要結尾匹配就行)

6 選擇符[屬性*=「字元」] 只要屬性值裡面包含這個字元就能匹配

7 選擇符[屬性|=「字元」] 屬性值僅有當前字元 或者 以字元-開頭的 (left-con)

結構性偽類選擇器 : 通過第幾個進行查詢

h2:first-child 選中 h2所在 整個 集合裡面 第乙個h2

h2:last-child 選中 h2所在 整個 集合裡面 最後乙個h2

h2:nth-child(第幾個){} 通過第幾個進行查詢 (第幾個) even odd 2n 2n + 1

h2:nth-last-child(倒數第幾個)

h2:only-child 當前集合裡面只有乙個h2才會被選中

h2:first-of-type 選中 h2所在 整個 集合裡面 第乙個h2

h2:last-of-type 選中 h2所在 整個 集合裡面 最後乙個h2

h2:nth-of-type(第幾個){} 通過第幾個進行查詢 (第幾個) even odd 2n 2n + 1

h2:nth-last-of-type(倒數第幾個)

h2:only-of-type 當前集合裡面只有乙個h2才會被選中

總結: 分析:當前同級元素是否為一類,如果非一類的情況下 選用of-type選擇

補充::root{} 選中的是根元素

選擇符:empty{} 當乙個元素沒有任何內容或者任何子元素的時候被選中。

:enabled 表單元素可用的時候執行的樣式

:disabled 表單元素禁用的時候執行的樣式

:checked 表單選中(單選 多選按鈕選中的時候)

::selection 文字選中的時候的樣式.

e**:link**

鏈結偽類選擇器

選擇匹配的e元素,而且匹配元素被定義了超連結並未被訪問過。常用於鏈結描點上

e**:visited**

鏈結偽類選擇器

選擇匹配的e元素,而且匹配元素被定義了超連結並已被訪問過。常用於鏈結描點上

e**:active**

使用者行為選擇器

選擇匹配的e元素,且匹配元素被啟用。常用於鏈結描點和按鈕上

e:hover

使用者行為選擇器

選擇匹配的e元素,且使用者滑鼠停留在元素e上。ie6及以下瀏覽器僅支援a:hover

e:focus

使用者行為選擇器

選擇匹配的e元素,而且匹配元素獲取焦點。

層級選擇器:

1:子選擇器

父元素選擇器》子元素選擇器 選中只是父元素最近一層的子元素。

2:兄弟元素選擇器

元素1+元素2 同級 選中元素1同級離得最近的下面的兄弟元素

3:通用選擇器

元素1~元素2 同級 選中元素1同級下面的所有的元素2

CS50 2016 Week4 學習筆記

以下內容摘抄自 c語言程式設計 第9章 根據馮諾依曼提出的 儲存原理 的計算機工作原理,程式要裝入記憶體後才能進行處理,資料也要裝入記憶體才能進行處理。記憶體是以位元組為單位的一片連續儲存空間,每個位元組都有唯一的編號,這個編號稱為記憶體的 位址 如同人們通過房間號來管理旅館一樣,系統通過記憶體位址...

HTML基礎知識Day4 表單

表單的基本語法 method opst get action result.html type text name 使用者名稱 p type password name 密碼 p type subimt name 提交 value 提交 type reset name 重置 value 重置 for...

牛客國慶集訓派對Day4 H 樹鏈博弈

point 首先,每層的黑點數為偶數的時候,為先手必敗態。首先,沒有黑點,都是0,肯定是先手必敗態。當每層的黑點數為偶數時,a先手,他把乙個黑點變為白色時 假設不動它的祖先們的顏色 b把同層的另乙個黑點變為白色,就回到了每層的黑點數為偶數的時候 即先手必敗態 如果他把一些祖先們的顏色變了,我們還是可...