html 的第二天 table的其他属性 以及frameset

最新推荐文章于 2024-09-09 08:00:00 发布
最新推荐文章于 2024-09-09 08:00:00 发布
阅读量140 收藏
点赞数
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/2356966/blog/408325
本文详细介绍了HTML和CSS的基础知识，包括<meta>标签的使用、块元素和行内元素的区别、表格标签的运用、框架和iframe的应用，以及如何通过CSS对文本和布局进行美化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

<meta>的常用形式

        • <meta>：用于设置一些头信息

                • <meta  hgp-­‐equiv="content-­‐Type"  content="text/html;  charset=UTF-­‐8">

                        • 设定页面使用的字符集

        • <meta  name  ="keywords"  content="java,java培训"/>

                        • 告诉搜索引擎你网页的关键字

         • <meta  name="descripeon"  content="网页描述"/>

                        • 告诉搜索引擎你的网站主要内容

        • <meta  hgp-­‐equiv="pragma"  content="no-­‐cache">

                        • 禁止浏览器从本地计算机的缓存中访问页面内容

        • <meta  hgp-­‐equiv="refresh"  content="2;URL=hgp://www.google.com">

                        • 自动刷新并指向新页面。

•  <div> 块元素 

         • 用来在页面上定义一个区域，在这个区域内可以包含任何的HTML元素。 

•  <span>行内元素(也叫内嵌元素)

          • 用来在同一行文本内选取一个片断。 

          • 它对选取的文本没有任何影响，只能借助于CSS或JavaScript来对<span>元素进行处理。 

          • <span></span>中不能嵌套其他的封装级元素。

表格的其它标签

• <th>标签用来设置表格的标题列。

                • 显示效果是黑体居中文字。

• <capeon>标签用来设置表格的标题或题目。

                • 水平区域标记

• <thead>…</thead>

                • 头部分

• <tbody>…</tbody>

                • 主体部分

• <tfoot>…</tfoot>

                • 脚注部分

框架

    

 要在单个应用窗口中显示一个以上的网页，就可以使用框架。

        • <frameset>框架集：被划分成若干帧(frame)的窗口区域。

        • <frameset>不能嵌套在<body>标签内。

        • <frameset>的属性：

                    • cols属性：设定主文档中有几列窗口及各个窗口的大小。

                    • rows属性：设定主文档中有几行窗口及各个窗口的大小。

                    • 取值可以是多个百分数、绝对像素值或星号(*)。取值的个数说明了列和行的个数，值之间用逗号隔开。

                    • frameborder：设定是否显示边框。

                    • 其值只有0和1，0表示不显示边框，1  表示要显示边框。

                    • border属性：指定边框的大小。

                    • bordercolor ：设定边框颜色

• <frame>标签放在<frameset>内，用来定义某一个具体的帧窗口。

• 属性

        • src:　指定这个帧窗口中初始装载的网页文件的URL地址。

        • name：指定帧窗口的名字。

        • noresize="noresize"：设置禁止调整帧窗口的大小。

        • scrolling：设定是否要显示滚动条。yes、no、auto

noframes标签

            <noframes></noframes>用来在那些不支持帧的浏览器中显示文本或图片信息

iframe标签

<iframe>用来在一个网页中间插入一个简单的帧窗口，在这个帧窗口中可以显示另一个文件的内容。 

• <iframe>不需要放在<frameset>标签对之间。 

• 属性： 

        • src：文件的路径 

        • name：帧窗口的名字 

        • width：帧窗口的宽度。 

        • height  ：帧窗口的高度。

        • scrolling： 是否显示滚动条。no、yes、auto  　

        • frameborder：设定是否显示边框。

        • 其值只有0和1，0表示不显示边框，1  表示要显示边框。

<html>
	<head>
		
	</head>
	<body>
		<table border=1>
				<caption>表格的标题列或题目</caption>
				<th>表格的标题列</th>
				<th>表格的标题列</th>
				<th>表格的标题列</th>
				<thead>
					<tr>
						<td>头部分</td>
						<td>头部分</td>
						<td>头部分</td>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>主题部分</td>
						<td>主题部分</td>
						<td>主题部分</td>
					</tr>
				</tbody>
				
				<tfoot>
					<tr>
						<td>脚注部分</td>
						<td>脚注部分</td>
						<td>脚注部分</td>
					</tr>
				</tfoot>
		</table>
	</body>
</html>

222549_wFIa_2356966.png

