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

本文涉及的产品
转发路由器TR,750小时连接 100GB跨地域
简介: 前端第二课,HTML,alt,title,width/heigh,border,<a>超链接,target,tr,td,th

一、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:横向合并单元格子

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

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


相关文章
|
6月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
142 0
|
6月前
HTML中tr、th和td
HTML中tr、th和td
126 0
|
13天前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
11 1
|
28天前
|
前端开发
【HTML】img标签和超链接标签
【HTML】img标签和超链接标签
36 2
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
46 13
|
2月前
HTML的超链接
HTML的超链接。
34 6
|
2月前
|
前端开发 JavaScript 定位技术
HTML中target的使用注意点
`target` 属性在 HTML 中主要用于 `&lt;a&gt;` 和 `&lt;form&gt;` 元素,指定链接打开或表单提交的位置。常见值包括 `_self`(当前窗口)、`_blank`(新窗口)、`_parent`(父框架)和 `_top`(整个窗口)。使用 `target=&quot;_blank&quot;` 时应加 `rel=&quot;noopener noreferrer&quot;` 以提高安全性。JavaScript 可动态设置 `target`,CSS 可增强样式。尽管 `target` 主要用于链接和表单,但在特定场景下也可应用于其他元素。
|
3月前
|
API Java Python
API的神秘面纱:从零开始构建你的RESTful服务
【8月更文挑战第31天】在现代网络应用开发中,RESTful API已成为数据交互的标准。本文通过比较流行的技术栈(如Node.js、Python的Django和Flask、Java的Spring Boot)及其框架,帮助你理解构建RESTful API的关键差异,涵盖性能、可扩展性、开发效率、社区支持、安全性和维护性等方面,并提供示例代码和最佳实践,指导你选择最适合项目需求的工具,构建高效、安全且易维护的API服务。
51 0
|
4月前
|
前端开发
HTML 超链接
【7月更文挑战第1天】HTML 超链接。
50 1
|
4月前
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
HTML【详解】超链接 a 标签的四大功能(页面跳转、页内滚动【锚点】、页面刷新、文件下载)
139 0