前端学习:HTML图像、表格、列表

news2024/11/15 19:51:05

 

目录

图像 

一、图像标签和源属性(Src)

 二、替换文本属性(Alt)

三、设置图片样式基本属性

四、图像标签

表格 

 一、标签

 补充:

二、表格的表头

 三、表格常用标签和属性

标签

属性 

 列表

一、无序列表

二、有序列表 

三、定义列表 

 四、列表常用标签属性


图像 

一、图像标签<img>和源属性(Src)

在HTML中,图像由 <img> 标签定义。

<img> 是空标签,只包含属性,没有闭合标签。

定义图像语法如下:

<img src="url" />

 url指存储图像的位置。

 二、替换文本属性(Alt)

alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。

定义语法如下:

<img src="ball.git" alt="Hat ball">

当浏览器无法载入图像时,替代文本属性可以告诉读者他们失去的信息,这样有助于使用和阅读。

三、设置图片样式基本属性

标签作用
background页面添加背景图片
align设置图片对齐方式(默认对齐方式是bottom)
height设置图片的长度
width设置图片的宽度

四、图像标签

标签描述
<img>定义图像
<map>定义图像地图
<area>定义图像地图中的可点击区域

表格 

 一、<table>标签

表格由<table>标签来定义。每个表格均有若干行(由<tr>标签定义),每行被分割为若干个单元格(由<td>标签定义)。字母td指表格数据(table date),即数据单元格的内容。

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等。

 

 补充:

其中border属性是用来调节表格框线粗细,但在HTML5中已近被淘汰,用css可以代替;没有设置框线粗细,表格默认没有框线

表格和其他标签一样,内部也可以嵌套别的标签,例如:

 

二、表格的表头

表格的表头使用 <th> 标签进行定义,大多数浏览器会把表头显示为粗体居中的文本。

 三、表格常用标签和属性

标签

标签描述
<caption>定义表格标题
<col>定义表格列的属性
<colgroup>定义表格列的组
<table>定义表格
<tbody>定义表格主体
<td>定义表格单元
<tfoot>定义表格的页脚
<th>定义表格的表头
<thead>定义表格的页眉
<tr>定义表格的行

属性 

 

属性描述
colspan="?"横跨?列的单元格(合并?列单元格)
rowspan="?"横跨?行的单元格(合并?行单元格)
cellpadding="?"创建单元格内容与其边框之间的空白
cellspacing="?"增加单元格之间的距离

 列表

 列表分为无序和有序列表,我们从无序列表开始讲

一、无序列表

无序列表是一个项目的列表,此项目使用粗体圆点(典型的小黑圆圈)进行 标记

无序列表始于<ul>标签.每个列表项始于<li>.

补充:无序列表内部一样可以嵌套其他的标签 

二、有序列表 

有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于<ol>标签。每个列表项始于<li>标签

 

补充:有序列表内部一样可以嵌套其他的标签  

三、定义列表 

自定义列表不仅是一列项目,还是项目及其注释的组合。

自定义列表以<dl>标签开始 。每个自定义列表项以<dt>开始。

每个自定义列表项的定义以 <dd> 开始。

 

 四、列表常用标签属性

属性描述
type="disc"实心圆无序标签
type="circle"空心圆无序标签
type="square"实心正方形无序标签
标签描述
<ol>定义有序列表。
<ul>定义无序列表。
<li>定义列表项。
<dl>定义定义列表。
<dt>定义定义项目。
<dd>定义定义的描述。

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

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

相关文章

MATLAB三相LCL滤波型PWM逆变器仿真设计matlab代码(链接在文章结尾)

MATLAB三相LCL滤波型PWM逆变器仿真设计 参考并网电流外环电容电流前馈内环的双闭环控制结构&#xff0c;可以用于光伏和风力发电网侧变换器中进行改造。 三相逆变器通常采用三相桥式逆变电路&#xff0c;采用IGBT作为开关器件的电压型三相桥式逆变电路 在并网逆变器系统中,滤波…

