2021-06-02

最新推荐文章于 2024-07-24 16:53:23 发布
最新推荐文章于 2024-07-24 16:53:23 发布
阅读量214 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IDACW/article/details/117466587
版权

一、列表

1.有序列表——<ol>

有序列表使用<ol>元素，列表项目使用<li>元素，有序列表会为每一个列表项进行自动编号

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
 </head>
 <body>
 	<h1>搜索引擎排名</h1>
	<ol>
		<li>Google</li>
		<li>Baidu</li>
		<li>Bing</li>
		<li>Sougou</li>
	</ol>
 </body>
</html>

 

（1）<ol>元素中可以设置type和start属性，type为序号显示的类型，默认显示阿拉伯数字；start为列表第一项的序号，默认为1。

type值表现形式
type="1"用阿拉伯数字表示条目
type="a"用小写字母表示条目
type="A"用大写字母表示条目
type="i"用小写罗马数字表示条目
type="I"用大写罗马数字表示条目

 

2.无序列表——<ul>

无序列表使用<ul>元素，列表项目依然使用<li>元素，无序列表会为每一个列表项显示列表符号

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>无序列表</title>
 </head>
 <body>
	<h1>软件编程语言</h1>
	<ul>
	<li>Java</li>
	<li>C++</li>
	<li>Python</li>
	<li>JavaScript</li>
	</ul>
 </body>
</html>

 

(1)<ul>元素中可以设置type属性，type为列表符号的类型，默认为实心圆点

type值表现形式
type="circle"空心圆点
type="disc"实心圆点
type="square"方型

 

（2）列表嵌套

 有序列表和无序列表也可以互相嵌套，嵌套显示时需要注意嵌套格式。

3.自定义列表——<dl>

自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

    <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>自定义列表</title>
 </head>
 <body>
	<h1>健康食品</h1>
	<dl>
	<dt>水果</dt>
	<dd>苹果</dd>
	<dd>香蕉</dd>
	<dt>蔬菜</dt>
	<dd>西兰花</dd>
	<dd>菠菜</dd>
	</dl>
 </body>
</html>

二、表格——<table>

#标题——<caption>

#表头——<thead>

#表身——<tbody>

#表注——<tfoot>

#单元行——<tr>

（1）普通单元格——<td>

（2）标题单元格——<th>

1.<table>的属性

（1）border

border属性表示表格边框的宽度，默认值为0，即没有边框。注意，该属性会传播给表格中的所有单元格，将border属性设置为1后，实际上是为每一个单元格和表格外添加了边框，并且边框的线条是具有立体感的（左、上边框为深色、右、下边框为浅色，体现了凹陷的效果）。

（2）width和height

width属性和height属性可以用来控制表格的宽和高，如果不设置这两个属性，表格会根据单元格的内容自动决定宽和高。如果需要设置，宽和高的单位可以是像素或百分比。当单位为百分比时，这个百分比是相对于表格所在容器（表格所在容器并非总是浏览器窗口）的百分比，如果所在容器的大小发生了改变，表格的大小也会重新调整。

（3）align

align属性可以设置表格的对齐方式，可选值为left、center、right，默认为left。注意：align属性不会影响单元格内文字的对齐方式。

（4）bgcolor和background

bgcolor属性表示表格的背景色，background属性表示表格的背景图像，应为图片文件的地址，浏览器会以平铺的方式使用此图片填充表格。

注意：当bgcolor属性与background属性都设置时，bgcolor属性会失效。

（5）cellspacing和cellpadding

cellspacing属性控制相邻单元格之间的间距，cellpadding属性控制单元格内部文字与边框的边距

2.<tr>的属性

（1）height

height属性用于设置单元行的高度，单位可以是像素或百分比；如果单位是百分比，则是相对于表格高度的百分比。

注意：tr元素没有width属性。

（2）bgcolor

bgcolor属性用于设置单元行的背景色，如果表格已经设置了背景色或背景图片，tr元素中的设置会覆盖表格的设置。

（3）align属性和valign属性

