2、HTML列表、超链接、表格、模块整合

最新推荐文章于 2024-05-23 16:52:46 发布
最新推荐文章于 2024-05-23 16:52:46 发布
阅读量96 收藏
点赞数
分类专栏： Web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yangbo_csdn/article/details/119611251
版权

HTML目录

1、列表标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表标签</title>
	</head>
	<body>
		<!-- 1.有序列表(带序号)
		     其中每一项 li 自动换行
			 属性: start起始序号
				  type 序号类型  1 a A i I
		 -->
		<ol start="2" type="I">
			<li>苹果</li>
			<li>香蕉</li>
			<li>桃</li>
		</ol>
		<!-- 2.无序列表(没有序号)
			   属性: type 符号类型 circle disc(默认) square
		 -->
		<ul type="square" >
			<li>苹果</li>
			<li>香蕉</li>
			<li>桃</li>
		</ul>
	</body>
</html>

在这里插入图片描述

2、超链接

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>超链接</title>
	</head>
	<body>
		<!-- 1.超链接标签
			 属性: href(必备) 链接地址 [url, 相对路径]
			      target 打开方式[_blank（打开一个新标签） _self（就在原标签上面打开）]
			 404: not found 资源未找到
		 -->
		<a href="http://www.baidu.com" target="_self">百度</a>
		<a href="05.列表标签.html" target="_blank">列表页面</a>
		
		<!-- 2.用a实现当前页面跳转
			   准备锚点 <a name=""></a>
			   进行跳转 href="#name"
			   # 就表示当前页面的顶部
		 -->
		<ul>
			<li><a href="#chap1">个人生活</a></li>
			<li><a href="#chap2">情感经历</a></li>
			<li><a href="#chap3">早年经历</a></li>
			<li><a href="#chap4">著名作品</a></li>
			<li><a href="#chap5">演艺经历</a></li>
			<li><a href="#chap6">中年经历</a></li>
		</ul>
		<p><a name="chap1">个人生活</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		<p><a name="chap2">情感经历</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		<p><a name="chap3">早年经历</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		<p><a name="chap4">著名作品</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		<p><a name="chap5">演艺经历</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		<p><a name="chap6">中年经历</a>, consectetur adipisicing elit. Tenetur debitis possimus ut blanditiis in aliquam rerum laborum libero fuga ullam quidem doloribus sint consequatur! Ullam deserunt aspernatur ipsam aliquam possimus rem laborum minima consequatur nam vero optio odio enim hic velit repudiandae doloribus beatae accusantium tempore praesentium facilis laboriosam eveniet modi ipsum similique dolor itaque quasi nisi sapiente fugit placeat. Reiciendis incidunt sequi nemo esse ipsam nobis fugit dignissimos repellat ex facere optio minima nihil obcaecati autem nisi dolore distinctio ea saepe officiis fuga qui eum nostrum! Illo esse enim dolorem facere recusandae sapiente placeat natus illum dicta sequi doloremque.</p>
		
		<a href="#">top</a>
	</body>
</html>

在这里插入图片描述

3、表格标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 1.表格标签, 有行和列(单元格)
		       属性:
			     border: 边框 - 像素
				 cellspacing: 单元格之间的间隙
				 cellpadding: 单元格内容和边框之间的距离
				 align: center 表格居中
				 width: 表格的宽度
				 height: 表格的高度
		    子标签: thead?  tbody*  tfoot? 只是为了标记
				tr: 行
				td: 单元格
				th: 表头的单元格
		 -->
		<table border="1" cellspacing=0 cellpadding=10 
		       align="center" width="400" height="300"
				>
			<!-- 表的标题 -->
			<caption>学员信息</caption>
			<!-- 第一行: tr 表头
				 属性: align: center 内容居中
					  bgcolor: 背景颜色
			     th: 自带加粗和居中特点
				 td: 属性 colspan(合并列)
						 rowspan(合并行)
			 -->
			<thead>
				<tr bgcolor="gray">
					<th>序号</th>
					<th colspan="2">姓名</th>
				</tr>
			</thead>
			<!-- 第二行 -->
			<tbody>
			<tr>
				<td>1</td>
				<td>易烊千玺</td>
				<td>18</td>
			</tr>
			<tr>
				<td>1</td>
				<td rowspan="2">易烊千玺</td>
				<td>18</td>
			</tr>
			<tr>
				<td>1</td>
				
				<td>18</td>
			</tr>
			<tr>
				<td>1</td>
				<td>易烊千玺</td>
				<td>18</td>
			</tr>
			</tbody>
			<tfoot>
				
			</tfoot>
		</table>
	</body>
</html>

