当前位置: 首页 > news >正文

HTML#4超链接标签,列表标签,表格标签和布局标签

一. 超链接标签

  1. 介绍

<a> 定义超链接,用于连接到另一个资源

herf: 指定访问资源的URL

target: 指定打开资源的方式

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接标签</title>
</head>
<body><a href="https://www.baidu.com/" target="_blank">点这里打开</a>
</body>
</html>
  1. 效果展示

二. 列表标签

  1. 有序列表与无序列表

有序列表(order list)

无序列表(unorder list)

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表标签</title>
</head>
<body>
<ol><li>可乐</li><li>茶</li><li>牛奶</li>
</ol>
<ul><li>可乐</li><li>茶</li><li>牛奶</li>
</ul>
</body>
</html>
  1. 效果展示

三. 表格标签

  1. 介绍

<table> 定义表格

<tr> 定义行

<td> 定义单元格

<th> 定义表头单元格

table: 定义表格

border: 规定表格边框的宽度

width: 规定表格的宽度

cellspacing: 规定单元格之间的空白

tr: 定义行

align: 定义表格行的内容对齐方式

td: 定义单元格

rowspan: 规定单元格可横跨的行数

colspan: 规定单元格可横跨的列数

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标签</title>
</head>
<body><table border="1" width="30%" cellspacing="0"><tr align="center"><th>序号</th><th>头像</th><th>名称</th></tr><tr align="center"><td>001</td><td><img src="a.jpg" width="40" height="40"></td><td>怪物</td></tr></table><br><hr><br><table border="1" width="30%" cellspacing="0"><tr align="center"><th colspan="2">头像</th><th>名称</th></tr><tr align="center"><td>001</td><td><img src="a.jpg" width="40" height="40"></td><td rowspan="2">怪物</td></tr><tr align="center"><td>002</td><td><img src="a.jpg" width="40" height="40"></td></tr></table>
</body>
</html>
  1. 效果展示

四. 布局标签

  1. 介绍

<div> 定义HTML文档的一个区域部分, 经常与CSS一起使用, 用来布局网页

<span> 用于组合行内元素

  1. 代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>布局标签</title>
</head>
<body><div>div1</div><div>div2</div><span>span1</span><span>span2</span>
</body>
</html>
  1. 效果展示

相关文章:

HTML#4超链接标签,列表标签,表格标签和布局标签

一. 超链接标签介绍<a> 定义超链接,用于连接到另一个资源herf: 指定访问资源的URLtarget: 指定打开资源的方式代码<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>超链接标签</title> <…...

本科课程【数字图像处理】实验汇总

文章目录 实验1 - 腐蚀与膨胀实验2 - 图像增强实验3 - 图像的几何变换实验4 - 图像的蒙纱效果实验5 - 空洞填充实验6 - 取阈值的邻域平均算法实验7 - 图像的平移与伸缩变换实验1 - 腐蚀与膨胀 实验目的 分析掌握腐蚀与膨胀的基本原理,编写腐蚀与膨胀的算法,并掌握开闭运算的规…...

nginx安装lua、jwt模块,通过lua验证jwt实现蓝绿发布样例

文章目录前言一、基础组件下载二、组件安装1.luajit安装2.lua-nginx-module安装3.lua-resty-core安装4.lua-resty-lrucache安装5.ngx_devel_kit安装6.nginx加载lua模块7.lua-cjson安装8.lua-resty-string安装9.lua-resty-jwt安装10.lua-resty-hmac安装三、验证jwt中属性实现蓝绿…...

【redis的几种数据结构及在Java里的应用案例】

Redis是一款高性能的key-value存储系统&#xff0c;支持多种数据结构&#xff0c;包括字符串、列表、哈希表、集合和有序集合等。下面是Redis的几种数据结构及在Java中的应用案例&#xff1a; string 字符串(String) 字符串是Redis中最基本的数据类型&#xff0c;用于存储字符…...

【mybatis】 01- mybatis快速入门