MySQL数据库学习笔记(七)实验课三之拼命的李绿

一来就是实验课三了&#xff0c;那么实验课二呢&#xff1f;实验课二是装配mysql环境那些东西&#xff0c;而我们在前面的笔记中也有关于配置环境的&#xff0c;所以在这里就不再赘述了。 文章目录注意&#xff1a;1&#xff0c;本地文件导入2&#xff0c;数据范围3&#xff0c…

paddle 进行数字识别 (使用ocr数据集)

要点&#xff1a; 喵了个喵&#xff0c;没使用 OCR参考文档&#xff1a; PaddleOCR数字仪表识别——2.数据合成及数据集制作_数字仪表数据集https://blog.csdn.net/castlehe/category_10459202.html?spm1001.2014.3001.5482最佳参考&#xff1a; 基于PaddleOCR的数字显示器字…

SpringBoot ElasticSearch 【SpringBoot系列16】

SpringCloud 大型系列课程正在制作中&#xff0c;欢迎大家关注与提意见。 程序员每天的CV 与 板砖&#xff0c;也要知其所以然&#xff0c;本系列课程可以帮助初学者学习 SpringBooot 项目开发 与 SpringCloud 微服务系列项目开发 elasticsearch是一款非常强大的开源搜索引擎&a…

Logstash:部署和扩展 Logstash

Elastic Stack 用于大量用例&#xff0c;从操作日志和指标分析到企业和应用程序搜索。 确保你的数据可扩展、持久且安全地传输到 Elasticsearch 非常重要&#xff0c;尤其是对于任务关键型环境。 本文档的目的是强调 Logstash 最常见的架构模式以及如何随着部署的增长而有效扩…

c++学习之c++对c的扩展2

目录 1.c/c中的const 1 const概述 2 c/c中const的区别 c中的&#xff1a; c中的const&#xff1a; c/c中的const异同 c中const修饰的变量,分配内存情况 尽量以const替换define 2.引用 函数的引用&#xff1a; 引用的本质 指针的引用 5 常量引用 内联函数 内联函数…

(排序7)归并排序(递归)

归并排序 归并排序采用的是两个有序数组的归并。比如说现在想让一个数组有序。之前我们讲过&#xff0c;如果说你现在有两个有序数组的话&#xff0c;那么我们就可以把这两个有序数组给他合并成一个有序数组。两个有序区间归并的思路其实很简单&#xff08;这个也是归并的单趟…

Android 自定义View 之 计时文字

计时文字前言正文一、XML样式二、构造方法三、API方法四、使用五、源码前言 在Android开发中&#xff0c;常常会有计时的一些操作&#xff0c;例如收验证码的时候倒计时&#xff0c;秒表的计时等等&#xff0c;于是我就有了一个写自定义View的想法&#xff0c;本文效果图。 正文…

Vue2-黑马(八)

目录&#xff1a; &#xff08;1&#xff09;router-动态路由 &#xff08;2&#xff09;router-重置路由 &#xff08;3&#xff09;router-页面刷新 &#xff08;1&#xff09;router-动态路由 我们有这样一个需求&#xff0c;不同的用户根据自己的身份不一样&#xff0c;…

Seaborn 数据可视化基础

目录 介绍 知识点 Seaborn 介绍 快速优化图形 Seaborn 绘图 API 一、散点图&#xff1a; 参数hue hue hue_order 参数style 二 、线形图 三、类别图 绘制箱线图 绘制小提琴图 绘制增强箱线图 绘制点线图 绘制条形图 绘制计数条形图 四、分布图 五、回归图 …

nginx配置

