HTML--1.學習使用簡單的標籤

HTML 元素

HTML 元素指的是從開始標籤(start tag)到結束標籤(end tag)的所有代碼。

開始標籤 元素內容 結束標籤
<p> This is a paragraph </p>

HTML 元素語法

  • HTML 元素以開始標籤起始
  • HTML 元素以結束標籤終止
  • 元素的內容是開始標籤與結束標籤之間的內容
  • 某些 HTML 元素具有空內容(empty content)
  • 空元素在開始標籤中進行關閉(以開始標籤的結束而結束)
  • 大多數 HTML 元素可擁有屬性

嵌套的 HTML 元素

大多數 HTML 元素可以嵌套(可以包含其他 HTML 元素)。

HTML 文檔由嵌套的 HTML 元素構成。

<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
上面的例子包含三個 HTML 元素:<html>、<body>、<p>

<html> 元素定義了整個 HTML 文檔。

這個元素擁有一個開始標籤 <html>,以及一個結束標籤 </html>。

元素內容是另一個 HTML 元素(body 元素)。

<body> 元素定義了 HTML 文檔的主體。

這個元素擁有一個開始標籤 <body>,以及一個結束標籤 </body>。

元素內容是另一個 HTML 元素(p 元素)。

HTML 屬性

HTML 標籤可以擁有屬性。屬性提供了有關 HTML 元素的更多的信息

屬性總是以名稱/值對的形式出現,比如:name="value"

屬性總是在 HTML 元素的開始標籤中規定。

<a href="http://www.w3school.com.cn">This is a link</a>
上面的href爲<a>標籤的一個屬性.


下面練習使用一些HTML中的標籤

代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>這是一個html頁面</title>
	</head>

	<body>
		<basefont size="10">
		
		<h1>主頁內容</h1>
		
		<a href="http://blog.csdn.net/dragon_dai_2017">超鏈接:我的博客</a>
		<!-- 		
			<a> 是超鏈接文本   href屬性表示需要去的地址
		 -->
		<p>
			<font color="red"><b>這是一個段落</b></font><br/>
			<!-- 
				這是註釋,可以在MyEclipse中使用,ctrl+shift+C來給選擇內容註釋
				<br/>是換行
			 -->
		</p>
		<hr align="left" color="#ff0000" width="50%" />
		<!-- 		
			<hr/>水平分隔線
			屬性:
			align 對齊方式   
			color="#ff0000"或者"red"或者rgb(255,0,0)
		 -->
		
		<p>
		這是一個段落,<br/>
		<small>序列流</small> <big>RandomAccessFile</big>  RandomAccessFile 的唯一父類是Object,
		與其他流父類不同。<br/>
		
		<font size="+3">加大了3號的字體</font>    <font size="7">字體爲7的字</font>  <br/>
		X<sub>2</sub>       X<sup>2</sup>   
		<!-- 
			<sub> 下標   
			<sup> 上標
		 -->
		<b>粗體字</b>	  	<i>斜體字</i>  &reg;   <u>加下劃線的字</u>    <strike>加刪除線的字</strike> <br/>
		X < Y         Y > X    
		<!-- 		
			在html中特殊字符需要使用下面方式表示
			空格符:    “<”符號 :<    “>”符號: >
			“&”符號: &  “"”符號:"	 
			"®"符號: &reg;  “©”:&copy    “ ™ ”: ™
		-->
		</p>
		
		<hr align="left" width="70%" color="pink" size="+8" />
		<h2>下面是列表演示</h2>   <br/>
		<!-- 
			數據列表 dl: datalist
			dt: 上層項目
			dd: 下層項目
		 -->
		 
		 <h3>數據列表演示</h3>
		<dl>
			<dt>學院</dt>
			<dd>信電院</dd>
			<dd>土木院</dd>
			<dd>美藝院</dd>
		</dl>
		<br/>
		
		<h3>目錄(dir)列表演示,<font color="red">已經廢棄</font></h3>
		<!-- 
			目錄列表 :dir  menu
			dt: 上層項目
			dd: 下層項目
		 -->
		<dir>
			<li>目錄1:</li>
			<li>目錄2:</li>
			<li>目錄3:</li>
		</dir>
		<br/>
		
		<h3> 目錄(menu)列表演示,<font color="red">已經廢棄</font></h3>
		<menu style="color: red">
			<li>目錄1:</li>
			<li>目錄2:</li>
			<li>目錄3:</li>
		</menu>
		<br/>
		
		<h3> 無序(ul)列表演示</h3>
		<ul type="square">  <!-- square:方形    disc:實心圓  circle:空心圓-->
			<li>列表1:</li>
			<li>列表2:</li>
			<li>列表3:</li>
		</ul>
		<br/>
		
		<h3> 有序(ol)列表演示</h3>
		<ol type="A" start="26" style="background: pink;">
			<li>列表1:
			<li>列表2:
			<li>列表3:
		</ol>
		
		<hr align="left" width="60%"/>
		<h3>列表嵌套</h3>
		<ol type="1" start="1">
			<li>湖南城市學院</li>
				<ol type="A">
					<li>信電院
					<li>土木院
					<li>美藝院
				</ol>
			<li>清華大學
				<ol type="A">
					<li>掏糞
					<li>收破爛
				</ol>
		</ol>
		<hr align="left" width="70%"/>
		<h3>表格演示</h3>
		<table border="1" width="15%" cellspacing="0" align="center" bgcolor="pink" bordercolor="green">
			<caption>表格標題</caption>
			<tr> <th>姓名</th> <th>年齡</th> </tr>
			<tr> <td>龍</td> <td>20</td> </tr>
			<tr> <td>xjj</td> <td>19</td> </tr>
		</table>
	</body>
</html>



發佈了102 篇原創文章 · 獲贊 89 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章