【前端】HTML+CSS复习记录【2】

news2024/11/18 2:24:45

文章目录

  • 前言
  • 一、img(图片标签)
  • 二、a(链接标签)
  • 三、ul(无序列表)
  • 四、ol(有序列表)
  • 系列文章目录


前言

长时间未使用HTML编程,前端知识感觉忘得差不多了。通过梳理知识点,重新学习和巩固前段相关知识。
学习位置:W3CSchool:HTML + CSS 基础实战


一、img(图片标签)

<img>标签为单标签元素:<img src="图片的地址" alt="坐在桌子上的兔子">
src属性:填写图片指向地址
alt属性:在图片无法加载时显示的替代文字.是当图片无法显示时的替代显示的文本。

​alt ​属性对于盲人或视觉障碍的用户理解图片中的内容非常重要,搜索引擎也会搜索​alt​ 属性来了解图片的内容。
加了​alt=""​ 当图片不能正常加载,可视化浏览器会隐藏表示图片损坏的图标。不加alt,当图片无法加载时,会显示裂纹图标

二、a(链接标签)

在这里插入图片描述

href属性:a标签中也可插入图片或其他内容作为链接,也可实现页面内跳转
	<a href="#">点击</a> <!--点击会跳转到当前页页首-->
	<a href="#test">点击1</a><!--点击会跳转到当前页id="test"的元素位置-->
	<div id="test"></div><!--注:id​是用来描述网页元素的一个属性,它的值在整个页面中唯一-->

target属性:设置打开链接的方式

target=_blank,在新窗口打开。表示在新窗口中打开该链接。
target=_self,在当前窗口打开。表示相同框架,即在当前窗口(或当前选项卡)中打开该链接。 还有两个不常用的:
target=_parent,在父窗口打开。将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的,则在浏览器全屏窗口中载入链接的文件,就象_self参数一样。
target=_top,在顶级窗口打开。在当前的整个浏览器窗口中打开所链接的文档,因而会删除所有框架,不写的话就是表示默认值,默认值一般跟浏览器有关。
原文链接:https://blog.csdn.net/hmz856/article/details/131182598

三、ul(无序列表)

将 ​<ul>​ 标签与 ​<li> ​标签一起使用,创建无序列表。
子项前面加了实心小黑点,这个小黑点可以通过 CSS 调整成其他样子比如菱形。
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

四、ol(有序列表)

可以改变列表起始数值
<ol start="50">
  <li>咖啡</li>
  <li>牛奶</li>
  <li></li>
</ol>

在这里插入图片描述


系列文章目录

【前端】HTML+CSS复习记录【1】
【前端】HTML+CSS复习记录【2】(本章)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1867827.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

智慧园区大数据云平台建设方案(Word原件)

第一章 项目建设背景及现状 第二章 园区创新发展趋势 第三章 工业园区大数据存在的问题 第四章 智慧工业园区大数据建设目的 第五章 智慧园区总体构架 第六章 系统核心组件 第七章 智慧工业园区大数据平台规划设计 获取方式&#xff1a;本文末个人名片直接获取。 软件资料清单…

文本生成sql模型(PipableAI/pip-sql-1.3b)

安装环境 pip3 install torch torchvision torchaudio --index-url https://download.pytorch.org/whl/cu118 pip install transformers 代码 question "What are the email address, town and county of the customers who are of the least common gender?"sc…

three.js - MeshStandardMaterial(标准网格材质)- 金属贴图、粗糙贴图

金属贴图、粗糙贴图 金属贴图&#xff1a;metalnessMap 和 粗糙贴图&#xff1a;roughnessMap&#xff0c;是用于模拟物体表面属性的两种重要贴图技术&#xff0c;这两种贴图&#xff0c;通常与基于物理的渲染&#xff08;PBR&#xff09;材质&#xff08;如&#xff1a;MeshSt…

linux进程是什么?

进程概念 进程Process是指计算机中已运行的程序&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;是操作系统结构的基础。 在早期面向进程设计的计算机结构中&#xff0c;进程是程序的基本执行实体。在当代面向线程设计的计算机结构中&#xff0c;进程是线程的容器…

K210视觉识别模块学习笔记6: 识别苹果_图形化操作函数_

今日开始学习K210视觉识别模块: 图形化操作函数 亚博智能 K210视觉识别模块...... 固件库: canmv_yahboom_v2.1.1.bin 训练网站: 嘉楠开发者社区 今日学习如何在识别到目标的时候添加图形化操作:(获取坐标、框出目标等) 在识别苹果的基础上 学习与添加 这些操…

docker配置国内镜像加速器

1、搜索阿里云 2、搜索容器镜像服务 点击管理控制台 配置镜像加速器

鸿蒙NEXT开发:工具常用命令—install

