html學習之路（二）——form表單和CSS一些基本情況

1.form表單

前後端有數據交互時一般用form表單。

下面是一個form表單的示例：

<form action="day02_submit" method="get" accept-charset="utf-8" enctype="multipart/form-data">
		<p>
			用戶名：
			<input type="text" name="userName" placeholder="輸入用戶名">
		</p>
		<p>密碼：<input type="password" name="password"></p>
		<p>性別：
			<input type="radio" name="gender" value="1">男
			<input type="radio" name="gender" value="0">女
			<input type="radio" name="gender" value="2" checked>保密
		</p>
		<p>愛好：
			<input type="checkbox" name="hobby" value="basketball">籃球
			<input type="checkbox" name="hobby" value="football">足球
			<input type="checkbox" name="hobby" value="badminton">羽毛球
		</p>
		<p>
			生日：<input type="date" name="birthday">
		</p>
		<p>
			<select name="" id="s2">
				<option value="china" selected >中國</option>
				<option value="US" >美國</option>

			</select>
			<select class="c1" name="form1" id="s1">
				<optgroup label="廣東">
					<option id="c1_s1" value="">廣州</option>
					<option value="">深圳</option>
					<option value="">佛山</option>
				</optgroup>
				<optgroup label="江西">
					<option value="">宜春</option>
					<option value="" >吉安</option>
					<option value="">南昌</option>
				</optgroup>
			</select>
		</p>
		<p>
			<textarea name="info" id="t1" cols="30" rows="10"></textarea>
		</p>
		<p>
			頭像：
			<input type="file" name="" value="" placeholder="">
		</p>
		<input type="submit" name="" value="提交">
	</form>

效果圖如下

在這個form表單中存在<input>,<select>,<textarea>,<option>等標籤，其中用的最多的就是input標籤，在這裏我們只使用了標籤的一部分屬性，還有其它屬性未展示。

input 標籤系列（根據type劃分）：
        text
            value 默認值
            placeholder 佔位符，設置佔位內容
            disabled 禁用
        password

        radio 單選框
        checkbox 多選框

        date 日期
        datetime 時間

        file 文件

        button 普通按鈕，多用JS給它綁定事件
        reset 重置
        submit 提交

select 下拉菜單
        selected 默認選中
        multiple 多選（布爾屬性）
    option 具體的下拉選項
    optgroup 分組的下拉框

注意：

form表單提交數據的幾個注意事項：
        1.所有獲取用戶輸入的標籤都必須放在form表單中
        2.action控制着往哪提交
        3.input\select\textarea標籤中必須有name屬性
        4.提交按鈕 input type="submit"
        5.上傳文件時，form表單中的method必須爲Post , enctype必須等於multipart/form-data

 

2.CSS

在HTML中CSS一般用於設置網頁的樣式，通俗點來說就是讓網頁變的更好看。一般來說CSS樣式是單獨寫一個文件，在HTML中通過link引入，這樣做的話可以有利於HTML文檔內容和樣式的解耦。

CSS的語法爲：選擇器 {樣式1；樣式2}

CSS查找標籤的方式(選擇器)
            1. 基本選擇器
                1. 標籤選擇器     適用於 批量的\統一\默認的樣式
                    標籤名字 {
                        要設置的屬性：屬性的值;
                    }
                2. ID選擇器       適用於 給特定標籤設置特定樣式
                    標籤的id {
                        要設置的屬性：屬性的值;
                    }
                3. 類選擇器       適用於 給某一些標籤設置相同的樣式
                    標籤的class值 {
                        要設置的屬性：屬性的值;
                    }
            2. 通用選擇器
                1. * 
                
            3. 組合選擇器
                1. 後代選擇器（使用空格隔開），如：
                    #d1 p{
                        color: red;
                    }
                2. 兒子選擇器（使用大於號），如：
                    選擇所有父級是<div>元素的<p>元素
                    div>p{
                        color: red;
                    }
                3. 毗鄰選擇器（使用+號），如：
                    選擇所有緊接着<div>元素之後的<p>元素
                    div+p{
                        color: blue;
                    }
                4. 弟弟選擇器（使用波浪號），如：
                    選擇第一個div標籤後面所有兄弟p標籤
                    div~p{
                        color: blue;
                    }
            
            4. 屬性選擇器（比較常用的爲以下兩種）
                1. [自定義的屬性名字]
                2. [自定義的屬性名字=""]
            
            5. 分組和嵌套
                1. div,p（分組，使用","隔開）
                2. #標籤id>p（嵌套）

樣式文件優先級
            1. 內聯樣式(直接在標籤裏面寫style) 優先級最高
            2.選擇器都一樣的情況下,誰靠近標籤誰就生效
            3. 選擇器不同時 計算權重來判斷

權重的大小：內聯樣式（1000）> id選擇器（100）> 類選擇器 （10）> 元素（標籤）選擇器(1).;

注意權重計算是相加，但是沒有進位。