<html>
	<head>
		<style type="text/css">
			.bg{background-color:6dcff6;
				};
			p {
				font-size:20px;
				font-family:"黑体"；
				text-align:left;
				}
			.div{
					width:200px;
					height:300px;
					position:top;
				}
			.ol{
					list-style-image:url(ico.png);
					list-style-position:inside;
				}
			.ul{
					list-style-type:lower-alpha;
					list-style-position:inside;
				}
			text{
					vertical-align:middle;
					text-align:center;
					text-decoration:overline;
					text-transform:capitalize;
					text-indent:2;
					line-height:5px;
					word-spacing:4px;
					letter-spacing:4px;
					word-wrap:break-word;
					word-break:normal;
				}
		</style>
	</head>
	<body class=bg>
			<p>slslsl</p><br/>
			<div class=div>
				fdddxss
			</div>
			<div class=div>
				fdddxss
			</div>
			<ol class=ol>
				<li>填写信息</li>
				<li>收电子邮件</li>
				<li>注册成功</li>
			</ol>
			<ul class=ul>
				<li>填写信息</li>
				<li>收电子邮件</li>
				<li>注册成功</li>
			</ul>
			<div class=div>
				<text>I am from china!</text>
			</div>
	</body>	
</html>

222727_BtgQ_2356966.png

222728_vPOs_2356966.png

<html>
	<head>
		<style type="text/css">
			.bg{background-color:6dcff6;
				  background-image:url(b.jpg); 
				  background-repeat:repeat-x;
				  background-attachment:fixed;
				  background-position:left};
			p {
				font-size:20px;
				font-family:"黑体"；
				text-align:left;
				}
			.div{
					width:200px;
					height:300px;
					position:top;
				}
			.ol{
					list-style-image:url(ico.png);
					list-style-position:inside;
				}
			.ul{
					list-style-type:lower-alpha;
					list-style-position:inside;
				}
			text{
					vertical-align:middle;
					text-align:center;
					text-decoration:overline;
					text-transform:capitalize;
					text-indent:2;
					line-height:5px;
					word-spacing:4px;
					letter-spacing:4px;
					word-wrap:break-word;
					word-break:normal;
				}
		</style>
	</head>
	<body class=bg>
			<p>slslsl</p><br/>
			<div class=div>
				fdddxss
			</div>
			<div class=div>
				fdddxss
			</div>
			<ol class=ol>
				<li>填写信息</li>
				<li>收电子邮件</li>
				<li>注册成功</li>
			</ol>
			<ul class=ul>
				<li>填写信息</li>
				<li>收电子邮件</li>
				<li>注册成功</li>
			</ul>
			<div class=div>
				<text>I am from china!</text>
			</div>
	</body>	
</html>
<html>
	<head>
	</head>
	<frameset rows="13%,80%,7%">
		<frame src="UntitledFrame-1" name="top">
		<frameset cols="25%,*">
			<frame name="left" src="left.html"></frame>
			<frame name="right" src="right.html"></frame>
		</frameset>
		<frame name="bottom" src="bottom.html"></frame>
	</frameset><noframes></noframes>
</html>
<html>
	<head>
	</head>
	<body>
		<p><a href="http://www.baidu.cn" target="right">百度</a></p>
		<a href="http://www.google.cn" target="right">谷歌</a>
	</body>
</html>

223444_NPaC_2356966.png

223204_xnM7_2356966.png


转载于:https://my.oschina.net/u/2356966/blog/408325

