educoder—web:超链接和表格

2023-10-22 01:30
文章标签 web 表格 超链接 educoder

本文主要是介绍educoder—web:超链接和表格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 1.超链接的应用——知识训练
  • 2.超链接的应用——编程训练
    • 2.1创建热字超链接
    • 2.2创建热图超链接
    • 2.3下载歌曲超链接
    • 2.4创建页内超链接
  • 3.表格标签——表格基本结构
    • 3.1网页表格的基本概念
      • 3.1.1表格的基本标签
      • 3.1.2表格标签的基本属性
        • table标签的基本属性
        • tr标签的基本属性
        • th和td标签的属性
    • 3.2创建简单的表格
    • 3.3表格行样式的设置
    • 3.4表格中单元格样式的设置
      • 3.4.1单元格的整体样式设置
      • 3.4.2某个单元格样式的设置
  • 4.表格标签—表格高级样式的设置
    • 4.1表格高级样式设置相关概念
      • 4.1.1外边框线样式属性frame—table标签
      • 4.1.2内部边框样式属性rules——table标签
      • 4.1.3单元格合并
    • 4.2设置表格的外边框样式
    • 4.3设置表格的内边框样式
    • 4.4表格中单元格的合并
    • 4.5表格的综合案例

1.超链接的应用——知识训练

在这里插入图片描述

2.超链接的应用——编程训练

超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件编辑器，一个音频或视频文件，甚至是一个应用程序。
设置一个超链接，至少需要两个基本要素：
链源：引起跳转的原因
链宿：要跳转的目标

2.1创建热字超链接

热字超链接，链源由对应的文本构成，外部超链接的链宿为目标文件的路径

<a href="https://www.baidu.com">点一下试试</a>
< --!>属性href用于设置链宿的路径，
< --!>超链接开始标签<a>和结束标签</a>之间的内容是链源。

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>创建超链接</title></head><body><!-- ********* Begin ******* --><h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2><!-- ********* End ********* --></body> 
</html>

2.2创建热图超链接

  • title：设置鼠标悬停在链源上时的提示文字
  • target：指定打开目标窗口的方式
    在这里插入图片描述

图像超链接采用图像作为超链接的链源，该链源可使用img标签来嵌入图像，该标签常用的属性有：src、alt、border、title、width、height等

<a href="http://www.baidu.com"   target="_blank" title="单击图像实现超链接">
<img src="https://www.educoder.net/api/attachments/1184937" />
</a> 

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>创建超链接</title></head><body><h2><a href="https://www.kuwo.cn/">听音乐找酷我</a></h2><!-- ********* Begin ******* --><a href="https://www.kuwo.cn/" title="单击进入" target="_blank"><img src="https://www.educoder.net/api/attachments/2357951" align="bottom"/></a><!-- ********* End ********* -->好音质用酷我</body> 
</html>

2.3下载歌曲超链接

外部超链接不仅可以打开网页，还可以打开图像、音乐和视频等文件，浏览器可以自动识别文件的后缀，从而确定打开的目标文件类型。不管何种类型设置超链接链源和链宿的方法都相同，这里不再赘述

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>创建超链接</title></head><body><h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2><a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>好音质用酷我<br/><!-- ********* Begin ******* -->推荐下载：  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a><!-- ********* End ********* --><p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio></p></body> 
</html>

2.4创建页内超链接

页内链接的设置有两个步骤：

  1. 在目标位置处设置锚点，若锚点名称为“name1",代码如下： <a name="name1"></a>
  2. 设置指向锚点位置的超链接，若链源热字为”跳转至name1",代码如下： <a href="#name1">跳转至name1</a>
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>创建超链接</title></head><body><h2><a href="http://www.kuwo.cn/">听音乐找酷我</a></h2><a href="http://www.kuwo.cn/"><img src=https://www.educoder.net/api/attachments/2357951  align=bottom /></a>好音质用酷我<br/><!-- ********* Begin1 ******* --><h2><a href="#Q">查看第7个音频</a></h2><!-- ********* End1 ********* -->推荐下载：  <a href="https://www.educoder.net/api/attachments/2364090" title="下载班得瑞钢琴曲-安妮的仙境">安妮的仙境</a><p><h2>在线播放：</h2><audio src="https://www.educoder.net/api/attachments/2364090" controls="controls"></audio></p><h2>这是第1个音频</h2><h2>这是第2个音频</h2><h2>这是第3个音频</h2><h2>这是第4个音频</h2><h2>这是第5个音频</h2><h2>这是第6个音频</h2><h2><!-- ********* Begin2 ******* --><a name="Q">这是第7个音频</a><!-- ********* End2 ********* --></h2><h2>这是第8个音频</h2></body> 
</html>

3.表格标签——表格基本结构

3.1网页表格的基本概念

在基本表格结构中，表格标题、项目表头和数据资料构成了表格基本结构三个要素

在这里插入图片描述

  • 表格标题为“通讯录”
  • 表格第一行单元格中的内容基本不变，称作项目表头
  • 表格第二行后单元格的内容通常会动态改变，称作数据资料

