Day02 html回顧和CSS介紹

2022-08-18 12:18:19 字數 2039 閱讀 2664

昨天內容回顧

1、html的操作思想

** 使用標籤把要操作的資料報起來,通過修改標籤的屬性值來實現標籤內資料樣式的變化

***

2、影象標籤

** 通過html訪問本地,使用絕對路徑,目前有問題

3、超連結標籤

4、**標籤

** 技巧:數裡面有多少行,每行裡面有多少個單元格

** 5、表單標籤

**- action method enctype

- method: get post

** 輸入項

*** 有name屬性

* 普通輸入項 type="text"

* 密碼: password

* 單選:radio    

- name值相同

- value值

* 核取方塊:checkbox

- name值相同

- value值

* 下拉框 select option

* 文字域 textarea

* 隱藏項:type="hidden"

* 檔案: type="file"

* 提交按鈕 type="submit"

* 重置 : reset

* 普通按鈕 type="button"

6、div和span

* div: 自動換行

* span:在一行顯示

css1、css的簡介

* css: 層疊樣式表

** 層疊:一層一層的

** 樣式表:

很多的屬性和屬性值

* 是頁面顯示效果更加好

* css將網頁內容和顯示樣式進行分離,提高了顯示功能。

2、css和html的結合方式(四種結合方式)

(1)在每個html標籤上面都有乙個屬性 style,把css和html結合在一起

- (2)使用html的乙個標籤實現

*(3)在style標籤裡面 使用語句(在某些瀏覽器下不起作用)

@import url(css檔案的路徑);

- 第一步,建立乙個css檔案

(4)使用頭標籤 link,引入外部css檔案

- 第一步 ,建立乙個css檔案

- *** 第三種結合方式,缺點:在某些瀏覽器下不起作用,一般使用第四種方式

*** 優先順序(一般情況)

由上到下,由外到內。優先順序由低到高。

*** 後載入的優先順序高

*** 格式 選擇器名稱

3、css的基本選擇器(三種)

** 要對哪個標籤裡面的資料進行操作

(1)標籤選擇器

* 使用標籤名作為選擇器的名稱

div

* 組合選擇器

- 不同的標籤具有相同的樣式 div,p{}

* 偽元素選擇器

* 超連結的狀態

- 原始 :link

- 懸停 :hover

- 點選 :active

- 點選之後 :visited

4、盒子模型(了解)

* 邊框 border:2px solid red;

上下左右 border-top border-bottom border-left border-right

* 內邊距 padding:20px

上下左右

* 外邊距 margin:20px

上下左右

* 對資料進行操作,需要把資料放到乙個區域裡面(div)

5、布局的漂浮(了解)

float

- left: 後面的div到右邊

- right:後面的div到左邊

6、布局的定位(了解)

position

- absolute

** 從文件流中拖出

- relative

** 不會從文件流中拖出

一般在目錄裡面,標出符號

(********):重點,**看懂,**會寫,**理解

- (****重點中的重點***)

(了解):**看懂

(理解):能夠把原理講清楚

CSS基礎學習day02

一 css布局 float left或right 1.可以把 塊狀元素放在同一行上。2.若 是float right,注意 寫在最前的靠在最右邊。3.若父容器的寬度不足時,會自動換行。4.若是設定了float,脫離文件位置。clear both 清除浮動,使之不占用浮動的位置 overflow hi...

CSS回顧總結(三) HTML簡介

目錄 html hyper text markup language html與xhtml區別 html寫法規範 html網頁的基本結構 標籤 html5標籤分為常規標籤和空標籤兩種 鏈結標籤 html就是超文字標記語言,標準通用標記語言下的乙個應用。超文字 就是指頁面內可以包含 鏈結,甚至 程式等...

css簡單學習總結day02

每個html標籤上有屬性style,用於結合。demo1 style background color aqua color rebeccapurple div 用head裡的標籤實現style。demo2 type text css 在style標籤內,import url css檔案 demo3...