安装三方库。 命令格式 ohpm install [options] [[<group>/]<pkg>[<version> | tag:<tag>]] ... ohpm install [options] <folder> ohpm install [options] <har file> alias: i 说明 group&#xff1a;三方库的命名空间&#xff0c;可…

count(*) over (partition by ……)用法详解

select id,count(*) over(partition by pro_id) from sal; 以pro_id分组&#xff0c;统计分组后每个pro_id的记录总数及对应的id&#xff1b; 类似还有count(*) over(order by ……)、sum(amount) over(partition by ……)等&#xff0c;略有区别

在Linux Ubuntu系统中使用Pascal语言

Pascal是一种结构化编程语言&#xff0c;而Free Pascal作为其现代编译器&#xff0c;不仅支持跨多种操作系统和处理器架构&#xff0c;还提供了高效的内存使用和函数重载等先进功能。Free Pascal继承了Pascal语言的核心特性&#xff0c;同时进行了扩展和优化&#xff0c;使其成…

Apache Flink类型及序列化研读生产应用|得物技术

一、背景 序列化是指将数据从内存中的对象序列化为字节流&#xff0c;以便在网络中传输或持久化存储。序列化在Apache Flink中非常重要&#xff0c;因为它涉及到数据传输和状态管理等关键部分。Apache Flink以其独特的方式来处理数据类型以及序列化&#xff0c;这种方式包括它…

彩虹PLM系统:引领汽车行业的数字化转型

彩虹PLM系统&#xff1a;引领汽车行业的数字化转型 彩虹PLM系统作为汽车行业数字化转型的引领者&#xff0c;凭借其卓越的技术实力和丰富的行业经验&#xff0c;为汽车行业带来了全面的解决方案。以下是彩虹PLM系统如何引领汽车行业数字化转型的详细分析&#xff1a; 一、整合全…

Redis 7.x 系列【7】数据类型之列表(List)

有道无术&#xff0c;术尚可求&#xff0c;有术无道&#xff0c;止于术。 本系列Redis 版本 7.2.5 源码地址&#xff1a;https://gitee.com/pearl-organization/study-redis-demo 文章目录 1. 概述2. 常用命令2.1 RPUSH2.2 LPUSH2.3 LRANGE2.4 LINDEX2.6 LREM2.7 LLEN2.8 LPOP…

8.计算机视觉—增广和迁移

目录 1.数据增广数据增强数据增强的操作代码实现2.微调 迁移学习 Transfer learning(重要的技术)网络结构微调:当目标数据集比源数据集小得多时,微调有助于提高模型的泛化能力。训练固定一些层总结代码实现1.数据增广 CES上的真实故事 有一家做智能售货机的公司,发现他们…

glif: 爆火 MeMe 生成器

glif 是一个 Agent 搭建平台&#xff0c;有人用其搭建了一个 MeMe 生成器, 短时间内已经有 280k 次使用&#xff01; 如图所示&#xff0c;glif 最大的特点是有一个实验性支持的 Canvas 节点&#xff0c;可以将生成的内容任意布局输出&#xff0c;提升了可控性。

7.计算机视觉—硬件和训练

目录 1.深度学习硬件:CPU和GPUCPU内存结构提升CPU利用率提升GPU利用率CPU与GPU牌子CPU/GPU高性能计算编程2.深度学习硬件:TPU和其他DSPFPGAAI ASIC总结3.单机多卡并行:多GPU数据并行VS模型并行总结4.多GPU训练代码实现数据同步数据分发训练多GPU的简洁实现5.分布式训练1.深度…

ICRA 2024 基于transformer大模型实现机器人自主导航

在陌生环境中进行导航的机器人需要提供决策&#xff1a;面向任务的导航&#xff08;到达设定好机器人目标点&#xff09;&#xff0c;以及 与任务无关的探索&#xff08;在新颖的环境中寻找目标&#xff09;。通常&#xff0c;这些角色由单独的模型处理&#xff0c;例如通过使用…

“北京到底有谁在啊”影视APP开发,解锁最简单的快乐

随着电视剧《玫瑰的故事》在腾讯视频APP热播&#xff0c;APP也增加了很多热度&#xff0c;一款丰富的影视APP&#xff0c;无论是热门大片、经典影视剧、还是最新综艺节目&#xff0c;能畅享无限精彩的影视内容&#xff01; 开发影视APP&#xff0c;需要专业的技术服务商来解决…

DM达梦数据库转换、条件函数整理

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; &#x1f49d;&#x1f49…

【分布式系列】分布式锁在 Redis 主从部署中的挑战

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

ABAP ALV报表性能优化 经验总结

优化ALV报表&#xff0c;最主要就是优化取数逻辑和数据库查询。因为几乎在所有的程序中都会用到数据库查询&#xff0c;所以这篇文章的内容也不仅局限于SAP、ABAP程序&#xff0c;虽然ABAP有其特殊之处。 优化的时候我遵从以下几个原则&#xff1a; 1.把数据库连接视为一种极其…