百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

HTML学习笔记:各种常用标签 html的常用标签有哪些

zhezhongyun 2024-12-23 14:44 51 浏览

今天是刘小爱自学Java的第76天。

感谢你的观看,谢谢你。

话不多说,继续html的学习:

昨天学习了最基础的文本标签及属性,除此之外还有很多其它标签,今天逐一学习。

一、链接标签(a标签)

a标签有一个必不可少的属性:href。href也就是超链接的意思。

下面编写代码,其中我每行之间用了两个换行符(<br/><br/>),为了使页面看起来相对而言更加美观些。

①href="#"

作用是跳转本页面。

②href="对应网页链接地址"

作用是跳转到对应网页。

③href="本地主页"

这个呢是我自己电脑里面的一个html文件,自己可以访问,但是别人就没法访问了。

②中的是只要网址能打开,所有人都能访问。

④href="mailto:对应邮箱地址"

作用是用本地的邮箱客户端,给填写的邮箱发送邮件。

⑤target="_self"

self,自身的意思,作用就是在当前页面中打开填入的网页链接。

⑥target="_blank"

blank,空白的意思,作用就是在新窗口中打开填入的网页链接。

⑦title="刘小爱的博客"

title,又是标题,这里的作用是:当我们将鼠标放在当前链接上的时候会出现一个标题提示。

代码编写完毕,做一个测试:

其中有个小常识:

左键直接点击,会在当前页面中打开对应链接。

Ctrl+左键点击,会在新的页面中打开对应链接。

二、图片标签和列表标签

1图片标签

image,图像的意思,简写为img,图片标签也就是用img来表示。

①src="图片地址"

如果是本地图片,写出图片所在的路径即可。

如果是网络图片,写出其对应的链接即可。

其中width为宽度,height为高度,如果只设置其中一项,高度和宽度是等比例缩放的。

当然也可以宽度高度同时设置不同的值。

②alt="图片丢失了啦"

如果图片丢失了,就会显示alt里面的内容。

③title="我是刘小爱"

同a标签一样,当鼠标放在该图片上时,会显示title里的内容。

2列表标签

list,即列表的意思,其中又分为有序列表和无序列表。

有序列表:ordered list,简写就是ol。

①type="1"

数字排序,这也是默认的有序排序规则,所以可以省略不写。

②type="a"

使用小写字母排序,详情见上图。

③type="A"

使用大写字母排序,详情见上图。

④type="Ⅰ"

使用罗马字母排序,详情见上图。

⑤type="i"

使用字母i来排序,详情见上图。

无序列表:unordered list,简写就是 ul。

①type="disc"

disc,唱片、圆盘的意思,这是无序列表的默认属性,所以可以省略不写。

②type="circle"

circle,圆形的意思。

③type="square"

square,正方形的意思。

三、表格标签

1基本介绍

table,表格的意思,这在学数据库时就接触过。

tr,tablerow的缩写,表示的是表格中的行。

td,tabledata的缩写,表示的是表格中的数据。

①单元格:cell:细胞的意思,在表格中就表示为一个单元格。

②表格外边框:border,边界的意思,用其可以设置外边框的粗细。

③单元格外间距:cellspacing,用其设定外间距。

④单元格内间距:cellpadding,用其设定内间距。

其中width表示表格的宽度,并且外间距一般都会设定为0,不然都不像是个表格的样子。

①caption标签

标题的意思,用以说明表格的标题,我这边还用了一个b标签将其给加粗了。

②th标签

table head的简写,也就是表格的表头,它是默认居中加粗的。

当然我们也可以根据align属性来设定排序位置(居左,居中,居右)。

此外,其中也可以使用thead、tbody、tfoot标签来划分表格。

  • thead表示表格的头部。
  • tbody表示表格的主体。
  • tfoot表示表格的脚部。

这个稍作了解即可,感觉使用这些标签和不使用这些标签对表格本身没有影响。

