1.块元素 display:block
<p>、<h>、<ul>、<ol>、<div>、<hr>、<form>
2.行元素display:inline
<b>、<strong>、<i>、<em>、<sup>、<sub>、<small>、<span>、<a href></a>、<label>
3.行内块元素display:inline-blocks
<img src="">、<iframe src=""></iframe>、<input type="">、<button>、<textarea>、<select>
4.HTML标签解释
<hr /> <!--水平分割线 -->
<ul> <!-- 无序列表 -->
<ol> <!-- 有序列表 -->
<b> <!-- 加粗-->
<strong></strong> <!-- 加粗,起强调作用-->
<i> <!-- 倾斜作用 -->
<em></em> <!-- 强调作用的倾斜 -->
<font></font> <!-- 字体的类型和大小颜色 -->
<sub></sub> <!-- 下标显示-->
<sup></sup> <!-- 上标显示 -->
<marquee direction=""></marquee> <!-- 滚动文本标签 -->
<!-- table 表格标签
border:表格四边的宽度
bordercolor:四边边框颜色
cellspacing:单元格外间距
cellpadding:单元格内填充
rules:表格间隔线设置 行列显示 rows cols all
frame:表格四边的显示 abov上 below下 lhs左 rhs右
bgcolor:背景色
align:水平对齐方式
valign:垂直对齐方式
rowspan:行合并;colspan:列合并
-->
5.表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 表单标题
<fieldset id="">
<legend></legend>
</fieldset> -->
<!-- 1.表单标签 -->
<!--action: 提交服务器的地址-->
<!-- method:提交方法
post:将数据封装成数据包发送给服务器;
get:将数据放在地址栏给服务器发过去-->
<form enctype="multipart/form-data" action="http://192.168.17.3:8888/s" method="get">
<!-- 2.表单域 -->
<!-- 2.1 单行文本输入框 -->
<!-- name=value 向服务器发送数据 -->
<!-- placeholder 提示文本 -->
<!-- maxlength 字符的最大长度 -->
<!-- required 提交时的验证 不能为空 -->
<input type="text" name="wd" id="wd" value="" required="required" maxlength="10" placeholder="请输入内容"/>
<br>
<!-- 2.2 密码输入框 -->
<input type="password" name="pwd" id="q1" value="" required="required" placeholder="请输入密码"/>
<br>
<!-- 2.3多行文本输入框 -->
<textarea name="te1" rows="3" cols="10">
</textarea>
<br>
<!-- 2.4 下拉列表 --><!-- multiple(多选) -->
<select name="city">
<option value ="郑州">郑州</option>
<option value ="开封">开封</option>
<option value ="鹤壁">鹤壁</option>
</select>
<br>
<!-- 2.5 单选按钮 多个单选按钮 如果是一组的话,将name统一-->
<!-- <label> for属性可以绑定到对应的表单域属性 for=id -->
<!-- checked 属性实现默认勾选 -->
<label for="r1">男</label><input type="radio" name="sex" id="r1" value="男" />
<label for="r2">女</label><input type="radio" name="sex" id="r2" value="女" />
<br>
<!-- 2.6 多选按钮 checkbox-->
<!-- <label for="s1">🍉</label><input type="checkbox" name="s1" id="s1" value="西瓜" />
<label for="s2">🍌</label><input type="checkbox" name="s2" id="s2" value="香蕉" />
<label for="s3">🍊</label><input type="checkbox" name="s3" id="s3" value="橘子" /> -->
<ul>
<li><label for="s1">🍉</label><input type="checkbox" name="s1" id="s1" value="西瓜" /></li>
<li><label for="s2">🍌</label><input type="checkbox" name="s2" id="s2" value="香蕉" /></li>
<li><label for="s3">🍊</label><input type="checkbox" name="s3" id="s3" value="橘子" /></li>
</ul>
<br>
<!-- 2.7 文件选择表单 -->
<!-- 要修改form表单的enctype编码为:multipart/form-data;要不然文件提交不了 -->
<input type="file" name="f1" id="f1" value="" />
<br>
<!-- 其他的表单域 -->
<input type="color" name="" id="" value="" />
<input type="date" name="" id="" value="" /> <!-- datetime-local 日期时间,按照本地的时区 -->
<input type="range" name="" id="" value="" />
<!-- 3.表单按钮 -->
<br>
<!-- 提交按钮 submit-->
<input type="submit" value="提交"/>
<!-- 重置按钮 reset-->
<input type="reset" name="" id="" value="重置" />
<!-- 自定义按钮 button-->
<input type="button" name="" id="" value="自定义按钮" />
<!-- 隐藏域 -->
<!-- 使用隐藏域增加表单的验证安全,可以防止跨站请求伪造 -->
<input type="hidden" name="" id="" value="" />
</form>
</body>
</html>