学完后端还要学前端,在这之间还有中间件

景德海
2023-12-01

html语言-----超文本标记语言
标记—即标签的意思
简单的格式—
用记事本新建一个txt文档,在文档中加入以下内容,然后修改后缀名为 html或者htm,之后用浏览器打开

<html>
<head>
helloworld
</head>

<body>
你好世界
</body>

</html>

被所包围有头和身子部分,然后用浏览器打开,一个简单的html页面就诞生了;

但是不能完全 用记事本或者notepad来编写,需要借助一切便捷工具来辅助开发----从dreamweaver,到hbuilder,等等一些辅助工具的开发极大的便利了程序员的开发效率;hbuider的下载
但是我还是习惯与vscode的使用毕竟 vscode功能更加强大一些;

简单的说一下html中标签的格式
有单标签和双标签
标签有很多,入门先掌握 基本的html格式

<html>
<!----><!--这是注释的格式-->
<head>
<title>这是网页标题</title>
<meta charset="utf-8"/><!--这是指定文件编码格式-->
<meta http-equiv="content-type"content="text/html; charset=UTF-8"/><!--
</head>
<body>
这是身子部分内容
</body>
</html>

这是网页基本要素,可以说每一个网页里面都会看有

下面的内容是head标签中可以包含的(只是部分内容)

<html>
<!--这是注释-->
<head>

<title>百度一下,你就知道</title>
<meta charset="utf-8"/><!--设置页面编码方式 html5版-->
<!--<meta http-equiv="content-type"content="text/html; charset=UTF-8"html4版-->
<!--
	作者:@qq.com
	时间:2021-09-15
	描述:随便写的
-->
<!--设置页面自动刷新并可以指定跳转到的网页-->
<!--<meta http-equiv="refresh" content="3;"-->
<!--<meta http-equiv="refresh"content="1;https://cn.bing.com/?scope=web&FORM=ANNTH1"-->
<!--页面作者-->
<meta name="author"content="Gavin;123456@qq.com"
	<!--设置页面搜索关键字和信息-->
<meta name="keywords"content="JAVA" />
<meta name="description"content="被缚的普罗米修斯"  />
<!--link 标签表示引入外部资源-->
<!--<link rel="shortcut icon" href="https://baidu.com/favicon.ico" type="image/x-icon" />-->
<!--引入外部网页标题图标-->
<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
</head>
<body>

这是身子部分内容
</body>
</html>

再来一个----

<!DOCTYPE HTML>
<html>
	<head>
		<title>
			百度一下,你就不知道
		</title>
		<meta name="refresh" content=""/>
		<meta charset="UTF-8"/>
	<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
	<meta name="gavin" content="#0062CC" />
	</head>
	<body>
		<title>
			这是body标题
		</title>
			<!--引入多媒体文件--><!--图片大小设置一个即可按比例缩放-->
	<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
	<img src="img/1234.jpg" width="300px" title="风景如画"/>
	<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
	<img src="img/1234.jpg" width="300px" title="风景如画"/>
	<img src="img/赤壁赋.jpg" width="300px" title="赤壁赋"/>
		
		<h1><font color="#007AFF" size="7" face=楷体>赤壁赋&copy;</font></h1>
		<h2>苏轼</h2>
		<p> &emsp;&emsp;<font color=#2AC845 size=3,face=仿宋>七月既望,苏子与客泛舟,游于赤壁之下。清风徐来,水波不兴。举酒属客,诵明月之诗,歌窈窕之章。少焉,月出于东山之上,徘徊于斗牛之间。白露横江,水光接天。纵一苇之所如,凌万顷之茫然。浩浩乎如冯虚御风,而不知其所止;飘飘乎如遗世独立,羽化而登仙。<b><i><u>(冯 通:凭)</u></i></b></font></p>

  <p>&emsp;&emsp;<font color=darkorange size="4" face=微软雅黑>于是饮酒乐甚,扣舷而歌之。歌曰:“桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,望美人兮天一方。”客有吹洞箫者,倚歌而和之。其声呜呜然,如怨如慕,如泣如诉;余音袅袅,不绝如缕。舞幽壑之潜蛟,泣孤舟之嫠妇。</font></p>

  <p>&emsp;&emsp;<font color=deeppink size=3 face=新宋体 >正襟危坐,而问客曰:“何为其然也?”客曰:“‘月明星稀,乌鹊南飞。’此非曹孟德之诗乎?西望夏口,东望武昌,山川相缪,郁乎苍苍,此非孟德之困于周郎者乎?方其破荆州,下江陵,顺流而东也,舳舻千里,旌旗蔽空,酾酒临江,横槊赋诗,固一世之雄也,而今安在哉?况吾与子渔樵于江渚之上,侣鱼虾而友麋鹿,驾一叶之扁舟,举匏樽以相属。寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。”</p> </font>

  <p>&emsp;&emsp;<font color=lightsalmon size=4 face=微软雅黑>客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭。是造物者之无尽藏也,而吾与子之所共适。”<u><i><b>(共适 一作:共食)</b></i></u></font>