数据库创建(注意&#xff1a;最好先创建好数据库设置utf8再进行表创建) create database mybatis; use mybatis;drop table if exists tb_user;create table tb_user(id int primary key auto_increment,username varchar(20),password varchar(20),gender char(1),addr varch…...

【C语言每日一题】杨氏矩阵(源码以及改进源码)

【C语言每日一题】—— 杨氏矩阵&#x1f60e;&#x1f60e;&#x1f60e; 目录 &#x1f4a1;前言&#x1f31e;&#xff1a; &#x1f49b;杨氏矩阵题目&#x1f49b; &#x1f4aa; 解题思路的分享&#x1f4aa; &#x1f60a;题目源码的分享&#x1f60a; &#x1f4…...

JavaScript 面向对象【快速掌握知识点】

目录 类和对象 属性和方法 继承 多态 封装 类和对象 类是用于定义对象的模板或蓝图&#xff1b;它包含对象的属性和方法&#xff0c;我们可以使用class关键字来定义类。 class Person {constructor(name, age) {this.name name;this.age age;}sayHello() {console.log(H…...

Qt——自定义Model

众所周知&#xff0c;Qt提供了一套Model/View框架供开发者使用&#xff0c;Model用来提供数据&#xff0c; View则用来提供视觉层的显示。实际上这是一套遵循MVC设计模式的GUI框架&#xff0c;因为Qt还提供了默认的Delegate作为Controller来作为控制器。 MVC的好处这里就不多说…...

用 .NET 启动你的 DJI Ryze Tello 无人机

大疆的 DJI Ryze Tello 是入门级的无人机&#xff0c;不仅在 STEM 教育中有非常广泛的应用&#xff0c;也可以作为编程入门的首选。通过 UDP 协议调用 DJI Ryze Tello SDK 可以让 DJI Ryze Tello 无人机执行起飞&#xff0c;降落&#xff0c;转向以及不同的花式动作。本文将会通…...

sed 功能详解

介绍sedsed是一种流编辑器&#xff0c;它一次处理一行内容&#xff0c;把当前处理的行存储在临时缓冲区中&#xff08;buffer&#xff09;,称为"模式空间"&#xff0c;接着sed命令处理缓冲区中的内容&#xff0c;处理完成后&#xff0c;把缓冲区的内容送往屏幕&#…...

整数二分思路详解

题目描述 给定一个按照升序排列的长度为n的整数数组&#xff0c;以及 q 个查询。 对于每个查询&#xff0c;返回一个元素k的起始位置和终止位置&#xff08;位置从0开始计数&#xff09;。 如果数组中不存在该元素&#xff0c;则返回“-1 -1”。 输入格式 第一行包含整数n和q&a…...

基于java的进销库存管理系统(Vue+Springboot+Mysql)前后端分离项目,附万字课设论文

1.3 系统实现的功能 本次设计任务是要设计一个超市进销存系统&#xff0c;通过这个系统能够满足超市进销存系统的管理及员工的超市进销存管理功能。系统的主要功能包括&#xff1a;首页、个人中心、员工管理、客户管理、供应商管理、承运商管理、仓库信息管理、商品类别管理、 …...

手动添加 Grub 启动项

1. 问题背景 自己的台式机上装了好几块硬盘&#xff0c;因为自己又菜又喜欢折腾&#xff0c;几乎每块上都有一个操作系统&#xff0c;其中两个 m.2 的硬盘上分别装着一个 windows11 和一个 Ubuntu20.04。但在另外一块机械硬盘中还装着更早的一个 Ubuntu18.04&#xff0c;我电脑…...

工人搬砖-课后程序(JAVA基础案例教程-黑马程序员编著-第八章-课后作业)

【案例8-4】 工人搬砖 【案例介绍】 1.任务描述 在某个工地&#xff0c;需要把100块砖搬运到二楼&#xff0c;现在有工人张三和李四&#xff0c;张三每次搬运3块砖&#xff0c;每趟需要10分钟&#xff0c;李四每次搬运5块砖&#xff0c;每趟需要12分钟。本案例要求编写程序分…...

深度学习中backbone、head、neck等概念

1.backbone 翻译为主干网络的意思&#xff0c;既然说是主干网络&#xff0c;就代表其是网络的一部分。这个主干网络大多时候指的是提取特征的网络&#xff0c;其作用就是提取图片中的信息&#xff0c;供后面的网络使用。这些网络经常使用的是ResNet VGG等&#xff0c;而不是我…...

华为OD机试用Python实现 -【Linux 发行版的数量】(2023-Q1 新题)

华为OD机试题 华为OD机试300题大纲Linux 发行版的数量题目描述输入描述输出描述说明示例一输入输出说明Python 代码实现代码编写逻辑华为OD机试300题大纲 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:blog.csd…...

Http报文解析

http通信流程浏览器->已监听的web服务器->read->write->close http请求报文: a.请求方法: POST GET DELETE HEAD OPTIONS PUT TRACE b.请求地址: /xxx/yyy/zzz c.报文协议: HTTP/1.1 d.请求报文头: Accept Referer Accept-Language Content-Type Host Content-Len…...

Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目

上篇请移步到Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 上一篇博文已经对Node.js的安装与配置进行了详细介绍。 另外&#xff1a;文中项目存放的路径及项目名称可根据自身实际情况进行更改。 目录 三、Vue安装配置 1、搭建Vue脚手架 2、通过NPM安装Vue …...

TIA博途Wincc中自定义配方画面的具体方法示例

TIA博途Wincc中自定义配方画面的具体方法示例 前面和大家分享了通过TIA博途自带的配方视图组态配方功能的具体方法,具体内容可参考以下链接中的内容: TIA PORTAL wincc中配方recipe组态及配方视图的使用方法 但是,使用配方视图的时候感觉不是很方便,同时一部分使用人员也感…...

Java反射系列--方法大全

原文网址&#xff1a;Java反射系列--方法大全_IT利刃出鞘的博客-CSDN博客 简介 本文介绍Java反射相关的方法。 Class相关方法 方法 说明 getName() 返回String形式的该类的名称。 newInstance() 根据某个Class对象产生其对应类的实例&#xff0c;它调用的是此类的默认构…...

LeetCode 169. 多数元素

LeetCode 169. 多数元素 难度&#xff1a;easy\color{Green}{easy}easy 题目描述 给定一个大小为 nnn 的数组 numsnumsnums &#xff0c;返回其中的多数元素。多数元素是指在数组中出现次数 大于 ⌊n/2⌋⌊ n/2 ⌋⌊n/2⌋ 的元素。 你可以假设数组是非空的&#xff0c;并且给…...

来了,metaIPC1.0

metaRTC推出metaIPC正式版1.0&#xff0c;基于metaRTC6.0最新版二次开发&#xff0c;metaIPC是为嵌入式/摄像头量身打造的webRTC版IPC Camera&#xff0c;可安装在国内大多数Soc芯片上&#xff0c;如在君正/瑞芯微/MSTAR/海思等等已经有多个成熟产品应用。 New Feature 支持M…...

WireShark如何进行USB包协议分析

USB协议学习的步骤之一就是从抓包看协议通信,进而学习usb设备开发是怎么回事。这里发现一个工具就是wireshark。 WireShark如果要抓取usb设备的包,需要在安装的时候,选择usbpcap一并进行安装。...

蒙特卡洛随机模拟

蒙特卡洛随机模拟 简介 蒙特卡洛模拟是在计算机上模拟项目实施了成千上万次&#xff0c;每次输入都随机选择输入值。由于每个输入很多时候本身就是一个估计区间&#xff0c;因此计算机模型会随机选取每个输入的该区间内的任意值&#xff0c;通过大量成千上万甚至百万次的模拟…...

Android从屏幕刷新到View的绘制(三)之Handler异步消息与同步屏障

0. 相关分享 Android从屏幕刷新到View的绘制&#xff08;一&#xff09;之 Window、WindowManager和WindowManagerService之间的关系 Android从屏幕刷新到View的绘制&#xff08;二&#xff09;之Choreographer、Vsync与屏幕刷新 1. 相关类 Handler Handler中维护着它所在的…...

最新版axios@1.3.x取消请求-AbortController-初体验-番茄出品

最新版axios1.3.x取消请求-AbortController-初体验-番茄出品 start 前文提到&#xff0c;axios 中的取消请求&#xff0c;包含两种方式&#xff1a; AbortController&#xff1b;CancelToken&#xff1b; 上篇文章讲解了 CancelToken&#xff0c;今天这篇文章来了解一下 Abor…...

Git的简述

Git 文章目录GitGit概述版本控制工具集中式管理控制工具分步式管理控制工具控制机制Git和代码托管中心安装Git软件Git常用命令Git概述 Git是一个免费的、开源的分步式版本控制系统&#xff0c;可以快速的处理从小型到大型的各种项目 Git 易于学习&#xff0c;占地面积小&…...

webpack实战,手写loader和plugin

序言 对于 webpack 来说&#xff0c; loader 和 plugin 可以算是需求程度最为广泛的配置项了。但是呢&#xff0c;单单止步于配置可能还不够。如果我们自己有时候想要 diy 一个需求&#xff0c;但是 webpack 又没有相关的 loader 和 plugin 。那这个时候我们可能就得开始造点轮…...

STM32CubeMX按键模块化 点灯

本文代码使用 HAL 库。 文章目录前言一、按键原理图二、CubeMX 创建工程三、代码讲解&#xff1a;1. GPIO的输入HAL库函数&#xff1a;2. 消抖&#xff1a;3. 详细代码四&#xff0c;实验现象&#xff1a;总结前言 我们继续讲解 stm32 f103&#xff0c;这篇文章将详细 为大家讲…...

C#专栏目录(长期更新)

文章目录C# 基础C#进阶C#应用WPF基础WPF 3D小游戏C# 基础 1996年&#xff0c;微软用年薪三百万美刀的价格从Borland挖来了大神海尔斯伯格&#xff0c;开始了J开发&#xff0c;用以对抗Java。但SUN公司认为此举违反了Java开发平台的中立性&#xff0c;对微软提出诉讼。C#正是在…...

如何在建设银行网站查验回单/网络营销有哪些功能

原文&#xff1a;Carthage Tutorial: Getting Started 作者&#xff1a;Lorenzo Boaro 译者&#xff1a;kmyhy 更新说明&#xff1a;本教程由 Lorenzo Boaro 升级至 iOS 11&#xff0c;Xcode 9 和 Swift 4。原文作者是 James Frost。 对于 iOS 开发者来说有两个好东西&#x…...

wordpress接口发布文章/企业网站模板 免费

在开发高并发系统时有三把利器用来保护系统&#xff1a;缓存、降级和限流。之前已经有一些文章介绍过缓存和限流了。本文将详细聊聊降级。当访问量剧增、服务出现问题&#xff08;如响应时间慢或不响应&#xff09;或非核心服务影响到核心流程的性能时&#xff0c;仍然需要保证…...

网站制作专业吗/常州网站推广

知识点&#xff1a;string删除最后一个元素也可以用pop_back&#xff08;&#xff09;来实现 还有就是这一段得写在if内&#xff0c;当时sb了思考了一下才明白233 class Solution { public:vector<string>res;void gene(int n,int lc,int rc,string s){if(lcrc&&…...

jsp网站开发四 酷 全书源码/seo技术交流论坛

1、穿透 穿透&#xff1a;频繁查询一个不存在的数据&#xff0c;由于缓存不命中&#xff0c;每次都要查询持久层。从而失去缓存的意义。 解决办法&#xff1a; 持久层查询不到就缓存空结果&#xff0c;查询时先判断缓存中是否exists(key) ,如果有直接返回空&#xff0c;没有则查…...

医院管理系统网站开发/成品网站1688入口网页版

正题第二题&#xff1a;[HNOI2003]操作系统我们看到了“优先级最高”这几个字&#xff0c;我们就想到了用堆来维护 bool operator<(const node y)const{if(ranky.rank) return begin>y.begin;return rank<y.rank; } 我们这样就可以来维护优先级高的在前面先做&#x…...

其它区便宜营销型网站建设/宁波seo搜索优化费用

eclipse界面定制&#xff0c;让eclipse看着更清爽转载于:https://www.cnblogs.com/passer1991/p/3227755.html...