【html】基础（二）

news2024/9/25 6:36:57

本专栏内容为：前端专栏 记录学习前端，分为若干个子专栏，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>
        <!-- disc
        square
        circle -->
        <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.coloradmin.cn/o/2162806.html

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

相关文章

WGCLOUD 性能调优笔记

WGCLOUD 性能调优笔记

如果主控端server主机内存资源充裕的话&#xff0c;适当增加内存使用&#xff0c;提升server运算能力 修改server/start.sh中的 -Xms256m -Xmx512m &#xff0c;改为 -Xms1024m -Xmx1024m &#xff0c;重启server生效 也可以设置更高些&#xff0c;比如改为 -Xms2048m -Xmx20…
阅读更多...
时序预测：LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较

时序预测：LSTM、ARIMA、Holt-Winters、SARIMA模型的分析与比较

引言 近年来&#xff0c;民航旅客周转量一直是衡量国家或地区民航运输总量的重要指标之一。为了揭示民航旅客周转量背后的规律和趋势&#xff0c;本研究旨在综合分析1990年至2023年的相关数据。 通过单位根检验和序列分解&#xff0c;我们确定了民航旅客周转量数据的非平稳性&…
阅读更多...
8.13霍夫变换-直线检测

8.13霍夫变换-直线检测

基本概念 霍夫变换&#xff08;Hough Transform&#xff09;是一种用于检测图像中特定形状&#xff08;如直线、圆、椭圆等&#xff09;的技术。在OpenCV中&#xff0c;霍夫变换主要用于检测直线和圆形。这里我们将详细介绍如何使用OpenCV中的霍夫变换来检测直线。 霍夫变换&…
阅读更多...
Linux 基础IO（个人笔记）

Linux 基础IO（个人笔记）

Linux基础 IO 1.C文件IO操作1.1 hello.c写文件1.2 hello.c读文件1.3 stdin&stdout&stderr 2.系统文件I/O2.1 hello.c写文件2.2 hello.c读文件2.3 open函数介绍2.4 文件描述符 fd2.4.1 文件描述符的分配规则2.4.2 重定向2.4.3 dup2系统调用2.4.4 C文件结构体FILE2.4.5 C…
阅读更多...
文件上传、amrkdown编辑器

文件上传、amrkdown编辑器

一、文件上传 这里我以图片为例&#xff0c;进行上传&#xff0c;上传到阿里云oss&#xff08;对象存在中&#xff09; 首先&#xff0c;我们先梳理一下&#xff0c;图片上传的流程 1、前端选择文件&#xff0c;提交文件 前端提交文件&#xff0c;我们可以使用ElementUI中的…
阅读更多...
python如何实现日期加减

python如何实现日期加减

首先通过import datetime&#xff0c;导入日期处理库。 然后把日期转化成datetime标准格式&#xff0c;使用datetime.datetime.strptime()方法将字符串格式的时间转化为标准格式。 其中"%Y/%m/%d %H:%M:%S"为time字符串的时间格式&#xff1a;Y为年&#xff0c;m为月…
阅读更多...
思维导图在线工具哪家强？2024年最新评测

思维导图在线工具哪家强？2024年最新评测

你用过思维导图工具吗&#xff1f;如果品尝需要对事情进行逻辑理顺操作或者需要增强记忆点那我比较推荐使用思维导图在线工具来解决这些问题。这篇文章我将介绍几款思维导图工具来提高我们的效率。 1.福晰思维导图 链接一下&#xff1a;https://www.pdf365.cn/naotu/ 这款思…
阅读更多...
JVM的基本组成

JVM的基本组成

一、JDK\JRE\JVM JDK: 全称 "Java Development Kit" &#xff0c;Java 开发工具包&#xff0c;提供 javac 编译器、jheap、jconsole 等监控工具;JRE: 全称"Java Runtime Environment"&#xff0c;Java 运行环境&#xff0c;提供Class Library 核心类库 JV…
阅读更多...
【leetcode练习·二叉树】用「遍历」思维解题 I

【leetcode练习·二叉树】用「遍历」思维解题 I

本文参考labuladong算法笔记[【强化练习】用「遍历」思维解题 I | labuladong 的算法笔记] 257. 二叉树的所有路径 | 力扣 | LeetCode | 给你一个二叉树的根节点 root &#xff0c;按 任意顺序 &#xff0c;返回所有从根节点到叶子节点的路径。 叶子节点 是指没有子节点的节点…
阅读更多...
spring-boot、spring-cloud、spring-cloud-alibaba的常用依赖的依赖声明及pom文件