【前端圭臬】二：你知道的和不知道的 HTML
Evan 的博客
02-28 4439
关于 HTML，说几个你可能不太关注的问题。
HTML快速上手
最新发布
m0_62946714的博客
04-03 1125
HTML并不是一门编程语言，而是一门描述性的标记语言（用标签来说话）。
HTML table、caption、colgroup、frameset标签，框架iframe target
今天可爱了吗ik的博客
03-08 368
目录框架集标签frameset标签和frame标签框架的嵌套内联框架iframetarget 框架集标签frameset标签和frame标签 框架的集合成为框架集标签：frameset frame用于框架集里面的各种框架 如果用了frameset标签，就不需要用body标签了。 frame标签： <!--rows这样代表把页面分为三行，第一行60像素，最后70，中间为剩余部分--> ...
html完成登录注册页面、用table和frameset进行布局
weixin_622464的博客
11-14 708
效果图： 注册页面： 登录页面： 个人页面：
html的frame两列比对,Html笔记2_frameset,iframe,table
weixin_42662605的博客
06-09 225
frameset框架集frameset有两个重要属性cols和rows可以用它将整个浏览器页面分割成自定义的大小,比如cols="20%,"表示竖向分割,表示剩余的部分,同样rows表示横向分割.frameset通常不会和body标签同时出现,除了出现noframes判断浏览器不支持框架集的情况下会在noframes里面嵌入body标签.frameset里面嵌入frame自结束标签.来表示一部分框...
html框架之iframe和frame及frameset的相关属性介绍
confidence68的专栏
01-13 1373
问题 1、你知道iframe和frame的区别吗？ 2、你用过frameset等相关属性吗？ iframe和frame的区别 不知道你在项目中用过frameset属性没有，frameset这个属性是在去年我在一个在线客服系统制作中用过，因为客服系统要有固定的布局，上面一块，下面一块等等，当时就是用的frameset和frame。在我用完了这些属性之后，我才明白了iframe和frame的区别。因为在这之前，我项目中一般不用框架，用的话也就是用到iframe。
2021-08-11字体标签 img图面标签 table表格标签 frameset框架标签，iframe自定义框架标签
weixin_45318552的博客
08-11 201
字体标签 img图面标签 table表格标签 frameset框架标签，iframe自定义框架标签 字体标签 个人理解就是对字体进行改变 font size大小 color 颜色 u下划线underline b加粗 bold i倾斜 incline s删除横线 strike img图画标签 ☆ src 图片路径 title 鼠标提示 alt 加载失败 table表格标签（必须放在table下） tr 确定一行 th 标题单元格 会有加粗 td普通单元格 表格可
基于官方规范系列篇之——HTML 篇（二）HTML 语法
weixin_44168130的博客
09-09 1168
介绍了HTML 的语法规范、BOM、字符编码声明、DOCTYPE、ASCII 空白字符、元素、字符引用、CDATA 区段和注释
HTML（一）：行级标签、块级标签、其他标签
m0_50134014的博客
10-23 2089
这里写目录标题一、HTML1.1 HTML概述1.1.1 HTML是什么1.1.2 HTML基本结构1.1.3 HTML语法细节1.2 字体标签1.2.1 Font标签1.2.2 标题标签1.2.3 特殊字符1.2.4 颜色表示1.3 列表标签1.3.1 定义列表1.3.2 有序列表1.3.3 无序列表1.4 图像1.4.1 Img1.4.2 Map1.5 超链接1.5.1 超链接概述1.5.2 链接资源1.5.3 定位标记1.6 表格1.6.1 table1.6.2 caption1.6.3 TBODY、
html+css传智播客老师整理7天的笔记
09-11
* HTML标签具有属性，属性可以多个，使用空格隔开，属性值使用单引号或双引号引起来 四、文本标签 * H1-H6：标题标签，从大到小，加粗，单独占据一行 * Ol/ul：列表标签，用于对段落的排列 * br/：换行标签 * p：...
thymeleaf
全栈者也的博客
04-25 3977
Springboot默认是不支持JSP的，默认使用thymeleaf模板引擎 模板（template fragments） 日常开发中，我们经常会将导航栏，页尾，菜单等部分提取成模板供其它页面使用。 在Thymeleaf 中，我们可以使用th:fragment属性来定义一个模板。 <!DOCTYPE html> <html xmlns:th="http:...
html 表格 嵌套 frameset 热点
11-30 414
<title>无标题文档</title> </head> <body> <table width='800' border="0"> <tr align="center"> <td>&...
页面框架的两种实现
ryan1214的专栏
05-07 1195
■ 框架概念 ：  所谓框架便是网页画面分成几个框窗，同时取得多个 URL。只需要 即可，而所有框架标记需要放在一个总起的 html 档，这个档案只记录了该框架 如何划分，不会显示任何资料，所以不必放入 标记，浏览这框架必须读取这档 案而不是其它框窗的档案。 是用以划分框窗，每一框窗由一个 标 记所标示，必须在 范围中使用。如下例：          此例中 把画面分成
frameset 标签属性参考和简单实例应用
境由心生
06-08 2669
frameset 标签，代替body标签定义了框架页,并且定义了框架将分为多少行与多少列frameset 标签常用属性cols – 定义了框架含有多少列与列的大小(每个值使用逗号分隔)，取值为象素px或者百分比% rows – 定义了框架含有多少行与行的大小(每个值使用逗号分隔)，取值为象素px或者百分比% border – 定义frame定义的框架页的边框(单位像素)，使用css实现 frameb
html之frameset页面布局
stormkai的专栏
08-18 1761
使用frameset进行系统页面布局要生成的效果如下： 建立个主页面 index.html frameborder：设置是否显示框架的边框 yes是显示，no是不显示 rows：横向分割页面 30%，30（或30px）,* cols：纵向分割页面 注意：frameset标签没在body标签里面 主页面
全面解析：HTML超文本标记语言教程
第二章讲解了HTML的主体标签，这是网页内容的主要容器。同时，教程也涉及了颜色的设定，包括如何使用CSS来改变文本、背景等的颜色。 第三章至第五章分别讲述了文字版面编辑、列表的创建以及图像的处理方法，涵盖了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值