单线程应用 稳定性高 系统资源消耗低 线程切换消耗小 对HTTP并发连接处理能力高 单台服务器可支持2w个并发请求 nginx与apache区别 Nginx相对于Apache的优点: 轻量级&#xff0c;同样是 web 服务&#xff0c;比Apache 占用更少的内存及资源&#xff0c;高并发&#xff0…

攻防世界-file_include(convert.iconv的使用)

代码审计&#xff0c;存在文件包含&#xff0c;直接上伪协议 发现不行&#xff0c;应该是存在字符过滤 知识盲区&#xff1a; 1.file://协议&#xff0c;需要填写绝对路径&#xff0c;只能读取txt文件&#xff0c;后面直接跟绝对路径。 file:///etc/passwd 2.php://filter …

深入浅出 Golang 内存管理

了解内存管理~ 前言&#xff1a; 本节课主要介绍了内存管理知识与自动内存管理机制&#xff0c;并对目前 Go 内存管理过程中存在的问题提出了解决方案&#xff0c;同时结合了上次课程学习的《Go 语言性能优化》相关知识&#xff0c;提供可行性的优化建议 … 自动内存管理 Go…

spring-boot怎么扫描不在启动类所在包路径下的bean

前言&#xff1a; 项目中有多个模块&#xff0c;其中有些模块的包路径不在启动类的子路径下&#xff0c;此时我们怎么处理才能加载到这些类&#xff1b; 1 使用SpringBootApplication 中的scanBasePackages 属性; SpringBootApplication(scanBasePackages {"com.xxx.xx…

C++linux高并发服务器项目实践 day5

Clinux高并发服务器项目实践 day5程序和进程单道、多道程序设计时间片并行和并发进程控制块&#xff08;PCB&#xff09;进程状态转换进程的状态进程相关命令进程号和相关函数进程创建父子进程的关系GDB多进程调试程序和进程 程序是包含一系列信息的文件&#xff0c;这些信息描…

你知道怎么实现定时任务吗?

诸位读者都知道笔者写东西都是用到才写&#xff0c;笔者的学习足迹自从参加工作之后就是 非系统 学习了&#xff0c;公司里源代码只要有笔者不知道的技术细节&#xff0c;笔者就会仔细的研究清楚&#xff0c;笔者是不喜欢给自己留下问题的那种学习习惯。 为何要写 笔者最近负…

如何使用Thymeleaf给web项目中的网页渲染显示动态数据?

编译软件&#xff1a;IntelliJ IDEA 2019.2.4 x64 操作系统&#xff1a;win10 x64 位 家庭版 服务器软件&#xff1a;apache-tomcat-8.5.27 目录一. 什么是Thymeleaf&#xff1f;二. MVC2.1 为什么需要MVC&#xff1f;2.2 MVC是什么&#xff1f;2.3 MVC和三层架构之间的关系及工…

AI绘图体验:想象力无限,创作无穷!(文生图)

基础模型&#xff1a;3D二次元 PIXEL ART &#xff08;1&#xff09;16-bit pixel art, outside of caf on rainy day, light coming from windows, cinematic still(电影剧照), hdr (2) 16-bit pixel art, island in the clouds, by studio ghibli&#xff08;吉卜力工作室…

配置基于WSL2的Docker环境并支持CUDA

导言 Content 正如前文windows 10 开启WSL2介绍的&#xff0c;我们可以在windows10中使用linux子系统。今天本文介绍如何在此基础上安装Docker并支持在wsl中使用GPU。 准备工作 加入windows insider preview。建议选Dev通道&#xff0c;不要选Beta。 安装Nvidia WSL2-compa…

【数据结构】-计数排序

&#x1f387;作者&#xff1a;小树苗渴望变成参天大树 &#x1f389; 作者宣言&#xff1a;认真写好每一篇博客 &#x1f38a;作者gitee:link 如 果 你 喜 欢 作 者 的 文 章 &#xff0c;就 给 作 者 点 点 关 注 吧&#xff01; 文章目录前言一、计数排序二、排序算法复杂度…