4、模块整合

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
	</head>
	<body>
		<table border="1" width="100%" cellspacing="0" cellpadding="10">
			<tr>
				<td>
				<table width="100%"> 
					<tr>
						<td><img src="../img/logo2.png"/></td>
						<td><img src="../img/header.png"/></td>
						<td>
							<a href="#">登录</a> &nbsp;&nbsp;
							<a href="#">注册</a> &nbsp;&nbsp;
							<a href="#">购物车</a>
						</td>
					</tr>
				</table>
				</td>
			</tr>
			<tr bgcolor="#222" >
				<td>
					<font color="white" size="5">首页</font> &nbsp;&nbsp;
					<a href="#">电脑手机</a> &nbsp;&nbsp;
					<a href="#">箱包皮鞋</a> &nbsp;&nbsp;
					<a href="#">美妆护肤</a> &nbsp;&nbsp;
					<a href="#">母婴用品</a> &nbsp;&nbsp;
				</td>
			</tr>
			<tr>
				<td>
					<img src="../img/1.jpg" width="100%"/>
				</td>
			</tr>
			<tr></tr>
			<tr></tr>
			<tr></tr>
			<tr></tr>
		</table>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>顶部部分</title>
	</head>
	<body>
		header
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左边菜单部分</title>
	</head>
	<body>
		菜单
		<ul>
			<li><a href="http://www.baidu.com" target="body">百度</a></li>
			<li><a href="08_index.html" target="body">首页</a></li>
		</ul>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>主体部分</title>
	</head>
	<body>
		正文内容
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>整合</title>
	</head>
<!-- 使用窗口化设计页面, 不能有body标签
	 frameset: 多个窗口的整合
		属性: rows - 按行排 , 分配每一行的比例, 最后一个比例可以直接用*
		     cols - 按列排
     frame: 引入的页面
	    属性: src - 页面地址  noresize - 不能调整大小
 -->
<frameset rows="10%, *" >
	<frame src="09_分模块_header.html" noresize />
	<frameset cols="30%, *">
		<frame src="09_分模块_left部分.html"   noresize />
		<!-- <a href="08_index.html" target="body">首页</a> -->
		<frame src="09_分模块_主体部分.html" name="body" noresize />
	</frameset>
</frameset>
</html>

在这里插入图片描述

