简单的前端项目

昨天学了HTML，现在写一个小项目总结一下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>致橡树简介</title>
	<style type="text/css">
		p{
		color:white;
		size:40;
		}	
	</style>
</head>
<body bgcolor="Coral">
	<center>
		<a href="#bottom">去底部</a>
		<a href="#this">去指定位置</a>
		<h1>我的博客</h1>
	</center>
		<h2>1：诗歌全文</h2>
		<hr>
	<center>
		<h3>致橡树</h3>
		<br><a href="https://baike.sogou.com/v40972.htm;jsessionid=5206A4576E485C02ADAE625FCD795A29" target="_blank" id="this">舒婷</a><br>
		<p>我如果爱你——</p>
		<p>绝不像攀援<sup>1</sup><!--上标supersript-->的凌霄花,</p><br>
		<a href="https://baike.sogou.com/PicBooklet.v?relateImageGroupIds=3197403&lemmaId=755853&now=https%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F6771%2F20181120132334-2015008553_jpg_500_312_36155.jpg%2F0&type=1#simple_0" target="_blank"><img src="./images/1.jpg" alt="致橡树节选，毛笔字"></a><br>
		<p>借你的高枝炫耀自己；</p>
		<p>我如果爱你——</p>
		<p>绝不学痴情的鸟儿，</p>
		<p>为绿荫重复单调的歌曲；</p>
		<p>也不止像泉源，</p>
		<p>清凉的慰藉<sup>2</sup>；</p>
		<p>也不止像险峰，</p>
		<p>增加你的高度，衬托你的威仪。</p>
		<p>甚至日光，</p>
		<p>甚至春雨。</p>
		<p>不，这些都还不够！</p>
		<p>我必须是你近旁的一株木棉，</p>
		<p>作为树的形象和你站在一起。</p>
		<p>根，紧握在地下；</p>
		<p>叶，相触在云里。</p>
		<p>每一阵风过，</p>
		<p>我们都互相致意，</p>
		<p>但没有人，</p>
		<p>听懂我们的言语。</p>
		<p>你有你的铜枝铁干，</p>
		<p>像刀，像剑，也像戟；</p>
		<p>我有我红硕的花朵，</p>
		<p>像沉重的叹息，</p>
		<p>又像英勇的火炬。</p>
		<p>我们分担寒潮、风雷、霹雳；</p>
		<p>我们共享雾霭<sup>3</sup>、流岚<sup>4</sup>、虹霓<sup>5</sup>。</p>
		<p>仿佛永远分离，</p>
		<p>却又终身相依。</p>
		<p>这才是伟大的爱情，</p>
		<p>坚贞就在这里：</p>
		<p>爱——</p>
		<p>不仅爱你伟岸的身躯，</p>
		<p>也爱你坚持的位置，</p>
		<p>足下的土地。</p>
		<hr>
	</center>
	<br><br>
	<h2>2:相关注释</h2>
	<p>1:攀援：同“攀缘”比喻投靠有权有势的人往上爬。</p>
	<p>2:慰藉：安慰。</p>
	<p>3:雾霭：雾气。</p>
	<p>4:流岚：这里指云雾。</p>
	<p>5:虹霓：同“虹蜺 ”指彩虹</p>
	<center>
	<a href="https://baike.sogou.com/PicBooklet.v?relateImageGroupIds=3197403&lemmaId=755853&now=https%3A%2F%2Fpic.baike.soso.com%2Fugc%2Fbaikepic2%2F6771%2F20181120132334-2015008553_jpg_500_312_36155.jpg%2F0&type=1#simple_1" target="_blank"><img src="./images/2.jpg" alt="致橡树全文，幻灯片样式"></a>
	</center>
	<br><br>
	<hr>
	<center>
	<br>
	友情链接：<a href="https://baike.sogou.com/v755853.htm?fromTitle=%E8%87%B4%E6%A9%A1%E6%A0%91" target="_blank">A网站</a>|
	<a href="http://www.baidu.com" target="_blank">B网站</a>|
	<a href="http://www.4399.com/?haoqq123" target="_blank">C网站</a>
	<br>
	<a href="#" id="bottom">回到顶部</a>

	<a href="https://mail.qq.com/cgi-bin/frame_html?sid=xo7xiwC97k9WvBtH&r=64ec60460d0d1f3d52a97ee2f349f896" target="_blank">联系我们</a>
	<br>
	</center>

</body>
</html>

1：超链接

代码规范：

\<a href="网址">描述\</a>

<a>标签有href属性：网址；
target属性有以下几个值：
_self:在当前页跳转到该网页
_bank:在另一个页面显示该网页

2：插入图片

代码：

<img src="图片位置" alt="图片描述">

<img>标签有src属性：图片位置
alt属性：关于图片的描述

3：内嵌框架

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

内嵌框架与a标签配合使用
a标签的target属性可以将链接到的页面直接显示在当前页面的iframe中，代码如下：

<a href="01.html" target="myframe">页面一</a>
<a href="02.html" target="myframe">页面二</a>
<a href="03.html" target="myframe">页面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>

1：超链接

2：插入图片

3：内嵌框架

猜你喜欢