Python学习 Day15 HTML文本标签

HTML文本标签

(一)多媒体标签

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>文本标签</title>
	</head>
	<body>
		<!--文本标签-->
		<!--下面的文字就是普通的文本,文本编辑器中的任何效果:比如空格,换行都不影响页面-->
		永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)
		永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)
		<!--标题标签-->
		<!--h1-h6  字号逐渐变小,每个标题独占一行,自带换行效果
			h7之后都属于无效标签,但是浏览器也不会报错,而是以普通文本的形式进行展现
		-->
		<h1>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h1>
		<h2>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h2>
		<h3>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h3>
		<h4>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h4>
		<h5>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h5>
		<h6>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h6>
		<h7>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h7>
		<h8>永远铭刻史册的伟大胜利(奋斗百年路 启航新征程)</h8>
		<!--横线标签
			width:设置宽度
			300px:固定宽度
			30&:页面宽度的百分比,会随着页面宽度的变化而变化
			align:设置位置 left,right,center(默认)
		-->
		<hr width="300px" align="right" />
		<hr width="30%" align="right" />
		
		<!--段落标签
			段落效果:段落中文字自动换行,段落和段落之间有空行
		-->
		<p>&nbsp;&nbsp;&nbsp;&nbsp;“强大的&lt;新中国&gt;,是多少&copy;抗战英雄的血和汗成就的。”“今者若忘旧耻,愧为吾国吾民族之后!”“望英雄安息,我们将会接过你们的接力棒!”中国人民抗日战争纪念馆留言簿上,一行行或娟秀、或工整、或豪纵的字迹,读来让人不禁身暖心热。</p>
		<p>&emsp;“卢沟桥,狮子吼,宛平城头浴血战……”</p>
		<p>193777日,中国人永远不会忘记的一个日子。日本侵略者制造了震惊中外的卢沟桥事变,中国全民族抗战由此开端。以铮铮铁骨战强敌、以血肉之躯筑长城、以前仆后继赴国难,中国人民最终打败了日本侵略者,谱写了惊天地、泣鬼神的雄壮史诗。</p>
		<!--加粗倾斜下划线-->
		<b>加粗</b>
		<i>倾斜</i>
		<u>下划线</u>
		<i><b><u>加粗倾斜下划线</u></b></i>
		<!--一箭穿心-->
		<del>你好世界</del>
		
		<!--预编译标签:在页面上显示原样效果-->
		<pre>
		public static void main(String[] args){
     
			System.out.println("hello...")
		}
		</pre>
		
		<!--换行-->
		“号外!号外!日本投降了!日本投降了!”报童挥舞手中《新华日报》号外、<br激动呼喊的场景被历史定格……/>这份号外上,醒目的特大号字“接受波茨坦宣言日本无条件投降”,如今读来,仍让人热泪盈眶、激动万分。 
		
		<!--字体标签-->
		<font color="coral" size="7" face="微软雅黑">习近平总书记指出:“中国人民抗日战争的伟大胜利,将永远铭刻在中华民族史册上!永远铭刻在人类正义事业史册上!</font>
	
	</body>
</html>

效果

Python学习 Day15 HTML文本标签_第1张图片

如何引入网络资源
Python学习 Day15 HTML文本标签_第2张图片
Python学习 Day15 HTML文本标签_第3张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--图片
		src:引入图片
			引入本地资源
		width:设置宽度
		height:设置高度
		注意:一般高度和宽度只设置一个即可,另一个会按照比例自动适应
		title:鼠标悬浮在图片上的时候的提示语,默认情况下(没有设置alt属性),图片如果加载失败那么提示语也是title的内容
		-->
		<img src="img/IMG_20200915_220439.jpg " width="300px" title="这是一个美女小姐姐"  alt="图片加载失败"/>
		<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3363295869,2467511306&fm=26&gp=0.jpg" />
			
		<!--音频-->
		<embed src="music/狐狸.mp3"> </embed>
		<br />
		<!--视频-->
		<embed src="video/太可爱啦吧!兔子“洗脸”萌翻全网:还以为是假的 标清(270P).qlv" width="500px" height="500px"></embed>
		<embed src="//player.video.iqiyi.com/87c28d85e53fd3034ba66f102f0e447a/0/0/v_13xgen2iyuw.swf-albumId=3972826632042900-tvId=3972826632042900-isPurchase=0-cnId=undefined" allowFullScreen="true" quality="high" width="480" height="350" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash">">
	</body>
</html>

(二)超链接标签

Python学习 Day15 HTML文本标签_第4张图片
Python学习 Day15 HTML文本标签_第5张图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			超链接标签:实现页面的跳转功能
			href:控制跳转的目标位置
			target:_self在自身页面打开(默认) _blank 在空白页面打开
		-->
		<a href="文本标签.html">这是一个超链接01</a> <!--跳转到本地资源-->
		<a href="">这是一个超链接02</a> <!--跳转到自身页面-->
		<a href="abc">这是一个超链接03</a> <!--跳转的目标找不到,提示找不到资源-->
		<a href="https://www.baidu.com" target="_blank">这是一个超链接04</a> <!--跳转到网络资源-->
		<a href="https://www.baidu.com" target="_self">这是一个超链接05</a>
		
		<a href="https://www.baidu.com" target="_blank"><img src="img/IMG_20200915_220439.jpg" width="300px" /></a>
	</body>
</html>

(三)设置锚点

应用场合

  • 当一个页面太长的时候,就需要设置锚点,然后可以在同一个页面之间的不同位置之间进行跳转
    Python学习 Day15 HTML文本标签_第6张图片
    Python学习 Day15 HTML文本标签_第7张图片
    Python学习 Day15 HTML文本标签_第8张图片

你可能感兴趣的:(前端)