spring-boot、spring-cloud、spring-cloud-alibaba的常用依赖的依赖声明及pom文件

copy自若依 父工程pom文件&#xff0c;主要定义了依赖的版本号 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sch…
阅读更多...
什么是电商云手机？可以用来干什么？

什么是电商云手机？可以用来干什么？

随着电商行业的迅速发展&#xff0c;云手机作为一种创新工具正逐渐进入出海电商领域。专为外贸市场量身定制的出海电商云手机&#xff0c;已经成为许多外贸企业和出海电商卖家的必备。本文将详细介绍电商云手机是什么以及可以用来做什么。 与国内云手机偏向于游戏场景不同&…
阅读更多...
什么是启发式过滤（Heuristic Filtering）？

什么是启发式过滤（Heuristic Filtering）？

定义 启发式过滤是一种技术方法&#xff0c;利用解决问题的技术和算法来识别数据中的模式、趋势或特征。 这种方法通常涉及使用预测分析和近似方法&#xff0c;以便快速做出决策或对信息进行分类。 启发式过滤通常应用于反垃圾邮件软件、防病毒程序和人工智能等领域&#xff0…
阅读更多...
openeuler22.03 LTS 源码编译安装nginx1.22.1

openeuler22.03 LTS 源码编译安装nginx1.22.1

openeuler22.03 LTS 源码编译安装nginx1.22.1 下载安装包 #官网下载nginx1.22.1 wget http://nginx.org/download/nginx-1.22.1.tar.gz安装依赖包 #安装依赖包&#xff0c;NGINX是C语言写的&#xff0c;pcre-devel支持正则表达式&#xff0c;openssl 开启加密 [rootproxy ~]…
阅读更多...
Java面向对象（类和对象）（自己学习整理的资料）

Java面向对象（类和对象）（自己学习整理的资料）

目录 一.面向对象思想 二.类和对象 三&#xff1a;定义类的步骤 四.创建对象 五.用Java代码写一个简单的登录系统 练习 六.关于类的方法 七.类的无参无返回值方法 八.方法的返回值 练习 关于方法调用问题 九.全局变量和局部变量 十.笔记 一.面向对象思想 就只关注参…
阅读更多...
科研绘图系列：R语言分组堆积图（stacked barplot）

科研绘图系列：R语言分组堆积图（stacked barplot）

文章目录 介绍加载R包导入数据数据预处理画图导出数据系统信息介绍 堆积图是一种数据可视化图表，它通过将不同类别的数据以堆叠的形式展现在同一个图表中，来展示各个类别之间的相对大小和它们之间的总和。堆积图可以是柱状图、条形图或面积图的形式，其中每个堆叠的块或区域…
阅读更多...
西门子S7-1200 PLC的配方功能

西门子S7-1200 PLC的配方功能

配方相关指令介绍工控人加入PLC工业自动化精英社群 配方功能主要使用4个指令&#xff0c;READ_DBL和WRIT_DBL用于对配方数据块的读写&#xff0c;RecipeExport和RecipeImport用于配方数据块和CSV文件之间的转化&#xff0c;下面分别介绍这4个指令的使用。 READ_DBL / / / / …
阅读更多...
MMD模型及动作一键完美导入UE5-Blender方案（三）

MMD模型及动作一键完美导入UE5-Blender方案（三）

1、下载并安装blender_mmd_tools插件 1、下载并安装Blender，Blender，下载Blender3.6，下载太新的版本可能会跟blender_mmd_tools不匹配 2、github下载blender_mmd_tools：https://github.com/UuuNyaa/blender_mmd_tools/ 3、Edit->Preference->Add ons->Install F…
阅读更多...
【LinuxC高级】汇总

【LinuxC高级】汇总

ls ls -l&#xff1a;显示文件的详细信息 ls -a&#xff1a;显示隐藏文件 ls -lh&#xff1a;文件大小单位显示 ls -i&#xff1a;显示文件的inode号 修改密码 passwd 用户名 su 用户名 -----> 用户名 su ----> 如果不加用户名&#xff0c;默认切换到超级用户 cd cd 路径…
阅读更多...
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…
阅读更多...
MyBatis—Plus 快速上手【后端 22】

MyBatis—Plus 快速上手【后端 22】

MyBatis-Plus 使用入门指南 前言 在Java的持久层框架中&#xff0c;MyBatis因其灵活性和易用性而广受欢迎。然而&#xff0c;随着项目规模的扩大&#xff0c;MyBatis的一些重复性工作&#xff08;如CRUD操作&#xff09;开始显得繁琐。为了解决这一问题&#xff0c;MyBatis-Pl…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023