WEB 前端 Day2 css基礎

2021-09-02 18:51:19 字數 4235 閱讀 8585

1.表單標籤【重點掌握】

作用:可以提交不同的資料到指定的伺服器

標籤::表示表單的範圍【父標籤】

​ 作用:用於採集使用者輸入的資訊

​ 標籤分為三大類:

​ 表單標籤:包含資料提交到的位置【伺服器】,資料的提交方式【get和post】

​ 表單域:用於採集使用者資訊

​ 表單按鈕:提交按鈕,重置吧【復原】按鈕,普通按鈕

​ 屬性:

​ method:提交採用的方法

​ enctype:做檔案上傳的時候需要設定這個屬性,很少用

子標籤:

表示輸入項,可以輸入內容或者選擇內容【子標籤】

​ type:型別

​ text:普通文字

​ password:密碼

​ 注意:可以將輸入的文字隱藏顯示

​ radio:單項選擇框【單選輸入項】

​ checkbox:多項選擇框

​ 注意:單項輸入項和多項輸入項需要新增乙個name屬性,用於識別

​ checked="checked"表示預設選中

​ 都需要新增乙個value屬性,表示需要提交給伺服器的值

​ file:檔案

​ email:郵箱

​ color:顏色

​ date:日期

:表示下拉列表項【子標籤】

​ : 下拉列表項中的選項【select標籤的子標籤】

​ name,value,預設選中:selected="selected"

;文字域【子標籤】

​ cols:列

​ rows:行

​ 注意:通過行和列來定義文字域的大小

表單按鈕:

​ type:按鈕型別

​ button:普通按鈕

​ submit:提交按鈕

​ reset:重置按鈕

**演示:

【面試題:get和post的區別】

相同點:二者都是用於向伺服器提交資料的方式

不同點:

​ b.get請求的安全級別較低,post相對較高

​ c.get請求傳輸資料的效率較高,post則相對較低

​ d.get請求傳輸資料對資料有大小限制,post則沒有

練習:

2.頭標籤

html標籤由兩部分組成:head和body

head標籤就是頭標籤

:頭標籤【父標籤】

​ ;指定瀏覽器標題欄顯示的內容【標題】

​ :設定超連結的基本位置,可以統一設定當前頁面中超連結開啟的方式

​ :設定和頁面相關的一些內容

​ name:關鍵字

​ content:內容

​ charset:設定當前頁面的編碼格式【字符集】

​ :引入外部檔案【css檔案】

**演示:

超連結一

3.框架標籤

:劃分規則【父標籤】

​ rows:按照行進行劃分

​ cols:按照列進行劃分

:具體顯示的頁面【子標籤】

注意:使用框架標籤的時候,不能寫在body中,也不能寫在body外面,使用了框架標籤之後,則需要將body標籤刪除掉【違背了html的規範,很少用  已淘汰】

**演示:

1.概念

為了解決html結構和表現混雜在一起的問題,則引入css這個新的規範來專門負責網頁的表現

html和css的關係:內容結構和表現形式的關係,由html確定網頁的結構內容,通過css確定頁面的表現形式

css:cascading style sheet,層疊樣式表,它用於控制網頁樣式並允許將將樣式資訊和網頁內容分離的一種標記性語言,對於網頁的樣式,推薦使用css

層疊:使用不同的新增方式為同乙個標籤新增不同的樣式,最後將所有的樣式層疊起來,作用於同乙個標籤

**演示:

段落一段落一

段落一段落一

段落一段落一

傳統html設定表現的缺點:

​ a.維護困難【為了修改某個標籤需要花費大量的時間】

​ b.樣式不足【文字間距,段落縮排等都是辦不到的】

​ c.定位困難【整體布局頁面時,html對各個位置的標籤照顧不全面】

2.css與瀏覽器

遵循:保證在常用瀏覽器【ie,firefox,谷歌】中的顯示是相容的

1.css的語法規則

舉例:描述乙個人的特徵,列出一張表

張飛說明:id名稱可以自定義

​ id選擇器為了結合屬性id使用

**演示:

輕輕地我來了

正如你輕輕地走

我揮一揮衣袖

不帶走一片雲彩

優先順序:

hello

2.5屬性選擇器

作用:根據某個標籤的指定屬性匹配

語法:基本選擇器[屬性名]{

基本選擇器[屬性名=值]{

**演示:

aaaa

bbbb

ccccc

dddd

2.6包含選擇器

父子標籤 和 先輩後輩標籤

語法:形式一:查詢父子標籤或者先輩後輩標籤

選擇器1 選擇器2{

形式二:父子標籤

選擇器1 > 選擇器2{

**演示:

第乙個p標籤

第二個p標籤

第三個p標籤

hello

2.7偽類選擇器

語法:

基本選擇器:選項{

說明:選項:hover【懸浮】,before【前面】,after【後面】,first-letter【第乙個字元】,first-line【第一行】

**演示:

世上無難事

只怕有心人

2.8結構選擇器

類似於偽類選擇器,

使用結合了包含選擇器和偽類選擇器

語法:包含選擇器:選項{

說明:選項:first-child【第乙個子標籤】 last-child【最後乙個子標籤】,nth-child【第n個子標籤】 empty【空標籤】 not()【否定】

**演示:

2.9組合選擇器

用於給多個不同的選擇器設定相同的樣式

語法:選擇器1,選擇器2,。。。{

**演示:

拼搏到無能為力

堅持到感動自己

3.css和html的結合方式

3.1行內樣式

**演示:

3.2內嵌樣式

**演示:

3.3鏈結樣式

在head標籤中新增link

**演示:

hello

3.4匯入樣式

匯入樣式的功能和鏈結樣式的功能時完全相同的,只是語法不同

在head標籤中新增style,在style標籤中進行匯入

匯入語法:

​ @import url(css檔案的相對路徑)

**演示:

hello

3.5優先順序問題

**演示:

html和css的結合方式

web前端基礎 css

前言 繼續努力 什麼是css?就是對html進行美化,好比化妝前後的差距。html的塊級標籤 標籤 預設獨佔一行,跟同級兄弟塊豎直排列 標籤 預設同在一行,跟同級兄弟塊橫向排列 塊級標籤只有結合css樣式才有意義!修飾div標籤一般用style屬性並使用樣式,不贊成用align屬性 css的語法格式...

web前端筆記day2

命名規則 1 帕斯卡命名 user name username 2 駝峰命名 user name username 3 匈牙利命名 user name user name form表單中,method屬性中get和post的區別 1 get提交的資料會顯示在url上,不安全 2 post提交資料時則...

web前端基礎之css

w3c 值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。inline block 行內塊元素。區別 w3c overflow 屬性規定當內容溢位元素框時發生的事情 visible 預設值...