</p>
  <p>&emsp;&emsp;<font color=#2AC845 size=3,face=仿宋>客喜而笑,洗盏更酌。肴核既尽,杯盘狼籍。相与枕藉乎舟中,不知东方之既白。</font></p>
	
				
	</body>
	
</html>

引入多媒体文件----

<!--引入多媒体文件--><!--图片大小设置一个即可按比例缩放-->
	<img src="img/赤壁赋.jpg" width="750px" title="赤壁赋" alt="图片加载失败"/>
	<br />
		
	<!--引入音频-->
	<embed src="music/再见亦是泪.mp3"></embed>
	<!--引入视频-->
	<embed src="video/下雨了.mp4"></embed>

超文本标签

	
		<a href="hello.html" target="_blank">这是一个超链接1</a>
		<a href="">这是一个超链接2</a><!--跳转到当前页-->
		<!--在父类页面打开-->
		<a href="https://www.baidu.com" target="_parent">这是一个超链接3在父类页面打开</a><!--跳转到外部连接-->
	<!--在自身页面打开-->
	<a href="https://www.baidu.com" target="_self">这是一个超链接4</a><!--跳转到外部连接-->
	<!--在空白页打开-->
	<a href="https://www.baidu.com" target="_blank">这是一个超链接5</a><!--跳转到外部连接-->
	<a href="http://www.baidu.com"><img src="img/1234.jpg"width=300px />  </a>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>失落,并不一定难过--精品散文赏析      </title>
	<meta name="Gavin" content="加油!!!"/>
	<link rel="shortcut icon" href="https://cn.bing.com/sa/simg/favicon-2x.ico" type="image/x-icon" />
	</head>
	<body>
		<!--	<embed src="music/从你的全世界路过.mp3"></embed>-->
		
	<a href="#1F">赤壁赋</a>
	<a href="#2F">归去来兮辞</a>
	<a href="#3F">失落,并不一定难过</a>

	<a name="1F"></a>
		<h1  align="center"><font color="#F0AD4E" face="微软雅黑" size="7">赤壁赋 </font> </h1>
		<h4  align="center"><a href="https://so.gushiwen.cn/authorv_3b99a16ff2dd.aspx" target="_self">苏轼</a> <a href="https://so.gushiwen.cn/shiwens/default.aspx?cstr=%e5%ae%8b%e4%bb%a3">〔宋代〕</a></h4>
<p align="left"> &emsp;&emsp;壬戌之秋,七月既望,苏子与客泛舟,游于赤壁之下。清风徐来,水波不兴。举酒属客,诵明月之诗,歌窈窕之章。少焉,月出于东山之上,徘徊于斗牛之间。白露横江,水光接天。纵一苇之所如,
	凌万顷之茫然。浩浩乎如冯虚御风,而不知其所止;飘飘乎如遗世独立,羽化而登仙。  
<p align="left"> &emsp;&emsp;于是饮酒乐甚,扣舷而歌之。歌曰:“桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,望美人兮天一方。”客有吹洞箫者,倚歌而和之。其声呜呜然,如怨如慕,如泣如诉;余音袅袅,不绝如缕。舞幽壑
	之潜蛟,泣孤舟之嫠妇。</p>