天 阳 在 线€
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 5801
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
plsqlplus+instantclient_11_2
01-31
编辑器具有语法加强、SQL 和PL/SQL 帮助、对象描述、代码助手、编辑器提示、重新构建、PL/SQL完善、代码内容、代码层次、代码层叠、超链接导航、 宏程序库和其他先进的功能, Unicode 兼容编辑器可以满足用户最苛刻的...
html+css基础知识整合 2021-08-30
qq_39999582的博客
08-30 896
html基础知识整合 文章目录**html基础知识整合**【web的组成】【HTML5基本语法】标题Alt与title的区别：get和post的区别：css部分【css基本语法】【css的三种样式表】内部样式表：内联样式表：外部样式表：link和import导入外部样式的区别：css样式重置命名方法（语义化命名，结构化命名）【css的选择器】标签选择器：HTML的标签类选择器：class选择器ID选择器：通配符：*群组选择器（集合选择器）包含选择器(后代选择器)子选择器伪类选择器：注意：【选择器的权重】【颜
HTML5+CSS3+JavaScript从入门到精通【文末送书】
一键难忘的博客
05-23 7086
第二，对图书内容进行了深度更新、优化，如优化了内容布置，弥补了讲解疏漏，将开发环境和工具更新为新版本，增加了对新技术点的剖析，将项目替换为更能体现当今IT开发现状的热门项目等，使其更与时俱进，更适合读者学习；全书共计有205个应用实例，141个编程训练，81个综合练习，1个项目案例，为初学者打造“学习+训练”的强化实战学习环境。读者对象：初学编程的自学者，编程爱好者，大中专院校的老师和学生，相关培训机构的老师和学员，进行毕业设计的学生，初、中级程序开发人员，程序测试及维护人员，参加实习的“菜鸟”程序员。
HTML和CSS整合笔记
a526319235的博客
04-13 101
HTML(负责页面结构) P标签：段落标签。 Img:图片标签。Src属性：所要引入的图片 A：超链接，实现页面的跳转。Href属性：所要跳转的目标文件。Target=”_blank”.在新页面中打开title:鼠标移入显示的文字 H1-h6标题标签 Video:视频标签.controls Audio:音频标签.controls播放控制条autoplay自动播放 Br:...
Html+CSS
Kiwi23333的博客
09-16 1964
1.HTML标签是由尖括号包围的关键词，例如。2.HTML标签通常是成对出现的，例如和,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。3.有些特殊的标签必须是单个标签（极少情况），例如<b「/>，我们称为单标签。1.以上三个代码vscode自动生成，基本不需要我们重写.2.文档类型声明标签，告诉浏览器这个页面采取htm15版本来显示页面.3.<html lang="en”>告诉浏览器或者搜索引擎这是一个英文网站.本页面采取英文来显示。
HTMLCSS笔记
weixin_50116360的博客
03-01 1185
HTML、CSS学习笔记
html5基础知识，期末复习大全
zm321917的博客
06-02 6164
html，css，js超详细基础知识及响应式设计，动画等进阶
html+css复习
l2298202515的博客
12-28 1227
html css复习
html面经——css
manerzi的博客
04-12 953
html面经——css
（全）传智播客PHP就业班视频完整课程
10-30
无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图映射1 8-12 4.多媒体页面 标签汇总① 地图映射2 8-12 5.多媒体页面 标签汇总① 地图映射3 8-...
jqeditor-svn343.zip
10-12
2、主要模块 E.mod("Confirm") E.mod("Panel") E.mod("History") E.mod("Event") E.mod("Toolbar") E.mod("Data") E.mod("Selection") ... 3、主要插件 Redo, Undo Font Image Link ForeColor,...
史上最全韩顺平传智播客PHP就业班视频，10月份全集
03-26
符号实体 url说明 超链接 发送电邮 8-11 4.图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图...
史上最全韩顺平传智播客PHP就业班视频，9月份全集
03-26
符号实体 url说明 超链接 发送电邮 8-11 4.图像 表格 实际应用-菜谱 课堂练习-课程表 8-11 5.无序列表 有序列表 框架 8-12 1.浮动窗口 表单及表单控件① 8-12 2.表单及表单控件② 8-12 3.多媒体页面 标签汇总① 地图...
基于JAVA的幼儿园管理系统
06-07
基于JAVA实现的幼儿园管理系统，实际操作方法详见登录说明，可以实现基本的人员、菜谱、课程等管理，适合JAVA入门参考，或可基于这个系统的简易框架完成更复杂的变更。初学者练手，若有疏漏或缺陷，欢迎留言，前人栽树功德无量。
SCons：一款Python语言的软件构建工具
06-07
SCons是一个开源的软件构建工具，利用Python脚本语言进行项目的构建和管理。与传统的构建工具相比，SCons提供了更可靠、灵活且高效的构建流程。它通过Python脚本定义构建规则，使开发者能够使用强大的编程语言特性来解决复杂的构建问题。 特点 Python脚本配置：SCons使用Python脚本作为配置文件，提供了编程语言的灵活性和功能性。 自动依赖分析：内置可靠的自动依赖分析，无需手动管理依赖关系。 多语言支持：支持多种编程语言和工具，如C、C++、D、Java、Fortran、Yacc、Lex、Qt和SWIG等。 跨平台支持：设计为跨平台构建工具，支持Linux、Windows、macOS等操作系统。 并行构建：支持并行构建功能，能够同时执行多个构建任务，提高构建效率。 集成Autoconf功能：内置类似Autoconf的功能，自动查找包含文件、库、函数和typedefs。 构建缓存：支持构建缓存功能，加速多次构建过程。
Rust语言教程&案例
06-07
Rust语言教程案例简介： 本案例提供了一个使用Rust语言编写的简单程序，目的是展示如何在控制台输出"Hello, World!"。这个程序是一个入门级的示例，适合初学者用来了解Rust的基本语法和运行机制。 - **语言特性**: Rust是一种注重安全性、并发性和性能的系统编程语言。 - **程序结构**: 程序包括了Rust的基本组成部分，如`main`函数和`println!`宏。 - **输出**: 使用`println!`宏输出"Hello, World!"到控制台，这是Rust中的标准输出宏。 - **编译运行**: 程序需要通过Rust编译器编译。Rust提供了`cargo`，一个强大的包管理和构建工具，用于构建和运行Rust项目。 - **适用人群**: 适合对Rust感兴趣的初学者，以及希望快速了解Rust编程基础的开发者。 - **学习价值**: 通过这个案例，学习者可以学习到Rust的基本语法、程序结构、控制台输出，以及如何编译和运行一个简单的Rust程序。 这个案例是进入Rust编程世界的第一步，为进一步探索Rust的高级特性如所有权模型、借
pyzmq-23.1.0-cp36-cp36m-musllinux_1_1_x86_64.whl
最新发布
06-07
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、Pandas和Requests，极大地丰富了Python的应用领域，从数据科学到Web开发。Python库的丰富性是Python成为最受欢迎的编程语言之一的关键原因之一。这些库不仅为初学者提供了快速入门的途径，而且为经验丰富的开发者提供了强大的工具，以高效率、高质量地完成复杂任务。例如，Matplotlib和Seaborn库在数据可视化领域内非常受欢迎，它们提供了广泛的工具和技术，可以创建高度定制化的图表和图形，帮助数据科学家和分析师在数据探索和结果展示中更有效地传达信息。
html中table表格超链接
05-12
将超链接添加到HTML表格中的单元格，可以通过将`<a>`标签包装在单元格内来实现。例如： ```html <td><a href="https://www.google.com">Google</a></td> <td><a href=...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值