HTML常用标签

• 标题标签

<!--
			标题标签
				自带换行和加粗
				块级元素
				h1-h6大小一次减小
				尽量减少使用h1标签
		-->
		<h1>标题h1</h1>
		<h2>标题h2</h2>
		<h3>标题h3</h3>
		<h4>标题h4</h4>
		<h5>标题h5</h5>
		<h6>标题h6</h6>

• 段落标签

<!--
			段落标签
				p标签,会自动换行
				块级元素
		-->
		<p>段落1</p>
		<p>段落2</p>

• 换行标签

<!-- 
			换行标签
				br 单标签
				<br> <br/>
		 -->
		 hello <br>
		 world

• 水平线标签

<!--
			水平线标签
				hr单标签
				常用属性
					color 颜色
					size  粗细
					width 长度(百分比)
		-->
		<hr />
		<hr color="bisque" size="4" width="30%" align="middle">

• 列表

<!-- 
			列表
				有序列表
					<ol><li><li></ol>
				无序列表
					<ul><li><li></ul>
		-->
		<ol type="1">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
		</ol>
		
		<ol type="I">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
		</ol>
		
		<ul type="circle">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
		</ul>
		
		<ul type="disc">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
		</ul>
		
		<ul type="square">
			<li>list1</li>
			<li>list2</li>
			<li>list3</li>
		</ul>

• div标签

<!--  
			div标签
				块级元素
				默认占全部的宽度,有多少内容高度占多少
				可以设置div的宽,高
				通过align设置内容的对齐方式
		-->
		<div style="width: 100px;height: 50px;" align="center">这是一个div标签</div>

• span标签

<!--
			span标签
				行内元素(不会自动换行)
		-->
		<span>这是一个span标签</span>

• 格式化标签

<!--  
			格式化标签
				font标签
					color  字体颜色
					size   字体尺寸
					face   字体风格
				pre
					预格式化标签,保留空格和换行
				b 加粗
				i 倾斜
				u 下划线
				del 中划线
				sup 上标
				sub 下标
		-->
		<font>hello world</font>
		<pre>
			这是预格式化标签
			hello
			world
		</pre>
		<b>加粗</b> 
		<i>倾斜</i> 
		<u>下划线</u> 
		<del>中划线</del> 
		<sup>上标</sup> 
		<sub>下标</sub> 
		<p><b>有</b><i>价值</i><u>无</u><del>意义</del></p>

• 超链接标签

<!--  
			a标签
				超链接标签,用于链接到一个新的url
				常用属性
					href：需要跳转的地址（必须属性）
					target：窗口打开的方式
						_self：当前窗口
						_blank：在空白窗口
				作为锚点：
					a标签的name属性值
						<a name="top"></a>
					其他的id属性值：
						<div id="top"></div>
					锚点的使用：
						<a href="#top"></a>
		-->
		<a href="https://the-waves-are-calm.gitee.io">波澜不惊</a>
		<a href="#">刷新</a>

• 锚点的使用

