【html】基础（二）

本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，html js css vue等

💓博主csdn个人主页：小小unicorn
⏩专栏分类：js专栏
🚚代码仓库：小小unicorn的代码仓库🚚
🌹🌹🌹关注我带你学习编程知识

目录

  • 表格标签
    • 基本使用
    • 合并单元格
  • 列表标签
  • 表单标签
    • from标签
    • input标签
      • 文本框
      • 密码框
      • 单选框
      • 复选框
      • 普通按钮
      • 提交按钮
      • 清空按钮
      • 选择文件
    • label 标签
    • select 标签
    • textarea 标签
  • 无语义标签: div & span

表格标签

上一节我们学习了基本的标签，这节我们进一步学习新的标签。

基本使用

在这里插入图片描述
如果我们需要将这个表格大出来，就需要用到我们的表格标签。

表格标签的基本使用：

  • table 标签: 表示整个表格
  • tr: 表示表格的一行
  • td: 表示一个单元格
  • th: 表示表头单元格. 会居中加粗
  • thead: 表格的头部区域(注意和 th 区分, 范围是比 th 要大的)
  • tbody: 表格得到主体区域.

table 包含 tr , tr 包含 td 或者 th.

小方法：
在重复时，我们可以用 shift+alt+ 向下箭头的操作快速生成相同代码

<!-- 快捷键 -->
<!-- shift+alt+向下 -->
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>3</td></tr><tr><td>李四</td><td>男</td> <td>4</td></tr><tr><td >王五</td><td>女</td> <td>5</td></tr></table>
</body>
</html>

在这里插入图片描述
我们发现：这里没有表格线，这就需要我们设置一下表的参数：

<table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500">

表格标签有一些属性, 可以用于设置大小边框等. 但是一般使用 CSS 方式来设置.
这些属性都要放到 table 标签中.

  • align 是表格相对于周围元素的对齐方式. align=“center” (不是内部元素的对齐方式)
  • border 表示边框. 1 表示有边框(数字越大, 边框越粗), “” 表示没边框.
  • cellpadding: 内容距离边框的距离, 默认 1 像素
  • cellspacing: 单元格之间的距离. 默认为 2 像素
  • width / height: 设置尺寸.

注意, 这几个属性, vscode 都提示不出来.
在这里插入图片描述
不仅如此，表头我们可以单另拿出来：
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><!-- 快捷键 --><!-- shift+alt+向下 --><tr><td>张三</td><td>男</td><td>3</td></tr><tr><td>李四</td><td>男</td> <td>4</td></tr><tr><td >王五</td><td>女</td> <td>5</td></tr></table>
</body>
</html>

在这里插入图片描述

合并单元格

  • 跨行合并: rowspan=“n”

  • 跨列合并: colspan=“n”

步骤：

  1. 先确定跨行还是跨列
  2. 找好目标单元格(跨列合并, 左侧是目标单元格; 跨行合并, 上方是目标单元格)
  3. 删除的多余的单元格

还是以上面为例：
在这里插入图片描述
我们将她合并成右边额这个形式。

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table align="center" border="1" cellpadding="20" cellspacing="0" width="500" height="500"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><!-- 快捷键 --><!-- shift+alt+向下 --><tr><td >张三</td><td rowspan="2">男</td><td>3</td></tr><tr><td>李四</td><!-- <td>男</td>  --><td>4</td></tr><tr><td colspan="2" >王五/女</td><!-- <td>女</td>  --><td>5</td></tr></table>
</body>
</html>

在这里插入图片描述

列表标签

主要使用来布局的. 整齐好看.分三部分：

  • 无序列表[重要] ul li, .
  • 有序列表[用的不多] ol li
  • 自定义列表[重要]dl (总标签)dt(小标题) dd (围绕标题来说明) 上面有个小标题, 下面有几个围绕着标题来展开

在这里插入图片描述
在这里插入图片描述

注意:

  • 元素之间是并列关系
  • ul/ol中只能放li不能放其他标签, dl中只能放 dt 和dd
  • li中可以放其他标签.
  • 列表带有自己的样式, 可以使用 CSS 来修改. (例如前面的小圆点都会去掉)

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><h1>这是无序列表</h1><!-- discsquarecircle --><ul type="disc"><li>这是内容1</li><li>这是内容2</li><li>这是内容3</li></ul><h1>这是有序列表</h1><!-- a 表示小写英文字母编号A 表示大写英文字母编号i 表示小写罗马数字编号I 表示大写罗马数字编号1 表示数字编号（默认） --><ol type="a" start="1"><li>这是有序列表1</li><li>这是有序列表2</li><li>这是有序列表3</li><li>这是有序列表4</li></ol><h1>这是自定义列表</h1><dl><dt> 自定义列表显示内容 <!--自定义列表标题 --><dd>自定义列表内容1</dd><dd>自定义列表内容2</dd><dd>自定义列表内容3</dd></dt></dl>
</body>
</html>

