html5的基础标签及练习(1)

最新推荐文章于 2024-03-18 11:04:16 发布

胡萝卜一号

最新推荐文章于 2024-03-18 11:04:16 发布

阅读量723

点赞数

文章标签： html5 html

本文链接：https://blog.csdn.net/weixin_45829736/article/details/106652025

版权

html5第一部分

这部分主要是一些静态网页的练习，来让我们慢慢的熟悉html5，编写软件为Hbuilder X。

1.一篇简单的博客(标题、倾斜字体、分隔线、换行)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>这是个博客</title>
	</head>
	<body>
		<h1>论数学的重要性</h1>
		<i>2020.6.7</i>
		<hr />
		<p>
			今天讲一下css的四种导入方法
		</p>
		<p>
			行内式：&nbsp;&nbsp;直接在html标签中，写入style属性
		</p>
		<p>
			
			嵌入式：&nbsp;&nbsp;在网页的<head></head>标签中写入style标签
		</p>
		<p>
			链接式：&nbsp;&nbsp;将css脚本放入css文件中，在html head标签内，写入link标签
		</p>
		<p>
			导入式：&nbsp;&nbsp;与链接式相仿，但写入style标签
		</p>
		<p>
			但链接式先加载css文件,导入式先显示html，再导入css文件。<br><b>相比之下链接式更胜一筹。</b>
		</p>
		
	</body>
</html>

运行结果如下图所示：
在这里插入图片描述 1.在这个练习中使用了<h1>…</h1>标签，来调整标题大小，此标签有<h1>到<h6>六种格式，且从<h1>到<h6>标题大小依次变小。
2.<i>…</i>此标签使字体倾斜，如上图。
3.<hr /> 为单标签，可产生分割线，如上图。
4.<p>…</p>此标签为换行符，标签内为一行。

2.仿百度新闻(超链接跳转，文本编号)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>资源</title>
	</head>
	<body>
		<h1>资源</h1>
		<hr />
		<ul>
			<li>
				<a href="https://pan.baidu.com/s/1z5sk1ncnfxj3iaViqTojgw">网络安全初识与职业发展</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1ChmVSwyhw2ckqBfjknvCyQ">网络安全小白入门必看预习视频</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1yfrT0hMM_laWJjSWcPXgHg">网络安全视频教程</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1lxMZ1JXzJ6i2xil-3obJdQ">2020Windows服务安全精讲</a>
			</li>
		</ul>
		<ol>
			<li>
				<a href="https://pan.baidu.com/s/1z5sk1ncnfxj3iaViqTojgw">网络安全初识与职业发展</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1ChmVSwyhw2ckqBfjknvCyQ">网络安全小白入门必看预习视频</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1yfrT0hMM_laWJjSWcPXgHg">网络安全视频教程</a>
			</li>
			<li>
				<a href="https://pan.baidu.com/s/1lxMZ1JXzJ6i2xil-3obJdQ">2020Windows服务安全精讲</a>
			</li>
		</ol>
	</body>
</html>

在这里插入图片描述

1.<a href=“跳转链接”>…文本…</a>，此标签可为文本附加超链接，跳转向提供的页面；
2.<ul>
<li>…</li>
…
<li>…</li>
</ul>
此标签为文本前方构造实心圆点，当<ul type=“disc”>时为实心圆点,<ul type=“circle”>时为空心圆,<ul type=“square”>时为实心方块
2.<ol>
<li>…</li>
…
<li>…</li>
</ol>
此标签为文本前方构造数字标签,当<ol type=“a”>时为小写字母，当<ol type=“A”>时为大写字母，当<ol type=“i”>时为小写罗马字符，当<ol type=“I”>时为大写罗马字符，当<ol type=“1”>时为数字。

3.图片的使用(导入图片，更改宽度)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img src="images/1.png" width="100%"/>
		<img src="images/2.png" width="100%"/>
		<img src="images/3.png" width="100%"/>
		<img src="images/4.png" width="100%"/>
		<img src="images/5.png" width="100%"/>
		<img src="images/6.png" width="100%"/>
	</body>
</html>