前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th

news2024/11/19 1:56:27

目录

一、title: 💛

​二、alt💙

三、width/heigh💜

四、border ❤️

五、超链接💚 

六、target 💗

七、tr💕

八、td💘

九、th💞

十、rowspan


一、title: 💛

 快看美女 御姐风<img src=" hhh.png" title=" like" >
只要你鼠标在那里,他就会显示你后面的title标志

二、alt💙

我电脑可能有某些小问题,导致无法展现这个数字

快看美女 御姐风<img src=" hhh.pn" alt=" like" >
当图片加载不出来,就会出现like

三、width/heigh💜

  快看美女 御姐风<img src="hhh.png" width="1000",heigh="1000" >
width:宽度,heigh:高度,(高度和宽度改一个就可,另一个会等比列缩放,否则图片就会失衡了。

四、border ❤️

边框,参数是宽度的像素,一个用CSS设定(就是简单介绍)

五、超链接<a>💚 

这个是表示跳转的连接,这个点击就会到达百度

⚠️

<a href="https://www.baidu.com">跳转到百度</a>
后面的文字跳转到百度,一定要写,我是说这个文字,因为这个文字需要写出来,你才能点击

这里是跳转到你写的另一个项目

 <a href="demo01.html">跳转到demo01页面</a>
后面的文字还是要写,和百度一个道理

这个页面就是单纯的跳转到原地(目前感觉没啥鸟用)

此时点击图片就可以跳转到,我们想要的页面

   <a href="https://www.baidu.com\"><img src="hhh.png"></a>
这个代码我觉得还是比较重要的

六、target 💗

target

分为两块

1.默认值,_self.在原本的网页打开

2.如果是_blank则用新的标签页打开

<a href="https://www.baidu.com\" target="_self"> <img src="hhh.png" alt=""></a>
这个是在原先网页打开。
<a href="https://www.baidu.com\" target="_blank"> <img src="hhh.png" alt=""></a>
这个新开一个网页打开。

七、tr💕

tr:表格的一行

但是这块没有边框,所以看起来确实有点傻呆蠢,但是加上边框

这样能稍微好看一点点,能稍微有个间隙了。

八、td💘

td:一个单元格,可以看代码,来观察一下区别

现在就基本没啥大毛病了。基本有点表格的框架,但是不怎么好看,应该把首行的字,放到中间

九、th💞

th:表中间,居中加粗。

碍眼的边框,想让他变成一条线

 <table border="1" width="500" cellspacing="0">
cellspacing这个是负责间距的1表示有边框(也就是边框有距离,数字越大,边框也就越粗,你设置成0也就没有边框)

thread:表格的头部区域(注和th区分,范围是比th大的,内容居中且加粗)

讲真目前没感觉有啥用,顶多可以算个好习惯吧。

表格正式成型

<table border="1" width="500" cellspacing="0" cellpadding="50",align="center">
cellpadding:表示和周围边框保持多少的像素。

然后我们是一般喜欢在表头放到thead中,躯干放到tbody中,这是完整的代码

<html>
    <head>
        <title>这是页面标题</title>
    </head>
    <body>
        <table border="1" width="500" cellspacing="0" cellpadding="50",align="center">
            <thead>
            <tr>     
                <td>长度</td>
                <th> 宽度</th>
                <th>纯度</th>   
            </tr>
        </thead>
          <tbody>
        <tr>
                 <td>10</td>
                 <td>12</td>
                 <td>14</td>
        </tr>
                <tr>
                    <td>11</td>
                    <td>13</td>
                    <td>16</td>
                </tr>  
            </tbody>
        </table>
    </body>

</html>

十、rowspan

纵向合并单元格(从当前格子,向下合并)

  <td rowspan="2">10</td>
//rowspan=2 是写他占据两个单元格

colspan:横向合并单元格子

我们通过这两个图,都能看出来,原来是对齐的,都会有一个多出来,所以需要我们进行对

合并的,多的那个删除一个,也就如同下图删除多的一个,自然也就对齐了。

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

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

相关文章

漏刻有时数据可视化Echarts组件开发(29):工业图形动画

var nodes = [{nodeName: 新能源,value: [-10, 100],symbolSize: 50,symbol:image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QA/wD/AP+gvaeTAAAAB3R…

【操作系统笔记四】高速缓存

CPU 高速缓存 存储器的分层结构&#xff1a; 问题&#xff1a;为什么这种存储器层次结构行之有效呢&#xff1f; 衡量 CPU 性能的两个指标&#xff1a; 响应时间&#xff08;或执行时间&#xff09;&#xff1a;执行一条指令平均时间 吞吐量&#xff0c;就是 1 秒内 CPU 可以…

ideal 同一项目启动多实列

点击service(如果没有:点击菜单栏&#xff1a;Views -> Tool Windows -> Services&#xff1b;中文对应&#xff1a;视图 -> 工具窗口 -> 服务&#xff1b;快捷键是Alt F8&#xff0c;但是本地快捷键可能冲突&#xff0c;并未成功。) 刚创建好的窗口是空白的&…

回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测

回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测 目录 回归预测 | MATLAB实现基于RF-Adaboost随机森林结合AdaBoost多输入单输出回归预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 1.MATLAB实现基于RF-Adaboost随机森林结合…

Android 遍历界面所有的View

关于作者&#xff1a;CSDN内容合伙人、技术专家&#xff0c; 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 &#xff0c;擅长java后端、移动开发、商业变现、人工智能等&#xff0c;希望大家多多支持。 目录 一、导读二、概览三、实践四、 推荐阅读 一、导读 我们…

基于QT实现发送http的get和post请求(post还可以实现上传文件),同时实现接收返回json数据,并对其进行解析

使用到中重要的类&#xff0c;做个简单的介绍 QNetworkAccessManager&#xff1a;这个类是QT帮我们封装好的工具类&#xff0c;主要可以用来发送Http请求 QNetworkReply&#xff1a;这个类主要用来监听发送的请求&#xff0c;并得到请求的响应结果 QHttpMultiPart&#xff1a;这…

RSD处理气象卫星数据——常用投影

李国春 气象卫星扫描刈幅宽覆盖范围广&#xff0c;在地球的不同位置可能需要不同的投影以便更好地表示这些观测数据。这与高分辨率的局地数据有很大不同&#xff0c;高分数据更倾向于用使用处理局地小范围的投影方式。本文选择性介绍几种RSD常用的适合低、中、高纬和极地地区的…

python+nodejs+php+springboot+vue 校园安全车辆人员出入安全管理系统

本校园安全管理系统共包含15个表:分别是表现评分信息表&#xff0c;车辆登记信息表&#xff0c;配置文件信息表&#xff0c;家校互动信息表&#xff0c;监控系统信息表&#xff0c;教师信息表&#xff0c;留言板信息表&#xff0c;校园资讯信息表&#xff0c;人员登记信息表&am…

2023-9-23 合并果子

题目链接&#xff1a;合并果子 #include <iostream> #include <algorithm> #include <queue>using namespace std;int main() {int n;cin >> n;priority_queue<int, vector<int>, greater<int>> heap;for(int i 0; i < n; i){in…

Spring Cloud版本选择

SpringCloud版本号由来 SpringCloud的版本号是根据英国伦敦地铁站的名字进行命名的&#xff0c;由地铁站名称字母A-Z依次类推表示发布迭代版本。 SpringCloud和SpringBoot版本对应关系 注意事项&#xff1a; 其实SpringBoot与SpringCloud需要版本对应&#xff0c;否则可能会造…

墓园导航系统:实现数字化陵园祭扫新模式

墓园导航系统&#xff1a;实现数字化陵园祭扫新模式 随着人口老龄化趋势的加剧&#xff0c;人们对墓地的需求逐渐增加。同时&#xff0c;由于很多墓园面积较大&#xff0c;环境复杂&#xff0c;很多家属在寻找亲人墓地时感到不便和困难。此外&#xff0c;传统墓园的管理和服务水…

论文研读-数据共享-大数据流分析中的共享执行技术

Shared Execution Techniques for Business Data Analytics over Big Data Streams 大数据流分析中的共享执行技术 1、摘要 2020年的一篇共享工作的论文&#xff1a;商业数据分析需要处理大量数据流&#xff0c;并创建物化视图以便给用户实时提供分析结果。物化每个查询&#x…

FPGA——UART串口通信

文章目录 前言一、UART通信协议1.1 通信格式2.2 MSB或LSB2.3 奇偶校验位2.4 UART传输速率 二、UART通信回环2.1 系统架构设计2.2 fsm_key2.3 baud2.4 sel_seg2.5 fifo2.6 uart_rx2.7 uart_tx2.8 top_uart2.9 发送模块时序分析2.10 接收模块的时序分析2.11 FIFO控制模块时序分析…

java框架-Spring-事务

配置 配置事务管理器方法&#xff1a; Beanpublic PlatformTransactionManager platformTransactionManager(){return new DataSourceTransactionManager();}原理

多维时序 | MATLAB实现WOA-CNN-LSTM-Attention多变量时间序列预测(SE注意力机制)

多维时序 | MATLAB实现WOA-CNN-LSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09; 目录 多维时序 | MATLAB实现WOA-CNN-LSTM-Attention多变量时间序列预测&#xff08;SE注意力机制&#xff09;预测效果基本描述模型描述程序设计参考资料 预测效果 基本描…

postman 自动升级后恢复collection数据

一、今天postman 自动升级了&#xff0c;导致一定要注册账号才能使用&#xff0c;登录账号后&#xff0c;发现之前的数据全部没有了。 找到目录&#xff1a;C:\Users\{{用户名}}\AppData\Roaming\Postman重新导入即可。 二、关闭自动更新&#xff1a;修改host&#xff0c;C:\W…

力扣-217.存在重复元素

Method 1 先对整个数组进行排序&#xff0c;然后从前往后开始遍历&#xff0c;判断前一个数 是否跟相邻的数相等 AC Code class Solution { public:bool containsDuplicate(vector<int>& nums) {sort(nums.begin(),nums.end());int front nums[0];for( int i 1; i…

Selenium自动化测试 —— 通过cookie绕过验证码的操作!

验证码的处理 对于web应用&#xff0c;很多地方比如登录、发帖都需要输入验证码&#xff0c;类型也多种多样&#xff1b;登录/核心操作过程中&#xff0c;系统会产生随机的验证码图片&#xff0c;进行验证才能进行后续操作 解决验证码的方法如下&#xff1a; 1、开发做个万能…

如何学习微服务Spring Cloud

简单来说&#xff0c;就是“三大功能&#xff0c;两大特性”。 三大功能是指微服务核心组件的功能维度&#xff0c;由浅入深层次递进&#xff1b;而两大特性是构建在每个服务组件之上的高可用性和高可扩展性。别看微服务框架组件多&#xff0c;其实你完全可以按照这三大功能模块…

外卖小程序开发指南:打造完美的点餐体验

第一步&#xff1a;项目设置和初始化 首先&#xff0c;您需要选择一个适合您的开发平台&#xff0c;例如微信小程序、支付宝小程序或其他移动应用平台。接下来&#xff0c;创建一个新的小程序项目&#xff0c;并初始化所需的文件和目录。 示例代码&#xff08;微信小程序&am…