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

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

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


相关文章
|
8月前
|
移动开发 前端开发 安全
|
10月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
295 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
|
前端开发
|
8月前
|
前端开发 JavaScript
|
11月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
331 25
|
12月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
280 6
|
6月前
|
移动开发 前端开发 JavaScript
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
6月前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。