3.1.1表格的基本标签

  • table标签：定义一个表格
  • caption标签：定义表格标题，嵌套在<table></table>中
  • tr标签：定义表格中的一行，嵌套在<table></table>中
  • th标签：定义表格中的表头单元格，嵌套在<tr></tr>中
  • td标签：定义表格中的数据单元格，嵌套在<tr></tr>中

3.1.2表格标签的基本属性

table标签的基本属性

在这里插入图片描述

tr标签的基本属性

tr标签用于定义表格的一个行。可由以下属性设置一行单元格的样式

在这里插入图片描述

th和td标签的属性

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

3.2创建简单的表格

<!DOCTYPE html>
<html><head><meta charset="utf-8"/><title>创建表格</title></head><body><!-- ********* Begin ******* --><table background="https://www.educoder.net/api/attachments/1208912" border="4px" width="200" ><caption>成绩表</caption><tr><th width="100">姓名</th><th width="100">成绩</th></tr><tr><td>张三</td><td>90</td></tr></table><!-- ********* End ********* --></body> 
</html>

3.3表格行样式的设置

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>表格行样式的设置</title>
</head>
<body><table border="4px" background="https://www.educoder.net/api/attachments/1208912" width="200"><caption>成绩表</caption><!-- ********* Begin ********* --><tr height="40" align="center" valign="middle" bgcolor="00ffff"><!-- ********* End ********* --><th width="100">姓名</td><th width="100">成绩</td></tr><tr><td>张三</td><td>90</td></tr></table></body>
</html>

3.4表格中单元格样式的设置

表格中单元格的样式:

  • 单元格的整体样式设置——table标签
  • 某个单元格样式的设置——th或td标签

3.4.1单元格的整体样式设置

单元格的整体样式主要涉及单元格之间的距离和单元格中内容的内边距。可以在table标签内通过cellspacing和cellpadding属性来来设置。

  1. cellspacing

cellspacing属性用于设置单元格之间的间隙，取值为某一数值。

  1. cellpadding

cellpadding属性用于设置单元格中的文本与单元格边框之间的间隙，也称为内边距，取值为某一数值。

3.4.2某个单元格样式的设置

  • width
  • height
  • align
  • valign
  • bgcolor
  • background
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"/><title>表格单元格样式的设置</title>
</head>
<body><!-- ********* Begin1 ********* --><table border="4px" cellspacing="0" cellpadding="8" width="200"><!-- ********* End1 ********* --><caption>成绩表</caption><tr height=40 align=center  valign=middle bgcolor=00ffff><th>姓名</th><th>成绩</th></tr><tr bgcolor=00ff00><!-- ********* Begin2 ********* --><td width="120">张三</td><td align="center">90</td><!-- ********* End 2********* --></tr></table>   
</body>
</html>

4.表格标签—表格高级样式的设置

4.1表格高级样式设置相关概念

4.1.1外边框线样式属性frame—table标签

  • above：显示上边框
  • below：显示下边框
  • hsides：显示上下边框
  • vsides：显示左右边框
  • lhs：显示左边框
  • rhs：显示右边框
  • border：显示上下左右边框
  • void：不显示边框

4.1.2内部边框样式属性rules——table标签

  • all：显示所有内部边框
  • none：不显示内部边框
  • rows：仅显示行边框
  • cols：仅显示列边框
  • groups：显示介于行组和列组间边框

4.1.3单元格合并

  1. 水平方向单元格的合并——或标记中添加colspan属性
<tr><th>姓名</th><th colspan="4">签到</th><th>备注</th>
</tr>
  1. 垂直方向单元格的合并——或标记中添加rowspan属性
<tr><td rowspan="2">领导讲话 </td><td>大会主题报告</td><td>分会专题报告</td><td rowspan="2">总结报告</td>
</tr>
<tr>    <td>专家报告</td><td>分组讨论</td> 
</tr>

在这里插入图片描述

4.2设置表格的外边框样式

<html><head><meta charset="utf-8"/><title>设置表格外边框属性</title></head><body><!-- ********* Begin ******* --><table width="100" height="80" border="4" frame="hsides"><!-- ********* End ********* --><caption>简易信息表</caption> <tr align=center  valign=middle><th>姓名</th><th>年龄</th></tr><tr  align=center  valign=middle><td>张三</td><td>20</td></tr></table></body> 
</html>

4.3设置表格的内边框样式

<html><head><meta charset="utf-8"/><title>设置表格内边框属性</title></head><body><!-- ********* Begin ******* --><table width="100" height="80" border="4" frame="hsides" rules="rows"><!-- ********* End ********* --><caption>简易信息表</caption> <tr align=center  valign=middle><th>姓名</th><th>年龄</th></tr><tr  align=center  valign=middle><td>张三</td><td>20</td></tr></table></body> 
</html>

4.4表格中单元格的合并

