网页基础——HTML（补充）
2018-08-14 本文已影响27人
GHope
input标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--表单标签
1、专门用来收集信息的标签
action属性：设置提交信息的位置
method属性：提交方式 - post
-->
<form action="" method="get">
<!--input标签（单标签） -- text（文本输入框）
1.是表单标签
2.type属性：
text - 普通的文本输入框
3.name属性：必须设置（用于提交用户信息）
4.value属性：标签内容
5、placeholder属性：占位符（提示符）
6、maxlength：输入框最多能输入的最大长度
-->
<input type="text" name="username" id="" value="" placeholder="请输入姓名：" maxlength="4"/>
<!--input标签 -- 密码输入框
1.type属性：password --- 输入的值是密文显示
-->
<input type="password" name="password" id="" value="" placeholder="请输入密码："/>
<!--input标签 -- 单选按钮
1.type属性：radio
2、name：同一类型对应的name值必须一样
3、value：设置选中按钮提交的值
4、checked设置为checked，让按钮默认处于选中状态
-->
<input type="radio" name="sex" id="" value="男" checked="checked"/><span >男</span>
<input type="radio" name="sex" id="" value="女" /><span >女</span>
<!--input标签 -- 多选按钮
1.type属性：checkbox
2、name：同一类型对应的name值必须一样
3、value：设置选中按钮提交的值
4、checked设置为checked，让按钮默认处于选中状态
-->
<input type="checkbox" name="interest" id="" value="篮球" /><span >篮球</span>
<input type="checkbox" name="interest" id="" value="足球" /><span >足球</span>
<input type="checkbox" name="interest" id="" value="排球" /><span >排球</span>
<input type="checkbox" name="interest" id="" value="游泳" /><span >游泳</span>
<input type="checkbox" name="interest" id="" value="看电影" /><span >看电影</span>
<input type="checkbox" name="interest" id="" value="阅读" /><span >阅读</span>
<input type="checkbox" name="interest" id="" value="吃" checked="checked"/><span >吃</span>
<!--input标签 -- 普通按钮
disabled 禁止点击按钮
-->
<input type="button" id="" value="登录" disabled="disabled"/>
<!--input标签 -- 复位按钮
将当前所在的form中的所有表单相关标签对应的值，回到最初的状态
-->
<input type="reset" name="" id="" value="重置" />
<input type="file" name="" id="" value="" />
<input type="submit" name="" id="" value="提交" />
</form>
</body>
</html>
下拉菜单和多行文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉菜单和多行文本域</title>
</head>
<body>
<form action="" method="post">
<fieldset id="">
<legend>账号信息</legend>
<input type="text" name="" id="" value="" placeholder="姓名："/>
<input type="text" name="" id="" value="" placeholder="密码："/>
<input type="reset" value="重置" />
</fieldset>
<fieldset id="">
<!--1.下拉菜单-->
<select name="city">
<option value="">成都</option>
<option value="">攀枝花</option>
<option value="">青铜峡</option>
<option value="">北京</option>
<!--selected:设置默认选中-->
<option value="" selected="selected">长安</option>
</select>
<!--2.多行文本域（多行文字输入框）-->
<textarea name="message" rows="2" cols="10" placeholder="请输入意见： " maxlength="200"></textarea>
<input type="reset" value="重置" />
</fieldset>
<input type="submit" id="" name="" />
</form>
</body>
</html>
空白标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
html中标签分为两大类：
块级标签：一行只能有一个（不管标签的宽度是多少）
h1-h6,p,hr,列表标签，表格，form
行内标签：一行可以有多个
a,img,input，下拉列表（select），textarea
div标签：空白标签，没有任何特殊的意义（无语义标签）
-->
<div style="background-color: red;">
我是div1
</div>
<div style="background-color: yellow;">
我是div2
</div>
<div style="background-color:palevioletred">
我是div3
</div>
<span style="background-color: green;">
我是span1
</span>
<span style="background-color: blue;">
我是span2
</span>
<span style="background-color: peru">
我是span3
</span>
</body>
</html>
