Web前端学习笔记 —— HTML(二)

在b站跟着pink老师学的,超级小白一枚,把这里当成是笔记.

1. 表格标签

表格:用来展示数据的
基本格式:

<table>
     <tr>
        <td>单元格内文字</td>
        ...
     </tr>
     ...
</table>
标签说明
<table></table>定义表格
<tr></tr>定义行,必须在table标签中
<td></td>定义单元格,必须在tr标签中
1.1 表头单元格

位于表格第一行(第一列),里面的内容加粗居中显示

<table>
     <tr>
         <th>姓名</th>
         ...
     </tr>
</tabel>
1.2 表格属性
属性名属性值描述
alignleft、right、center规定表格相对周围元素的对齐方式
border1或“”规定表格单元是否拥有边框,默认为“”没有边框
cellpadding像素值规定单元格边沿与其内容之间的空白,默认1像素
cellspacing像素值规定单元格之间的空白,默认2像素
width像素值或百分比规定表格的宽度
1.3 表格结构标签

(1)<thead></thead>:用于定义表格的头部。<thead>内部必须有<tr>标签,一般是位于第一行;
(2)<tbody></tbody>:用于定义表格的主体,主要用于放数据本体;
(3)以上标签都是放在<table></table>标签中。

1.4 合并单元格

(1)合并方式

  • 跨行合并:rowspan=“合并单元格的个数”

  • 跨列合并:colspan=“合并单元格的个数”
    请添加图片描述
    (2)目标单元格(写合并代码)

  • 跨行:最上侧单元格为目标单元格,写合并代码

  • 跨列:最左侧单元格为目标单元格,写合并代码
    在这里插入图片描述
    (3)合并单元格三部曲
    ① 先确定是跨行合并还是跨列合并
    ② 找到目标单元格,写上合并方式=合并的单元格数量,比如:<td colspan="2" ></td>
    ③ 删除多余的单元格

1.5 表格总结

表格的相关标签:
table 标签、tr 行标签、td 单元格标签、th 表格单元头标签、thead 表格头部区域标签、tbody 表格主体区域标签
请添加图片描述

2. 列表标签

列表:用来布局的
分类:无序列表、有序列表、自定义列表

2.1 无序列表(重点)

基本语法格式:

<ul>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</ul>

(1)无序列表各个列表之间没有顺序之别,是并列的;
(2)<ul></ul>里面只能嵌套<li></li>,直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的;
(3)<li></li>之间相当于一个容器,可以容纳所有元素;
(4)无序列表会带有自己的样式属性,在实际使用时,会用css来设置。

2.2 有序列表(理解)

基本语法格式:

<ol>
   <li>列表项1</li>
   <li>列表项2</li>
   <li>列表项3</li>
   ...
</ol>

(1)<ol></ol>中只能嵌套<li></li>,直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的;
(2)<li> </li>之间相当于一个容器,可以容纳所有元素;
(3)有序列表会带有自己样式属性,但在实际使用时,会使用 CSS 来设置。

2.3 自定义列表(重点)

自定义列表常用于对术语或名词进行解释和描述,定义列表的列表项目前没有任何符号。
基本语法格式:

<dl>
   <dt>名词1</dt>
   <dd>名词1解释1</dd>
   <dd>名词1解释2</dd>
</dl>

(1)<dl></dl>里面只能包含<dt><dd>
(2)<dt><dd>个数没有限制,经常是一个<dt>对应多个<dd>

2.4 列表总结

标签名定义说明
<ul></ul>无序标签里面只能包含li,没有顺序,使用较多。li里面可以包含任何标签
<ol></ol>有序标签里面只能包含li,没有顺序,使用较多。li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd 。dt和dd里面可以放任何标签

3.表单标签

【例】网页中的表单如下:
在这里插入图片描述

3.1为什么需要表单

  • 使用表单目的是为了收集用户信息。
  • 在我们网页中, 我们也需要跟用户进行交互,收集用户资料,此时就需要表单。

3.2表单的组成

在HTML中,一个完整的表单通常由表单域、表单控件(也成为表单元素)提示信息3个部分组成。
在这里插入图片描述

3.3表单域

  表单域是一个包含表单元素的区域
  在HTML标签中,<form>标签用于定义表单域,以实现用户信息的收集与传递。
  <form>会把它范围内的表单元素信息提交给服务器

基本语法格式:

<form action="url地址" method="提交方式" name="表单域名称">
  各种表单元素控件
</form>

常用属性:

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址。
methodget/post用于设置表单数据的提交方式,其取值为get或post。
name名称用于指定表单的名称,以区分同一个页面中的多个表单域。

3.4表单控件(表单元素)