在这里插入图片描述
分析：
该表格三行四列，所以有三个tr标签
四列：第三行无合并，第四个tr标签里有四个td标签
前两行：第一行有三列——三个th标签
第二行有两列（除去已经算在第一行里的列）——两个th标签

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>签到表</title><style type="text/css">th{background-color:#00ff33;}td{background-color:#00ffff;}</style></head><body> <table border="2" width="400" bordercolor="#00ff00" cellpadding="6"><caption>签到表</caption><!-- ********* Begin ********* --><tr><th rowspan=2>姓名</th><th colspan=2>签到</th><th rowspan=2>备注</th></tr><tr><th>第1次</th><th>第2次</th></tr><tr><td>张三</td><td></td><td></td><td></td></tr><!-- ********* End ********* --></table>   </body>
</html>

4.5表格的综合案例

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>表格综合</title><style type="text/css">th{background-color:#00ff33;}td{background-color:#00ffff;text-align:center}caption{font-family:黑体;font-size:30px;color:blue}</style></head>
<!-- ********* Begin ********* --><body background="https://www.educoder.net/api/attachments/1217848"><table border="2" width="600" bordercolor="#00ff00" cellpadding="6" align="center"><caption>家庭账单</caption><tr><th rowspan="2" colspan="2">本周项目</th><th colspan="2">费用明细</th><th rowspan="2">备注</th></tr><tr><th>收入</th><th>支出</th></tr><tr><th rowspan="3">收入</th><th>工资</th><td>10000</td><td>0</td><td></td></tr><tr><th>兼职</th><td>2000</td><td>0</td><td></td></tr><tr><th>收入合计</th><td>12000</td><td>0</td><td></td></tr><tr><th rowspan="3">支出</th><th>生活用品</th><td>0</td><td>4000</td><td></td></tr><tr><th>学杂费</th><td>0</td><td>3000</td><td></td></tr><tr><th>支出合计</th><td>0</td><td>7000</td><td></td></tr></table></body>
<!-- ********* End ********* -->
</html>

这篇关于educoder—web:超链接和表格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/258211。

相关文章

如何使用Maven创建web目录结构

如何使用Maven创建web目录结构

《如何使用Maven创建web目录结构》：本文主要介绍如何使用Maven创建web目录结构的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录创建web工程第一步第二步第三步第四步第五步第六步第七步总结创建web工程第一步js通过Maven骨架创pytho
阅读更多...
Java Web实现类似Excel表格锁定功能实战教程

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
如何使用Haporxy搭建Web群集

如何使用Haporxy搭建Web群集

《如何使用Haporxy搭建Web群集》Haproxy是目前比较流行的一种群集调度工具,同类群集调度工具有很多如LVS和Nginx,本案例介绍使用Haproxy及Nginx搭建一套Web群集,感兴趣的... 目录一、案例分析1.案例概述2.案例前置知识点2.1 HTTP请求2.2 负载均衡常用调度算法 2.
阅读更多...
Python实现精准提取 PDF中的文本,表格与图片

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容：获取整页文本与指定区域内容获取页面上的所有文本内容获取
阅读更多...
使用C#删除Excel表格中的重复行数据的代码详解

使用C#删除Excel表格中的重复行数据的代码详解

《使用C#删除Excel表格中的重复行数据的代码详解》重复行是指在Excel表格中完全相同的多行数据,删除这些重复行至关重要,因为它们不仅会干扰数据分析,还可能导致错误的决策和结论,所以本文给大家介绍... 目录简介使用工具C# 删除Excel工作表中的重复行语法工作原理实现代码C# 删除指定Excel单元
阅读更多...
python web 开发之Flask中间件与请求处理钩子的最佳实践

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1
阅读更多...
使用Python实现网页表格转换为markdown

使用Python实现网页表格转换为markdown

《使用Python实现网页表格转换为markdown》在日常工作中,我们经常需要从网页上复制表格数据,并将其转换成Markdown格式,本文将使用Python编写一个网页表格转Markdown工具,需... 在日常工作中，我们经常需要从网页上复制表格数据，并将其转换成Markdown格式，以便在文档、邮件或
阅读更多...
Python实现pdf电子发票信息提取到excel表格

Python实现pdf电子发票信息提取到excel表格

《Python实现pdf电子发票信息提取到excel表格》这篇文章主要为大家详细介绍了如何使用Python实现pdf电子发票信息提取并保存到excel表格,文中的示例代码讲解详细,感兴趣的小伙伴可以跟... 目录应用场景详细代码步骤总结优化应用场景电子发票信息提取系统主要应用于以下场景：企业财务部门：需
阅读更多...
SpringBoot项目Web拦截器使用的多种方式

SpringBoot项目Web拦截器使用的多种方式

《SpringBoot项目Web拦截器使用的多种方式》在SpringBoot应用中,Web拦截器（Interceptor）是一种用于在请求处理的不同阶段执行自定义逻辑的机制,下面给大家介绍Sprin... 目录一、实现 HandlerInterceptor 接口1、创建HandlerInterceptor实
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2