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).;

注意权重计算是相加，但是没有进位。