2表格快速模板设置

看到左上角那个黄灯后点击,选择Language Injection Settings,最后选择html即可。

这样设置后就可以使用表格快速创建模板了。

先输入table>tr*4>td*4,再加上Tab键,即可快速创建一个4*4的表格。

3合并单元格

①rowspan

合并行的意思,相同的列不同的行。

“2”的意思就是表示是跨两行,从第1行开始将第1行和第2行合并起来了。

既然如此,那么第2行总共也就只需要3列了,所以将其第2行第1列删除。

②colspan

合并列的意思,相同的行不同的列。

“3”的意思就是表示是跨3列,从第2列开始将第2列第3列和第4列合并起来了。

既然如此,那么第3行总共也就只需要2列了,所以将第3行中第3列第4列删除。

最后

谢谢你的观看。

如果可以的话,麻烦帮忙点个赞,谢谢你。

相关推荐

JPA实体类注解,看这篇就全会了

基本注解@Entity标注于实体类声明语句之前,指出该Java类为实体类,将映射到指定的数据库表。name(可选):实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...

Dify教程02 - Dify+Deepseek零代码赋能,普通人也能开发AI应用

开始今天的教程之前,先解决昨天遇到的一个问题,docker安装Dify的时候有个报错,进入Dify面板的时候会出现“InternalServerError”的提示,log日志报错:S3_USE_A...

用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码

在人体姿态估计领域,传统方法通常将关键点作为基本处理单元,这些关键点在人体骨架结构上代表关节位置(如肘部、膝盖和头部)的空间坐标。现有模型对这些关键点的预测主要采用两种范式:直接通过坐标回归或间接通过...

B 客户端流RPC (clientstream Client Stream)

客户端编写一系列消息并将其发送到服务器,同样使用提供的流。一旦客户端写完消息,它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中,客户端会发送多个请...

我的模型我做主02——训练自己的大模型:简易入门指南

模型训练往往需要较高的配置,为了满足友友们的好奇心,这里我们不要内存,不要gpu,用最简单的方式,让大家感受一下什么是模型训练。基于你的硬件配置,我们可以设计一个完全在CPU上运行的简易模型训练方案。...

开源项目MessageNest打造个性化消息推送平台多种通知方式

今天介绍一个开源项目,MessageNest-可以打造个性化消息推送平台,整合邮件、钉钉、企业微信等多种通知方式。定制你的消息,让通知方式更灵活多样。开源地址:https://github.c...

使用投机规则API加快页面加载速度

当今的网络用户要求快速导航,从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口(SpeculationRulesAPI)的出现改变了网络应用程序接口(WebAPI)领域的游戏规则。...

JSONP安全攻防技术

关于JSONPJSONP全称是JSONwithPadding,是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签,远程调用JSON文件来实现数据传递。如果...

大数据Doris(六):编译 Doris遇到的问题

编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...

网页内嵌PDF获取的办法

最近女王大人为了通过某认证考试,交了2000RMB,官方居然没有给线下教材资料,直接给的是在线教材,教材是PDF的但是是内嵌在网页内,可惜却没有给具体的PDF地址,无法下载,看到女王大人一点点的截图保...

印度女孩被邻居家客人性骚扰,父亲上门警告,反被围殴致死

微信的规则进行了调整希望大家看完故事多点“在看”,喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人,应该...

下周重要财经数据日程一览 (1229-0103)

下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是,下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机(安卓,iPhone)同步日历功能的朋友请点击此链接,数据公布...

PyTorch 深度学习实战(38):注意力机制全面解析

在上一篇文章中,我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程,从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...

聊聊Spring AI的EmbeddingModel

序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...

前端分享-少年了解过iframe么

iframe就像是HTML的「内嵌画布」,允许在页面中加载独立网页,如同在画布上叠加另一幅动态画卷。核心特性包括:独立上下文:每个iframe都拥有独立的DOM/CSS/JS环境(类似浏...