<p align="left"> &emsp;&emsp;苏子愀然,正襟危坐,而问客曰:“何为其然也?”客曰:“‘月明星稀,乌鹊南飞。’此非曹孟德之诗乎?西望夏口,东望武昌,山川相缪,郁乎苍苍,此非孟德之困于周郎者乎?方其破荆州,下江陵,
	顺流而东也,舳舻千里,旌旗蔽空,酾酒临江,横槊赋诗,固一世之雄也,而今安在哉?况吾与子渔樵于江渚之上,侣鱼虾而友麋鹿,驾一叶之扁舟,举匏樽以相属。寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。
	挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。”  </p>
<p align="left"> &emsp;&emsp;苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也,而又何羡乎!且夫天地之间,
	物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭。是造物者之无尽藏也,而吾与子之所共适。”   
<p align="left"> &emsp;&emsp;客喜而笑,洗盏更酌。肴核既尽,杯盘狼籍。相与枕藉乎舟中,不知东方之既白。</p>
<hr width=100% align="center"/>	
		<a name="2F"></a>
		<h1  name="2F" align="center"><font color=lawngreen face="微软雅黑"size="7">归去来兮辞</font></h1>
<h4 align="center"><a href="https://so.gushiwen.cn/authorv_07d17f8539d7.aspx" target="_self">陶渊明</a> <a href="https://so.gushiwen.cn/shiwens/default.aspx?cstr=%e9%ad%8f%e6%99%8b">〔魏晋〕</a></h4>

<p align="left"> &emsp;&emsp;余家贫,耕植不足以自给。幼稚盈室,瓶无储粟,生生所资,未见其术。亲故多劝余为长吏,脱然有怀,求之靡途。会有四方之事,诸侯以惠爱为德,家叔以余贫苦,遂见用于小邑。于时风波未静,心惮远役,彭泽去家百里,公田之利,足以为酒。故便求之。及少日,眷然有归欤之情。何则?质性自然,非矫厉所得。饥冻虽切,违己交病。尝从人事,皆口腹自役。于是怅然慷慨,深愧平生之志。犹望一稔,当敛裳宵逝。寻程氏妹丧于武昌,情在骏奔,自免去职。仲秋至冬,在官八十余日。因事顺心,命篇曰《归去来兮》。乙巳岁十一月也。

<p align="left"> &emsp;&emsp;归去来兮,田园将芜胡不归?既自以心为形役,奚惆怅而独悲?悟已往之不谏,知来者之可追。实迷途其未远,觉今是而昨非。舟遥遥以轻飏,风飘飘而吹衣。问征夫以前路,恨晨光之熹微。</p>

<p align="left"> &emsp;&emsp;乃瞻衡宇,载欣载奔。僮仆欢迎,稚子候门。三径就荒,松菊犹存。携幼入室,有酒盈樽。引壶觞以自酌,眄庭柯以怡颜。倚南窗以寄傲,审容膝之易安。园日涉以成趣,门虽设而常关。策扶老以流憩,时矫首而遐观。云无心以出岫,鸟倦飞而知还。景翳翳以将入,抚孤松而盘桓。

<p align="left"> &emsp;&emsp;归去来兮,请息交以绝游。世与我而相违,复驾言兮焉求?悦亲戚之情话,乐琴书以消忧。农人告余以春及,将有事于西畴。或命巾车,或棹孤舟。既窈窕以寻壑,亦崎岖而经丘。木欣欣以向荣,泉涓涓而始流。善万物之得时,感吾生之行休。

<p align="left"> &emsp;&emsp;已矣乎!寓形宇内复几时?曷不委心任去留?胡为乎遑遑欲何之?富贵非吾愿,帝乡不可期。怀良辰以孤往,或植杖而耘耔。登东皋以舒啸,临清流而赋诗。聊乘化以归尽,乐夫天命复奚疑!</p>
	<hr width=100% align="center"/>	
	
	<a name="3F"></a>
			<h1 name="3F" align="center"><font size="7" face="微软雅黑"color=darkorange >失落,并不一定难过</font></h1>
			<!--<embed src="music/再见亦是泪.mp3"></embed>-->
			<h4 align="center">作者: 于公谨啊<b><a href="http://www.meiwen.net.cn/article/170434.html" target="_blank">来源: 美文摘抄网</a></b>发表于2018-07-04被阅读4077次</h4>
