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

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

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

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


相关文章
|
1月前
|
开发框架 前端开发 JavaScript
前端框架演进史:从HTML到现代化开发
前端框架演进史:从HTML到现代化开发
36 0
|
1月前
如何在HTML文件中添加超链接
如何在HTML文件中添加超链接
22 0
|
2天前
|
机器学习/深度学习 前端开发 JavaScript
探寻前端巨变:从HTML到现代框架的发展历程
探寻前端巨变:从HTML到现代框架的发展历程
12 2
|
13天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
20 1
|
25天前
|
人工智能 前端开发 JavaScript
【前端设计】HTML+CSS+JavaScript基本特性
【前端设计】HTML+CSS+JavaScript基本特性
|
1月前
|
移动开发 前端开发 HTML5
Web前端全栈HTML5通向大神之路
本套课程共三大阶段,六大部分,是WEB前端、混合开发与全栈开发必须要掌握的技能,从基础到实践,是从编程小白成长为全栈大神的最佳教程!
52 3
Web前端全栈HTML5通向大神之路
|
1月前
|
前端开发
HTML 超链接
HTML 超链接。
81 32
|
1月前
|
前端开发 JavaScript 开发者
前端的HTML使用
前端的HTML使用
17 3