<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
1) action属性: 提交路径(接口)
2) methon属性: 提交方式(post/get)
-->
<form action="" method="post">
<input type="submit" value=""/>
</form>
<input type="text" id="" value=""/>
<input type="submit" id="" value="发送"/>
<!--2.input标签
input标签是表单相关标签，可以在form标签中使用,也可以单独使用
1) type
input标签会因为type的不同，功能完全不一样
2) name - 区分;提交(相当于字典的key)
要不要给这个属性赋值，主要看:1)需不需要区分不同的内容2)需不需要提交input标签中的值
3)value
value的意义会根据type值的不同而不一样;但是表单提交的时候提交的都是value的值
-->
<form action="" method="get">
<!--1)文本输入框 text
a.value属性 - 给这个属性赋值是在设置输入框的默认值;修改输入卡中的内容会改变这个属性的值
b.placeholder - 输入框为空的时候的默认显示信息
c.maxlength - 输入框最多能输入的内容的长度
-->
<font>账号:</font>
<input type="text" name="userName" id="" placeholder="请输入手机号" maxlength="6"/><br/>
<!--2)密码输入框 - password
-->
<font>密码:</font>
<input type="password" name="pw" id="" value="" maxlength="10" />
<input type="submit" value="提交" />
<!--3)单选按钮 - radio
a.name属性 - 如果多个玄学是一组数据必须保证它们的name属性值一样才能做到多个选项单选
b.value属性 - 不能
c.checked属性 - 给这个属性赋值为checked让按钮处于默认选中状态
补充:可以通过将label的for属性和input的id属性保持一致，让label和input进行关联
-->
<font>性别</font>
<input type="radio" name="sex" id="sex1" value="男" checked="checked" /><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2" value="女" /><label for="sex2">女</label><br/>
<!--4)复选按钮
-->
<input type="checkbox" name="interest" id="in1" value="游戏"/><label for="in1">游戏</label>
<input type="checkbox" name="interest" id="in2" value="旅游"/><label for="in2">旅游</label>
<input type="checkbox" name="interest" id="in3" value="餐饮"/><label for="in3">餐饮</label>
<input type="submit" value="提交" /><br>
<!--5)普通按钮 - button
value属性 - 按钮上显示的内容
补充:button标签
-->
<input type="button" id="" value="登录" />
<button>登录</button>
<button><img src="img/aaa.ico"/></button><br/>
<!--6)重置按钮 - reset
重置当前重置按钮所在的form标签中的所有相关标签的值
-->
<input type="reset" id="" value="重置" /><br/>
<!--7)提交按钮 - submit
以'name=value'值的方式提交当前form标签中的内容
-->
<input type="submit" value="提交" />
<input type="color" value="" />
</form>
</body>
</html>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="get">
<select name="privince">
<option value="四川省">四川省</option>
<option value="湖北省">湖北省</option>
<option value="湖北省">湖北省</option>
<option value="河北省">河北省</option>
<option value="福建省">福建省</option>
</select>
<select name="city">
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="绵阳">绵阳</option>
<option value="乐山">乐山</option>
<option value="眉山">眉山</option>
</select>
<select name="city">
<optgroup label="四川省">四川省</optgroup>
<option value="成都">成都</option>
<option value="南充">南充</option>
<option value="乐山">乐山</option>
<optgroup label="河北省">河北省</optgroup>
<option value="邯郸">邯郸</option>
</select>
<input type="submit" value="提交" />
<!--2.多行文本域 textarea
提供一个可以换行输入的输入框
rows属性 - 行数，影响输入框的默认高度
cols属性 - 列数，影响输入框的宽度
maxlength属性 - 设置最大长度
autofocus属性 - 值设置为autofocus,页面刷新和加载的时候自动成为焦点
-->
<textarea autofocus="" name="comment" placeholder="评论11111111"></textarea>
<input type="submit" value="提交" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
-->
<div>
<a href="http://www.zol.com.cn">中关村在线</a>
</div>
<div>
<a href="https://www.baidu.com">百度一下</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--2.内部样式-->
<style type="text/css">
/*这个里面写css代码*/
div{
color: pink;
background: deepskyblue;
}
h1{
color: yellow;
background: yellow;
}
</style>
<!--外部样式-->
<link rel="stylesheet" type="text/css" href="css/01-test1.css" />
</head>
<body>
<!--1.内联样式-->
<p style="color:red; font-size: 30px;">hello</p>
<p style="background: rgba(255,0,0,0.5);">我打我自己</p>
<div>我秦始皇打钱</div>
<h1>我是传奇</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>我是传奇1</p>
<div id="">
<h1>我是传奇3</h1>
<p>我是传奇2</p>
</div>
<p>我是传奇4</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*1)link*/
a:link{
color:rgb(150,150,150);
}
/*#a1:link{}*/
a:visited{
color: greenyellow;
}
a:hover{
color: red;
font-size: 30px;
}
p:hover{
background: lightyellow;
}
a:active{
color: deepskyblue;
}
button:active{
color: deepskyblue;
}
</style>
</head>
<body>
<a id="a1" href="https://www.baidu.com">百度一下</a>
<p>段落</p>
<button>按钮</button>
<a href="05-选择器.html">打开选择器</a>
</body>
</html>