<p align="left">&emsp;&emsp;走过了许许多多的路,总是难掩心头的孤独;曾经面临着十字路口的犹豫,曾经面临着选择的踌躇;曾经看到美丽的风景,因为我并没有保持着清醒,所以就这样恍然入梦,就这样开始了朦胧;
然后就狠狠地摔倒在地上,留下想那些难以言喻的忧伤,还有那些难以言喻的衷肠。那些岁月的河流,从来就不可能会因为我的忧愁,就不再流淌,或者是不再心头留下惆怅。这让我发出着感慨,让我展现胸怀,让我留下着孤独和徘徊。</p>


<p align="left">&emsp;&emsp;那些岁月,挂满了我的心血,本来就不想有任何的松懈,但是,却还是留下了日子里面的圆缺,还有那些日子里面的凛冽。经历了多少的风风雨雨,却还是有着自己的歌曲;那些脚下的旋律,总是
在不经意间就如细雨,留下着丝丝缕缕,缠绕在心头,让心留下了许许多多的疑惑。孤独的身影,就这样表现的不平静;那些凸显著岁月的安宁,却留下了心中的风情。而那些曾经的失落,总是和时光交错而过,却留下并不一定是难过。</p>

<p align="left">&emsp;&emsp;岁月里面的迷离,总是会留下着许许多多的涟漪。而那些本来早已经蛰伏的记忆,却因为不经意的失意,就会重新开始涌动着涟漪。记忆里面的痕迹,弯弯曲曲并没有多少偏离,却让心不断地流动
着曾经的神秘。那些日子里面的痛,因为自己的情,而感觉到了撕心裂肺的疼。用时间的手,轻轻抚摸着心底的那一份忧愁;任何所有的伤口,就开始结痂,虽然还是有着挣扎,却有时候会觉得这是记忆里面花,也是岁月留下的面纱。
那些裸露在外面的失落,悠动着时间的轮廓;而抬头却看得了那些希望在前方闪烁,心中就会没有了任何的难过。</P>

<p align="left">&emsp;&emsp;记忆的山峰,是人生的旅程,在不断起起伏伏中,向前延伸着,也像是心情在忐忑。那些曲曲折折,留下时光里面的选择。岁月的草,在时光的风里闪动着骄傲;那些记忆的树,在路边展现着孤独。
原来看上去是高不可攀的山峦,心中有着幽怨,有着畏惧,有着自己的思绪;现在回头看看的时候,脚下的路,就是曾经征服的山,在不断蜿蜒。只是下山的时候,想要做出的停留,却会不断跌倒,让
自己没有了骄傲,却听到了时光里面的嘲笑。那些经历的失落,就像是树木在不断落错,并没有一定的规律,却有着自己的秩序。</p>

<p align="left">&emsp;&emsp;那些希望一直都像是山涧里面的河流,依附着天空的白云悠悠,在不断淅淅沥沥地动着,欢乐着,发出着动人的声音,显得清纯。阳光并没有多少温润,却可以让心中有着迷人的韵,在不断跳动,
不断涌动。那些过去的时光,留下了多少迷茫?那些懵懵懂懂的岁月,有着多少圆缺?而记忆的深浅,在不断向前绵延,不断留恋,不断地依恋。想要抽刀断水,想要迷醉,或者是想要沉睡,只是那些失落,却在不断闪烁,也不断开始交错。</p>

