html的标签分类————可以上传的数据篇

html的标签可以分为：

　　块级标签：div(白板），H系列（加大加粗，H1—H7，字体一般逐渐变小，一般用作标题），p标签（段落之间有间距）

　　行内标签：span(白板）

此外，标签之间是可以嵌套的。为何存在标签，是为了实现css和js操作（后续会学到）。

 

input系列的标签：

　　input type="text" 　　　　 　 

　　　　　　 ---name属性 value属性 （用于输入文本数据，输入框是固定的大小）

　　input type="password" 　　　

　　　　　　 ---name属性 value属性 （用于输入密码）

　　input type="submit" 　　　 　

　　　　　　 --- value属性 （用于提交）

　　input type="button" 　　　　 

　　　　　　  --- value属性 （只是按钮的功能）

　　input type="radio" 　　　 　　

　　　　　　---单选框 value，checked="checked"(表示默认的属性) ，name属性（name相同表示互斥）

　　input type="checkbox" 　　　

　　　　　　 ---复选框 value，checked="checked"(表示默认的属性) ，name属性（name相同批量获取数据）

　　input type="file" 　　　　 　  

　　　　　　 ---value属性，需要依赖form表单的一个属性，enctype="multipart/form-data"

　　input type="reset" 　　　　 　

　　　　　　 ---重置数据

　　<textarea>默认值<textarea/>  

　　　　　　---通过传递name属性，可以将文本上传，与input type="text"稍微有差异，就是其文本框会根据输入文本的大小进行适配。

　　select 标签　　　　　　　　  

　　　　　　 ---name，可以实现下拉菜单的选择。option value="1"，可以根据value提交到后台，同时可以根据设置size来显示菜单个数，multiple可以实现多个选择。通过selected="selected"可以实现默认值选择。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>
        个人信息调查表
    </h1>
    <form enctype="multipart/form-data">
        <div>
            <p>请选择城市：</p>
                <select name="city">
                    <option value="1">杭州</option>
                    <option value="2" selected="selected">西安</option>
                    <option value="3">上海</option>
                    <option value="4">深圳</option>
                </select>
            <p>请选择性别：</p>
            男：<input type="radio" name="gender" value="1" />
            女：<input type="radio" name="gender" value="2" />
            <p>请选择爱好：</p>
            篮球：<input type="checkbox" name="favor" value="1"/>
            足球：<input type="checkbox" name="favor" value="2"/>
            羽毛球：<input type="checkbox" name="favor" value="3"/>
            <p>请选择文件：</p>
            <input type="file" value="filename"/>
            <p>请输入：</p>
                <textarea name="text">asd</textarea>
        </div>
        <input type="submit" value="提交"/>
        <input type="reset" value="重置"/>
    </form>
</body>
</html>

 

 

　　



　　






		

		
posted @ 
2019-01-24 18:54 
妇愁者 
阅读(386) 
评论(0) 
 
收藏 
举报