2.HTML进阶

news2024/12/27 12:13:12

第2章-HTML进阶

Objective(本课目标)

  • 了解表格标签的使用
  • 掌握列表标签的使用
  • 掌握表单标签的使用

1. 表格 table(会使用)

表格作用：

存在即是合理的。 表格的现在还是较为常用的一种标签，但不是用来布局，常见显示、展示表格式数据。

因为它可以让数据显示的非常的规整，可读性非常好。

特别是后台展示数据的时候表格运用是否熟练就显得很重要，一个清爽简约的表格能够把繁杂的数据表现得很有条理，虽然 div 布局也可以做到，但是总没有表格来得方便。

1. 创建表格

在HTML网页中，要想创建表格，就需要使用表格相关的标签。

创建表格的基本语法：

<table>
  <tr>
    <td>单元格内的文字</td>
    ...
  </tr>
  ...
</table>

要深刻体会表格、行、单元格他们的构成。

在上面的语法中包含基本的三对HTML标签，分别为 table、tr、td，他们是创建表格的基本标签，缺一不可，下面对他们进行具体地解释

  1. table用于定义一个表格标签。

  2. tr标签 用于定义表格中的行，必须嵌套在 table标签中。

  3. td 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。

  4. 字母 td 指表格数据（table data），即数据单元格的内容，现在我们明白，表格最合适的地方就是用来存储数据的。

2. 表格属性

表格有部分属性我们不常用，这里重点记住 cellspacing 、 cellpadding。

案例1：

<table width="500" height="300" border="1" cellpadding="20" cellspacing="0" align="center">
   <tr>  <th>姓名</th>   <th>性别</th> <th>年龄</th>  </tr>
   <tr>  <td>班级</td> <td>男</td> <td>55</td>  </tr>
   <tr>  <td>班级</td> <td>男</td> <td>52</td>  </tr>
   <tr>  <td>班级</td> <td>男</td> <td>58</td>  </tr>
   <tr>  <td>班级</td>   <td>男</td> <td>18</td>  </tr>
   <tr>  <td>班级</td> <td>女</td> <td>63</td>  </tr>
</table>

3. 表头单元格标签th

  • 作用：

    • 一般表头单元格位于表格的第一行或第一列，并且文本加粗居中

  • 语法：

    • 只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。

案例2：

4. 表格标题caption

定义和用法

<span sty<table>
   <caption>我是表格标题</caption>
</table>

注意：

  1. caption 元素定义表格标题，通常这个标题会被居中且显示于表格之上。

  2. caption 标签必须紧随 table 标签之后。

案例3：

根据要求完成以下案例：

5. 合并单元格

5.1 合并单元格2种方式

  • 跨行合并：rowspan="合并单元格的个数"

  • 跨列合并：colspan="合并单元格的个数"

5.2 合并单元格三步曲

  1. 先确定是跨行还是跨列合并

  2. 根据 先上 后下 先左 后右的原则找到目标单元格 然后写上 合并方式 还有 要合并的单元格数量 比如 ： <td colspan="3"> </td>

  3. 删除多余的单元格单元格

6. 总结表格

标签名定义说明
<table></table>表格标签就是一个四方的盒子
<tr></tr>表格行标签行标签要再table标签内部才有意义
<td></td>单元格标签单元格标签是个容器级元素，可以放任何东西
<th></th>表头单元格标签它还是一个单元格，但是里面的文字会居中且加粗
<caption></caption>表格标题标签表格的标题，跟着表格一起走，和表格居中对齐
clospan 和 rowspan合并属性用来合并单元格的

7. 表格划分结构（了解）

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注， 这样更好的分清表格结构

注意：

  1. <thead></thead>：用于定义表格的头部。用来放标题之类的东西。<thead> 内部必须拥有 <tr> 标签！

  2. <tbody></tbody>：用于定义表格的主体。放数据本体 。

  3. <tfoot></tfoot>放表格的脚注之类。

2. 列表标签（重点）

前面我们知道表格一般用于数据展示的，但是网页中还是有很多跟表格类似的布局，如下图~~ 我们用什么做呢？

答：是列表， 那什么是列表？ 列表就是用来布局的。

2.1 无序列表 ul （重点）

无序列表的各个列表项之间没有顺序级别之分，是并列的。其基本语法格式如下：

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

比如下面这些，新闻是没有顺序的，不用排队，先到先得，后发布先显示。

 1. <ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签内输入其他标签或者文字的做法是不被允许的。
 2. <li>与</li>之间相当于一个容器，可以容纳所有元素。

