前端第二课,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:横向合并单元格子

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

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


相关文章
|
2月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
3月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
46 1
前端基础(十七)_HTML5新特性
|
2月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
20 2
|
2月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
30 1
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
145 1
|
3月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
54 13
|
13天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
25 6