2020-03-08

<a></ a>超链接标签

1.用于定义一个可以点击跳转的连接

2 herf:超链接跳转的路径(必有属性)

 1)内网本机路径,相对路径和绝对路径

2)互联网路径,带http://...的地址

3)本页:不写默认跳转本页,相当于#

3 注意:

1)a标签内容体,不仅仅是文字,也可以是其他内容,例如图片

2)a标签的href属性,不仅仅可以链接到html上,也可以链接到其他文件上,

列表

1无序列表 ul li

  2.有序列表 ol li

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

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

表格

<table></table>

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

border:设置表格的边框粗细

width:设置表格的宽度

<tr></tr>

表格中的行标签,用于定义一个变革行

<td></td>

表格的单元格标签,用于定义一个表格中的单元格

<th></th>

表格的表头单元标签,用于在小锅中定义一个表格行中的表头单元格

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

行、列、单元格、表头、数据

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

单元格合并

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

colspan:跨列合并单元格

rowspan:跨列合并单元格

合并步骤:

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

2、在第一个出现的单元格上书写合并单元格属性

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

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

三、内联与块标签

<span></span>

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

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

span不会自动换行

<div></div>

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

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

表单

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

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

表单标签

<from></from>

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

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

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

action : 将数据提交到何处

默认提交到本页

本机内网路径

  相对路径:常用

  绝对路径:不建议使用

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

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

默认为get

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

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

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

Get 和Post提交但是区别

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

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

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

尽量使用post方式提交表单

输入项标签

<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> 标签,定义一个下拉选择

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

<!DOCTYPE html>

<html>

<head>

<title>表单标签</title>

<meta charset="utf-8" />

</head>

<body>

<form action="kehu.html" method="post">

<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="password" name="userpass"

disabled="disabled" value="123456"><br>

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

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

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

value="male" >男

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

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

年龄<select name="old">

<option value="小孩"  selected="selected">18以下</option>

<option value="大人">18~30</option>

<option value="老人">30以上</option>

</select><br><br>

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

value="chiji" checked="checked">和平精英

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

value="meinv" checked="checked">帅哥

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

value="dianying">电影

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

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

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

<option value="lly">蒙娜丽莎</option>

<option value="qxx" selected="selected">成龙</option>

<option value="qzl">李连杰</option>

</select><br><br>

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

<option value="sheng">辽宁</option>

<option value="sheng">黑龙江</option>

<option value="sheng"  selected="selected">吉林</option>

<option value="sheng">河南</option>

<option value="sheng">河北</option>

<option value="sheng">武汉</option>

<option value="sheng">湖北</option>

</select><br><br>

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

<input type="submit" value="您好">

<input type="reset" name="">

<input type="button" value="按钮"><br><br>

<!--

-->

<button type="submit">您好</button>

<button type="reset">重置</button>

<button type="button">按钮</button>

</left>

</form>

</body>

</html><!DOCTYPE html>

<html>

<head>

<title>表单标签</title>

<meta charset="utf-8" />

</head>

<body>

<form action="kehu.html" method="post">

<left>

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

头像<in

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第2天上课内容 我们今天学习了超链接标签,列表,表格,内联...
    哈哈哈额哈哈哈阅读 325评论 0 0
  • 一 列表 1 无序列表 ul li 2 有序列表 ol li 3 定义列表 dl dt表示被定义的内容 dd表示对...
    李玉贤_8e75阅读 177评论 0 0
  • 作业 day 02 </ a>超链接标签 1.用于定义一个可以点击跳转的连接 2 herf:...
    常樂_b00d阅读 209评论 0 0
  • 一、列表 1.无序列表ul li 2.有序列表ol li 3.定义列表dl dt dl.ul.ol<之间可以互相嵌...
    刘哲_1d91阅读 197评论 0 0
  • 列表标签:展示列表项 有序列表: ol li 无序列表: ul li 表单标签:用于采集用户数...
    H_5a8d阅读 180评论 0 0