2.2 有序列表 ol （了解）

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义，有序列表的基本语法格式如下：

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

2.3 自定义列表（理解）

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。其基本语法如下：

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

2.4 列表总结

标签名定义说明
<ul></ul>无序标签里面只能包含li 没有顺序，我们以后布局中最常用的列表
<ol></ol>有序标签里面只能包含li 有顺序， 使用情况较少
<dl></dl>自定义列表里面有2个兄弟， dt 和 dd

3. 表单标签(重点)

作用： 表单目的是为了收集用户信息

表单控件：

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：

一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：

他相当于一个容器，用来容纳所有的表单控件和提示信息，定义了服务器 的URL，以及表单提交方式。如果不定义表单域，表单中的数据就无法传送到后台服务器。

3.1 input 控件(重点)

  • 语法：

    <input type="属性值" value="你好">

    • input 输入的意思

    • <input />标签为单标签

    • type属性设置不同的属性值用来指定不同的控件类型

    • 除了type属性还有别的属性

  • 常用属性：

1. type 属性

  • 这个属性通过改变值，可以决定了你属于那种input表单。

  • 比如 type = 'text' 就表示 文本框 可以做 用户名， 昵称等。

  • 比如 type = 'password' 就是表示密码框 用户输入的内容 是不可见的。

用户名: <input type="text" /> 
密  码：<input type="password" />
2. value属性
用户名:<input type="text"  name="username" value="请输入用户名">

  • value 默认的文本值。 有些表单想刚打开页面就默认显示几个文字，就可以通过这个value 来设置。

3. name属性
用户名:<input type="text"  name=“username” />

name表单的名字， 这样，服务端可以通过这个name属性找到这个输入项目用户填写的数据

  • name属性后面的值，是我们自己定义的。

  • radio 如果是一组，我们必须给他们命名相同的名字 name 这样就可以多个选其中的一个啦

<input type="radio" name="sex"  />男
<input type="radio" name="sex" />女
4. checked属性

  • 表示默认选中状态。 较常见于 单选按钮和复选按钮。

性    别:
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女
5. input 属性小结
属性说明作用
type表单类型用来指定不同的控件类型
value表单值表单里面默认显示的文本
name表单名字页面中的表单很多，name主要作用就是用于区别不同的表单。
checked默认选中表示那个单选或者复选按钮一开始就被选中了

3.2 label标签(了解)

目标：

label标签主要目的是为了提高用户体验。 为用户提高最优秀的服务。

概念：

label 标签为 input 元素定义标注（标签）。

作用：

用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会获得输入焦点。

如何绑定元素呢？

  1. 第一种用法就是用label直接包括input表单。

<label> 用户名： <input type="radio" name="usename" value="请输入用户名">   </label>

适合单个表单选择

  1. 第二种用法 for 属性规定 label 与哪个表单元素绑定。

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

当我们鼠标点击 label标签里面的文字时， 光标会定位到指定的表单里面

3.3 textarea控件(文本域了解)

  • 语法：

<textarea >
  文本内容
</textarea>

  • 作用：

    通过textarea控件可以轻松地创建多行文本输入框.

    cols="每行中的字符数" rows="显示的行数" 我们实际开发不用

文本框和文本域区别
表单名称区别默认值显示用于场景
input type="text"文本框只能显示一行文本单标签，通过value显示默认值用户名、昵称、密码等
textarea文本域可以显示多行文本双标签，默认值写到标签中间留言板

3.4 select下拉列表

目的：指定固定的数据让用户选择

如果有多个选项让用户选择，为了节约空间，我们可以使用select控件定义下拉列表.

语法：

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

  • 注意：

  1. <select> 中至少包含一对 option

  2. 在option 中定义selected =" selected "时，当前项即为默认选中项。

3.5 form表单域

  • 收集的用户信息怎么传递给服务器？通过form表单域

  • 目的：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。

语法: 

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

常用属性：

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

注意:

每个表单都应该有自己表单域。我们现在做页面，不写看不到效果，但是 如果后面学 ajax 后台交互的时候，必须需要 form表单域。

4.综合案例-注册页面布局

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1292844.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Motion Plan之轨迹生成笔记 (2)

Motion Plan之轨迹生成笔记 (2)

Motion Plan之搜索算法笔记 Motion Plan之基于采样的路径规划算法笔记 Motion Plan之带动力学约束路径搜索 什么是基于优化的轨迹生成 Optimization-Based Trajectory Planning&#xff08;基于优化的轨迹规划&#xff09;是一种常用的方法&#xff0c;用于生成自动化系统&am…
阅读更多...
【Flutter】vs2022上开发flutter

