HTML大总结(三)

简介: HTML大总结(三)

8.超链接标签与锚点链接


超链接标签:点击触发后可以跳转对应链接或者下载相应资源。


<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>


image.png


锚点链接标签:点击链接,可以实现快速定位到页面中的某个位置。


  • 在链接文本的href属性中,设置属性值为 #名字
  • 找到目标位置标签,里面添加一个 id属性=刚才的名字
<a href = "#demo">点击一下,进入自我介绍</a>
 <h3 id = "demo">自我介绍</h3>


9.特殊字符


image.png


重点记住:空格、大于号、小于号 这三个,其余的使用的很少,如果需要使用回头查阅即可


10.表格标签


表格标签现在还是较为常用的一种标签,但不是用来布局,常见显示、展示表格式数据。因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候表格运用是否熟练就显得很重要,一个清爽简约的表格能够把繁杂的数据表现得很有条理。

  • table 用来定义表格的标签
  • tr 用来定义表格中的行,必须嵌套在<table></table> 标签中
  • td 用来定义表格中的单元格,必须嵌套在<tr></tr> 标签中
  • th 用来定义表格中的表头,表头单元格里面的内容加粗居中显示
<body>
     <table>
         <tr>  <th>姓名</th>     <th>性别</th>    <th>年龄</th>        </tr>
         <tr>  <td>孙铭</td>     <td>男</td>     <td>18</td>          </tr>  
         <tr>  <td>孙不坚</td>     <td>男</td>     <td>18</td>          </tr>       
         <tr>  <td>sunming</td>     <td>男</td>     <td>18</td>          </tr>     
     </table>
 </body>


代码效果:


image.png

表格属性


表格标签的属性实际开发并不常用,后面样式基本都是通过CSS来设置的。


image.png


<table align=center border="1" cellpadding="20" cellspacing="0" width="500">


合并单元格


  • 跨行合并:rowspan=“合并单元格的个数”
  • 跨列合并:colspan="合并单元格的个数"


确定目标单元格(合并写代码)


  • 跨行:最上面侧单元格为目标单元格,写合并代码
  • 跨列:最左面侧单元格为目标单元格,写合并代码
<table align=center border="1" cellpadding="20" cellspacing="0" width="700">
         <tr>
             <th colspan="5">个人简历</th>
         </tr>
         <tr>
             <th>姓名:</th>
             <th></th>
             <th>性别:</th>
             <th></th>
             <th rowspan="4">照片</th>
         </tr>
         <tr>
             <th>婚姻状况:</th>
             <th></th>
             <th>出生年月:</th>
             <th></th>
         </tr>
         <tr>
             <th>民族:</th>
             <th></th>
             <th>政治面貌:</th>
             <th></th>
         </tr>
         <tr>
             <th>身高:</th>
             <th></th>
             <th>学历:</th>
             <th></th>
         </tr>
     </table>


代码效果:


image.png


相关文章
|
运维 算法 安全
异常检测算法及其在安全领域的应用
【6月更文挑战第4天】在数字化时代,数据安全至关重要,异常检测算法扮演着守护者角色。它能自动学习正常行为模式,及时发现网络攻击和欺诈行为。非监督式异常检测算法尤其重要,如基于距离的方法,通过计算数据点间距离识别偏离常规的点。Python的scikit-learn库可实现这一算法。异常检测不仅应用于金融领域的欺诈检测,还广泛用于工业监控、医疗诊断和社交媒体分析,为多领域数据安全提供保障。随着技术进步,异常检测将更智能、高效,成为数据安全的重要防线。
380 2
|
iOS开发 开发者 UED
探索iOS开发中的SwiftUI框架
在移动应用开发的广阔天地中,苹果公司的SwiftUI框架以其声明式语法和直观布局管理,为iOS开发者带来了新的生产力工具。本文将深入探讨SwiftUI的设计哲学、核心概念以及在实际项目中如何高效运用该框架,旨在为读者提供一份全面的SwiftUI使用指南。
|
C语言
C语言结构体教程:从入门到实践(保姆式教学)
C语言结构体教程:从入门到实践(保姆式教学)
184 0
|
机器学习/深度学习 人工智能 供应链
【OpenVI—AI热点日报】9月27日
AI热点日报隆重推出! 我们汇集了最新的AI热点信息、最新论文和观点,为您提供最前沿的AI领域资讯。 (往期链接请在子社区查看官方博文哦~)
335 1
|
算法 网络虚拟化 C语言
【Cisco Packet Tracer】交换机划分Vlan实验
文章目录 一、前期准备 二、实验要求 三、搭建局域网 四、配置pc端的ip 五、配置VLAN 六、设置端口模式trunk 七、PING检验是否通路
|
人工智能 物联网 Linux
使用aidlux进行模型迁移、部署、推理
使用aidlux进行模型迁移、部署、推理
|
安全
PADS VX1.2安装
关于PADS的文章都是基于PADS VX1.2进行讲解的,所以这里提供PADS VX1.2的下载及安装。下载方法:在公众号回复“PADS下载”获取下载链接(百度网盘)。下面我们来讲一下安装过程,主要提一下需要注意的环节,其它的都是正常点击“同意”或者“下一步”即可。
1436 0
|
Python
Python Bug分类,及异常处理
Python Bug分类,及异常处理
116 0
LeetCode 264. Ugly Number II
编写一个程序,找出第 n 个丑数。 丑数就是只包含质因数 2, 3, 5 的正整数。
158 0
LeetCode 264. Ugly Number II
|
JavaScript 前端开发 安全
三个经典的TypeScript易混淆点
前言 本文会讲什么:主要讲解TypeScript在开发过程中的易混淆点,当然也同样是面试官常考的几个题目 本文不会讲什么:本文并不是又大又全的TypeScript学习教程,不会讲那些基础知识、简单概念等,比如JS的内置类型这类。所以如果你是新手玩家,最好先去做一下新手任务出了新手村再这里
282 0