html前端学习一：图片 列表 表格

最新推荐文章于 2023-05-20 08:08:19 发布
最新推荐文章于 2023-05-20 08:08:19 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myt2000/article/details/103660318
版权

图片 列表 表格

图片的格式

BMP：
占用空间大色彩丰富，点阵图

JPEG：（JPG） 压缩方式通常是破坏数据性压缩，在压缩过程中图像的质量会遭受到可见的破坏

GIF：对透明色和多帧动画的支持。

PNG：无损压缩的位图格式，支持Alpha通道的透明/半透明特性

图片标签 img

<img src="https://i-blog.csdnimg.cn/blog_migrate/a3d48ff388d8dfeba256fadd661f8e64.png">

img的四大属性 src alt width height title

src如果保存在本地的话，同级目录直接填图片名，不同级目录可以用XXX\XXX.jpg 反斜杠，正斜杠都可以

alt主要用于给爬虫提供要素信息

  • 没有找到图片的保存

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZI9H2J1M-1577065264042)(http://img0.ph.126.net/ZjJdUpzhd0UQiMt2GbADIA==/6632689545351233628.png)]

  • 如何找到src原地址

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BMsILjRS-1577065264043)(http://img1.ph.126.net/3E_xP7qVND_KvETq4d-F1A==/3084402794815114597.png)]

无序列表

type：
disc 默认 小黑原点
square 实心方块
circle 空心圆

<ul type="disc">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>
    
<ul type="square">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>
<ul type="circle">
    	<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
    </ul>
  • 1111
  • 2222
  • 3333
  • 1111
  • 2222
  • 3333
  • 1111
  • 2222
  • 3333

有序列表

       type属性：           
1	|	数字列表排序
a	|	小写字母排序
A	|	大写字母排序
i	|	罗马小写字母排序
I	|	罗马大写字母排序

		<ol >
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="A">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="a">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>

		<ol type="i">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>	
		
		<ol type="I">
		<li>1111</li>
    	<li>2222</li>
    	<li>3333</li>
		</ol>
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333
  1. 1111
  2. 2222
  3. 3333

自定义列表

dl
dt
dd
类似于p标签


		<dl>
			<dt>想要完成的目标</dt>
			<dd>生活开心</dd>
			<dd>回到杭州</dd>
			<dd>生活富足</dd>
		</dl>
想要完成的目标
生活开心
回到杭州
生活富足
a标签小细节

换行中间有空格，不换行中间无空格

<a href="#">坦克</a><a href="">飞机</a>
		<br>
		<a href="#">坦克</a>
		<a href="">飞机</a>

坦克飞机


坦克
飞机

表格

表格结构

<table>      
	<tr>
		<td>1</td>
	</tr>
	<tr>
		<td>2</td>
	</tr>
</table>

table表格
tr代表行，包含一个或多个列    
th 表头
td 一行中的分列内容
colspan 跨列        
rowspan跨行  

caption 表格标题

    <table border="1">
    	<caption><b>明星出席情况</b></caption>
    	<tr>
    		<th>###</th>
    		<th>id</th>
    		<th>地点</th>
    		<th>人物</th>
    	</tr>
    	<tr>
    		<td>###</td>
    		<td>01</td>
    		<td rowspan="2">上海</td>
    		<td>许晴</td>
    	</tr>
    	<tr>
    		<td>###</td>
    		<td>02</td>
    		<td>土豆</td>
    	</tr>
       	<tr>
    		<td>###</td>
    		<td>03</td>
    		<td>广州</td>
    		<td>周杰伦</td>
    	</tr>
       	<tr>
    		<td>###</td>
    		<td>04</td>
    		<td colspan="2">台湾&nbsp;&nbsp;&nbsp;林青霞</td>
    		<!-- <td>林青霞</td> -->
    	</tr>
明星出席情况
###id地点人物
###01上海许晴
###02土豆
###03广州周杰伦
###04台湾   林青霞
缩进调整和整块代码移动快捷键

crtl+[或者]
选定整块代码 crtl+shift+方向键

表格样式
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keyword" content="" />
    <meta name="description" content="" />
    <title></title>
    <style>
    	table tr:hover{
    		background:red;
    		color:white;
    	}
    	tbody tr td:hover{
    		background: skyblue;
    		color:green;
    	}
    </style>
</head>



<body>
    <table border="1">
    	<thead>
    	<tr>
    	<th>id</th>
    	<th>name</th>
    	<th>gender</th>
    	<th>age</th>
		</tr>
    	</thead>
    
<tbody>
		<tr>
			<td>1</td>
			<td>小明</td>
			<td>男</td>
			<td>25</td>
		</tr>
		<tr>
			<td>2</td>
			<td>小章</td>
			<td>女</td>
			<td>36</td>
		</tr><tr>
			<td>3</td>
			<td>小王</td>
			<td>男</td>
			<td>55</td>
		</tr><tr>
			<td>4</td>
			<td>小赵</td>
			<td>男</td>
			<td>30</td>
		</tr>
</tbody>
    </table>
</body>
</html>
  • 效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1HwbtEXL-1577065264044)(http://img1.ph.126.net/Y95DZJprg7Z8I4HDmw1UFg==/6632587290772453624.png)]

rgba

用法：
color :rgba(255,0,0,1) 红色
red green blue alpha

#FFFFFF 黑色
第一个 FF 十六进制的红色

myt2000
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
非常好看的图片列表边框与特效
10-16
非常好看的图片列表边框与特效，图片边框是金属效果，鼠标移入出现特效注释信息。适合图片列表展示。更多组件下载请访问：http://www.quickui.net/
html 图像_表格_实际应用-菜谱
1
03-05 943
html图像元素 [html] view plaincopy html>       head>head>       body>           img src="dog.jpg" width="200px" border="4px" alt="dog"/>       body>   html>  
table方法实现图片自适应及脚本方法
weixin_37457102的博客
02-24 7286
季后赛的发送多个就会尽快回复符十大十大
简单的做一个图片上传预览（web前端）
红岸基地
04-23 1万+
在做web项目很多的时候图片都是避免不了的，所以操作图片就成了一个相对比较棘手的问题，其实也不是说很麻烦，只是说上传然后直接预览的过程很恶心，今天简单的做一个处理。效果预览：代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;HTML5上传图片预览&lt;/title&gt; &lt;meta http-e...
html中table单元格添加图片完全填充
热门推荐
高帅的博客
05-05 3万+
转载：http://www.cnblogs.com/zmjh/p/8810805.htmlcss样式如下：.table{ display: table; border-collapse: collapse; width: 400px; height: 200px; ...
前端第一阶段学习-HTML
最新发布
08-08
总的来说，学习HTML是前端开发的第一步，掌握这些基础概念和标签将为你后续的学习打下坚实基础。随着对HTML的理解加深，你还将接触到更复杂的布局技术、响应式设计以及与CSS和JavaScript的交互，逐步成长为一名熟练...
html前端学习文档汇总.zip
10-23
这个“html前端学习文档汇总.zip”压缩包显然包含了一系列关于HTML学习的资源，旨在帮助初学者或者希望深化理解的开发者系统地掌握HTML。 HTML文档结构通常包括头部（head）和主体（body）。头部主要用于存放元数据...
test-html：学习前端的一个项目
02-20
4. **表格和列表**：学习如何创建数据表格（、、）和无序列表（、）及有序列表（、）。 5. **链接和导航**：理解标签的href属性，以及如何创建内部链接和外部链接，实现页面间的跳转。 6. **图片处理**：学习如何...
前端领域 + 第一阶段 + HTML基础
07-22
在前端开发领域，HTML（HyperText Markup Language）是构建网页的基础。HTML是一种标准标记语言，它允许开发者通过一系列标签来组织网页内容，并控制其呈现方式。...在前端开发的道路上，HTML是不可或缺的第一步。
《Html》前端学习笔记
04-12
它是一种标记语言，通过一...这些只是HTML前端开发中的一部分基础知识，实际开发中还包括更多复杂的概念和技术，如响应式设计、事件处理、DOM操作、Ajax异步通信等。不断学习和实践，才能成为一名熟练的前端开发者。
HTML表单效果图,html-图片/表格/表单
weixin_39955351的博客
06-03 599
a标签的认识’#‘号跳转页面内锚点跳转外部网页跳转内部网页a标签的伪协议这样做点击a标签不会刷新页面也不会跳转到开头，页面中存在input且里面有内容时会点击会刷新页面，href内为#瞄点点击会自动跳转页面开头，只有伪协议能达到点击后无效果状态(需求：点击按钮查看元素不刷新页面不跳转)发邮件手机端适用联系我们 点击调用电话功能img的认识img是一个单标签 我们一般在网页使用它来显示图片，请求图片...
html表格怎么嵌入图片,如何将图像插入JTable单元格
weixin_34698121的博客
06-05 2505
JTable已经为图标提供了默认的渲染器。您只需要告诉表在给定列中存储了哪些数据，以便它可以选择适当的渲染器。这是通过重写getColumnClass(...)方法来完成的：import java.awt.*;import javax.swing.*;import javax.swing.table.*;public class TableIcon extends JPanel{public Ta...
html表格怎么加图片,添加图片到HTML表格动态
weixin_39633252的博客
06-04 2160
我试图将图像添加到动态表，但它不会发生...... 还当我添加图片到细胞中有一个错误信息：添加图片到HTML表格动态由于内容不是文字，无法获取内容。if (filteredFileList.Count != 0 && filteredFileList != null) {imgProduct.ImageUrl = Server.MapPath(@"/ysyp/Images/Prod...
十款免费的WEB图形报表解决方案
zuoming99的专栏
06-12 392
在我们开发web应用时，经常需要使用报表来展示数据，对于简单的表格式报表，我们一般用html就可以对付。然而，用户可能需要一些漂亮的图形来展示，因为那样更加直观。不幸的是，如果要我们自己动手来生成各种图形，那绝对是一种折磨。还好，开源世界给我们提供了很多解决方案，下面就给大家介绍一下。FlotFlot 为 jQuery 提供的javascript代码库. 容易使用，有特色的图表，提供交互功能(能够...
【HTML】-案例-利用表格制作网页
Liangqi0329的博客
09-29 1万+
在网页制作中，早期的网页比较喜欢用表格来进行页面布局，使得页面看上去也更整洁。在本文中，我们介绍的是一个用表格来布局的一个菜谱页面，效果如下： 可以看到，大体上，这是一个由五行三列的表格所构成的菜谱。所以，在初始设定时，我们可以把表格设成五行三列，然后再进行一些行和列的合并，就可以得到我们想要的效果。在本例中，我们将第一行的所有列合并，并将第一列的第二第三行合并，第一列的第四第五行合并。
使用JFreeChart在web中绘制图表
Xinghf
11-04 6943
用JFreeChart绘制图表，可以绘制二维柱状图、三维柱状图、折线图、以及饼图，网上也有很多关于JFreeChart绘制图像的源码，但是还是需要自己去总结一下这个过程。          对于图表并不陌生，office word中我们对数据进行分类汇总，最后在让我们自己把分类汇总的内容生成一个图表的样式。而在java web开发中，我们又一次遇见了，对于图表的汇总可选方案有多种，在这里使用的是
html的图像，超链接，表格，表单
IfIloseyou的博客
12-06 460
**** 今天学习了图像，超链接，表格，表单。 图片元素： ******img src：指定要显示的图片的url alt：当图片无法显示的时候用文字去解释它 width:宽度 height：高度 注意：如果只改变 width或者height中一个属性的化 那么另一个属性会跟着等比缩放 title：当鼠标指向时提示的文字 超链接 内容 href:链接的url traget:指定打开新网页的形式 _s...
【小沐学Python】Python实现Web图表功能（ECharts.js，Flask）
爱看书的小沐
05-20 973
ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是
使用 JFreeChart来创建基于web的图表
键者天行
07-27 1万+
一、JFreeChart项目简介 JFreeChart是开放源代码站点SourceForge.net上的一个JAVA项目，它主要用来各种各样的图表，这些图 表包括：饼图、柱状图(普通柱状图以及堆栈柱状图)、线图、区域图、分布图、混合图、甘特图以及 一些仪表盘等等。这些不同式样的图表基本上可以满足目前的要求。为了减少篇幅本文主要介绍前面 三种类型的图表，读者可以触类旁通去开发其他样式的图表。下面几个

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值