【Flutter】vs2022上开发flutter

在vs上开发flutter&#xff0c;结果扩展仓库上没办法找到Dart&#xff0c;Flutter。 在 这 搜索Dart时也无法找到插件。 最后发现是安装工具出错了 安装了 开发需要的是
阅读更多...
电商类直播介绍

电商类直播介绍

电商直播是一种购物方式&#xff0c;通过直播技术向消费者展示商品&#xff0c;并引导其进行购买。在法律上&#xff0c;电商直播属于商业广告活动&#xff0c;主播需要根据具体行为承担“广告代言人"“广告发布者"或“广告主"的责任。 电商直播的特点在于其更…
阅读更多...
网络机房的功能有哪些？

网络机房的功能有哪些？

网络机房的功能主要包括&#xff1a; 信息存储和管理&#xff1a;机房作为信息系统的核心&#xff0c;需要提供可靠的存储和管理能力&#xff0c;包括服务器、存储设备、备份系统等硬件设备&#xff0c;以及数据备份、数据迁移、容灾等管理方法和技术。网络连接和通信&#xf…
阅读更多...
字符串经典基础面试题

字符串经典基础面试题

关卡名 字符串经典基础面试题 我会了✔️ 内容 1.理解字符串反转的处理方法 ✔️ 2.熟练掌握回文串的判断方法 ✔️ 3.掌握字符串中搜索第一个唯一字符的方法 ✔️ 4.掌握判断是否互为字符串重排的处理技巧 ✔️ 1 反转的问题 我们知道反转是链表的一个重要考点&#xf…
阅读更多...
03_W5500TCP_Client

03_W5500TCP_Client

上一节我们完成了W5500网络的初始化过程&#xff0c;这节我们进行TCP通信&#xff0c;w5500作为TCP客户端与电脑端的TCP_Server进行通信。 目录 1.TCP通信流程图&#xff1a; tcp的三次握手&#xff1a; tcp四次挥手&#xff1a; 2.代码分析&#xff1a; 3.测试&#xff1a…
阅读更多...
Mysql综合案例练习＜1＞

Mysql综合案例练习＜1＞

MySql综合案例练习<1> 题目一题目二题目三题目四题目五题目六题目七题目八题目九题目十题目十一题目十二题目十三题目十四题目十五题目十六题目十七题目十八题目十九 题目一 创建数据库test01_library 创建表 books&#xff0c;表结构如下&#xff1a; CREATE DATABASE …
阅读更多...
Linux操作系统 3.Linux用户和权限

Linux操作系统 3.Linux用户和权限

一、认知root用户&#xff08;超级管理员&#xff09; Windows、MacOS、Linux均采用多用户的管理模式进行权限管理 在Linux系统中&#xff0c;拥有最大权限的账户名为&#xff1a;root&#xff08;超级管理员&#xff09; 之前我们一直使用的是普通的用户 root用户拥有最大的系…
阅读更多...
【STM32F103】USART通用同步异步收发器

【STM32F103】USART通用同步异步收发器

串行通信 通信分为串行通信和并行通信&#xff0c;区别如下&#xff0c;同样是发送0101的数据&#xff1a; 可以看的出来&#xff0c;串行通信的优点是消耗的数据线会小一些。 而并行通信的优点是传输的速度快。 通常我们会选择使用串行通信来进行设备间的通信&#xff0c;这…
阅读更多...
参考信号速度变化存在跳跃时容易发生不稳定的阻抗调节

参考信号速度变化存在跳跃时容易发生不稳定的阻抗调节

问题描述 当参考信号速度存在跳跃变化时&#xff0c;阻抗调节系统容易发生不稳定。这是因为阻抗调节系统需要根据参考信号的速度来调整其输出阻抗&#xff0c;以匹配负载阻抗&#xff0c;从而保持系统的稳定性。 当参考信号速度突然变化时&#xff0c;阻抗调节系统可能无法及…
阅读更多...
智能安防无人机——一种安防巡检新方案

智能安防无人机——一种安防巡检新方案

在高新技术的推动下&#xff0c;安防无人机在监控、巡逻等领域的使用频率越来越高&#xff0c;逐渐成为安防救援的重要帮手。安防无人机作为城市安全应急保障体系的重要组成部分&#xff0c;在未来将变得不可或缺。 一、安防无人机的定义及构成 复亚智能无人机全自主巡飞系统由…
阅读更多...
Redis——简单动态字符串（Simple Dynamic Strings,SDS）

