java web笔记3：html的列表标签，超链接标签，表格标签，表单标签

慕慕和小绵羊

于 2022-01-17 16:13:53 发布

阅读量667

点赞数 3

分类专栏： java web 文章标签：前端 html java

本文链接：https://blog.csdn.net/qq_46617150/article/details/122538700

版权

java web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.列表标签

有序列表和无序列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>

<!--1.无序列表
type:列表类型
square：实心正方形
circle：空心圆
<li>定义在ul里面
即li和ul标签一般不会单个出现
-->


<ul type="square">
    <li>乔丹</li>
    <li>科比</li>
    <li>詹姆斯</li>
    <li>库日天</li>
</ul>


<!--2.有序列表
将ul改为ol
<ol start="1",type="1">
<li></li>
</ol>

start:起始的索引（默认是第一个）
type：列表类型
阿拉伯数字：1
小写字母：a
大写字母：A
罗马字母：i/I
-->


<ol start="1" type="1">
    <li>乔丹</li>
    <li>科比</li>
    <li>詹姆斯</li>
    <li>库日天</li>
</ol>


</body>
</html>

运行结果
在这里插入图片描述
二.超链接标签
作用:用于控制页面与页面（服务器资源）之间的跳转
注意：
target：属性取值
_blank:新起页面
_self:当前页面（默认）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>超链接</title>
</head>
<body>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="03列表标签.html" target="_self">列表标签</a>
</body>
</html>

运行结果
在这里插入图片描述
假链接

<a href="#">这是一个假链接</a>

三.表格标签

border属性是指表格的边框，不是单元格的边框
cellspacing属性是单元格之间的间距
cellpadding属性是表示单元格中的内容距离单元格边框的内边距
align属性用来表示表格的水平对齐方式
bgcolor属性用来表示表格的背景色

tr标签的属性：
1.align属性：该行内容的水平对齐方式
2.bgcolor:该行的背景颜色
3.colspan:跨列合并 rowspan：跨行合并
caption:表格的标题

th标签：它也是单元格，它是表头单元格
就是表格只有一行一列，td也不能少
合并之前，每一行的列的个数应该一样
table定义tr，tr里面放td，td里面放内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>


<table border="1px" cellspacing="0" width="500px" cellpadding="30px" align="center" bgcolor="#f0f8ff">
    <caption>学生信息表</caption>
    <tr>
        <th>姓名</th>
        <th>性别</th>
        <th>地址</th>
    </tr>


    <tr align="center" bgcolor="#e9967a">
        <td >11</td>
        <td bgcolor="#e9967a" align="right">12</td>
        <td>13</td>

    </tr>
    <tr>
        <td colspan="2">5</td>
        <td>6</td>
    </tr>



</table>

</body>
</html>

运行结果
在这里插入图片描述
四.表单标签
表单是由表单标签和一些表单项组成的
form就是表单标签，决定了往哪个服务器路径提交数据，采用什么方式，什么数据类型
1.action属性：提交路径
2.method属性：
get和post提交方式的区别
1.携带的数据位置：get方式是在URL地址后面，post方式是在http协议的请求体中。
2.携带的数据类型：get方式只能携带文本数据（字符串），post方式可以携带任意数据（包含图片，音频，视频），所以文件上传用post方式
3.get方式只能携带少量的数据，post方式携带数据大小是没有限制的（服务器会有限制）
3.entype：数据类型（了解）
表单项：就是真实显示在我们面前的组件（输入框，按钮，下拉框，多选框，文件上传等等）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>

</head>
<body>
<form action="https://www.baidu.com" method="get" enctype="application/x-www-form-urlencoded">
   
    <!--这是一个输入框-->
   用户名： <input type="text" name="username" placeholder="请输入用户名"><br>
    密码：<input type="password" name="pwd" ><br>
    性别：<input type="radio" name="gender" value="male" checked>男
    <input type="radio" name="gender" value="female">女<br>
    兴趣爱好：<input type="checkbox" name="hoppy" value="basketball">篮球
    <input type="checkbox" name="hoppy" value="football">足球
    <input type="checkbox" name="hoppy" value="piano">钢琴
    <input type="checkbox" name="hoppy" value="skating">滑雪<br>
    生日：<input type="date" name="birthday"><br>
    上传头像:<input type="file" name="icon"><br>
    学历：
    <select name="anna">
        <option value="gz">高中</option>
        <option value="dz">大专</option>
        <option value="bk">本科</option>
        <option value="ss">硕士</option>
        <option value="bs">博士</option>

    </select><br>
    个人简历：
    <textarea name="info" rows="10" cols="50"></textarea>
    <input type="button" value="按钮">
    <input type="submit">
    <input type="reset">
    <input type="image" src="img/star.jpg" width="50" height="50">

    你好
    <input type="hidden" name="id" value="12">
    世界



</form>
</body>
</html>

运行结果

在这里插入图片描述

type属性：表示input的类型，默认的text表示文本框
    1.text 表示文本框
    2.file 表示文件选择框
    3.button 普通按钮（不内置任何功能）
    4.submit 提交按钮，内置提交表单功能
    5.password 密码框
    6.radio 单选框
    7.checkbox 多选框/复选框 同一组多选框name要相同
    8.date 日期选择框
    9.image 图片按钮
    10.reset 重置按钮
    11.hidden 隐藏域，携带数据，但是用户看不到
    12.file 文件选择框
value属性：对于按钮来言，就是按钮上的数字
           对于文本框 ，密码框，日期选择框，文件选择框等等，就是输入或选择的内容
           对于单选框，多选框而言，我们要手动设置value值
name属性：当一个表单有name属性的时候，它的数据才会提交给服务器，数据以name=value的方式提交的

disabled属性：表示这个表项不可用，它的数据不能修改，并且数据无法提交
checked属性：单选框或复选框默认选中

下拉框select：
下拉框里面每个选项都是一个option变迁
下拉框name属性是写在select标签中，value属性写在option标签中
selected默认选中

文本域textarea
rows属性表示显示的行数
cols属性表示显示的列数
-->