3.4.1<input>表单元素

  在表单元素中<input> 标签用于收集用户信息
  在 <input> 标签中,包含一个 type 属性,根据不同的 type 属性值,输入字段拥有很多种形式(可以是文本
字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="属性值" />
  • <input /> 标签为单标签
  • type 属性设置不同的属性值用来指定不同的控件类型

type 属性的属性值及其描述如下:

属性值描述
button定义可点击按钮(多数情况下,用于通过JavaScript启动脚本)。
checkbox定义复选框。
file定义输入字段和“浏览"按钮,供文件上传。
hidden定义隐藏的输入字段。
image定义图像形式的提交按钮。
password定义密码字段,该字段中的字符被掩码。
radio定义单选按钮。
reset定义重置按钮。重置按钮会清除表单中的所有数据。
submit定义提交按钮。提交按钮会把表单数据发送到服务器。
text定义单行的输入字段,用户可在其中输入文本。默认宽度为20个字符。

除了type属性之外,<input>标签还有其他很多属性,常用属性如下:

属性属性值描述
name由用自户定义定义input元素的名称。
value由用户自定义规定input元素的值。
checkedchecked规定此input元素首次加载时应当被选中。
maxlength正整数规定输入字段中的字符最大长度。
  1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
  2. name 表单元素的名字, 要求单选按钮和复选框要有相同的name值.
  3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
  4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
  • 有些表单元素想刚打开页面就默认显示几个文字:
    可以给这些表单元素设置value属性=“值”
用户名: <input type="text" value="请输入用户名" />
  • 页面中的表单元素很多,如何区分:
    name属性:当前 input 表单的名字,后台可以通过这个 name 属性找到这个表单。页面中的表单很多,
    name 的主要作用就是用于区别不同的表单:
用户名: <input type="text" value="请输入用户名" name="username" />

        name 属性后面的值是自定义的

        radio (或者checkbox)如果是一组,我们必须给他们命名相同的名字:

<input type="radio" name="sex" /><input type="radio" name="sex" />
  • 一面一打开,让某个单选按钮或者复选框为选中状态:
    checked 属性:表示默认选中状态。用于单选按钮和复选按钮:
性别:
<input type="radio" name="sex" value="" checked="checked" /><input type="radio" name="sex" value="" />
  • 让input表单元素展示不同的形态,如单选按钮或者文本框
    type属性:type属性可以让input表单元素设置不同的形态:
<input type="radio" name="sex" value="" checked="checked" /><input type="text" value=“请输入用户名”>
3.4.2<table>标签

  <label> 标签用于绑定一个表单元素,当点击<label> 标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。

语法:

<label for="sex"></label>
<input type="radio" name="sex" id="sex" />

核心:<label>标签的 for 属性应当与相关元素的 id 属性相同

3.4.3<select>表单元素

  使用场景:在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,我们可以使用<select>标签控件定义下拉列表。

语法:

<select>
 <option>选项1</option>
 <option>选项2</option>
 <option>选项3</option>
 ...
</select>
  • <select> 中至少包含一对<option>
  • <option> 中定义 selected ="selected" 时,当前项即为默认选中项。
3.4.4<textarea>表单元素
  • 使用场景: 当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
  • 在表单元素中,<textarea>标签是用于定义多行文本输入的控件。
  • 使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

语法:

<textarea rows="3" cols="20">
   文本内容
</textarea>
  1. 通过 <textarea> 标签可以轻松地创建多行文本输入框。
  2. cols=“每行中的字符数” rows=“显示的行数”,我们在实际开发中不会使用,都是用 CSS 来改变大小。

3.5表单元素总结

  1. 三大组:input 输入表单元素、select 下拉表单元素、textarea 文本域表单元素。
  2. 这三组表单元素都应该包含在form表单域里面,并且有 name 属性。
<form>
     <input type=“text" name=“username”>
     <select name=“jiguan”>
          <option>北京</option>
     </select> 
     <textarea name= "message"></textarea>
</form>

  • 有三个名字非常相似的标签:
    (1)表单域 form 使用场景:提交区域内表单元素给后台服务器
    (2)文件域 file 是input type 属性值 使用场景:上传文件
    (3)文本域 textarea 使用场景:可以输入多行文字, 比如留言板 网站介绍等…

4.查阅文档

经常查阅文档是一个非常好的学习习惯。
推荐的网址:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
文件上传是Web开发中常见的功能之一,Java中也提供了多种方式来实现文件上传。其中,一种常用的方式是通过Apache的commons-fileupload组件来实现文件上传。 以下是实现文件上传的步骤: 1.在pom.xml文件中添加以下依赖: ```xml <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.3</version> </dependency> ``` 2.在前端页面中添加文件上传表单: ```html <form method="post" enctype="multipart/form-data" action="upload"> <input type="file" name="file"> <input type="submit" value="Upload"> </form> ``` 3.在后台Java代码中处理上传文件: ```java // 创建一个DiskFileItemFactory对象,用于解析上传的文件 DiskFileItemFactory factory = new DiskFileItemFactory(); // 设置缓冲区大小,如果上传的文件大于缓冲区大小,则先将文件保存到临时文件中,再进行处理 factory.setSizeThreshold(1024 * 1024); // 创建一个ServletFileUpload对象,用于解析上传的文件 ServletFileUpload upload = new ServletFileUpload(factory); // 设置上传文件的大小限制,这里设置为10MB upload.setFileSizeMax(10 * 1024 * 1024); // 解析上传的文件,得到一个FileItem的List集合 List<FileItem> items = upload.parseRequest(request); // 遍历FileItem的List集合,处理上传的文件 for (FileItem item : items) { // 判断当前FileItem是否为上传的文件 if (!item.isFormField()) { // 获取上传文件的文件名 String fileName = item.getName(); // 创建一个File对象,用于保存上传的文件 File file = new File("D:/uploads/" + fileName); // 将上传的文件保存到指定的目录中 item.write(file); } } ``` 以上代码中,首先创建了一个DiskFileItemFactory对象,用于解析上传的文件。然后设置了缓冲区大小和上传文件的大小限制。接着创建一个ServletFileUpload对象,用于解析上传的文件。最后遍历FileItem的List集合,判断当前FileItem是否为上传的文件,如果是,则获取文件名,创建一个File对象,将上传的文件保存到指定的目录中。 4.文件上传完成后,可以给用户一个提示信息,例如: ```java response.getWriter().write("File uploaded successfully!"); ``` 以上就是使用Apache的commons-fileupload组件实现文件上传的步骤。需要注意的是,文件上传可能会带来安全隐患,因此在处理上传的文件时,需要进行严格的校验和过滤。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值