2.链接、列表、表格

最新推荐文章于 2024-07-21 17:58:14 发布
最新推荐文章于 2024-07-21 17:58:14 发布
阅读量106 收藏
点赞数 1
分类专栏： 初级前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53285346/article/details/119906392
版权

1、链接（a）

    <a href="跳转目标地址" target="_blank" title="提示文本"> 链接文本 </a>

  • 1）、跳转到同一个网站中的其他页面

    <a href="目标网页的相对路径"> 链接文本 </a>
    <a href="./1、作业.html">跳转到作业</a>
    <a href="../day01/4、网页图片.html">跳转到网页图片</a>

  • 2）、跳转到其他网站中的页面（友情链接）

    <a href="目标网页的网络地址"> 链接文本 </a>
    <a href="https://www.baidu.com">去百度</a>

  • 3）、定位到同一个页面中的指定位置（锚点链接）

    <h1 id="head"> top </h1>
    <a href="#head"> 回顶部 </a>

属性说明：

  • target="_blank" ： 在新窗口中打开目标页面

  • title=" 提示文本 " ： 定义鼠标悬停时显示的提示文本

 <!-- 图片链接 -->
    <a href="https://www.baidu.com">
        <img src="..." alt="">
    </a>

2、列表

1）、有序列表

  • 定义一些顺序重要的列表

    <ol type="1">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>

属性说明:

  • type:用来定义列表的编号类型 '1/A/a/I/i'

2）、无序列表

  • 定义一些顺序不重要的列表

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

属性说明:

  • type:用来定义列表的标记类型 'desc(实心圆)/circle(空心圆)/square(正方形)'

3）、定义列表

  • 用来对一些专有名词进行解释说明

    <dl>
        <dt> HTML </dt>
        <dd> 超文本标记语言 </dd>
        <dd> 是用来描述网页的一种语言 </dd>
​
        <dt> CSS </dt>
        <dd> 层叠样式表 </dd>
        <dd> 用来给网页添加样式的一种语言 </dd>
    </dl>
​

  • dt : 用来放名词

  • dd : 用来放解释，一个dt可以对应多个dd

3、表格

 <table border="1" width="300" height="300" style="border-collapse: collapse;">
        <tr>
            <td> 1 </td>
            <td> 2 </td>
            <td> 3 </td>
        </tr>
        <tr>
            <td> 4 </td>
            <td> 5 </td>
            <td> 6 </td>
        </tr>
        <tr>
            <td> 7 </td>
            <td> 8 </td>
            <td> 9 </td>
        </tr>
</table>

3.1、表格常用标签

  • table : 定义整个表格

    • 属性：

      • border="1" : 给表格以及单元格都添加1px边框

      • width="300" : 给表格定义整体的宽度

      • height="300" : 给表格定义整的的高度

      • style="border-collapse: collapse;" ：去掉单元格之间的间距，并且把相邻边框合并

  • tr : 定义表格的行

  • td : 定义表格的普通单元格

  • th : 定义表头单元格，文字默认加粗居中

3.2、表格相关其他标签

  • caption: 定义表格标题

  • thead : 定义表格头部部分

  • tbody : 定义表格主体部分

  • tfoot : 定义表格的脚注部分

这些标签不会影响表格的样式，作用是增强表格的语义化，让表格结构更清晰

3.3、表格的特点：

  • 如果表格设置了宽度和高度，里面的单元格的列宽和行高会按照内容比例进行分配

  • 也可以通过给单元格设置width或者height属性来改变列宽和行高

3.4、合并单元格

  • colspan : 合并列

  • rowspan : 合并行

例题

1.列表

<!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>
    <ol type="I">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
​
    <ul type="circle">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
​
    <dl>
        <dt> HTML </dt>
        <dd> 超文本标记语言 </dd>
        <dd> 是用来描述网页的一种语言 </dd>
​
        <dt> CSS </dt>
        <dd> 层叠样式表 </dd>
        <dd> 用来给网页添加样式的一种语言 </dd>
    </dl>
</body>
</html>
​

2.表格

 

<!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 border="1" width="300" height="300">
        <tr>
            <td colspan="3">1</td>
            <!-- <td>2</td> -->
            <!-- <td>3</td> -->
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <!-- <td>9</td> -->
        </tr>
    </table>
