JavaWeb-HTML

最新推荐文章于 2023-12-29 20:13:12 发布

可儿可爱

最新推荐文章于 2023-12-29 20:13:12 发布

阅读量553

点赞数

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_62520626/article/details/122154525

版权

1.什么是HTML标签

HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)

2.HTML骨架标签

标签名	定义	说明
<html></html>	HTML标签	页面中最大的标签，我们成为根标签
<head></head>	文档的头部	注意在head标签中我们必须要设置的标签是title
<titile></title>	文档的标题	让页面拥有一个属于自己的网页标题
<body></body>	文档的主体	元素包含文档的所有内容，页面内容基本都是放到body里面的

3.TITLE标签

在头部的<head></head>中，有另一组标签<title></title>。打在<title></title>这里面的文字会出现在浏览器视窗最上面蓝色部分里，作为网页的主题。实例： <title>这是我的html页面</title>

<html>
	<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
	</head>
	<body>
		<font size="1" color="red">这是一行文字</font>
	</body>
</html>

4.字体标记

1.设置字体标记使用方法：<font size=“2” color=“red” face=“黑体”>内容</font>
2.字体变化标记使用：在文字标记中，对于文字的格式也有相当多的变化，如加粗，斜体等等。 <b></b> 加粗 <i></i> 斜体 <u></u> 底线 <s></s>删除线
<kbd>用粗体等宽字体显示文字</kbd>
<var>用较小的固定宽度显示字体</var>
<big>比默认字号大一号</big>
<small>比默认字号小一号</small>
字体下标H<sub>2</sub>O
字体上标2<sup>3

<html>
	<head>
		<meta charset="utf-8" />
		<title>我的首页</title>
   </head>
	<!-- 页面的主体部分 -->
 <body>
  
		<!-- font 字体标签
		标签自带的属性 属性值使用双引号引起来
		color="red"  字体颜色 值可以写 颜色的英文单词，也可以使用16进制颜色值 #ff00ff
		size="7"  取值  1---7
		face="楷体" 
		-->	
		
		<font color="#ff0254" size="7" face="楷体">西部开源软件教育-linux云计算-编程培训-运维-java</font>
		<br>
		<b>文字加粗</b>
		<br>
		<i>文字倾斜</i>
		<br>
		<u>文字加有下划线</u>
		<br>
		<s>文字带有删除线</s>
        <br>
        <kbd>用粗体等宽字体显示文字</kbd>
		<br>
		<var>用较小的固定宽度显示字体</var>
        <br>
		默认字号
		<br>
		<big>比默认字号大一号</big>
		<br>
		<small>比默认字号小一号</small>
											 
		<br>
		<big>H<sub>2</sub>O</big> 
		<br>
		<font size="7" color="">2<sup>3</sup></font>

 </body>
</html>

5.文字上的分隔标记

常用的分隔标记：
强制断行标记“<br>”
强制分段标记“<p>”
空格“&nbsp；”

<html>
	<head>
		<meta charset="utf-8">
		<title>常用的html标签</title>
	</head>
	<body>
		
		<b>国内简讯：</b>
		
		<!-- 段落标签  &nbsp; 空格 -->
		<p>
		&nbsp;&nbsp;&nbsp;&nbsp;我国在海南文昌发射场23日18时12分用长征七号改运载火箭，成功将试验十二号卫星01星、02星发射升空。卫星顺利进入预定轨道，发射任务获得圆满成功。
			
			全国一体化政务服务平台日前上线“助企纾困服务专区”，推动惠企政策对广大市场主体直达直享和在线办理，减轻企业负担，激发市场主体活力。
			
		</p>
	
		<b>国际简讯：</b>
		
		<p>     &nbsp;&nbsp;&nbsp;&nbsp;世界卫生组织公布的最新数据显示，全球累计新冠肺炎确诊病例达到276436619例；死亡病例达到5374744例。过去24小时新增确诊病例822278例，新增死亡病例8008例。
		
		根据美国约翰斯·霍普金斯大学的统计，截至北京时间24日5时22分，美国累计新冠肺炎确诊病例51720259例；死亡813708例。过去24小时新增确诊病例234517例，新增死亡病例2110例。
		
		据英国政府网站当地时间23日最新数据显示，过去24小时，英国新增新冠肺炎确诊病例119789例。这也是继22日单日新增确诊病例数首次突破10万例后，又一次刷新最高纪录。</p>
		

		
	</body>
