目錄
HTML之form表單
功能:
表單用於向服務器傳輸數據,從而實現用戶與web服務器的交互
表單能夠包含input系列標簽,比如文本字段,復選框,單選框,提交按鈕等等
表單還可以包含textarea,select,fieldset和label標簽
表單屬性:
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集） |
| action(*) | 規定向何處提交表單的地址（URL）（提交頁面） |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啟） |
| enctype(*) | 規定被提交數據的編碼（默認：url-encoded） |
| method(*) | 規定在提交表單時所用的 HTTP 方法（默認：GET,可改成POST） |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name） |
| novalidate | 規定瀏覽器不驗證表單 |
| target(*) | 規定action屬性中地址的目標（默認：_self） |
表單元素:
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息。
input
<input>元素會根據不同的type屬性,變化為多重形態
| type屬性值 | 表現行書 |
|---|---|
| text | 單行輸入文本 |
| password | 密碼輸入框 |
| date | 日期輸入框 |
| radio | 單選框 |
| checkbox | 復選框 |
| submit | 提交按鈕 |
| reset | 重置按鈕 |
| button | 普通按鈕 |
| hidden | 隱藏輸入框 |
| file | 文件選擇框 |
屬性說明:
- name：表單提交時的“鍵”，注意和id的區別
- value：表單提交時對應項的值
- type="button", "reset", "submit"時，為按鈕上顯示的文本內容
- type="text","password","hidden"時，為輸入框的初始值
- type="checkbox", "radio", "file"，為輸入相關聯的值
- checked：radio和checkbox默認被選中的項
- readonly：text和password設置只讀
- disabled：所有input均適用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注冊頁面</title>
</head>
<body>
<h2>注冊</h2>
<form action="http://127.0.0.1:8000/index/" method="post" enctype="multipart/form-data">
<p><label for="d1">
用戶名: <input type="text" id="d1" value="tiny" name="username"></label></p>
<p><label>密碼: <input type="password"></label></p>
<p>生日:
<label for=""><input type="date" name="birth"></label>
</p>
<p>
男<label><input type="radio" name="gender" value="male" checked></label>
女<label><input type="radio" name="gender" value="female"></label>
</p>
<p>愛好:
籃球:<label for=""><input type="checkbox" name="hobby" value="basketball"></label>
足球:<label for=""><input type="checkbox" name="hobby" value="soccer"></label>
</p>
<p>個人簡歷:
<input type="file" name="myfile">
</p>
<p>
<input type="button" value="按鈕">
<input type="reset" value="重置">
<input type="submit" value="提交">
<button>我是一個button標簽</button>
</p>
</form>
</body>
</html>
select標簽
<p>省份:
<select name="provence" id="">
<option value="sh">上海</option>
<option value="hz">杭州</option>
<option value="bj">北京</option>
</select>
</p>
屬性說明:
- multiple：布爾屬性，設置后為多選，否則默認單選
- disabled：禁用
- selected：默認選中該項
- value：定義提交時的選項值
label標簽
定義：<label> 標簽為 input 元素定義標注（標記）。
說明：
- label 元素不會向用戶呈現任何特殊效果。
- <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
textarea多行文本
<p>自我介紹:</p>
<p>
<label for=""><textarea name="desc" cols="50" rows="10"></textarea></label>
</p>
屬性說明:
- name：名稱
- rows：行數
- cols：列數
- disable：禁用
前端CSS
CSS介紹
CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。
當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）
CSS語法
每個CSS語法都由兩部分組成:選擇器和聲明.聲明又包括屬性和屬性值.每個聲明之后用分號結束
CSS注釋:
/*這是注釋*/
CSS的幾種引入方式
行內樣式
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p style="color: red">Hello world.</p>
內部樣式
內部樣式就是將CSS樣式集中寫在網頁的<head></head>標簽的<style></style>標簽中,格式如下:
<head>
<meta charset="UTF-8">
<title>內部樣式</title>
<style>
p {
color: red;
}
</style>
</head>
外部樣式
外部樣式就是將CSS樣式寫在另外的CSS單獨文件中,然后在頁面進行引入即可,推薦使用此方式
<link href="mystyle.css" rel="stylesheet" type="text/css/"/>
基本選擇器
元素(標簽)選擇器
p {color: red;}
ID選擇器
#d1 {color: red;}
類選擇器
.c1 {color: red;}
通用選擇器
* {color: red;}
組合選擇器
后代選擇器
div span {
color: red;
}
兒子選擇器
div>span {
color: red;
}
毗鄰選擇器
div+span {
color: red;
}
弟弟選擇器
div~span {
color: red;
}
屬性選擇器
[username] {
color: red;
}
[username='tiny'] {
color: red;
}
span[username='tiny'] {
color: red;
}
分組和嵌套
分組
當多個元素的樣式都一樣的時候,我們沒有必要重復地為每個元素都設置樣式,我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式
div, span, p {
color: red;
}
嵌套
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1 span {
color: red;
}
</style>
</head>
<body>
<div class="c1" id="d1">
<p>ppp2</p>
<span>span</span>
</div>
</body>
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span.c1 {
color: red;
}
</style>
</head>
<body>
<div id="d1">
<p>ppp2</p>
<span class="c1">span</span>
</div>
</body>
注意兩者區別
- .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
- p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
a:link {
color: red;
}
a:hover { /*hover表示的就是懸浮的意思*/
color: black;
}
a:active {
color: orange;
}
a:visited {
color: pink;
}
input:focus {
background-color: orange;
}
span:hover {
background-color: pink;
}
</style>
</head>
<body>
<a href="https://www.luffycity.com">點我點我</a>
<input type="text">
<span>span</span>
</body>
</html>
偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*段落首字母設置特殊樣式*/
p:first-letter {
font-size: 32px;
color: red;
}
/*在段落頭部添加內容*/
p:before {
content: "*";
color: red;
}
/*在段落最后添加內容*/
p:after {
content: "[?]";
font-size: 5px;
color: red;
}
</style>
</head>
<body>
<div id="d1">
<p>ppp2</p>
<span class="c1">span</span>
</div>
</body>
</html>
選擇器優先級
