HTML 第一章节代码部分

一、新闻的构造

代码、图片布局如下：

代码如下：（test001.html）

<html>
	<head>
		<title>劳动者</title>
		<meta charset="utf-8"/>
	</head>
	<body>
		<h1>“你们是辛勤的劳动者，我专门来看看你们”</h1>
		<h2>（原标题：“你们是辛勤的劳动者，我专门来看看你们”）</h2>
		<img src="1.png"/>
		<p>对“快递小哥”来说，有两年的春节令他印象深刻。</p>
		<p>2019年春节前夕，XX前门石头胡同快递站点，正准备出门送货的快递小哥遇到了前来看望他们的领导。</p>
	</body>
</html>

运行结果：

二、孙悟空简介

代码、图片布局如下：

代码如下：(Noname1.html)

<!DOCTYPE HTML>
<html>
	<head>
		<title> 孙悟空简介</title>
	</head>
	<body>
		<h1>孙悟空 （中国古典名著《西游记》中的主角）</h1>
		<img src="2.jpg"/ width="100" height="150" align="right">
		<hr>
		<p>孙悟空（又称齐天大圣、孙行者、斗战胜佛），是中国古典神魔小说《西游记》中的主要角色之一。由开天辟地产生的仙石孕育而生，出生地位于东胜神洲的花果山上，因带领猴群进入水帘洞而被尊为 “美猴王”。为了学艺而漂洋过海拜师于须菩提祖师，得名孙悟空，学会大品天仙诀、地煞数七十二变、筋斗云等高超的法术。
		 </P>
		<p>出师的孙悟空为得兵器，在东海龙宫取得如意金箍棒， 后大闹地府勾去生死簿， 惊动上天而被玉皇大帝招安，封为弼马温。 [75]  得知职位低卑后怒返花果山，  并战胜李天王和哪吒三太子的讨伐，  迫使玉帝封其为齐天大圣，并在天宫建有府邸，奉旨管理蟠桃园。 [79]  因醉酒搅乱王母的蟠桃盛会、偷吃太上老君的金丹， 炼成了金钢之躯，后在太上老君的八卦炉中眼睛被熏成火眼金睛。 [90]  之后大闹天宫，十万天兵天将、四大天王、二十八星宿对其围剿亦不能将其打败， [91]  后来在与如来佛祖的打赌斗法中失利，被压在如来用五指化作的五行山下五百余年悔过自新。 后经观音点化，被唐僧救出，法号行者，保护唐僧西天取经， 一路降妖除魔，不畏艰难困苦，历经九九八十一难，最后取得真经修成正果，被封为斗战胜佛。 [182] 
		</p>
		<hr>
		<h2>打怪的等级</h2>
	  	<ul>
			<li>一级妖怪</li>
			<li>二级妖怪</li>
			<li>三级妖怪</li>
			<li>四级妖怪</li>
	  	</ul>
	  	<p>师徒四人关系</p>
	 	<dl>
			<dt>师傅</dt>
			<dd>唐僧</dd>
			<dt>二师弟</dt>
			<dd>猪八戒</dd>
		<dt>三师弟</dt>
		<dd>沙悟净</dd>
	    </dl>
 </body>
</html>

运行结果：

三、四季轮回转换标签 src 内部属性

代码、图片布局如下：

原理：

“春天—>夏天”的代码如下：(Noname2四季轮回.html)

<!DOCTYPE HTML>
<html>
 	<head>
  		<title> 四季轮回 </title>
	</head>
 	<body>
 		<h1>春天</h1>
 		<img src="chuntian.jpg" width="100" height="150">
 		<br>
 		<a href="Noname3夏天.html">进入夏天</a>
 	</body>
</html>

“夏天—>秋天”的代码如下：(Noname3夏天.html)

