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%；}