<p align="left">&emsp;&emsp;并不需要多少眷顾,那些路,总是会不断邂逅,不断留在了心头。邂逅的是我,是寂寞,是沉默?是岁月邂逅了我?还是我邂逅了岁月?是失落邂逅了我,还是我邂逅了失落?而那些失落,却让
我并不难过,因为那些失落,让我变得执着,也变得成熟,也坚定了我的征途。		<hr width=100% align="center"/>	</p>
		
	<!--<u1 type="square">--><!--u1 列表是无序的-->
		<u1 style="list-style:url(img/favicon.ico);">
		<li>A</li>
		<li>B</li>
		<li>C</li>
		
	</u1>
	
		<!-- 有序列表--O1--type 设置有序的类型,start表示从哪里开始> 
                <ol type="I" start="1">
                        <li>JAVASE</li>
                        <li>ORACLE</li>
                        <li>MYSQL</li>
                        <li>HTML</li>
                        <li>CSS</li>
                        <li>JS</li>
                </ol>			
		</body>
</html>

表格标签

<!--表格边框线间距cellsapce,border表格边的粗细-->
		<table border="1px" background="img/1234.jpg" cellspacing="0px">
			<!--表格-->
			<tr bgcolor="#EC971F">
				<!--行-->
				<th>id</th>
				<!--列-->
				<!--th特殊单元格-->
				<th>name</th>
				<th>gender</th>
				<th>age</th>
			</tr>

			<tr bgcolor="#F0AD4E">
				<td> 1000</td>
				<td align="center">张三</td>
				<td>男</td>
				<td rowspan="3">19</td>
				<!--列合并-->

			</tr>
			<tr bgcolor="#F0AD4E">
				<td> 1000</td>
				<td align="center">张三</td>
				<td>男</td>

			</tr>
			<tr bgcolor="#F0AD4E">

				<td align="center" colspan="2">张三</td>
				<!--colspan行合并-->
				<td>男</td>

			</tr>

		</table>

内嵌框架---->>>

<html>
	<head>
		<title>这是展示页面</title>
		<meta charset="UTF-8"/>
	</head>
	<body>
		<ul>
				<li>
					<a href='img/1234.jpg' target="图片展示"> 1234</a>
				</li>
				<li>
					<a href='img/favicon.ico' target="图片展示"> favicon</a>
				</li>
	            <li>
					<a href='img/赤壁赋.jpg' target="图片展示"> 赤壁</a>
				</li>
				<li>
					<a href='img/爱你中国.png' target="图片展示"> 爱你</a>
				</li>

			</ul>
		<iframe with="800px" height="600PX" src="myhtml.html#1F"></iframe>
	</body>
</html>

一些文本框---->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="qqqq" method="get">
		<input type="text" name="user" placeholder="请输入账号"/><!--提交按钮--><br />
		
		<input type="submit" value="提交"/><br />
		
		
		<input type="search" name="search" value="你好" readonly="readonly"/>
		<input type="submit" value="sousuo"/><br />
		
		<input type="search" name="search" value="你好" disabled="disabled"/>
		<input type="submit" value="sousuo"/><br />
		</form>
		
		
		<!--
        	作者:@qq.com
        	时间:2021-09-18
        	描述:通过name来进行控制到一个分组里,不同的值提交后用value来区分
        	checked="checked"---默认选中
        -->
		<form>
			<input type="password" name="pwd" /><br />
			<!--name名一样就是单选-->
			<input  type="radio" name="man" value=1 checked="checked"/>男    <input  type="radio"name="man"  value=0/>女
			<input type="submit" value="tijiao"/><br />
			<!--<input  type="radio"  name ="man"/>男    <input  type="radio"  name ="woman"/>女
			<input type="submit" value="tijiao"/><br />-->
			
		</form>
		
		<form>
			你学习的语言
			<input type="checkbox" name="like" id="1" value="java" checked="checked"/>java
			<input type="checkbox" name="like" id="2" value="C++" />C++
			<input type="checkbox" name="like" id="3" value="C++" checked="checked"/>Python
			<input type="checkbox" name="like" id="4" value="C+" />C+
			<input type="submit"  />
			
			
			
		</form>
		<form>
			<!--
            	作者:.com
            	时间:2021-09-18
            	描述:input
            -->
			<input type="email" name="邮箱" id="email" placeholder="请输入邮箱地址" autofocus="autofocus" required="required"/>邮箱
			
			<input type="url" name="网址" id="url" placeholder="请输入网址" required="required"/>网址
				
			<input type="color" name="颜色" id="color" value="颜色" />颜色
			<input type="number" name="数字" id="number" value="0" step="5" max="100" min="90" required="required"/>数字
			1<input type="range" name="范围" id="range" value="0" min="0" max="10" step="2" required="required"/>10
			请选择日期:<input type="date" name="日期" id="date" value="日期" required="required"/>
			请选择时间:<input type="datetime-local" name="时间" id="时间" value="日期" required="required"/>
			请选择月份:<input type="month" name="月份" id="月份" value="月份" required="required"/>
				<!--
                	作者:@qq.com
                	时间:2021-09-18
                	描述:mutiple--多选 placehoder 默认提示 autofocus :自动获取焦点               	
                -->								
				请选择城市:
				<select name="city" multiple="multiple" required="required">
				
				<option value="0"> ---请选择---</option>
				<option value="1" selected="selected">北京</option>
				<option value="2">上海</option>
				<option value="3">广州</option>
				<option value="4">烟台</option>
				<option value="5">青岛</option>
				
			</select>
			<input type="submit" name="email" id="email" value="登录" />
			</form>
	</body>
