web前端–html4練習
標籤總覽：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>基礎標籤練習</title>
</head>
<body>
<!-- b標籤加粗文字 br標籤換行-->
<b>
黃鶴樓送孟浩然之廣陵
</b><br />
故人西辭黃鶴樓，煙花三月下揚州。<br />
孤帆遠影碧空盡，唯見長江天際流。<br />
<!--
h1：一級標籤
h2：二級標籤
h3：三級標籤
h4：四級標籤
h5：五級標籤
h6：六級標籤
p:段落標籤
-->
<h1>java開發的三個方向</h1>
<h2>Java SE</h2>
<p>主要運用於桌面程序的開發。它是學習Java EE和Java Me的基礎，也是本書的重點內容。</p>
<h2>Java EE</h2>
<p>主要用於網頁程序的開發。隨着互聯網的發展。越來越多的企業使用Java語言來開發自己官方網站。</p>
<h2>Java ME</h2>
<p>主要用於嵌入式系統程序的開發。</p>
<h1>好</h1>
<h2>想</h2>
<h3>愛</h3>
<h4>這</h4>
<h5>個</h5>
<h6>世</h6>
<!-- center:居中標籤 -->
<center>界</center><br />
<h3>編程字典有以下幾個品種（默認屬性爲disc）</h3>
<!-- ul li 無序列表 type是設置列表的點樣式如：正方形、原型。。。-->
<ul type="disc" >
<li>Java編程字典</li>
<li>VB編程字典</li>
<li>VC編程字典</li>
<li>.net編程字典</li>
<li>C#編程字典</li>
</ul>
<ul type="circle">
<li>Java編程字典</li>
<li>VB編程字典</li>
<li>VC編程字典</li>
<li>.net編程字典</li>
<li>C#編程字典</li>
</ul>
<ul type="square">
<li>Java編程字典</li>
<li>VB編程字典</li>
<li>VC編程字典</li>
<li>.net編程字典</li>
<li>C#編程字典</li>
</ul>
<!--ol 有序列表-->
<h3>有序列表</h3>
<ol type="1">
<li>Java編成寶典</li>
<li>VB編程字典</li>
<li>VC編程字典</li>
<li>.net編程字典</li>
<li>C#編程字典</li>
</ol>
<!-- 註釋：CREL+shift+/ -->
<!--dl 自定義列表-->
<h3>自定義列表</h3>
<dl>
<dd>1、香蕉</dd>
<dd>a.蘋果</dd>
<dd>b.葡萄</dd>
<dd>2.西瓜</dd>
<dd>c.草莓</dd>
</dl>
<!--marquee 跑馬燈 -->
<marquee>我是跑跑跑的一段話</marquee>
<marquee direction="right">我是跑跑跑的第二段話</marquee>
<marquee direction="right" scrollamount="1">我是跑跑跑的第三段話</marquee>
<center><marquee direction="up" scrollamount="5" width="500" height="200" bgcolor="red">我是跑跑跑的第四段話<p>快跑快跑</p>我來了</marquee></center>
<!-- hr 默認的hr分割線-->
<h2>默認的hr分割線</h2>
<hr />
<h2>自定義hr分割線</h2>
<hr align="center" width="500px" color="red" size="50" />
<pre >這是一段話</pre>
<!-- font裏的屬性是設置文字樣式的 -->
<font size="7" color="red">長沙</font>
<!--
table 表格
tr 表格的行
td 表格的列
caption：表格標題
-->
<table width="318" height="167" border="1" align="center">
<caption>學生考試成績單</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">語文</td>
<td align="center" valign="middle">數學</td>
<td align="center" valign="middle">英語</td>
</tr>
<tr>
<td align="center" valign="middle">張三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
</table>
<h2 align="center">表格背景顏色</h2>
<table border="1" align="center" bgcolor="#FF34B3">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
<h2>橫向表格頭</h2>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>柯南</td>
<td>男</td>
<td>12</td>
</tr>
<tr>
<td>小蘭</td>
<td>女</td>
<td>17</td>
</tr>
</table>
<h2>縱向表格頭</h2>
<table border="1"></table>
<tr>
<th>姓名</th>
<td>柯南</td>
<td>小蘭</td>
</tr>
<tr>
<th>性別</th>
<td>男</td>
<td>女</td>
</tr>
<tr>
<th>年齡</th>
<td>12</td>
<td>17</td>
</tr>
<table border="1" align="center" width="400">
<caption>電話列表（合併列）</caption>
<tr>
<th>姓名</th>
<th colspan="2">電話</th>
</tr>
<tr>
<td>張三</td>
<td>01-666666</td>
<td>01-888888</td>
</tr>
<tr>
<td>李四</td>
<td>02-123456</td>
<td>02-000000</td>
</tr>
</table>
<table border="1" align="center" width="400">
<caption>電話號碼錶（合併行）</caption>
<tr>
<th>姓名</th>
<td>張三</td>
<td>李四</td>
</tr>
<tr>
<th rowspan="2">電話</th>
<td>01-123456</td>
<td>02-666666</td>
</tr>
<tr>
<td>01-7654321</td>
<td>02-8888888</td>
</tr>
</table>
<table border="1" align="center" width="400">
<tr>
<td>
<p>第一章:龍出世</p>
<p>第二章:龍夭折，小說完</p>
</td>
<td>
第二個單元格中的一個表格:
<table border="1" width="100">
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
這是一個無序的序列：
<ul>
<li>香蕉</li>
<li>蘋果</li>
<li>火龍果</li>
<li>榴蓮</li>
</ul>
</td>
<td>
這是一個有序到的序列：
<ol>
<li>猴子</li>
<li>狒狒</li>
<li>蛇</li>
<li>螞蟻</li>
</ol>
</td>
</tr>
</table>
<!--form：表單，通常包含input的標籤 -->
<form id="form1" action="action.html" method="post" name="form" target="_blank"></form>
<table border="1" cellpadding="2" cellspacing="0" align="center" width="400">
<caption>網上報名</caption>
<form action="">
<tr>
<th>用戶名：</th>
<td><input name="username" type="text" size="25" maxlength="15"/></td>
</tr>
<tr>
<th>密碼：</th>
<td><input name="password" type="password" size="27" maxlength="15"/></td>
</tr>
<tr>
<th>性別：</th>
<td>
<input type="radio" name="sex" checked="checked"/>男
<input type="radio" name="sex"/>女
</td>
</tr>
<tr>
<th>出生年月：</th>
<td>
<select name="">
<option value="1970">1970</option>
<option>1971</option>
<option>1972</option>
<option>1973</option>
<option>1974</option>
<option>1975</option>
<option>1976</option>
<option>1977</option>
<option>1978</option>
</select>年
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>月
</td>
</tr>
<tr>
<th>興趣愛好：</th>
<td>
<input type="" />足球
<input type="checkbox" />乒乓球
<input type="checkbox" />橄欖球
<input type="checkbox" />藍球
</td>
</tr>
<tr>
<th>個人簡介：</th>
<td>
<textarea rows="5" cols="30" maxlength="300"></textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交"/>
<input type="reset" value="重置"/>
</td>
</tr>
</form>
</table>
下拉列表框：
<select name="select">
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
<br /><br /><br /><br />
多行列表框（不可多選）：
<select name="select2" size="2">
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
<br /><br /><br /><br />
多行列表框（可多選）：
<select name="select3" size="3" multiple="multiple">
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
</body>
</html>
練習一：段落、列表、分隔線
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Homework1</title>
</head>
<body>
<center>
<h1 >鄉戀情深</h1>
時間:2017-03-30 來源: 作者:楊梅英 閱讀:50047次<br />
<b>你雖離開，卻未曾走出我的記憶！——題記</b><br />
<hr width="1000px" color="red" size="5"/>
</center>
<p> 又是清明到來時，年年清明懷故人</p>
<p> 每到清明時節總會有春雨相伴，彷彿上蒼都通曉人意，春雨帶着一方鄉土的氣息，悸動着我在內心對你深切的思念。<br>這份思念之情越來越濃郁，佔據了心田。不是淡漠，而是昇華，成爲了人間與天堂的精神鏈接點。<br>尋尋覓覓，悽悽慘慘慼戚。</p>
<p> 轉眼，你已經告別我，告別這凡塵世界兩年有餘了。此時，太多的話語都顯得蒼白無力，你那曾經熟悉的身影，你那<br>不曾被遺忘的音容笑貌，平實無華，歷歷在目，你的離去留給我太多的不捨，我們相處的每一個時光片段，留下的記憶又是太<br>多，太多......</p>
<hr align="center" width="2000px" size="6" color="blue"/>
<h1>提綱</h1>
<ol type="A">
<li>創建第一個HTML文件</li>
<li>HTML文檔結構</li>
<li>HTML常用標記</li>
<li>表格標記</li>
<li>HTML表單標記</li>
<li>超鏈接與圖片標記</li>
</ol>
<hr align="center" width="2000px" size="7" color="green"/>
<h1>創建HTML文件步驟</h1>
<ul type="square">
<li>任意空白處點擊右鍵，依次選擇“新建”/“文本文檔”。</li>
<li>重命名文件：任意文件名.html。</li>
<li>安裝EditPlus編輯器。俗稱“小紅本”。</li>
<li>點擊文件右鍵，依次選擇“打開方式”/“EditPlus”，或者直接右鍵菜單就能看到“EditPlus”。</li>
<li>進入編輯器之後，直接開始編寫代碼。</li>
</ul>
<hr align="center" width="2000px" size="7" color="violet"/>
一、肉食動物
<dl>
<dd>1)、老虎</dd>
<dd>2)、獅子</dd>
<dd>3)、獵豹</dd>
</dl>
二、食草動物
<dl>
<dd>1)、兔子</dd>
<dd>2)、綿羊</dd>
</dl>
</body>
</html>
網頁演示：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-qq3YhQjQ-1591800001416)(E:\typoraPic\image-20200610220141010.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200610224042563.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)
練習二：表格練習
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index</title>
</head>
<body>
<table align="center" width="500" height="400" bgcolor="yellow">
<tr>
<td align="center">中國菜</td>
</tr>
<tr>
<td align="left">目錄</td>
</tr>
<tr>
<td align="left">1</td>
</tr>
<tr>
<td align="left">2</td>
</tr>
<tr>
<td align="left">3</td>
</tr>
<tr>
<td align="left">4</td>
</tr>
<tr>
<td align="left">5</td>
</tr>
<tr>
<td align="left">6</td>
</tr>
<tr>
<td align="left">菜名: **售價：**</td>
</tr>
<tr>
<td align="left">
<table cellspacing="0" cellpadding="0" width="100" height="200">
<tr>
<td><img src="img/homework2/中國菜/1.jpg"></td>
</tr>
</table>
</td>
<td>介紹：***</td>
</tr>
<tr>
<td align="left"><a href="homework2west.html">西餐</a></td>
</tr>
</table>
</body>
</html>
網頁演示：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-bCwB6v6W-1591800001424)(E:\typoraPic\image-20200610220251555.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200610224057261.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)
練習三：表單練習：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>homework</title>
</head>
<body>
<form>
<!-- input標籤type分類：
text：文本框
password：密碼框
radio：單選框
checkbox：多選框
submit：提交按鈕
reset：重置按鈕
buttom：按鈕
date:時間選擇框
email：郵件框
file:文件
-->
用戶名：<input type="text" name="username"/><br/><br/>
密碼：<input type="password" name="password"/><br/><br/>
性別：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br /><br/>
興趣: <input type="checkbox" />打遊戲 <input type="checkbox" />聽音樂 <input type="checkbox" />跑步 <br /><br/>
<input type="submit" name="submit"/>
<input type="reset" name="reset"/>
</form>
</body>
</html>
網頁演示：
![[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-O9QzOCpa-1591800001430)(E:\typoraPic\image-20200610221135105.png)]](https://pic1.xuehuaimg.com/proxy/csdn/https://img-blog.csdnimg.cn/20200610224111192.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lubWF0dXJpdHlfNw==,size_16,color_FFFFFF,t_70)