timg.jpg
列表
无序列表ul
- 无序列表：用来表示一个列表的语义，并且每一个项目和项目之间是不分先后的
-
ul: unordered list 无序列表 -
li: list item 列表项 - 无序列表是一组标签
-
li标签是容器级标签，可以嵌套任何标签
<h3> 中国的城市</h3>
<!-- 无序列表 -->
<ul>
<li>北京</li>
<li>上海</li>
<li>深圳</li>
<li>广州</li>
<li>郑州</li>
</ul>
ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的
无序列表.jpeg
有序列表
- 有序列表
<ol>
<li>我爱你中国</li>
<li>月亮</li>
<li>中国风</li>
<li>歌曲</li>
<li>问月</li>
</ol>
无序列表.jpg
自定义列表
- 定义列表也是一组标签
-
dl表示definition list 定义列表 -
dt表示definition title 定义标题 -
dd表示definition description 定义表述词儿,就是对标题的描述 dt- 对
dt的解释描述，可以是多个dd
- 对
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dt>上海</dt>
<dd>经济发展中心</dd>
<dt>深圳</dt>
<dd>经济特区</dd>
<dt>郑州</dt>
<dd>中原经济</dd>
</dl>
- 多个
dd对dt标题的描述
<h4>自定义列表</h4>
<dl>
<dt>关于掠食龙</dt>
<dd>了解掠食龙</dd>
<dd>加入掠食龙</dd>
<dd>联系我们</dd>
</dl>
比较常用的就是
ul和dl列表
form表单域
- 常用的属性
form是一个表单的区域，在网页上是不可见的，在网页上显示的事 表单元素
action：对应的值是URL，提交表单到何处
method：post和get，设置表单一何种方式提交到服务器
1.get:一般是获取数据，保密性较差
2.post:一般用于提交数据，作为请求体的部分提交到服务器
name：表单的名称
target：对应的值_blank,_self,_parent,_top，在何处打开action URL
enctype：application/x-www-form-urlencoded,text/plain,multipart/form-data ,在发送表单数据之前指定的编码方式
表单控件
-
type对应的类型，决定这个控件是什么 - 输入框
text
name是控件的名称，在提交表单到服务器的时候会用到
placeholder 暂未属性
<input type="text" name="username" maxlength="30" placeholder="请输入姓名">
-
password密码框
<input type="password" name="pwd" placeholder="请输入密码">
-
email邮箱
<input type="email" name="email" ">
-
file文件域
multiple 属性可以选择多个文件
<input type="file" name="file">
-
radio单选框
name属性是控件的名称，同时也是保持 单选框的唯一性
checked默认选中的状态
<input type="radio" name="sex" value="man"> 男
<input type="radio" name="sex" value="woman"> 女
<input type="radio" name="sex" value="bm" checked> 保密
-
checkbox多选框
<input type="checkbox" name="checkbox" value="read"> 读书
<input type="checkbox" name="checkbox" value="xeuxi"> 学习
<input type="checkbox" name="checkbox" value="ios"> 代码
-
select下拉列表
selected默认中的
multiple属性多选
size属性 是在界面上显示几个
<select name="select" id="" >
<!-- selected是默认选择状态 -->
<option value="qing" selected>请选择</option>
<option value="beijing" >北京</option>
<option value="shanghai">上海</option>
<option value="henan">河南</option>
</select>
也可以是分组
optgroup
<!-- 下拉列表 分组 多项选择 -->
<select name="" id="">
<optgroup label="华北">
<option value="bejing">北京</option>
<option value="bejing">河北</option>
<option value="bejing">东北</option>
</optgroup>
<optgroup label="华东">
<option value="shanghai">上海</option>
<option value="bejing">南京</option>
<option value="bejing">浙江</option>
</optgroup>
</select>
- image 图像域按钮
<!-- 图像域 -->
<input type="image" name="img_button" src="../images/H5/10.jpeg">
- hidden 隐藏域
<!-- 隐藏域 在提交到服务器的时候 这个消息就会传给服务器-->
<input type="hidden" name="hidden" value="这是注册信息">
- textarea 文本域
<textarea name="textarea" id="" cols="30" rows="10" placeholder="请输入"></textarea>
label标签和input控件结合使用，在点击文字的时候，称为
第一响应者
for属性 和 input的id绑定
<label for="123">车大家:<input id="123" type="text" value="测试好几十"></label>
image.png
<h2 align="center">注册信息</h2>
<hr color="#336699">
<form action="action.php" method="GET" name="register">
<table align="center" width="600px" bgcolor ="f2f2f2">
<tr>
<td>姓名:</td>
<td><input type="text" name="username" maxlength="30" placeholder="请输入姓名"></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="email" name="email" value="@163.com"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="pwd" placeholder="请输入密码"></td>
</tr>
<tr>
<td>上传照片:</td>
<td><input type="file" name="file" multiple></td>
</tr>
<tr>
<td>性别:</td>
<!-- 在单选框中name属性相同 是互斥的 就是选择唯一性 checked默认选中的状态 -->
<!-- value在单选框中 被选中的时候，就讲value的值 传到服务器上-->
<td><input type="radio" name="sex" value="man"> 男 <input type="radio" name="sex" value="woman"> 女 <input type="radio" name="sex" value="bm" checked> 保密</td>
</tr>
<tr>
<!-- 多选 -->
<td>爱好:</td>
<!-- 多选中的value值 在被选中的时候，也是提交到 服务器上的，说明你选中了什么 -->
<!-- name属性值尽量相同 这样在提交到服务时，可以根据name的值 判断 -->
<td><input type="checkbox" name="checkbox" value="read"> 读书 <input type="checkbox" name="checkbox" value="xeuxi"> 学习 <input type="checkbox" name="checkbox" value="ios"> 代码</td>
</tr>
<tr>
<td>城市:</td>
<td>
<!-- size属性 是在界面上显示几个 -->
<!-- multiple属性 在下拉菜单 是多项祖选择 -->
<select name="select" id="" >
<!-- selected是默认选择状态 -->
<option value="qing" selected>请选择</option>
<option value="beijing" >北京</option>
<option value="shanghai">上海</option>
<option value="henan">河南</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="button按钮"> <input type="submit" > <input type="reset">
<!-- 图像域 -->
<input type="image" name="img_button" src="../images/H5/10.jpeg">
<!-- 隐藏域 在提交到服务器的时候 这个消息就会传给服务器-->
<input type="hidden" name="hidden" value="这是注册信息">
</td>
</tr>
</table>
</form>
在
form表单域里面 使用了table主要是设计到大量的数据处理 方便
WX20190708-112042.png