</html>

6.排版的标记

1.文字的置左，置右，置中分段标记“<p>”在加上一些简单的属性设定，就可以让其的文字置左，置右，置中。
2.置中标记使用方法： <center>内容</center>
3.保持原始数使用方法：<pre>内容<pre>据格式标记

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- center 居中 -->
		<center>
			<font size="7" color="red">这是一行文字</font>
			<br>
			<font size="7" color="red">这是一行文字</font>
			<br>
			<font size="7" color="red">这是一行文字</font>
			<br>
		</center>
								<!-- pre 保持原有格式 -->
								<pre>	
									春江花月夜 

									作者：张若虚
									春江潮水连海平，海上明月共潮生。
									滟滟随波千万里，何处春江无月明！
									江流宛转绕芳甸，月照花林皆似霰；
									空里流霜不觉飞，汀上白沙看不见。
									江天一色无纤尘，皎皎空中孤月轮。
									江畔何人初见月？江月何年初照人？
									人生代代无穷已，江月年年望相似。
								</pre>	
						
	</body>
</html>

7.标题标记

使用方法：<h1>内容</h1>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>最大的标题</h1>
		<h2>二级标题</h2>
		<h3>三级标题</h3>
		<h6>六级标题</h6>
	</body>
</html>

8.背景标记

使用：<body bgcolor="red" backgroud="bg.jpg">
例子1：
<html>
<head><title>背景颜色</title> </head>
<body bgcolor="red"> <font size="4" face="黑体" color="red">背景颜色</font>
</body>
</html>

例子2：
<html>
<head><title>背景颜色</title> </head>
<body background="bg.jpg"> <font size="4" face="黑体" color="red">背景图片</font> </body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- bgcolor="aquamarine" 页面的背景颜色
	 background="img/coder10.jpeg" 背景图片
	 -->
	<body bgcolor="aquamarine" background="img/coder10.jpeg">
		
		<font color="aliceblue"><h1>这是一级标题</h1></font>
		
		
	</body>
</html>

9.分割线标记

分隔线标记
使用:上一部分<hr>下一部分
例子：
<html>
<head>
<title>背景颜色</title>
</head>
<body>
abcdefg。<br>
<hr color="red" width="240" size="2" noshade>
higklmn。
</body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 align="center">这是一个文章标题</h1>
		<!-- 
		 size="1" 粗细
		  width="50%" 宽度
		   align="center"  对齐方式 left center right
		   noshade="noshade"  不要阴影
		   color="blue" 线的颜色
		 -->
		<hr size="1" width="50%" align="center" noshade="noshade" color="blue">
		<h2>常用的HTML标签的介绍</h2>
		<hr size="1" width="100%" align="center" noshade="noshade" color="gray">
		
	</body>
</html>

10.图片标签

使用：<img src="boy.jpg" alt="haha" align="left" border="0" height="56px" width="32px">
例子：
<html>
<head>
<title>图片</title>
</head>
<body>
<img src="boy.jpg" alt="haha" align="left" border="0“ height="56px" width="32px"> </body>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
		<h1>高清美女大图</h1>
		<img src="img/u1096790207581763790fm11gp0.jpg" >
		<br>
		<img src="img/u11164692891798162602fm26gp0.jpg" width="400px" height="200px" >
		
		<br>
		<br>
		<center>
			
			<img  src="img/u11251389372721875248fm26gp0.jpg" border="2" alt="图片加载失败"  title="这是美女">
		</center>
		
	</body>
</html>

11.列表标签

1.无序列表< ul>
2.有序列表 <ol>
3.自定义列表 <dl>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h2>无序列表标签</h2>
		<hr>
		<ul type="disc">
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>
				一个一个列表项
				<ul>
					<li>二级列表项</li>
					<li>二级列表项</li>
					<li>二级列表项</li>
					<li>二级列表项</li>
					<li>二级列表项</li>
					<li>二级列表项</li>

					<li>二级列表项</li>
				</ul>

			</li>
		</ul>

		<h2>有序序列表标签</h2>
		<hr>
		<ol type="1" start="0">
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
			<li>一个一个列表项</li>
		</ol>
		<!-- ctrl+K 可以排版代码 -->
		<h1>自定义列表</h1>
		<dl>
			<dt>自定义列表的标题</dt>
			<dd>自定义列表的描述</dd>
			<dt>自定义列表的标题</dt>
			<dd>自定义列表的描述</dd>
			<dt>自定义列表的标题</dt>
			<dd>自定义列表的描述</dd>
			<dt>自定义列表的标题</dt>
			<dd>自定义列表的描述</dd>
		</dl>
	</body>
