HTML之小白的入門Day1

Calmness °發表於2020-11-10
HTML

一、需要的知識基礎與所需環境

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，有所收穫。

相關文章