JavaWeb_day2_HTML表單和CSS
1.表單標籤
<form></form>
所有需要提交到伺服器的都需要用<form>標籤括起來
form表單標籤屬性:
action,整個表單提交的位置,可以是一個頁面,也可以是一個後臺Java程式碼
method,表示表單提交的方式(post、get等)
name:最好見名知意,屬性用於對提交到伺服器後的表單資料進行標識,或者在客戶端通過 JavaScript 引用表單資料。
只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。name一定要寫
普通按鈕,提交按鈕,重置按鈕不需要寫name
文字輸入項:
使用者名稱:<input type="text" name="username" size="40px" maxlength="5" readonly="readonly" placeholder="提示資訊" required="required" autofocus="autofocus" disabled="disabled" /><br/>
屬性:name:最好見名知意,屬性用於對提交到伺服器後的表單資料進行標識,或者在客戶端通過 JavaScript 引用表單資料。
只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。name一定要寫
size:文字框大小
maxlength:最多輸入5個字元
readonly:只讀,不可寫
placeholder:提示資訊
required:必填選項,不填不能提交
autofocus:自動獲取焦點標籤
disabled:規定禁用該文字區
密碼輸入項:
密碼:<input type="password" name="password" />
屬性:name:最好見名知意,屬性用於對提交到伺服器後的表單資料進行標識,或者在客戶端通過 JavaScript 引用表單資料。
只有設定了 name 屬性的表單元素才能在提交表單時傳遞它們的值。name一定要寫
確認密碼項:
確認密碼:<input type="password" name="repassword"/>
屬性:name最好和上面的區分
單選項:
性別:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女
屬性:name值必須指定,value值必須要寫,後臺根據value值獲取所選的選項,最好和後面的一樣
checked預設選項
多選項:
愛好:<input type="checkbox" name="hobby" value="java" checked="checked" />java
<input type="checkbox" name="hobby" value="python" />python
<input type="checkbox" name="hobby" value=".net" />.net
屬性:name值必須指定,value值必須要寫,後臺根據value值獲取所選的選項,最好和後面的一樣
checked預設選項
下拉選項:
籍貫:<select name="province">
<option>--省份--</option>
<option value="0" selected="selected">安徽</option>
<option value="1">上海</option>
<option value="2">北京</option>
</select>
屬性:name值必須指定,value值必須要寫,後臺根據value值獲取所選的選項
selected預設選項
檔案型別:
照片:<input type="file" name="file" />
屬性:name值必須指定
文字框輸入:
自我介紹:<textarea name="zwjs" cols="15px" rows="5px">
</textarea>
屬性:name值必須指定,cols:文字區域的可見寬度,rows文字區域的可見行數
隱藏欄位
<input type="hidden" name="id" />
name要寫,value不要寫
2.DIV和CSS
DIV是一個HTML標籤,一個塊級元素(單獨顯示一行),單獨使用沒有任何意義,必須結合CSS來使用,主要用於頁面的佈局
span是一個HTML標籤,一個內聯元素(在一行顯示),單獨使用沒有任何意義,必須結合CSS來使用,主要對括起來的內容進行樣式修飾
CSS是一個樣式層疊表,樣式定義如何顯示html元素,樣式通常儲存在樣式表中
目的:解決內容和表現的分離
HTML是整個網站的骨架
CSS是對整個網站的骨架的內容進行美化
CSS的語法和規範
選擇器{
屬性名1:屬性值1;
屬性名2:屬性值2;
屬性名3:屬性值3;
}
CSS的基本選擇器:
元素選擇器:適用於相同的元素
例:div{
font-size: 20px;
color: pink;
}
類選擇器:適用於多個相同的
例: .div2{
font-size: 30px;
color: red;
}
id選擇器:適用於單個(儘量保持唯一)
例:#div4{
font-size: 50px;
color: gold;
}
CSS的其他選擇器:
層級選擇器:
例:div p{
font-size: 50px;
color: blueviolet;
}
屬性選擇器:
input[type='text']{
background-color: gainsboro;
}
input[type='password']{
background-color:#8A2BE2;
}
CSS的引入方式
內部引入:在head裡寫<style></style>
<head>
<meta charset="UTF-8">
<title>div效果演示</title>
<style type="text/css"(不寫預設的就是帶有type屬性)>
div{
font-size: 20px;
color: pink;
}
</style>
</head>
<body>
</body>
行內引入:在標籤裡寫
例:<div style="font-size: 60px;color: green;">你好44</div>
外部引入:新建CSS檔案
<head>
<meta charset="UTF-8">
<title>div效果演示</title>
<link rel="stylesheet" href="style.css"(要外連的css檔案) type="text/css"(可不寫) />
CSS的浮動
浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
例:#div1{
width: 600px;
height: 100px;
background-color: red;
float: right;
}
清除兩個浮動之間的關係(就是不會受另一個浮動的影響)
#clear{
clear: both;
}
CSS的盒子模型
假設整個區域的height=100px,那麼內容區域(content)的height=100px-padding(10px)*2-margin(20px)*2=40px
CSS的padding(內邊距)屬性:
padding屬性可以是長度值或者百分比,不允許使用負值
各邊都有10個畫素的內邊距值
例:h1{
padding:10px
}
上右下左的順序:
h1{padding:10px 2px 20px 20%;}