表单：
<body>
<!--form表单 主要用来收集用户信息 表单中的每一个元素叫控件 -->
<form action="www.baidu.com" method="post">
<!--表单控件 类型 h4 h5 类型+属性-->
姓名：<input type="text" name="username" placeholder="请输入姓名"><br><!--文本框 用户输入的是字符
标点击叫聚焦 鼠标离开叫离焦
必须要有name属性 用户输入的是name属性的value值
placeholder="请输入姓名"，用来写一些默认的属性值
-->
密码: <input type="password" name="userpasswd" maxlength="10"><br>
<!--maxlength="10" 密码最大长度-->
电话号： <input type="tel" maxlength="11" name="usertel" required><br>
<!--maxlength="11" 密码最大长度
type="tel" 专用于移动端 专门用来打来移动端键盘
required表明这个选项不能为空，必须填上，要不然无法提交
-->
邮箱： <input type="email" name="useremail"><br>
性别： <input type="radio" name="sex" value="0">男 <input type="radio" name="sex" value="1">女 <br>
<!--男女可以双选
name="sex" 男女都加上这个属性name的值一样这样就不会双选了
传给后台的value的值为0或1
-->
爱好：
游泳：<input type="checkbox" name="hobby" value="1">
吃： <input type="checkbox" name="hobby" value="1">
喝： <input type="checkbox" name="hobby" value="1">
睡觉：<input type="checkbox" name="hobby" value="1"><br>
<!--
type="checkbox" 复选框，可以多选
复选框同name属性
传给后台的是value值
-->
颜色： <input type="color" name="color"><br>
年龄： <input type="number" name="year" max="10" min="0"><br>
<!--max="10" min="0" 设置年龄的最大最小值-->
出生日期： <input type="date" name="birthday">
<input type="time" name="time">
<input type="range" max="100" min="0" value="20"><br>
<!--选择年月日 时分-->
<!--进度条-->
分数：<meter max="100" min="0" low="60" high="90" value="70" style="width:200px"></meter>
<br>
<!--
low=""设置低分
high="90"设置高分
value="50"默认值，默认值不同，进度条颜色不同
style="width:200px" 设置进度条总长度
-->
<input type="image" src="3.png"><br>
<!--提交图片-->
评价：<input type="search"><br>
<!--可以选择文本中的X号把文本中的内容删除重写-->
<!--提交按钮 type="submit" 上面默认有提交标识-->
<input type="reset" value="重置">
<!--重置按钮
默认value值为重置，重置整个表单
-->
<input type="submit" >
</form>
</body>表单属性：
<body>
<!--action:数据的提交地址
method 提交方式 get post
get:默认提交方式,将数据显示到地址栏上 不安全，一般get不做数据传递，而是用来做请求 作用：请求一个界面
post:安全 提交的数据会在请求头上 network 鼠标单击request header 提交的时候信息不会在地址栏上显示
-->
<form action="01.java" method="get">
<fieldset style="border: 2px solid red"><!--给表格加边框-->
<legend>学生档案</legend><!--给框框加文字头-->
姓名：<input type="text" name="username" placeholder="请输入姓名"><br>
密码: <input type="password" name="userpasswd" maxlength="10"><br>
电话号： <input type="tel" maxlength="11" name="usertel" required><br>
邮箱： <input type="email" name="useremail"><br>
<!--省市区 下拉列表 除了可选择的用户自己写的也可以提交
下拉列表<datalist id="mylist">需要和<input type="text" list="mylist">联合使用
-->
<input type="text" list="mylist">
<datalist id="mylist">
<option value="0" name="city">北京</option>
<option value="1" name="city">天津</option>
<option value="2" name="city">重庆</option>
<option value="3" name="city">上海</option>
</datalist>
<!--老式的下拉列表-->
<select name="" id="">
<option value="0" name="city">北京</option>
<option value="1" name="city">天津</option>
<option value="2" name="city">重庆</option>
<option value="3" name="city">上海</option>
</select>
<!--禁止用户拖拽 style="resize: none"-->
<textarea cols="30" rows="10" style="resize: none"></textarea>
</fieldset>
</form>
</body>
标签分类：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span {
color: red;
}
div{
width: 300px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!--行内元素（可以放在同一行的） 行内标签 文本标签都是行内标签-->
<span>我是小容器</span> <!--设置宽高不起作用 由内容决定-->
<!--块级元素(不能并排) div p ul li ol form -->
<div>我是大盒子</div> <!--设置宽高起作用 与内容没有关系，不并排，霸道，独成一行-->
<!--行块级元素 input img 可以设置宽高，并且可以并排 图片最好只设置宽度，不要设置高度，否则会破坏图片比例-->
<!--元素的转换-->
<!--
行内 display：inline--》行内块 display：inline-block;
转换Wie行内块目的是让他宽高起作用
块级 display:block -->行内块 display：inline;宽高不起作用完全由内容撑开，可以实现并排
块级 可以转换为->行内块 不要转换为行内，因为没有意义
-->
</body>
结果如下：
导航条：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 800px;
height: 80px;
background-color: #333333;
color: white;
text-align: center;
/*行高 line-height 文字垂直居中：文字行高等于盒子高度*/
line-height: 80px;
}
span{
height: 80px;
width: 120px;
/*转换成行内块*/
display: inline-block;
}
a{
text-decoration: none;
color: #fff;
}
span:hover{
color: red;
background-color: gold;
}
</style>
</head>
<body>
<div>
<a href="#"><span>发现音乐</span></a>
<span><a href="#">我的音乐</a></span>
<span><a href="#">朋友</a></span>
<span><a href="#">商城</a></span>
<span><a href="#">下载客户端</a></span>
</div>
</body>
结果如下：