</body>
</html>

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>
    <a href="./1、作业.html" target="_blank" title="hello world">跳转到作业</a>
    <a href="../day01/4、网页图片.html" target="_self">跳转到网页图片</a>
    <a href="https://www.baidu.com">去百度</a>
    <h1 id="head">顶部</h1>
    <p style="height: 500px;background-color: red;">中国万岁
    </p>
    <p style="height: 500px;background-color: yellow;">中国万岁。
    </p>
    <p id="p3" style="height: 500px;background-color: green;">p3
    </p>
    <p style="height: 500px;background-color: blue;">
    </p>
    <p style="height: 500px;background-color: green;">
    </p>
    <p style="height: 500px;background-color: pink;">
    </p>
    <a href="#head">回到顶部</a>
    <a href="#p3">到p3位置</a>
    <!-- 图片链接 -->
    <a href="https://www.baidu.com">
        <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
    </a>
</body>
</html>

作业

1.新建文件table.html，画一个3行4列的表格，要求最后一行合并为一个单元格，第一行的第一个和第二行的第一个合并为一个单元格，去掉单元格之间的间距，并且把相邻边框合并（style="border-collapse: collapse;" ）

2.新建文件a.html,做一个三行的列表，有序无序皆可，点击第一行的内容跳转到table.html

 