Redis——简单动态字符串（Simple Dynamic Strings,SDS）

简单动态字符串&#xff08;Simple Dynamic Strings,SDS&#xff09;是Redis的基本数据结构之一&#xff0c;用于存储字符串和整型数据。SDS兼容C语言标准字符串处理函数&#xff0c;且在此基础上保证了二进制安全。 1、数据结构 在了解SDS源码前&#xff0c;我们先思考一个问…
阅读更多...
Android平板还能编程？Ubuntu本地安装code-server远程编程写代码

Android平板还能编程？Ubuntu本地安装code-server远程编程写代码

文章目录 1.ubuntu本地安装code-server2. 安装cpolar内网穿透3. 创建隧道映射本地端口4. 安卓平板测试访问5.固定域名公网地址6.结语 1.ubuntu本地安装code-server 准备一台虚拟机,Ubuntu或者centos都可以&#xff0c;这里以VMwhere ubuntu系统为例 下载code server服务,浏览器…
阅读更多...
PMSM转速电流双闭环调速仿真simulink

PMSM转速电流双闭环调速仿真simulink

威♥关注“电击小子程高兴的MATLAB小屋”获取专享优惠 PMSM永磁同步电机PI双闭环&#xff08;速度&#xff0c;电流调节&#xff09;SVPWM矢量matlab-simulink仿真 1.模型简介 本仿真模型基于MATLAB/Simulink&#xff08;版本MATLAB 2017Rb&#xff09;软件。建议采用matlab…
阅读更多...
Large Language Models areVisual Reasoning Coordinators

Large Language Models areVisual Reasoning Coordinators

目录 一、论文速读 1.1 摘要 1.2 论文概要总结 二、论文精度 2.1 论文试图解决什么问题&#xff1f; 2.2 论文中提到的解决方案之关键是什么&#xff1f; 2.3 用于定量评估的数据集是什么&#xff1f;代码有没有开源&#xff1f; 2.4 这篇论文到底有什么贡献&#xff1…
阅读更多...
多路径传输（MPTCP MPQUIC）数据包调度研究总结

多路径传输（MPTCP MPQUIC）数据包调度研究总结

近些年来&#xff0c;以5G和Wifi6为代表的无线通信技术发展迅速&#xff0c;并已经在全世界实现了大规模部署。此外&#xff0c;智能手机等移动设备不断迭代更新&#xff0c;其网络通信能力也持续演进&#xff0c;使得应用同时利用多个不同网卡在多条不同物理链路上&#xff08…
阅读更多...
从遍历到A星寻路算法

从遍历到A星寻路算法

在游戏当中&#xff0c;经常需要找一个点到其它点的路径。在之前的一篇博文(地图编辑器开发&#xff08;三&#xff09;)中也有使用到到A*寻路算法。我们期望能找到最短的路径&#xff0c;同时也需要考虑到查找路径的时间消耗。游戏中的地图可以图的数据结构来表示&#xff0c;…
阅读更多...
【科普】什么是电子印章？ PS抠的印章能用吗？

【科普】什么是电子印章？ PS抠的印章能用吗？

各类扣章教程一搜一大堆&#xff0c;说明大家对于电子印章使用需求很高。不过要谨记&#xff0c;不要随便抠印章用于公文、证明书、合同协议、收据发票等电子文件&#xff0c;否则可能会吃牢饭。 单是一张电子化的图片是不具备合法性的。那有的人就要问了&#xff0c;我见到的…
阅读更多...
采样率越高噪声越大？

采样率越高噪声越大？

ADC采样率指的是模拟到数字转换器&#xff08;ADC&#xff09;对模拟信号进行采样的速率。在数字信号处理系统中&#xff0c;模拟信号首先通过ADC转换为数字形式&#xff0c;以便计算机或其他数字设备能够处理它们。 ADC采样率通常以每秒采样的次数来表示&#xff0c;单位为赫…
阅读更多...
【开源】基于Vue.js的新能源电池回收系统

【开源】基于Vue.js的新能源电池回收系统

文末获取源码&#xff0c;项目编号&#xff1a; S 075 。 \color{red}{文末获取源码&#xff0c;项目编号&#xff1a;S075。} 文末获取源码&#xff0c;项目编号&#xff1a;S075。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 用户档案模块2.2 电池品类模块2.3 回…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023