HTML入門(樣例)

德林恩寶發表於2020-11-07
HTML
<html>         <!--html標籤表示這是一個html檔案格式-->
	<head>     <!--head標籤標識這是html檔案的頭部內容-->
    <title>這是一個演示頁面</title>    <!--title表示顯示在瀏覽器標題-->
    </head>
<body>           <!--body表示這是html檔案的主體部分-->
	<h1>html的主要標籤</h1>    <!--h1表示標題-->
    <p><b>1.段落和對齊</b></p>   <!--p表示段落，b表示加黑-->
    <p>左對齊</p>
	<p align=center>居中對齊</p>
	<p align=right>右對齊</p>
	
	<p><b>2.換行</b></p>
	第一行<br>第二行      <!--br表示換行-->
	
	<p><b>3.詩歌</b></p>
		<pre>            <!--br表示可與定義格式化文字-->
		窗前明月光
		疑似地上霜
		舉頭望明月
		低頭思故鄉
		</pre>
	<p><b>4.列表</b></p>
		<ol type="1" start="1">    <!--ol定義有序列表-->
		<li>星期一					 <!--li定義列表中的專案-->
		<li>星期二
		<li>星期三
		<li>星期四
		<li>星期五
		<li>星期六
		<li>星期日
		</ol>
	<p><b>5.超連結</b></p>
	<a href="http://www.bupt.edu.cn">北京郵電大學</a>  <!--a標籤定義超連結-->
	
	<p><b>6.字型</b></p>
	<font color="blue" size=5>什麼樣的字型最好看？</font>  <!--font標籤定義文字字型樣式-->
	
	<p><b>7.圖片</b></p>
	<img align="bottom" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1604766550865&di=17fabd3dde4c5530ad9326281965b5c1&imgtype=0&src=http%3A%2F%2Fdaan.1010pic.com%2Fpic10%2Fu%2Fu%2F462432_1.jpg" width=300>北郵校徽</img>
	<!--img定義圖片-->
	
	<p><b>8.表格</b></p>
	<table border=2>            <!--table定義表格-->
		<caption align="top">花名冊</caption>    <!--caption定義表格標題-->
		<tr>                    <!--tr表示這是一行-->
			<th>序號</th>        <!--th表示這是一列-->
			<th width=100>姓名</th>
			<th>性別</th>
			<th>分數</th>
		</tr>
		<tr>
			<th>1</th>
			<th width=100>張  三</th>
			<th>男</th>
			<th>98</th>
		</tr>
		<tr>
			<th>2</th>
			<th width=100>李  四</th>
			<th>女</th>
			<th>100</th>
		</tr>
	</table>
</body>    
</html>
演示結果

在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
在這裡插入圖片描述
線上編輯器，可測試該程式碼

相關文章