HTML之小白的入门Day1

最新推荐文章于 2024-07-25 11:52:08 发布

Calmness °

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量119

点赞数

分类专栏：前端文章标签： html

本文链接：https://blog.csdn.net/weixin_43301990/article/details/109605253

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、需要的知识基础与所需环境

1、知识基础：

① 对计算机、网页有一定的了解
② 最好学过一门编程语言

2、所需环境

① 能联网的电脑一台
② 我用的软件是BuilderX

二、开始编写网页

1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tieqiao</title>
	</head>
	<body>
		<h1>firsi html</h1>
		<img src="img/2.jpg" >
		<br>
		<a href="firststudy.html">back</a>
	</body>
</html>

解释：
title为网页标题
h1为段落标题
img为加载图片
br换行，相当于enter
a href超链接
在浏览器运行结果如下：
在这里插入图片描述

2.实现一个父网页与两个子网页的切换

上代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iucenter</title>
		<style type="text/css">
			body{
				background-color: #d2b48c;
				margin-left: 20%;
				margin-right: 20%;
				border: 2px dotted black;
				padding: 10px 10px 10px 10px;
				font-family: sans-serif;
			}
		</style>
	</head>
	<body>
		<h1>study first</h1>
		<blockquote>
			date:2020/11/10
		</blockquote>
		<p>**************************</p>
		<p>she is my own</p>
		<q>time:19.14</q>
		<p>**************************</p>
		<p>who iu iu</p>
		<ul>
			<li><a href="form.html">leaf</a></li>
			<li><a href="tieqiao.html">tieqiao</a></li>
		<ul>
		
		
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>iupicture</title>
	</head>
	<body>
		<img src="img/1.jpg" >
		<br>
		<a href="firststudy.html">back</a>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>tieqiao</title>
	</head>
	<body>
		<h1>firsi html</h1>
		<img src="img/2.jpg" >
		<br>
		<a href="firststudy.html">back</a>
	</body>
</html>

建立三个html文件，分别写入如上的代码，就可以实现网页的切换，运行效果：
在这里插入图片描述

总结

今天掌握了h、p、img、a的用法，还用了少量的css，有所收获。

Calmness °

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML之小白的入门Day1

一、需要的知识基础与所需环境1、知识基础：① 对计算机、网页有一定的了解② 最好学过一门编程语言2、所需环境① 能联网的电脑一台② 我用的软件是BuilderX二、开始编写网页1.<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>tieqiao</title> </head> <body> <h1&g
复制链接

扫一扫