运行结果：
在这里插入图片描述

表单标签

通过表单标签，我们可以完成一次对服务器的一次交互

分成两个部分:

  • 表单域: 包含表单元素的区域. 重点是 form 标签.
  • 表单控件: 输入框, 提交按钮等. 重点是input 标签

from标签

描述了要把数据按照什么方式, 提交到哪个页面中.
关于 form 需要结合 服务器 & 网络编程 来进一步理解. 后面再详细研究.

<form action="test.html">
... [form 的内容]
</form>

input标签

各种输入控件, 单行文本框, 按钮, 单选框, 复选框.

  • type(必须有), 取值种类很多多, button, checkbox, text, file, image, password, radio 等.
  • name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选一.
  • value: input 中的默认值.
  • checked: 默认被选中. (用于单选按钮和多选按钮)
  • maxlength: 设定最大长度

文本框

<input type="text">

密码框

<input type="password">

单选框

性别:
<input type="radio" name="sex">男
<input type="radio" name="sex" checked="checked">女

注意: 单选框之间必须具备相同的 name 属性, 才能实现 多选一 效果

复选框

爱好:
<input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">
打游戏

普通按钮

<input type="button" value="我是个按钮">

当前点击了没有反应. 需要搭配 JS 使用(后面会重点研究).

<input type="button" value="我是个按钮" onclick="alert('hello')">

提交按钮

<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
</form>

提交按钮必须放到 form 标签内. 点击后就会尝试给服务器发送

清空按钮

<form action="test.html">
<input type="text" name="username">
<input type="submit" value="提交">
<input type="reset" value="清空">
</form>

清空按钮必须放在 form 中. 点击后会将 form 内所有的用户输入内容重置.

选择文件

<input type="file">

点击选择文件, 会弹出对话框, 选择文件

完整代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><form action="https://www.baidu.com">文本框:<br><input type="text"><br>密码框:<br><input type="password"><br>单选框:性别<br><input type="radio" name="sex">男<!-- 默认是女 --><input type="radio" name="sex" checked="checked">女<br>复选框:爱好<br><input type="checkbox"> 吃饭 <input type="checkbox"> 睡觉 <input type="checkbox">打游戏<br>普通按钮：<br><input type="button" value="我是个按钮" onclick="alert('hello')"><br>提交按钮：<br><input type="text" name="username"><input type="submit" value="提交"><input type="reset" value="重置"><br>提交文件<br><input type="file"></form>
</body>
</html>

运行结果：
在这里插入图片描述

label 标签

搭配 input 使用. 点击 label 也能选中对应的单选/复选框, 能够提升用户体验.

  • for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应. (此时点击才是有用的)
<label for="male">男</label> <input id="male" type="radio" name="sex">

代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female">
</body>
</html>

运行：
在这里插入图片描述
我们点击文字，就会选相应的。

select 标签

下拉菜单

  • option 中定义 selected=“selected” 表示默认选中
<select>
<option>北京</option>
<option selected="selected">上海</option>
</select>

注意! 可以给的第一个选项, 作为默认选项

<select>
<option >--请选择年份--</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
</select>

运行结果：
在这里插入图片描述

textarea 标签

<textarea rows="3" cols="50">
</textarea>

文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><label for="male">男</label><input type="radio" name="sex" id="male"><label for="female">女</label><input type="radio" name="sex" id="female"><select name="" id=""><option value="">--请选择年份--</option><option value="" selected="selected">--1990--</option><option value="">--1991--</option><option value="">--1992--</option><option value="">--1993--</option><option value="">--1994--</option></select><textarea name="" id="" cols="30" rows="10"></textarea>
</body>
</html>

运行结果：
在这里插入图片描述

无语义标签: div & span

div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度

就是两个盒子. 用于网页布局

  • div 是独占一行的, 是一个大盒子.
  • span 不独占一行, 是一个小盒子

代码示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div><div><span>吃饭</span><span>睡觉</span><span>玩游戏</span><span>运动</span></div><div>吃饭</div><div>睡觉</div><div>玩游戏</div><div>运动</div></div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

http增删改查四种请求方式操纵数据库

http增删改查四种请求方式操纵数据库

