2020-03-22

列表

一.三种列表

1.无序列表ul li

2.有序列表ol li

3.定义列表 dl dt被定义的内容dd对定义内容的描述

4.dl ul ol之间都可以互相嵌套

二.

表格标签用于在效果中定义一个表格

border:设置表格的边框粗细

width:设置表格的宽度

<tr></tr>表格的行标签，用于定义一个表格行

<td></td>表格的单元格标签，用于定义一个表格行中的单元格

<th></th>表格的表头单元格标签，

用于在效果中定义一个表格行中的表头单元格

<th><td>唯一区别：<th>内容居中加粗

表格是为了更好的格式化显示数据

单元格合并

<td>或者<th>都有两个单元格合并属性：

colspan:跨列合并单元格

rowspan:跨行合并单元格

合并步骤：

1.确定合并那几个单元格，确定是跨行合并还是跨列

2.在第一个出现的单元格

3、合并几个单元格，属性值就写几

4、被合并的单元格必须删掉

三、内联与块标签

内联标签，一行上定义多个元素，进行内容显示

有多少内容，就会占用多大空间

span不会自动换行

块标签，一行上定义一个一个块，默认沾满一行，进行内容显示

适用于大量数据展示。或者用来布局

表单

现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作写的简历、入学时填写的

网页中的表单是用来想服务器提交信息的，我们最常用的扁担就是百度的搜索框

四.表单标签

用于在效果中定义一个表单

作用：用于体检用户填写额数据，提交给服务器的程序

文本框供用户输入，类似java的Scanner

action ：将数据提交到何处

默认提交到本页

本机内网路径

相对路径：常用

绝对路径：不建议使用

互联网路径：https://www.12306.com/xxx

五. 输入项标签

<input/>标签

表单输入项标签之一用户可以在该标签上通过填写和选择进行数据的输入

type 设置该标签的种类

text 文本框默认

password：密码框，内容非明文

radio：单选框，在同一组内又单选的效果

chechbox：复选框，在同一组内有复选鲜果

submit：提交按钮，用于控制表单提交数据

reset：重复按钮，用于控制表单提交数据

file：附件框，用于文件上传

hidder：隐藏域，一般用作提交服务器需要拿到，单用户不需要看到的数据

button：普通按钮，需要和js事件一起用

name：单选框，复选框进行数据的分组，设置该标签对应的参数名，要提交数据给后台，西辟邪name

value ：设置该标签对应的参数值/作为按钮的名字

checked：设置单选框/复选框的默认选中状态

readonly：设置该标签的参数值只读，用户无法手动更改，数据是可以正常提交的

disabled：设置该标签不可用，参数值无法更改，并且无法提交

六. 表单点击提交按钮提交数据时

url?参数列表

参数列表格式：参数1=参数值 & 参数2=参数值 & 参数3=参数值......

？gender=on (on表示选中)

？gender=male&age=18.....

单选框，用户只能选择，不能输入，苏姚指定value属性

文本框，用户可以自由输入，不一定指定value值，指定表示默认值，placeholder 表示提示文字

七.选择框标签

<select></select> 标签，定义一个下拉选择框

name：设置该标签对应的参数名

multipe：设置选项全部显示。并且可以进行多选提交，不写此属性默认为单选

<option></optiom>标签，选项标签，为一个选择框添加一个选项

value：设置需要提交的参数值

selected：设置选项的默认选中状态

注意事项：

option的内容体一般是用来展示的

参数值应该是option的value属性值

八.文本域标签

<textarea></textarea>标签

文本域，多行文本框

name：设置标签对应的参数名

文本域和文本框的区别

1、文本框不能换行，文本域可以

2、文本框参数值是value属性，文本域参数是标签的内容体

九.提交表单之一事项

提交中文问题

为什么使用UPL编码

正常提交： ?password=123&username=zhangsan

非正常： ?password=123#asd&pwe&username=zhangsan

UPL编码解决方式：特殊符号，中文进行编码

method : 将数据以何种方式提交

默认为get

提交范式可定义为： get或者 post

Get方式提交特点：把数据拼接到地址栏上

Post方式提交特点：没有吧数据拼接到地址栏上，而是在请求体中

Get 和Post提交但是区别

1、Get提交的参数列表拼接到地址栏后面，post不会拼接到地址栏

2、get范式提交的数据，敏感信息不全全，post但是提交的数据相对安全

3、get方式提交的数据是有限的，post方式从理论上提交的数据是无限大的

尽量使用post方式提交表单

代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<left>

用户ID<input type="hidden" name="uid" value="123"><br><br>

头像<input type="file" name="photo"><br><br>

用户名<input type="text" name="username"

readonly="readonly" value="小红"><br>

<!-- 用户名<input type="text" name=

"username" placeholder="提示文字"><br>-->

密码<input type="password" name="userpass"

disabled="disabled" value="123123"><br>

手机号<input type="text" name="phone" placeholder="手机号"><br>

邮箱<input type="text" name="qq" placeholder="邮箱"><select name=".com">

</select><br><br><br>

性别<input type="radio" name="gender"

value="male" checked="checked">男

<input type="radio" name="gender"

value="female">女<br><br>

年龄<select name="old">

</select><br><br>

爱好<input type="checkbox" name="hobby"

value="chiji" checked="checked">吃鸡

<input type="checkbox" name="hobby"

value="shuaige" checked="checked">帅哥

<input type="checkbox" name="hobby"

value="dianying">电影

<input type="checkbox" name="hobby"

value="eat">吃<br><br>

你喜欢的明星<select name="star">

</select><br><br>

所在省份<select name="from">

</select><br><br>

自我介绍<textarea name="info"></textarea><br><br>

<!--

-->

</left>

</form>

</body>

</html>

2020-03-22

推荐阅读更多精彩内容