在代码中挣扎的小白
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui表格添加链接列_Layui表格列添加超链接
weixin_28893705的博客
12-24 4540
记录一下，需要用到templet属性，也就是自定义列模板参考代码：{ field: 'oddNumbers', width: 180, title: '单号', sort: true, fixed: 'left', templet: addLink },addLink是个方法function addLink(d) {var addLink = d.oddNumbers;if ('' == addL...
HTML超链接 表格 列表 表单
m0_61700036的博客
10-06 2292
一、HTML超链接 超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。 超链接标签：<a>一个链接到另一个链接 【Anchor 锚】 <a href='url地址' target='页面打开的方式'>页面元素(文字、图像、音频、视频)</a> 'href'属性：值是要跳转的页面的地址,通常用'#'表示空链接 'target...
如何在html表格中添加超链接,excel表格添加网页链接(网页 链接execl 制作 列表)...
weixin_39940182的博客
07-20 1788
如何在一个excel表中做数据链接在一个相对比较大表里点击一个数据的时候选择你所说的那个数据--右键--超链接--在左侧选择第2项--然后选择表格名称--上面指定单元格--确定怎么样把网页中的表格插入到excel表格中？首保证你的电脑已上线菜单:-导入数据-新建web在弹出的对话框的地中,输入你的数据表格所在网页的网址然后,下面就会显示出数据所在的网页表格前面,会出现一个向右的箭头,点击这个箭头按...
HTML定义表格，链接与图像
Xucc_x的博客
07-28 2491
 在HTML页面中，我们经常要插入表格，链接，或者一些图像的信息，毕竟，一个页面如果只有文字，那会是多么令人厌恶的一件事。 1. HTML表格  &lt;table&gt;标签定义表格，&lt;tr&gt;定义表格中的行，&lt;td&gt;定义一行中的若干单元格。单元格中可以包含文本、图片、列表、段落、表单、水平线、表格等等元素。 &lt;html&gt; &lt;body&gt; ...
HTML表格表单以及列表
lh11223326的博客
03-31 1476
标签是用来定义表格的。定义完之后发现其结构和Excel的标签是非常相似的，都有行，列，单元格，表头等等，但是Excel毕竟还是专业，不像HTML既不支持排序又不支持求和，还不支持很多数学计算，只能用来展示数据。HTML常用的图片标签和超链接标签-CSDN博客HTML常用文本标签-CSDN博客：表示表格，表格的所有内容需要写在和
玩转HTML图像，链接，列表，表格等标签
涤生大数据
07-18 6927
html的学习知道有哪些标签，怎么使用，其余就是如何将这些标签互相混合嵌套使用了。 1.html图像img标签的使用 <img>标签可以在网页上插入一张图片，它是独立使用的标签，通过“src”属性定义图片的地址，通过“alt”属性定义图片加载失败时显示的文字，以及对搜索引擎和盲人读屏软件的支持。 <img src="images/pic.jpg" alt="产品图...
vue+element-ui表格列元素添加链接
热门推荐
smilling sky的博客
05-23 1万+
1.如果要给表格列添加链接，则需要使用自定义列模板（针对element）,通过 scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据。关于自定义列模板，在https://element.eleme.cn/#/zh-CN/component/table 中有更详细的解释。 2.还有就是当给表格列添加链接的时候一定要用上v-bi...
基于PPStructureV2实现pdf的表格识别
WIZERS的博客
01-30 2931
PPStructureV2由百度的PaddleOCR团队开发，获得了当前文档/图片中表格识别的最佳性能(State-of-the-art, SOTA)。github项目地址论文地址。本文是从应用角度出发，所以不会讲太多原理上的东西。经过我多次测试，发现PPStructure的效果并没有想象中那么好，它会忽略或误判小型表格（只有两三行的），可能会识别为“figure”或“text”，而且时间性能也很长。但是对于大型表格、多表头、合并单元格的识别确实相当惊艳，并且可以识别双列文档。
html 链接excel,如何把excel表格中的文本链接变成可点击打开的网址链接(超链接)?...
weixin_39992831的博客
06-10 2322
如何将excel表格中的网址全部设置成超链接？我们从网上下载的excel表格中会有一些网址链接，但这样的网址链接是一个文本的格式，我们是无法点击跳转到网页的。下面小编就给大家介绍如何把表格中的文本格式链接变为可点击打开的网址链接，即把文本链接转变成超链接，从而帮助大家很方便的打开网址。如何把excel表格中的文本链接变成可点击打开的网址链接？1、首先打开excel表格，选中我们想要转换成可点击网址...
定义列表及表格
你还有我
12-03 2558
学习内容定义列表超链接锚点的使用空链接表格合并单元格div span 是css中重要的“盒子” 定义列表 有三个标签参与：dl dt dd dl:定义一个定义列表。 dt:定义标题（列表项） dd：对标题的说明和解释 嵌套关系：dl>dt+dd. 格式： <dl> <dt></dt> <dd></dd> </dl> 1.dt与dd是同级 2.一个dt可以用多个dd来解释。 3.dd
jQuery表格列表分页样式特效代码
03-20
本资源提供了基于jQuery的表格列表分页样式特效代码，它可以帮助开发者轻松实现美观且功能丰富的分页功能。以下是对这个jQuery插件的详细解析。 首先，jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、...
EXCEL表格技术样本.doc
12-15
36. 输入数据下拉列表：使用数据有效性功能，创建下拉列表，规范输入。 37. 输入身份证号码：设置数据验证规则，确保输入的身份证号码格式正确。 38. 页面背景设立：为工作表添加背景图片或颜色，增加视觉效果。 ...
Layui树形表格.rar
06-11
4. **固定表头**：在长列表中，Layui树形表格允许设置表头固定，即使在滚动查看内容时，表头始终保持可见，方便用户对照列名理解数据。 5. **自定义节点内容**：Layui树形表格允许开发者自定义每个节点的显示内容，...
LabVIEWLV控制列表框、设置表格颜色.rar
11-06
2. **可选择性(Selectable)**：在描述中提到的“Selectable ListBox”可能是指该列表框允许用户选择一个或多个项，而不是仅仅显示信息。这可以通过设置列表框属性来实现，比如启用多选模式。 3. **xControl**：...
表格列表偶数列、奇数列的CSS样式示例
09-25
本示例探讨了如何使用CSS为表格列表实现特定的样式，包括偶数列、奇数列、鼠标悬停时的样式以及标题列的样式。这对于创建有吸引力且易于阅读的数据展示非常有用。 首先，我们看HTML部分。这里有一个`<table>`元素，...
html--图片变化
2301_81140745的博客
07-20 420
2.点击上传图片会有变化。
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 323
网页隐藏版一行小说阅读器
黑马JavaWeb企业级开发（知识清单）01——前端介绍，HTML实现标题：排版
最新发布
apple_68589597的博客
07-21 670
本篇文章是2023年最新黑马JavaWeb企业级开发（知识清单）01：前端介绍、html实现标题格式内容的总结，帮助需要学习Web开发的朋友温故而知新。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1222
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
ubuntu安装vivado2019.2
08-15
要在Ubuntu上安装Vivado 2019.2，你可以按照以下步骤进行操作。 首先，你需要下载Vivado 2019.2的安装包。你可以在Xilinx官网上找到相关的下载链接。接下来，你需要进入安装包所在的目录，并执行安装命令。假设你将安装包保存在temp目录下，你可以使用以下命令进行安装：cd temp/ ./petalinux-v2019.2-final-installer.run /home/xerus/Application/PetaLinux。 在安装Vivado之前，你可能还需要安装一些开发环境和依赖项。你可以在Xilinx官方网站上搜索"ug1144"，下载《ug1144-petalinux-tools-reference-guide》的PDF文件，其中包含了安装所需的开发环境的列表。根据文档中的说明，你需要更新软件源列表，然后按照表格中的指令依次安装所需的软件包。 请注意，具体的安装步骤可能会因为系统配置和个人偏好而有所不同。建议你在安装之前详细阅读官方文档，并确保你的系统满足所有的要求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [RISCV学习笔记5.4--ubuntu18.04安装vivado](https://blog.csdn.net/qq_41735476/article/details/125348549)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Ubuntu18.04下安装Vivado2019.2 Vitis Petalinux详细步骤，避坑指南](https://blog.csdn.net/sinat_15028281/article/details/123496251)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值