注意&#xff1a;在manage.py项目入口文件中的路由配置里&#xff0c;返回响应的 return语句后面的代码不会执行&#xff0c;所以路由配置中每个模块代码要想都执行&#xff0c;不能出现return 激活虚拟环境&#xff1a;venv(我的虚拟环境名称&#xff09;\Scripts\activate …
阅读更多...
ubuntu20.04编译安装opencv-4.9.0的cuda版本

ubuntu20.04编译安装opencv-4.9.0的cuda版本

NVIDIA显卡驱动550.107.02&#xff08;4060显卡&#xff1a;8.9&#xff0c;3060显卡&#xff1a;8.6&#xff09;cuda&#xff1a;12.1cudnn&#xff1a;8.9.7opencv4.9.0&#xff0c;opencv_contrib_4.9.0 前三个安装略过&#xff01; 主要编译安装opencv4.9.0: 下载openc…
阅读更多...
Unity3D 小案例 像素贪吃蛇 03 蛇的碰撞

Unity3D 小案例 像素贪吃蛇 03 蛇的碰撞

Unity3D 小案例 像素贪吃蛇 第三期 蛇的碰撞&#xff08;完结&#xff09; 像素贪吃蛇 碰撞蛇身 当蛇头碰撞到蛇身时&#xff0c;游戏应该判定为失败。 找到蛇身预制体&#xff0c;添加 Body 标签和碰撞体&#xff0c;碰撞体的大小为 0.5&#xff0c;跟蛇头和蛇身的碰撞体范…
阅读更多...
使用数据泵（Data Pump）迁移Oracle数据库数据

使用数据泵（Data Pump）迁移Oracle数据库数据

目的 将一个oracle数据库实例数据复制给另一个实例 注意事项 sqlplus&#xff08;即在本机linux环境下执行sql&#xff09;、expdp、impdp等命令一般需要切换到oracle用户才能执行 如果你当前是linux的root用户&#xff0c;请切换用户 su - oracle //一般在oracle账号下才能…
阅读更多...
node节点使用：

node节点使用：

节点&#xff1a; 1.返回父节点 parentNode let par li1.parentNodepar.style.border 1px solid red 2.获取所有子节点的集合 childNodes let nodes par.childNodes 3.第一个子节点 firstChild let frist par.firstChild 4.最后一个 lastChild let last par.lastC…
阅读更多...
AlDente Pro for Mac电池健康保护工具

AlDente Pro for Mac电池健康保护工具

AlDente Pro for Mac 是一款适用于 Mac 的实用电池健康保护工具。以下是它的主要特点和优势&#xff1a; 软件下载地址 一、保护电池寿命的原理 锂离子和聚合物电池&#xff08;如 Mac 笔记本中的电池&#xff09;在 30% 到 80% 之间运行时使用寿命最长。始终将电池电量保持…
阅读更多...
service 命令：管理系统服务

service 命令：管理系统服务

一、命令简介 ​service​ 命令是 Linux 系统中用于管理服务的工具&#xff0c;它通过调用位于 /etc/init.d/ ​目录下的服务脚本&#xff0c;来启动、停止、重启、查询状态等操作系统服务&#xff08;守护进程&#xff09;。service ​命令是一个便捷的 shell 脚本&#xff0…
阅读更多...
Windows 10 on ARM, version 22H2 (updated Aug 2024) ARM64 AArch64 中文版、英文版下载

Windows 10 on ARM, version 22H2 (updated Aug 2024) ARM64 AArch64 中文版、英文版下载

Windows 10 on ARM, version 22H2 (updated Aug 2024) ARM64 AArch64 中文版、英文版下载 基于 ARM 的 Windows 10 请访问原文链接&#xff1a;https://sysin.org/blog/windows-10-arm/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;s…
阅读更多...
【VUE3.0】动手做一套像素风的前端UI组件库---Message

【VUE3.0】动手做一套像素风的前端UI组件库---Message

目录 引言自己整一个UI设计稿代码编写1. 设计信息窗口基础样式2. 设置打开和关闭的方法3. 编写实例化组件的js文件4. 看下最终效果5. 组件完整代码6. 组件调用方式 总结 引言 本教程基于前端UI样式库 NES.css 的UI设计&#xff0c;自行研究复现。欢迎大家交流优化实现方法~ 此次…
阅读更多...
深度学习(3):Tensor和Optimizer

深度学习(3):Tensor和Optimizer

文章目录 是什么Tensor1. Tensor 的基本概念2. 自动求导&#xff08;Autograd&#xff09;机制3. requires_grad 属性4. .data 和 .item()5. 梯度清零 Optimizer 是什么 Tensor&#xff08;张量&#xff09;&#xff1a;在 PyTorch 中&#xff0c;Tensor 是一种多维数组&#…
阅读更多...
《线性代数》学渣笔记