<!DOCTYPE HTML>
<html>
	<head>
		<title> 夏天 </title>
	</head>
	<body>
		<h1>夏天</h1>
		<img src="xiatian.jpg" width="100" height="150">
		<br>
		<a href="Noname4秋天.html">进入秋天</a>
	</body>
</html>

“秋天—>冬天”的代码如下：(Noname4秋天.html)

<!DOCTYPE HTML>
<html>
	<head>
		<title> 秋天 </title>
	<body>
		<h1>秋天</h1>
		<img src="qiutian.jpg" width="100" height="150">
		<br>
		<a href="Noname5冬天.html">进入冬天</a>
	</body>
</html>

“冬天—>春天”的代码如下：(Noname5冬天.html)

<!DOCTYPE HTML>
<html>
	<head>
		<title> 冬天 </title>
	</head>
	<body>
		<h1>冬天</h1>
		<img src="dongtian.jpg" width="100" height="150">
		<br>
		<a href="Noname2四季轮回.html">进入春天</a>
	</body>
</html>

运行结果如图所示：

四、音乐短视频播放

代码、图片布局如下：

代码如下：（Noname3曲音.html）

<!DOCTYPE HTML>
<html>
	<head>
		<title> New Document </title>
	</head>
	<body>
		<h3>播放音乐</h3>
		<audio src="新二曲.mp3" controls=controls></audio>
		<h3>播放音乐</h3>
		<video src="飞书笔法.mp4" controls=controls width="400" height="200"></video>
	</body>
</html>

运行结果如下：

五、小说目录索引锚点

代码如下：

// A code block
<!DOCTYPE HTML>
<html>
	<head>
		<title>小说目录</title>
	</head>
	<body>
	<!--
	网络小说网址：https://book.qidian.com/info/1033908507/#Catalog
	-->
		<table border="1" align="center">
			<tr>
				<td colspan="3" align="center" >心有万里星海 </td>  <!--clospan 合并单元格-->
			</tr>
			<tr>
				<!--
					href：（全称：Hypertext Reference，超文本引用）
				-->
				<td><a href="#第一章 重逢">第1章 重逢</a></td> 
				<td><a href="#第2章 担忧">第2章 担忧</a></td>
				<td><a href="#第3章 喜讯">第3章 喜讯</a></td>
			</tr>
			<tr>
				<td><a href="#第4章 热血">第4章 热血</a></td>
				<td><a href="#第5章 进驻发射中心">第5章 进驻发射中心</a></td>
				<td><a href="#第6章 最好的礼物">第6章 最好的礼物</a></td>
			</tr>
			<tr>
				<td><a href="#第7章 有惊无险">第7章 有惊无险</a></td>
				<td><a href="#第8章 戈壁之行">第8章 戈壁之行</a></td>
				<td><a href="#第9章 患难见真情">第9章 患难见真情</a></td>
			</tr>
			<tr>
				<td><a href="#第10章 新征程">第10章 新征程</a></td>
				<td></td>
				<td></td>
			</tr>

			<hr>

		</table>

		<h1><a name="第一章 重逢">第1章 重逢</a></h1>
			<!--
				可复制的该小说网址：https://www.mayiwxw.com/97_97848/40832481.html
			-->
		<p>
			“16日上午9时10分左右，征途二号F遥十二运载火箭在西北发射中心点火起飞。火箭搭载了星海十二号载人飞船。3名航天员正式向太空出发！”
		</P>
		<p>
			.......
		</p>
			
		<h1><a name="第2章 担忧">第2章 担忧</a></h1>
		<p>
			你记得云毅吗？”云星海试探着问。
		</P>
		<p>
			......
		</P>

运行结果如下：