</html>

css样式表------>

<html>
	<head>
		<title>百度一下,你就知道</title>
		<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
		<meta charset="UTF-8"/>
		<!--内敛样式-->
		<h1 style="color: orangered;">这是一个标题</h1>
		<!--
        	作者:1187342818@qq.com
        	时间:2021-09-18
        	描述:内部样式---head标签中加入一个style标签,再里面定位到需要修饰的元素,然后在{}里加入要修饰的元素
        -->
		<style type="text/css">
		
	</head>
	
	<body>
		
		<h2 >这是一个标题</h2>			
	</body>
</html>
<html>
	<head>
		<title>百度一下,你就知道</title>
		<link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
		<meta charset="UTF-8"/>
		<!--引入css样式表-->
		<link type="text/css"  rel="stylesheet"   href="css/new_file.css" />
		<!--内敛样式-->
		<h1 >这是一个标题</h1>
		<!--
        	作者:1187342818@qq.com
        	时间:2021-09-18
        	描述:内部样式---head标签中加入一个style标签,再里面定位到需要修饰的元素,然后在{}里加入要修饰的元素
        -->
	</head>
	
	<body>
		
		<h2 >这是一个标题</h2>			
	</body>
</html>

	h1 {
		color: red;
		font: "bookman old style";
	}
	
	h2 {
		color: green;
		font: "楷体";
	}

小练习—
元素选择器---->

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>基本选择器</title>
		
		<style type="text/css">
			/* 基本选择器:元素选择器*/
			h1{
				color: mediumvioletred;
			}
			h2{
				
				color:pink;
				font-family: "agency fb";
				
			}
			i{
				color: cornflowerblue;
			}
			
			/*
			 * 基本选择器中的
			 * 类选择器----
			 * 不同类型的标签使用相同的类型
			 */
			.myclass{
				color:darkslateblue;
				font: "微软雅黑";
			}
			/*
			 * id选择器---主要适用于获取唯一一个元素
			 * 
			 */
			#myid{
				
				color: plum;
				font: "bodoni mt condensed";
				
			}
			优先级>id>class>元素选择器
		</style>
		
	</head>
	<body>
		<h1>这是一个标题</h1>
		<h2>这是<i>一个倾斜</i>标题2</h2>
		<h2 id="myid">这是测试标签体</h2>
		<h2 class="myclass">测试用标签</h3>
		<h4 class= "myclass">测试用标题</h4>
		
	</body>
</html>

关系选择器—>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div与span</title>
		<style type="text/css">
			/*<!--关系选择器:后代选择器-->*/
			div h1{
				
				Color:red;
				border: 1PX black solid; 
				
			}
			/*<!--关系选择器:子代选择器-->*/
			div>h1{
				
				Color:red;
				border: 1PX black solid; 
				
			}
			span h1{
					Color:green;
				border: 1PX red solid; 
				
			}
			
			
			
		</style>
		
		
	</head>
	<body>
		<div>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<span id="1">
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>	
		</span>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		<h1>GavinGavin</h1>
		</div>
	</body>
</html>

 类似资料: