【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 …
阅读更多...
Unity3D 小案例 像素贪吃蛇 03 蛇的碰撞

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

Unity3D 小案例 像素贪吃蛇 第三期 蛇的碰撞&#xff08;完结&#xff09; 像素贪吃蛇 碰撞蛇身 当蛇头碰撞到蛇身时&#xff0c;游戏应该判定为失败。 找到蛇身预制体&#xff0c;添加 Body 标签和碰撞体&#xff0c;碰撞体的大小为 0.5&#xff0c;跟蛇头和蛇身的碰撞体范…
阅读更多...
AlDente Pro for Mac电池健康保护工具

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

AlDente Pro for Mac 是一款适用于 Mac 的实用电池健康保护工具。以下是它的主要特点和优势&#xff1a; 软件下载地址 一、保护电池寿命的原理 锂离子和聚合物电池&#xff08;如 Mac 笔记本中的电池&#xff09;在 30% 到 80% 之间运行时使用寿命最长。始终将电池电量保持…
阅读更多...
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;自行研究复现。欢迎大家交流优化实现方法~ 此次…
阅读更多...
《线性代数》学渣笔记

《线性代数》学渣笔记

文章目录 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 列。如何…
阅读更多...
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;每⾏的后⾯都加⼀个反…
阅读更多...
win10下使用docker、k8s部署java应用

win10下使用docker、k8s部署java应用

在上一篇文章 Windows10上Docker和Kubernetes的安装 中&#xff0c;已经介绍了在 Windows10上安装Docker和Kubernetes &#xff0c;有了这个环境基础之后&#xff0c;就可以用来部署服务了 在项目目录下新建Dockfile文件&#xff0c;内容如下&#xff08;请根据实际情况调整&am…
阅读更多...
前端——阿里图标的使用

前端——阿里图标的使用

阿里图标 将小图标定义成字体&#xff0c;通过引入字体的方式来展示这些图标 1.打开阿里图标库 https://www.iconfont.cn/ 2.登录 / 注册一个账号 3.选中你需要使用的图标 并且把它加入购物车 4.全部选择完之后 点击右上角 购物车 然后下载代码 5.解压后你下载的文…
阅读更多...
Web+Mysql——MyBatis

Web+Mysql——MyBatis

MyBatis 目标 能够完成Mybatis代理方式查询数据能够理解Mybatis核心配置文件的配置 1&#xff0c;Mybatis 1.1 Mybatis概述 1.1.1 Mybatis概念 MyBatis 是一款优秀的持久层框架&#xff0c;用于简化 JDBC 开发 MyBatis 本是 Apache 的一个开源项目iBatis, 2010年这个项目由…
阅读更多...
面试面经｜大模型算法岗常见面试题100道

面试面经｜大模型算法岗常见面试题100道

本文提供了一份全面的大模型算法岗位面试题清单&#xff0c;包括基础理论、模型结构、训练微调策略、应用框架、分布式训练和模型推理等方面的知识点&#xff0c;旨在帮助求职者准备相关技术面试。 一、基础篇 1、目前主流的开源模型体系有哪些&#xff1f; Transformer体系&a…
阅读更多...
neo4j(spring) 使用示例

neo4j(spring) 使用示例

文章目录 前言一、neo4j是什么二、开始编码1. yml 配置2. crud 测试3. node relation 与java中对象的关系4. 编码测试 总结 前言 图数据库先驱者 neo4j&#xff1a;neo4j官网地址 可以选择桌面版安装等多种方式,我这里采用的是docker安装 直接执行docker安装命令: docker run…
阅读更多...
zabbix“专家坐诊”第256期问答

zabbix“专家坐诊”第256期问答

原作者&#xff1a;乐维社区 原文链接&#xff1a;https://forum.lwops.cn/questions 问题一 Q&#xff1a;zabbix 6.4.18版本的&#xff0c;使用zabbix_agentd2监控mysql数据库&#xff0c;只能在界面配置mysql的相关信息吗&#xff1f;这个在zabbix表里面是明文存储的&#x…
阅读更多...
力扣反转链表系列【25. K 个一组翻转链表】——由易到难，一次刷通！！！

力扣反转链表系列【25. K 个一组翻转链表】——由易到难，一次刷通！！！

力扣《反转链表》系列文章目录 刷题次序&#xff0c;由易到难&#xff0c;一次刷通&#xff01;&#xff01;&#xff01; 题目题解206. 反转链表反转链表的全部 题解192. 反转链表 II反转链表的指定段 题解224. 两两交换链表中的节点两个一组反转链表 题解325. K 个一组翻转…
阅读更多...
在python爬虫中xpath方式提取lxml.etree._ElementUnicodeResult转化为字符串str类型

在python爬虫中xpath方式提取lxml.etree._ElementUnicodeResult转化为字符串str类型

简单提取网页中的数据时发现的 当通过xpath方式提取出需要的数据的text文本后想要转为字符串&#xff0c;但出现lxml.etree._ElementUnicodeResult的数据类型不能序列化&#xff0c;在网上查找到很多说是编码问题Unicode编码然后解码什么的&#xff1b;有些是(导入的xml库而不…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023