前端学习 DAY02

Java web DAY02

HTML表格标签

场景:

<html>
<head><title>表格</title>
</head>
<body><table border="1px">  <!--画表格的--><tr><td>第一个单元格</td><td>第二个单元格</td></tr><tr><td>第一个单元格</td><td>第二个单元格</td></tr></table>
</body>
</html>

table表示表格整体
tr表示表格每行可以用于包裹td
td标签表示单元格可以包裹内容
嵌套关系:table >tr >td
属性
border 边框宽度
width 表格宽度
height 表格高度
表格标题和表头

<body><table border="1px" width="200px"> <caption>学生成绩单</caption><tr><th>姓名</th><th>成绩</th><th>性别</th></tr><tr><td>张三</td><td>李四</td><td>王五</td></tr></table>
</body>

caption 表格标题在table标签内部
th标签表头单元格写在tr标签内部

HTML表格合并

<!DOCTYPE html>
<html>
<head><title>表格合并</title>
</head>
<body><!--跨行合并--><table border="1px"><tr><td>学生</td><td>成绩</td></tr><tr><td rowspan="2">张三</td><td>90</td></tr><tr><td>李四</td><td>95</td></tr></table><table border="1px"><tr><td colspan="2">学生</td><td>成绩</td></tr><tr><td>李四</td><td>95</td></tr></table>
</body>
</html>

colspan表示跨列合并
rowspan表示跨行合并
跨行跨列练习

<!DOCTYPE html>
<html>
<head><title>表格合并</title>
</head>
<body><!--跨行合并--><table border="1px"><tr><td>学生</td><td>成绩</td></tr><tr><td rowspan="2">张三</td><td>90</td></tr><tr><td>李四</td><td>95</td></tr></table><table border="1px"><tr><td colspan="2">学生</td><td>成绩</td></tr><tr><td>李四</td><td>95</td></tr></table>
</body>
</html>

效果如下：

结构标签:

thread 表格头部
tbody 表格主体
tfoot 表格底部
表格结构用于包裹tr标签使表格结构更加清晰

HTML表单

场景：在网页收集用户信息
表单：form标签
属性：method
get get方式提交表单数据，会将数据拼接到地址栏中进行显示不安全
post post方式提交表单数据，不会将数据拼接到地址栏安全
post post方式提交表
实际开发用post
表单元素:input标签
文本框

<input type="text" name="name">

type=“text”
name 文本框的名称
value 文本框的初始值
size 文本框长度
maxlength 文本框可输入最多字符

名字:<input type="text" name="name" value="张三"size="20"  maxlength="5">

密码框

密码:<input type="password" name="Nancy" size="20">

type=“password”
name密码框
size 密码框长度
显示效果:不显示字符而显示黑色实心圆点
单选按钮

<input type="radio" name="gen" value="男"checked> 男<input type="radio"name="gen" value="女">女

type=“radio”
name 单选框名称一组单选按钮名称需要相同
checked 单选按钮的选中状态
value 单选框的值
复选框

  <!--复选框--><input type="checkbox" name="sport" checked >篮球<input type="checkbox" name="sport" >羽毛球<input type="checkbox" name="sport" >足球

type=“checkbox”
name 复选框名称一组复选框名称和需要相同
checked 复选框选中状态

下拉列表框

 <select name="城市"><option value="1">北京</option><option value="2">上海</option><option value="3">深圳</option></select>

select标签下拉列表框
option标签选项

按钮

 <!--按钮--><!--重置按钮--><input type="reset" name="butReset"value="reset按钮"> <br><!--提交按钮--><input type="submit"name="butReset"value="submit按钮"> <br><!--普通按钮--><input type="button" name="btn" value="button按钮"><input type="image" src="1.webp"><br>

type=“reset”
重置按钮将表单数据重置为初始状态
提交按钮提交表单数据
普通按钮不设置监听的情况下没有作用
图片按钮也可以提交表单

多行文本域

    <!--文本域--><textarea name="textarea" cols="30" rows="10">文本内容</textarea>

textarea标签多行文本域
cols 显示的列数
rows 显示的行数
文件

 <!--文件--><input type="file" name="file">

type=“file”
邮箱

 <!--邮箱-->邮箱:<input type="email" name="email">

type=“email”
会自动验证email地址是否正确
网址

 <!--网址-->网址:<input type="url"name="useURl">

type=“url”
会自动验证网址地址是否正确
数字

  <!--数字-->数字:<input type="number" name="num" min="0" max="100" step="10">

type=“number”
min 最小值 max最大值
step步长

滑块

<!--滑块-->滑块:<input type="range"name="range"min="0"max="50"step="5">

type=“range”
min最小值 max最大值
step步长

搜索框

   <!--搜索框-->搜素框:<input type="search" name="search">

type=“search”

练习: 完成下图的样式

<!DOCTYPE html>
<html >
<head><title>练习2</title>
</head>
<body><img src="海.webp" alt="图片"><p><strong>航海王</strong>是日本漫画家田荣一郎作画的少年漫画作品，于1997年7月22日在集英社<strong>《周刊少年Jump》</strong>连载</p>姓名:<input type="text" name="姓名" value="蒙奇D路飞"><br>生日:<input type="text"name="year">年<input type="text"name="month">月<input type="text"name="Day">日<br>成员:<input type="checkbox"name="people"checked>索隆<input type="checkbox"name="people">山治<input type="checkbox"name="people">香克斯<input type="checkbox"name="people">乌索普<input type="checkbox"name="people">甚平<input type="checkbox"name="people">凯多<input type="checkbox"name="people">大和<br>海贼团:<input type="radio"name="tuan"checked>草帽海贼团<input type="radio"name="tuan"checked>白胡子海贼团<input type="radio"name="tuan"checked>黑胡子海贼团<input type="radio"name="tuan"checked>罗杰海贼团<br>简介:<textarea name="textarea" cols="30" rows="5"></textarea><br>保存：<input type="submit"name="bt"value="   ">
</body>
</html>

效果：

块级元素和行内元素
块级元素:
总是在新行上开始
行高高度内外边距可控制
宽度缺省是他的容器100%
内部可以容纳内联元素和其他块元素
div

行内元素：
和其他元素都在一行显示
行高高度内外边距不可改变
宽度是文字或者图片的宽度（内容的）不可改变
span