align属性设置本单元行中所有单元格的水平对齐方式，可选值为left、center、right；valign属性设置本单元行中所有单元格的垂直对齐方式，可选值为top、middle、bottom。

3.<td>和<th>的属性

（1）width

width属性用于设置单元格的宽度，单位可以是像素或百分比，如果单位是百分比，则是相对于表格宽度的百分比。

（2）align和valign

单元格也支持align与valign属性，当单元格的设置与单元行设置冲突时，优先使用单元格的设置

（3）bgcolor

bgcolor属性用于设置单元格的背景色，会覆盖表格或单元行的设置。

（4）colspan

colspan属性用于合并同一行中的单元格，属性值为合并的数量（最小为2）

（5）rowspan

rowspan属性用于合并同一列中的单元格，属性值为合并的数量（最小为2）

4.表格的嵌套

在表格进行嵌套时，内部表格如果采用百分比作为宽度或高度的单位，浏览器在显示时会根据外部单元格的宽度或高度计算出表格对应的宽和高。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表格</title>
 </head>
 <body>
 	<h1 align="center">小说排行榜</h1>
	<table border="1" style="border-collapse:collapse;" align="center">
	<tr>
		<th>排名</th>
		<th>关键词</th>
		<th>趋势</th>
		<th>今日搜索</th>
		<th>最近七日</th>
		<th>相关链接</th>
	</tr>
	<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td><img src="up.jpg"></td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td><img src="down.jpg"></td>
		<td>356</td>
		<td>3560</td>
		<td>
		<a href="有序列表.html">贴吧</a>
		<a href="无序列表.html">图片</a>
		<a href="自定义列表.html">百科</a>
		</td>
	<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td><img src="up.jpg"></td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
	<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td>1</td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td>1</td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td>1</td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
<tr>
		<td>1</td>
		<td>鬼吹灯</td>
		<td>1</td>
		<td>356</td>
		<td>3560</td>
		<td>
			<a href="有序列表.html">贴吧</a>
			<a href="无序列表.html">图片</a>
			<a href="自定义列表.html">百科</a>
		</td>
	</tr>
	</tr>
	</table>
 </body>
</html>

三、实例：个人简历

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>表单——个人简历</title>
 </head>
 <body>
	<h1 align="center">个人简历</h1>
	<table border="1" align="center">
	<tr>
		<td align="center">姓名</td>
		<td><input type="text" name=""></td>
		<td align="center">性别</td>
		<td><input type="text" name=""></td>
		<td align="center">出生年月</td>
		<td><input type="text" name=""></td>
		<td rowspan="4"><input type="button" value="选择文件" onclick=""><textarea name="" rows="" cols=""></textarea></td>
	</tr>
	<tr>
		<td align="center">民族</td>
		<td><input type="text" name=""></td>
		<td align="center">政治面貌</td>
		<td><input type="text" name=""></td>
		<td align="center">身高</td>
        <td><input type="text" name=""></td>
	</tr>
	<tr>
		<td align="center">学制</td>
		<td><input type="text" name=""></td>
		<td align="center">学历</td>
		<td><input type="text" name=""></td>
		<td align="center">户籍</td>
		<td><input type="text" name=""></td>
	</tr>
	<tr>
		<td align="center">专业</td>
		<td><input type="text" name=""></td>
		<td colspan="2" align="center">毕业学校</td>
		<td colspan="2" ><input type="text" name="" style="width:97%;height:97%"></td>
	</tr>
	<tr>
		<td colspan="7"align="center">技能、特长或爱好</td>
	</tr>
	<tr>
		<td align="center">外语等级</td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td align="center">计算机</td>
		<td colspan="3"><input type="text" name=""style="width:98%;height:97%"></td>
	</tr>
	<tr>
		<td colspan="7"align="center">个人履历</td>
	</tr>
	<tr>
		<td align="center">时间</td>
		<td colspan="2"></td>
		<td align="center">单位</td>
        <td colspan="4"></td>
	</tr>
	<tr>
		<td><input type="text" name=""></td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td colspan="4"><input type="text" name=""style="width:99%;height:97%"></td>
	</tr>
	<tr>
		<td><input type="text" name=""></td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td colspan="4"><input type="text" name=""style="width:99%;height:97%"></td>
	</tr>
	<tr>
		<td><input type="text" name=""></td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td colspan="4"><input type="text" name=""style="width:99%;height:97%"></td>
	</tr>
	<tr>
		<td colspan="7"align="center">联系方式</td>
	</tr>
	<tr>
		<td align="center">通信地址</td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td align="center">联系电话</td>
		<td colspan="3"><input type="text" name=""style="width:98%;height:97%"></td>
	</tr>
	<tr>
		<td align="center">E-mail</td>
		<td colspan="2"><input type="text" name=""style="width:97%;height:97%"></td>
		<td align="center">邮编</td>
		<td colspan="3"><input type="text" name=""style="width:98%;height:97%"></td>
	</tr>
	<tr>
		<td colspan="7"align="center">自我评价</td>
	</tr>
	<tr>
		<td colspan="7">
			<textarea name="" rows="" cols=""style="width:99%;height:97%"></textarea>
		</td>
	</tr>
	</table>
 </body>
