HTML列表

twc829發表於2016-05-05

  • HTML列表分類:

無序列表,不考慮排序,<ul>+<li>,常用於導航

有序列表,結構化列表,考慮排序,<ol>+<li>

定義列表,當作字典或術語,包含定義和描述,<dl>+<dt>+<dd>(其中,dl表示定義列表,dt定義術語,dd定義描述)

  • 舉例:

無序列表:

                <ul>
			<li><a href="contact.html">Contact Us</a></li>
			<li><a href="prices/freshwater-fish-prices.html">Price List</a></li>
			<li><a href="http://www.163.com" target="_blank">Link to Netease Web</a></li>
			<li><a href="downloads/all-prices.pdf">Download C++ book</a></li>
		</ul>


注意:這是預設樣式,可使用CSS重新佈置這些列表,將其並排放置;也可移除小圓點,將其設計成方形點或什麼都不顯示等;

有序列表:

		<ol>
			<li>Step One</li>
			<li>Step Two
				<ol>
					<li>Step 2.1</li>
					<li>Step 2.2</li>
					<li>Step 2.3</li>
				</ol>
			</li>
			<li>Step Three</li>
		</ol>


定義列表:

		<dl>
			<dt>Unordered list</dt>
			<dd>Unordered list is a list without any consideration to order</dd>
			<dt>Odered list</dt>
			<dd>This is a list in which order is important</dd>
			<dt>Definition list</dt>
			<dd>Definition list contains terms and description, much like a dictionary</dd>
		</dl>



相關文章