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> ® <u>加下劃線的字</u> <strike>加刪除線的字</strike> <br/>
X < Y Y > X
<!--
在html中特殊字符需要使用下面方式表示
空格符: “<”符號 :< “>”符號: >
“&”符號: & “"”符號:"
"®"符號: ® “©”:© “ ™ ”: ™
-->
</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>