</html>

IDACW
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-06-01
le_yuan_的博客
06-01 137
net.iw和net.b分别代表权值和阈值的变量名，创建网络后属于默认的变量名 神经网络初始化函数：net=init(NET)去除随机初始化的不确定性 net=initlay(NET) net=initwb(NET,i) 神经网络训练函数：net=train(NET,P,T)NET为需要训练的网络；P、T为训练的样本和期待目标；net表示完成训练的神经网络 神经网络仿真函数：T=sim(net,P)net为训练好的神经...
html中有序列表的background,纯css3有序列表
weixin_32024145的博客
06-03 117
这个前面的数字其实和ol的decimal是没有关系的。其实应用的是:before和counter-increment来生成的。而中间的那个空白的间隔其实是border。其余的一些就是圆角，动画什么的。了解了原理，实践操作下吧。主要css代码：.rounded-list a{position: relative;display: block;padding: .4em .4em .4em 2em;*...
CSS学习（4） - 链接，列表和表格
ylh的博客
04-19 181
本文是css学习记录（3），主要讲解了CSS的链接的设置样式，列表的样式和表格的样式设置。
HTML入门
m0_47035167的博客
07-10 123
接下来，让我们看看我们的测试网站应该是什么结构。在我们创建的任何网站项目中，最常见的是一个主页 HTML 文件和包含图像、样式文件和脚本文件的文件夹。
HTML基础知识（3）-----列表
Litheng的博客
01-15 954
主要介绍HTML列表的有序列表、无序列表和自定义列表
c#数据库连接思路图屏幕截图 2021-06-02 140359.png
06-15
c#数据库连接
c#可视化数据库连接屏幕截图 2021-06-02 142838.png
06-15
数据库连接
法语考试学词典2021---02--06.rar
09-11
《法语考试学词典2021---02--06》是一个专门针对法语考试学习者编纂的词汇工具书，旨在帮助考生更好地掌握法语考试所需的词汇和表达。该词典可能包含了各类法语考试（如DELF, DELF Pro, DALF, TCF, TEF等）中的高频...
5G浪潮催化，车联网“脱虚入实”[2021-06-02]（28页）.pdf
05-18
5G浪潮催化，车联网“脱虚入实”[2021-06-02]（28页）.pdf
ffmpeg-2021-02-10-git-e0fd35d867-full_build (1).7z
05-06
Fmpeg 是领先的多媒体框架，能够解码、编码、转码、混合、解密、流媒体、过滤和播放人类和机器创造的几乎所有东西。它支持最晦涩的古老格式，直到最尖端的格式。
HTML标签
pinkowonote的博客
04-01 262
HTML <p> 标签 <p> 标签表示文本的段落，段落通常在可视媒体中表示为文本块，是块级元素。 <p> 元素会自动在其前后创建一些空白。浏览器会自动添加这些空间，您也可以在样式表中规定。 注意：<p> 标签与<br> 标签都有换行的意思，不同的是 <p> 标签是大换行（分段），<br> 标签是小换行。...
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
热门推荐
★★光亭★★
12-22 1万+
web前端学习（五）——HTML5中设置简单的CSS样式（选择器、内联样式、内部样式表及外部样式表）
CSS样式----图文详解（二）：css属性
zdy0_2004的专栏
10-05 845
CSS样式----图文详解（二）：css属性 主要内容 CSS的单位 字体属性 文本属性 背景属性 列表属性 盒子模型 定位属性：position、float、overflow、z-index等 导航栏的制作 鼠标的属性cursor 滤镜的介绍 CSS的单位： html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样
web前端学习（六）——HTML5中通过CSS设置超链接及鼠标形状
★★光亭★★
12-23 8859
web前端学习（六）——HTML5中通过CSS设置超链接及鼠标形状
html的列表，有序列表、无序列表、嵌套列表、定义列表
weixin_44745009的博客
07-23 7782
1. 有序列表 ul: 标签用于定义无序列表。 li:标签用于定义列表中的项目。 <ul> <li> 刘在石 </li> <li> 宋智孝 </li> <li> 李光洙 </li> </ul> 2.无序列表 ol:标签用于定义有
有序列表<ol>与无序列表ul用法
rs勿忘初心的博客
02-20 6277
有序列表&lt;ol&gt;与无序列表ul用法 其中&lt;li&gt; 标签定义列表项目，&lt;li&gt; 标签可用在有序列表 (&lt;ol&gt;) 和无序列表 (&lt;ul&gt;) 中。
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
最新发布
柯晓楠
07-24 3346
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
【HTML】iframe
小秀的博客
07-24 379
标签是 HTML 中的⼀个元素，⽤于在当前 HTML ⽂档中嵌⼊另⼀个 HTML ⽂档。它可以在⼀个 HTML ⻚⾯中嵌⼊另⼀个 HTML ⻚⾯或其他类型的⽂档，⽐如 PDF ⽂件或视频⽂件。其中 src 属性指定要嵌⼊的⽂档的 URL，可以是⼀个 HTML ⻚⾯、⼀个 PDF ⽂件或⼀个视频⽂件等等。通过设置 width 和 height 属性可以指定。
java 集合 2023-01,2023-02,2023-03,2023-04 2023-05,2023-06, 2022-01,2022-02,2022-03,2022-04,2022-05,2022-06，2021-01,2021-02,2021-03,2021-04,2021-05,2021-06 这样的数据变成 2023-01,2022-01,2021-01,2023-02,2022-02,2021-02
06-09
您可以使用Java中的集合类（如ArrayList）对日期进行排序，然后遍历并提取年份和月份，将其组合成新的日期字符串。以下是一个示例代码： ```java import java.util.ArrayList; import java.util.Collections; import java.util.List; public class DateSorter { public static void main(String[] args) { List<String> dates = new ArrayList<>(); dates.add("2023-01"); dates.add("2023-02"); dates.add("2023-03"); dates.add("2023-04"); dates.add("2023-05"); dates.add("2023-06"); dates.add("2022-01"); dates.add("2022-02"); dates.add("2022-03"); dates.add("2022-04"); dates.add("2022-05"); dates.add("2022-06"); dates.add("2021-01"); dates.add("2021-02"); dates.add("2021-03"); dates.add("2021-04"); dates.add("2021-05"); dates.add("2021-06"); // 对日期进行排序 Collections.sort(dates); // 遍历并提取年份和月份，组合成新的日期字符串 List<String> newDates = new ArrayList<>(); String prevMonth = ""; for (String date : dates) { String[] parts = date.split("-"); String year = parts[0]; String month = parts[1]; if (!month.equals(prevMonth)) { newDates.add(date); } prevMonth = month; } // 输出结果 for (String date : newDates) { System.out.println(date); } } } ``` 输出结果为： ``` 2021-01 2022-01 2023-01 2021-02 2022-02 2023-02 ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值