學習web前端第二天

2021-09-26 19:59:37 字數 3891 閱讀 9723

今天學習的也是html,今天一天就把html所有的內容講完了,下午的時候硬體出了點問題一下午都沒學到什麼東西,但是html算是學完了接下來該學css了.

接下來開始說我們今天學習的內容

首先是**的標籤和屬性

1.table屬性

width是高

height是寬

align是對齊分左對齊left右對齊right中間對齊center

border 外邊框

bgcolor 背景色

background 背景

cellspacing 單元格間距(單元格和單元格的距離) 一般情況寫0

cellpadding 單元格邊距(**邊框與內容的距離) 一般情況寫0

(1)**內tr屬性

align 水平對齊

(left/center/right 左/中/右對齊)對應水平對齊

valign 垂直對齊

(top/middle/bottom 上/中/下)對應垂直對齊

bgcolor 背景色

(2)**內td的基本屬性

width(寬)、height(高)(單位是畫素px或者是%)

align(水平對齊)、valign(垂直對齊)

bgcolor 背景色

background 指定背景

colspan 水平合併 合併多列(就是橫著佔了多個單元格)

rowspan 垂直合併 合併多列(就是豎著佔了多個單元格)

(3)表頭th標籤

是特殊的單元格,文字會自動加粗、居中。它的用法是取代的位置即可(用作表頭第一行)
舉例為:

餐飲型別

主要菜系

** 中餐廳

生猛海鮮

1000元

**主體tbody標籤

**可以在table裡直接用tr和td但是也可以用頁首頁尾和主體來表示簡單來說就是頭身體腳。

thead **頁首(頭部)只能出現一次

tbody **主體可以出現多次

tfoot **頁尾(結尾)只能出現一次

以上三個標籤結合使用,可將**中的一行或幾行合成一組

舉例為:

….….….

二、表單屬性

1.	表單的概念

表單在網頁中主要負責資料採集功能,表單的標記是:2. 表單的屬性

2 method屬性:設定表單的提交方法, 屬性值為get、post提交方式

3 name屬性:設定表單的名稱

4 target屬性:設定表單的開啟方式, 屬性值可以是_blank、_self。_self在原視窗中開啟,為預設值。_blank

在新視窗開啟

3. enctype:預設編碼 或者指定二進位製流 【附件的提交形式】

4. method的值為get:它是通過url來傳遞表單資料的,表單元素的資料在位址列可見,而且有大小限制,傳資料量小一般不大於2kb

method的值為post:它是通過請求正文傳遞表單資料的,url不可見表單元素資料,比較安全,而且沒有大小限制,但往往伺服器會控制

3. 輸入標記

表單元素中輸入標籤是,常用屬性有type(型別)、name(名稱)、value(值)、checked(預設選中)

三、html常用的表單控制項

1.文字框(text)

文字框:主要用於輸入單行文字內容。**如下:

姓名:賬號:

2. 密碼框

密碼框:主要用於輸入一些保密資訊,**格式如下:

密碼:密碼:

分組: 使用者登入

3. 單選框

單選框主要是讓網頁瀏覽者在一組選項裡選擇乙個。

name屬性定義單選框的名稱,單選框都是以組為單位使用的,在同一組中的選項必須使用同一名稱【name="gender"】。

**格式如下:

性別:男

女 效果如下:

性別:男

女4 核取方塊

核取方塊主要是讓網頁瀏覽者在一組選項裡同時選擇多個選項。

選中checked**格式如下:【disabled="disabled"足球】

愛好:讀書聽歌閱讀興趣愛好:足球

籃球球**

擴充套件:隱藏域:

影象域:

5. 檔案域

檔案域主要是讓網頁瀏覽者上傳檔案。

**格式如下:

上傳檔案:6. 提交按鈕

提交按鈕用來將輸入的資訊提交到伺服器。value屬性定義按鈕的顯示文字。

**格式如下:

7. 重置按鈕

重置按鈕用來重置表單中輸入的資訊。**格式如下:

8. 域

影象域標記

**格式如下:

9. 下拉列表

下拉列表主要用於在有限的空間裡設定多個選項。

下拉列表選中狀態給option新增 selected

**格式如下:

…居住城市(下拉列表):

北京上海深圳

廈門10. 文字域標記及屬性

文字域主要用於輸入較長的文字資訊。

**格式如下:效果:

cols屬性:定義文字域的寬度 (列)

rows屬性:定義文字域的高度 (行)

四、html5新增表單控制項

1.	html5文字框及placeholder屬性 

當文字框處於未輸入狀態並且未獲取游標焦點時,模糊顯示輸入提示文字。

**格式如下:

一般主要用於提示輸入等

2. html5文字框型別tel

提供專門用於輸入**號碼的文字框。它並不限定只輸入數字,因為很多的**號碼

還包括其他字元(如+ 、-、(、)等),如86-0536-8888888

**格式如下: pattern 屬性規定用於驗證輸入欄位的模式。模式指的是正規表示式 -->

**號碼:**號碼:3. html5 文字框型別 url **

url型別的input 元素提供用於輸入url位址這類特殊文字的文字框.當提交表單時,如果所輸入的內容是url位址格式的文字,則會提交資料到伺服器,如果不是url位址格式的文字,則不允許提交.

**如下:

4. html email郵件

email型別的input元素是一種專門用於輸入e-mail位址在文字輸入框,在提交表單時,會自動驗證輸入框的值.如果不是乙個有效的e-mail位址,則該輸入框不允許提交該表單.

**如下:

5.html5文字框型別number 數字 max最大值 min最小值 step步長

number型別的input 元素提供用於輸入數值的文字框.我們還可以設定對所接受數字的限制,包括規定允許的最大值和最小值、合法的數字間隔或預設值等。如果所輸入的數字不在限定範圍之內,則會出現錯誤提示。

**如下:

step(步長)屬性值倍數 max最大值 min最小值

6. html5文字框型別date

date型別的日期檢出器用於選取日、月、年,即選擇乙個具體的日期,如2023年3月4日,選擇後會以2016-03-04的形式顯示

**如下:

您的瀏覽器不支援video標籤。

8.音訊

your browser does not support this audio format.

最後我們還講了乙個用表單套**的案例:

(裡面還夾雜了一些js二級聯動是自己多學了一點)

**為:

web前端第二天學習日記

今天了解了html一些常用標籤和css使用方法和選擇器。標記 顯示較工整的資料時建議使用 實現乙個 需要 標記 table 行標記 tr 單元格標記 td 額外可用標記 thead tbody用於設定能快速搜尋的 如果需要顯示 的邊框,就使用border屬性設定,值為固定數值 border 1 實際...

Web第二天學習

總結 在學習的第二天,比較困難的是在框架的巢狀每次都會混肴。這算是我的乙個需要攻克的坎。然後接下來的這些筆記是從我同學的copy過來的,因為他整理的比我的好。在此文最下面會有關於上課的疑問的答疑 在html中get和post的區別 html 一 table標籤 1 tabl屬性 1 tr 行 tab...

Web學習第二天

用來獲取使用者輸入資訊的標籤,其屬性如下 type 屬性值有很多,並且不同的屬性值會顯示出不同的樣式 text 文字框,輸入文字 如何在input中沒有設定type屬性,預設就是text password 密碼框 定義密文字段 radio 單選按鈕 注意 name要寫成一樣,才能做到單一選擇 che...