</html>

12.特殊字符

转义字符

< < > > & & &qout; “   空格

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<h1>我的首页</h1>
		&nbsp;你好HTML
		<>
			
			&lt;   <        &gt;    >  
				   
			&quot;&quot;
	</body>
</html>

13.超链接标签

1.连接到其他的文档
2.网页的内部链接
3.网页的外部链接
4.图片的锚点链接

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a:link{
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<!-- 
		href 你要打开的页面路径
		target="_self" 在自身窗口打开
		target="_blank" 在新窗口打开
		 
		 -->
		<a href="https://www.sina.com.cn/" target="_self">进入新浪</a>
		<a href="http://www.163.com" target="_blank">进入网易</a>
		<a href="index.html">我的首页</a>
	</body>
</html>

锚点链接：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 顶部的锚点 -->
		<a name="mytop"></a>
		<a href="#mybottom">跳到底部</a>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p><p>
			 （原标题：2021，我们记住了他们奋斗的模样）
			
			他扎根沙漠40多年，种出一条长百余里的“绿色长城”；从援鄂到援疆，他用15年从医生涯践行最初的诺言；播撒理想信念的种子，她在10余年间培养了近千名小学生党史讲解员……他们用自己的经历告诉我们：征途漫漫，惟有奋斗！
		</p>
		<a href="#mytop">跳到顶部</a>
		<!-- 定义底部锚点 -->
		<a name="mybottom"></a>
	</body>
</html>

14.表格标签

表格的结构
1.<table> <table>...</table>是用来在html页面上创建表格的。
2.<th>代表列名一般放在第一行
3.<tr>代表格的一行。
4.<td>用来定义表格的一列。
在默认情况下，表格是没有边框的，如果想要出现边框，就是用border属性。

表格的设置

<html>
	<head>
		<meta charset="utf-8">
		<title>表格标签</title>
	</head>
	<body>
		<!-- 
		 align="center" 表格的对齐方式
		 border="1"  表格的边框粗细
		 bordercolor="red" 边框颜色
		 cellspacing="0"  边框的间隙
		 cellpadding="120"  单元格和内容的间距
		 width="500px" 
		 height="400px"
		 
		 bgcolor="aquamarine" 背景颜色
		 
		 background="img/u11251389372721875248fm26gp0.jpg"  背景图片
		 
		 
		 -->

		<table background="img/u11251389372721875248fm26gp0.jpg" bgcolor="aquamarine" align="center" border="1"
			bordercolor="red" cellspacing="0" cellpadding="2" width="500px" height="400px">
			<caption>
				<h3>学生信息表</h3>
			</caption>
			<tr>
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>手机</th>
			</tr>
			<tr align="center" bgcolor="yellow">
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>13896369856</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td bgcolor="bisque">张三</td>
				<td>23</td>
				<td>13896369856</td>
			</tr>
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>13896369856</td>
			</tr>
			<tr>
				<td>1</td>
				<td>张三</td>
				<td>23</td>
				<td>13896369856</td>
			</tr>
			<tr>
				<td>1</td>
				<td align="center">张三</td>
				<td>23</td>
				<td>13896369856</td>
			</tr>
		</table>
	</body>
</html>

表格的合并：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1" cellspacing="0" cellpadding="5" align="center" bordercolor="red" width="65%" height="600px">

			<tr>
				<!-- colspan="2" 左右合并 -->
				<td colspan="2">Data</td>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<td colspan="3">Data</td>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				<!--  rowspan="2" 上下合并 -->
				<td rowspan="2">Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td rowspan="3">Data</td>
			</tr>
			<tr>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			<tr>
				
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
			</tr>
			
		</table>
	</body>
</html>

练习题：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table align="center" border="1" cellspacing="0" cellpadding="" width="60%" height="500px">

			<tr>
				<td>Data</td>
				<td colspan="3">Data</td>

			</tr>
			<tr>
				<td>Data</td>
				<td>Data</td>
				<td>Data</td>
				<td rowspan="2">Data</td>
			</tr>
			<tr>
				<td>Data</td>
				<td colspan="2">Data</td>


			</tr>
		</table>

		<hr>
		<br>
		<br>

		<table align="center" border="1" cellspacing="0" cellpadding="" width="60%" height="500px">

			<tr>
				<td rowspan="5">商品名称</td>
				<td>Data</td>
			</tr>
			<tr>
				
				<td>商品价格：</td>
			</tr>
			<tr>
				
				<td>Data</td>
			</tr>
			<tr>
				
				<td>Data</td>
			</tr>
			<tr>
				
				<td>Data</td>
			</tr>
			<tr height="90px">
				<td colspan="2" align="right">
					<button type="button" style="border: none;background-color: aquamarine;width: 150px;height:50px;">加入购物车</button>
				</td>
				
			</tr>
		</table>
	</body>
</html>

表格嵌套：

<html>
	<head>
		<meta charset="utf-8" />
		<title>常用标签</title>
	</head>
	<body>
		<table bgcolor="aqua" background="img/u1096790207581763790fm11gp0.jpg" border="1" cellspacing="0" cellpadding="5" align="center" bordercolor="red" width="500px" height="400px">
			<tr>
				<td>
					<table border="1" cellspacing="0" cellpadding=""  width="100%" height="100%">
						<tr>
							<td>Data</td>
						</tr>
						<tr>
							<td>Data</td>
						</tr>
						<tr>
							<td>Data</td>
						</tr>
						<tr>
							<td>Data</td>
						</tr>
						<tr>
							<td>Data</td>
						</tr>
					</table>
				</td>
				
				<td>姓名</td>
				<td>年龄</td>
				<td>手机</td>
			</tr>
			<tr>
				<th colspan="2">1</th>
				
				<th>18</th>
				<th>10323450987</th>
			</tr>
			<tr>
				<th rowspan="2">1</th>
				<th>张三</th>
				<th>18</th>
				<th>10323450987</th>
			</tr>
			<tr>
				
				<th>张三</th>
				<th>18</th>
				<th>10323450987</th>
			</tr>
		</table>
	</body>
</html>

15.表单标签

<input />标签的 type分为：
text -文本框
button -按钮
submit-提交
reset-重置
password -密码
checkbox-多选
radio-单选
file -上传文件
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
写法：<input type = “text” value=“”/>

1邮箱输入框 <input type="email" name="user_email" />
2数字输入框 <input type="number" name="points" min="1" max="10" />
3数字范围输入框（进度条） <input type="range" name="points" min="1" max="10" />
4颜色选择框 <input type="color" name="colortext"/><br>

下拉列表及文本域：

Select标签
<select>
<option value="qxz" selected/>请选择
<option value=“A”/>苹果
<option value=“B”/>香蕉
<option value=“C”/>橘子
<option value=“D”/>西瓜
</select>
TEXTAREA便签 <TEXTAREA ROWS="5" COLS="30" ></TEXTAREA >

表单的用途：

表单在网页上用来给访问者填写信息的，从而获得用户信息，使用网页进行交互的功能。一般是将表单设计在一个html页面中，当用户填写信息后做提交操作，于是表单的内容就会从客户端的浏览器上发送给服务器，经过服务器上的jsp或者ASP或者Cgi等处理后，再将用户所需的信息传送给客户端的浏览器上，这样网页就具有交互性了。

表单的构成：

<form></form>
<form></form>标记是用来创建一个表单，在标记之间一切都属于表单里的内容。
<from>标记具有action，metnod,target属性。 action属性是处理处理程序的程序名称。method属性是用来定义处理程序的从表单中获取信息的方法，通常有两种分别是GET和POST两种。 target属性用来制定目标窗口的。

表单的工作原理：

1.访问者填写表单，并提交给web服务器处理；
2.在web服务器上的后台处理程序对提交后的数据进行处理；
3.后台处理程序处理完成后，会重新生成一个新的html页面发给客户端。

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>

			<h3>用户注册</h3>
			<!-- 
			 action="#"  后台地址
			 
			 method="get" 提交方式 get请求，提交的参数会拼接在url后面  格式 键=值&键=值
			 0.0.1:8848/20211224-HTML-下午/7.表单标签.html?username=zhangsan&password=123456&birthday=2021-11-30&photo=westos.png&num=1&sex=1&hobby=lq&hobby=zq&xueli=daxue&desc=asfasfasdfasfasf#
			 post 提交参数在请求体里面
			 -->
			<form action="#" method="get">
				<!-- 每个表单项目，必须指定 name属性，因为name属性的值，作为键 
				required="required"  不能为空
				maxlength="10" 最大10格字符
				
				-->
				用户名：<input type="text" id="" name="username" value="" placeholder="请输入用户名" required="required" maxlength="10"/>
				<br>
				密码：<input type="password" id="" name="password" value="" placeholder="请输入密码" required="required" maxlength="6"/>
				<br>
				生日：<input type="date" name="birthday" id="" value="" />
				<br>
				<br>
				图像：<input type="file" name="photo" id="" value="" />
				<br>	
				<br>
				你要几个女朋友：<input type="number" name="num" id="" value="1" min="1" max="10" start="1" />
				<br>
				<!-- checked="checked" 默认选中  -->
				性别: <input type="radio" id="" name="sex" value="1" checked="checked" />男
				<input type="radio" id="" name="sex" value="0" />女
				<!-- <label for="zx">中性</label> 当用点击文字时也能选中 -->
				<input type="radio" name="sex" id="zx" value="4" />
				<label for="zx">中性</label>
				<br>
				<!-- checked="checked" 默认选中  -->
				爱好： <input type="checkbox" name="hobby" id="" value="lq" checked="checked" />篮球
				<input type="checkbox" name="hobby" id="" value="zq" checked="checked" />足球
				<input type="checkbox" name="hobby" id="" value="pq" />排球
				<input type="checkbox" name="hobby" id="pp" value="ppq" /><label for="pp">乒乓球</label>
				<br>
				学历：<select name="xueli">
					<option value="">--请选择学历--</option>
					<option value="youer">幼儿园</option>
					<option value="xiaoxue">小学</option>
					<option value="zhongxue">中学</option>
					<!-- selected="selected"默认选中 -->
					<option value="daxue" selected="selected">大学</option>
				</select>
				<br>
				备注：<textarea rows="20" cols="30" name="desc"></textarea>
				<br>
				<br>
				<br>
				<input type="submit" value="注册" />
			</form>
		</center>

	</body>
</html>

16.框架标签

混合框架（frame 它和body不能同时使用）
<html>
<head>
<title>框架页示例</title>
</head>
<frameset rows="50%,50%">
<frame src="http://www.baidu.com">
<frameset cols="25%,75%">
<frame src="http://www.sina.com.cn">
<frame src="http://www.baidu.com">
</frameset>
</frameset>
</html>

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!-- frameset 他body 不要同时用  -->
	<frameset rows="25%,*">
		<frame src="top.html" noresize="noresize">
		<frameset cols="25%,*">
			<frame src="left.html" noresize="noresize" >
			<frame src="rigth.html" name="myright" noresize="noresize">
		</frameset>
	</frameset>
</html>

17.多媒体标记音频和视频

1、HTML4多媒体
<embed src="文件源" width="宽度" autostart="true" loop="true">
src 设置文件源
width 设置宽度
autostart 设置是否自动播放，如果是true就是自动播放，是flase不自动播放
loop 设置是否循环播放true就是循环播放，false就是不自动播放
2、HTML5多媒体
<audio src="G:\Media\霍比特人3：五军之战.mp4"
controls="controls"></audio>
3、添加背景音乐 <bgsound src="明月几时有.mp3" loop=5>

视频标签
<video src="G:\Media\霍比特人3：五军之战.mp4" width="320" height="240" controls="controls"> </video>
control 属性供添加播放、暂停和音量控件。
Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<embed src="mp3/唱歌的孩子%20-%20王峥嵘.mp3"  autostart="true"  loop="true"/>
		<embed src="mp4/mi.mp4"  autostart="true"  loop="true"/>
		<audio src="mp3/唱歌的孩子%20-%20王峥嵘.mp3" >
			
		</audio>
		<video width="600" height="800" src="mp4/mi.mp4" controls="controls">
			
		</video>
		<video width="600" height="800" src="mp4/video.mp4" controls="controls">
			
		</video>
		
	</body>
</html>

可儿可爱

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb-HTML

1.什么是HTML标签 HTML 指的是超文本标记语言 (Hyper Text Markup Language)是用来描述网页的一种语言。 HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) 2.HTML骨架标签标签名定义说明 <html></html> HTML标签页面中最大的标签，我们成为根标签 <head>&lt
复制链接

扫一扫