六、标题超链接制作

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<title>HTML5 发展历程</title>
	</head>

	<body>
		<h1>HTML5 发展历程</h1>

		<a href="http://www.tup.tsinghua.edu.cn/index.html">清华大学出版社</a>
		<a href="https://www.w3school.com.cn/">w3school 在线教程</a>
		<a href="https://www.w3school.com.cn/w3c/w3c_china.asp">W3C 中国</a>

		<p>
			HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
		</P>
		<p>
			在前五年（1990-1995），HTML经历了多次修订并经历了许多扩展，主要是在欧洲核子研究中心首先托管，然后是IETF。
		</p>
		<p>
			随着W3C的创建，HTML的发展再次改变了场地。 1995年第一次尝试在HTML 3.0中扩展HTML，然后在1997年完成了一种称为HTML 3.2的更实用的方法。同一年晚些时候，HTML 4.01很快就出现了。
		</p>
		<p>
			第二年，W3C成员决定停止发展HTML，而是开始研究基于XML的等价物，称为XHTML。这项工作始于XML中的HTML 4.01重新编写，称为XHTML 1.0，除了新的序列化之外没有添加任何新功能，并且在2000年完成。在XHTML 1.0之后，W3C的重点转向使其他工作组更容易在XHTML模块化的旗帜下扩展XHTML。与此同时，W3C还开发了一种与早期HTML和XHTML语言不兼容的新语言，称之为XHTML 2.0
		</P>
		<p>
			大约在1998年停止HTML演变的时候，浏览器供应商开发的HTML部分API被命名并以DOM Level 1（1998年）和DOM Level 2 Core和DOM Level 2 HTML（从2000年开始）发布。最终于2003年）。这些努力随后逐渐消失，2004年发布了一些DOM Level 3规范，但工作组在所有3级草案完成之前就已关闭。
		</P>
		<p>
			......
		</p>
	</body>
</html>

运行结果如下：

七、使用sup sub标签

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<title> sub sup </title>
		<meta charset="utf-8"/>
	</head>

	<body>
		<p>
			解方程：x<sup>2</sup>+2x-3=0
		</p>
		<p>
			解：把常数项移项得：<sup>2</sup>+2x=3
		</p>
		<p>
			等式两边同时加1（构成完全平方式）得：x<sup>2</sup>+2x+1=4
		</p>
		<p>
			因式分解得：(x+1)<sup>2</sup>=4
		</p>
		<p>
			解得：<sub>1</sub>=-3,x<sub>2</sub>=1
		</p>
	</body>
</html>

运行结果如下：

八、b i em u strong 标签的使用

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<title> b i em strong </title>
	</head>

	<body>
		<p>草地上有一所房子，一所<b>漂亮的红色的</b>房子。（b元素）</p>
		<p>房子的名字叫做：<i>HAPPY HOUSE</i>。（i元素）</p>
		<p><em>兔妈妈和小兔子们</em>一起生活在这里。（em元素）</p>
		<p>它们每天都感觉到<strong>非常的幸福</strong>。（strong元素）</p>
	</body>
</html>

运行结果如下：

九、个人简介图片标签

代码、图片布局如下：

代码如下：（Noname1th个人简历.html）

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>

	<body>
		<h1 align="center">个人简介</h1>
		<hr/>
		
		<img src="th.jpg" align="left">
		<p>姓名：<b><u><font size="10" color="red">th</font></u></b></p>
		<p>性别：男</p>
		<p>年龄：18</p>
		<p>个人简介：他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很帅他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖他很暖。</p>
	</body>
</html>

运行结果如下：

十、基础标签标题标签常用标签

代码如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<title> New Document </title>
	</head>
	<body>
		<h1>第一章 HTML基础</h1>
		<b><hr/></b>
		<h2>1.课程目标</h2>
		<p>.掌握HTML标签的使用</p>
		<p>.掌握css的用法</p>
		<p>.能进行网络布局</p>

		<h2>2.本章内容</h2>
		<h3>2.1.HTML概述</h3>
		<h4>2.2.1什么是HTML</h4>
		<p>HTML的全程为超文本标记语言，是一种标记语言<sup>[1]</sup>。<p>
	</body>
</html>

运行结果如下：