<div>锚点用例</div><hr>
		<a href="#幻影之血">幻影之血</a><hr>
		<a href="#战斗潮流">战斗潮流</a><hr>
		<a href="#星尘斗士">星尘斗士</a><hr>
		<a href="#不灭钻石">不灭钻石</a><hr>
		<a href="#黄金之风">黄金之风</a><hr>
		<a href="#石之海">石之海</a><hr>
		<h2 id="幻影之血">幻影之血</h2>
		ファントムブラッド
		Phantom Blood
		乔纳森·乔斯达—他的青春
		恐怖与冒险
		第1-5卷<hr>
		初代JOJO（乔纳森·乔斯达）的父亲乔治·乔斯达收留了其“救命恩人”的儿子，一个名叫迪奥·布兰度的孤儿，抚养他成人， 但迪奥图谋JOJO家族的财产，想要用慢性毒药谋杀乔治先生。在乔纳森查明真相导致事情败露之后，迪奥为了得到更强大的力量，不惜戴上神秘的石鬼面，成为了不老不死的吸血鬼。在乔纳森祖宅进行了战斗，乔纳森仅凭着爆发力和强硬体质重伤了迪奥，为了复仇和发展，迪奥选择了隐忍，而乔纳森在身体日渐回复之后遇到了他生命中最重要的人：威廉·A·齐贝林，并跟齐贝林先生学习了能击败尸生人和吸血鬼的波纹气功，在收到有关迪奥的消息后，前往风骑士小镇与迪奥展开最终对决，一路历经磨难，甚至让齐贝林先生也付出了生命，最后终于与迪奥展开决斗并打败了他，但是在一年后的蜜月期旅行游轮上，被仅剩一颗头的迪奥偷袭，最终乔纳森用生命最后的一点微弱波纹控制了其手下尸生人温青，让游轮发生爆炸，与迪奥“同归于尽”。
		<h2 id="战斗潮流">战斗潮流</h2>
		戦闘潮流
		Battle Tendency
		乔瑟夫·乔斯达—高贵的血脉
		战斗与冒险
		第5-12卷<hr>
		在二十世纪三、四十年代的纽约，乔纳森·乔斯达的孙子乔瑟夫·乔斯达，又遇上了新的敌人：史前强大生物-柱之男。柱之男中的卡兹是创造石鬼面的元凶，他创造石鬼面的目的是为了获得更加强大的力量，但是因为缺少超级艾哲红石，戴上石鬼面的生物只能变成被他们当成食物的吸血鬼。
		为了自己的先祖（乔瑟夫·乔斯达的祖父乔纳森·乔斯达，以及父亲乔治·乔斯达二世，西撒·安东尼·齐贝林的祖父威廉·A·齐贝林和他的父亲马利奥·齐贝林），乔瑟夫和西撒两人在威尼斯拜访波纹老师莉莎莉莎进行波纹气功的特训，这是可以用来对抗柱之男的武器。为了保护自己所重视的一切，乔瑟夫众人与柱之男们展开了战斗。
		<h2 id="星尘斗士">星尘斗士</h2>
		（一译星尘十字军）
		スターダストクルセイダース
		StardustCrusaders
		空条承太郎—给未来的遗产
		战斗与冒险
		第13-28卷<hr>
		1984年，迪奥·布兰度和乔纳森·乔斯达所在的沉船被打捞上来。迪奥·布兰度由此苏醒。在之前近100年的时间中，他通过仅存的头部攫取了乔纳森的身体，一直在海底生存着。在恩雅婆婆的帮助下，召集了许多拥有各种替身能力的手下，同时他也拥有了在当时称为最强也不为过的替身：世界（The world）。
		乔瑟夫·乔斯达此时也因DIO的复苏而获得了替身能力，并接到女儿荷莉·乔斯达的求助来日本帮助孙子空条承太郎，发现承太郎在DIO的影响下也拥有了替身能力。
		由于DIO的咒缚，荷莉·乔斯达因精神强度不够承担替身而重病昏迷，命在旦夕，解救之法就是尽快打败远在埃及的DIO。为了拯救命在旦夕的母亲，空条承太郎与姥爷乔瑟夫和占卜师阿布德尔与被救下的花京院典明准备出发前往DIO的所在地埃及，一路上遇到并击败了各种敌人，同时与法国人波鲁那雷夫建立了深厚的情谊。最终他们到达了埃及，在最后入队的同伴小狗伊奇的带领下找到了DIO的藏身地，但在接下来的战斗中，星尘斗士相继被击败，最终，花京院典明用生命破解出DIO的能暂停时间的替身能力，并正确地传达给了乔瑟夫，乔瑟夫得到答案后告知了承太郎，最终由承太郎打败了DIO，拯救了母亲的性命
		<h2 id="不灭钻石">不灭钻石</h2>
		ダイヤモンド は砕けない
		Diamond is unbreakable
		东方仗助
		悬疑与战斗
		第29-47卷<hr>
		1999年，空条承太郎为了寻访外公乔瑟夫·乔斯达的私生子来到了日本的一个小城镇“杜王町”。找到了他的舅舅，还只是一个高中生的东方仗助，但是没有料到，由此却发现了DIO所遗留的“弓和箭”，在追查“弓和箭”的途中，发现了杀人犯片桐安十郎（安杰罗），在仗助用计和替身能力打败了安杰罗后的日常生活中，好友广濑康一和他最喜欢的漫画作者岸边露伴发现了一条永远无法回头的小巷，并遇到了在那里徘徊15年之久的鬼魂杉本铃美，从她口中得知了这座小镇还潜伏着一个多年前作恶多端的恶魔，并且他至今还在作案······
		<h2 id="黄金之风">黄金之风</h2>
		黄金の风
		VENTO AUREO (Goldenwind)
		乔鲁诺·乔巴拿—黄金遗产
		战斗与冒险
		第48-63卷<hr>
		2001年，空条承太郎在调查迪奥的残党时发现DIO有一个儿子，名为乔鲁诺·乔巴纳（一译祖罗·祖班纳），现居住在意大利，怀疑其拥有替身并且和他的父亲一样是个恶人，为了将事情调查清楚，委托广濑康一前往意大利进行调查。康一亲身接触后发现乔鲁诺的品格不坏，故亲口保证，让承太郎放弃了调查，而乔鲁诺·乔巴纳本人，则有着想成为“流氓巨星”的梦想，想要改变意大利黑帮的现状。
		乔鲁诺·乔巴纳在布鲁诺·布加拉提帮助下加入了意大利势力最强的黑帮组织“热情”（passione），组织中有很多替身使者。前半部是受老板委托，同受到冷遇背叛的暗杀小队作战；后半部是忍无可忍的背叛，和暗杀小队一样同组织调集来的战士战斗，故事极富戏剧性。
		<h2 id="石之海">石之海</h2>
		ストーンオーシャン
		Stone Ocean
		空条徐伦—石之海
		战斗与冒险
		第64-80卷
		以StoneOcean
		1-17卷发售<hr>
		JOJO的故事依然在继续，主角则更换成空条承太郎的女儿空条徐伦。
		徐伦十九岁时发生了交通事故······事发后徐伦的男友及其律师设计将责任完全推到了徐伦身上。无辜的徐伦就这样被关进了监狱。在查看母亲送来的物品的时候，徐伦被能制造替身的箭的碎片刺破了手指，身上流着JOJO血液的她，从此拥有了替身的能力，在监狱这个“石造的大海”中为了重获自由而进行着不懈的努力。这时，与母亲多年未见的父亲空条承太郎来到监狱里，承太郎为了保护徐伦被夺取了记忆和替身能力，而徐伦放弃逃狱的机会回到监狱里和夺取了父亲灵魂的敌人斗智斗勇。
		<a href="#">回到顶部</a>

• img标签

<!--  
			img标签
				向网页中嵌入一张图标
				
				常用属性：
					src：需要引入的图片的地址（必须属性）
					alt：当图片破损或不存在时，显示文本的内容
					title：当鼠标悬停在图片上时显示的文本
					width：图片的宽度
					height：高
					border：图片边框
		-->
		<img src="img/jojo.png" alt="jojo" title="JOJO" width="400" height="950" border="3">
		<hr>

• 表格

<!--  
			表格
				table 表格
				tr    行
				td    标准单元格
				th    表头（字体居中、加粗效果）
				
				table的属性
					width   表格的宽度
					border  边框
					align   对齐方式
					
					style="border-collapse: collapse;"合并边框
				tr的属性：
					align   行的内容的对齐方式
		-->
		<table width="800px" align="center" border="1" style="border-collapse: collapse;">
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			
			<tr>
				<th>JOJO1</th>
				<th>男</th>
				<th>17</th>
			</tr>
			
			<tr>
				<th>JOJO2</th>
				<th>男</th>
				<th>24</th>
			</tr>
		</table>