《线性代数》学渣笔记

文章目录 1 行列式1.1 克拉默法则1.2 基本性质1.3 余子式 M i j M_{ij} Mij​1.4 代数余子式 A i j ( − 1 ) i j ⋅ M i j A_{ij} (-1)^{ij} \cdot M_{ij} Aij​(−1)ij⋅Mij​1.5 具体型行列式计算&#xff08;化为基本型&#xff09;1.5.1 主对角线行列式&#xff1a;主…
阅读更多...
基于数据挖掘的航空客户满意度分析预测系统

基于数据挖掘的航空客户满意度分析预测系统

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长 QQ 名片 :) 1. 项目简介 航空公司致力于提供多样化的服务以满足乘客需求&#xff0c;包括但不限于提供免费无线网络、免费食物饮品、提供网上预约服务、飞机出口位置、座椅舒适度、卫生状况等&#xff0c;并希望以此提升乘…
阅读更多...
SQL面试常见题目

SQL面试常见题目

SQL面试常见题目涉及多个方面&#xff0c;包括数据查询、数据操作、表的设计与优化等。以下列举一些经典的SQL面试题目&#xff0c;并附上解析答案&#xff1a; 1. 查询一张表中重复的数据 题目&#xff1a; 给定一个表 employees&#xff0c;包含 id, name, salary 列。如何…
阅读更多...
python基础题练习

python基础题练习

1.可否定义一个sum函数呢&#xff1f;返回指定区间的值的和&#xff1f;例如&#xff0c;区间[1,4]的和为123410返回指定区间值的平方的和呢&#xff1f;立方呢&#xff1f; 代码&#xff1a; # 计算从start到end&#xff08;包括end&#xff09;的所有整数的和。 def sum_ra…
阅读更多...
AutoX.js向后端传输二进制数据

AutoX.js向后端传输二进制数据

android的JavaScript自动化软件用过Hamibot和AutoX.js 不过在向后端传输二进制数据时都有些限制&#xff0c;不如浏览器前端那么自由。Hamibot的http按文档应该时能支持传字节数组&#xff0c;但是实际上应该还没有支持。AutoX.js的http也是这样&#xff0c;但是AutoX.js还支持…
阅读更多...
P7557 [USACO21OPEN] Acowdemia S题解

P7557 [USACO21OPEN] Acowdemia S题解

[USACO21OPEN] Acowdemia S 题目描述 由于对计算机科学的热爱&#xff0c;以及有朝一日成为 「Bessie 博士」的诱惑&#xff0c;奶牛 Bessie 开始攻读计算机科学博士学位。经过一段时间的学术研究&#xff0c;她已经发表了 N N N 篇论文&#xff08; 1 ≤ N ≤ 1 0 5 1 \leq…
阅读更多...
SpringBoot框架之KOB项目 - 配置Mysql与注册登录模块（中）

SpringBoot框架之KOB项目 - 配置Mysql与注册登录模块（中）

修改Spring Security 登录验证模式 传统的验证登录模式 公开页面&#xff1a;输入url就可以直接访问授权页面&#xff1a;登录之后才可以访问 Jwt验证模式 容易实现跨域不需要在服务器端存储 对比于传统模式将所有的sessionId换成jwt token access token refresh token 过…
阅读更多...
分发饼干00

分发饼干00

题目链接 分发饼干 题目描述 注意点 1 < g[i], s[j] < 2^31 - 1目标是满足尽可能多的孩子&#xff0c;并输出这个最大数值 解答思路 可以先将饼干和孩子的胃口都按升序进行排序&#xff0c;随后根据双指针 贪心&#xff0c;将当前满足孩子胃口的最小饼干分配给该孩…
阅读更多...
Android开发高频面试题之——Android篇

Android开发高频面试题之——Android篇

Android开发高频面试题之——Android篇 Android开发高频面试题之——Java基础篇 Android开发高频面试题之——Kotlin基础篇 Android开发高频面试题之——Android基础篇 1. Activity启动模式 standard 标准模式，每次都是新建Activity实例。singleTop 栈顶复用。如果要启动的A…
阅读更多...
关于预处理的一系列问题

关于预处理的一系列问题

1. 预定义符号 C语⾔设置了⼀些预定义符号&#xff0c;可以直接使⽤&#xff0c;预定义符号也是在预处理期间处理的。 2. #define定义常量 #define name stuff 如果定义的 stuff过⻓&#xff0c;可以分成⼏⾏写&#xff0c;除了最后⼀⾏外&#xff0c;每⾏的后⾯都加⼀个反…
阅读更多...
最新文章

Copyright @ 2022~2023