HTML列表css
列表標籤html
標籤 | 描述 |
---|---|
<ol> | 定義有序列表。 |
<ul> | 定義無序列表。 |
<li> | 定義列表項。 |
<dl> | 定義定義列表。 |
<dt> | 定義定義項目。 |
<dd> | 定義定義的描述。 |
<dir> | 已廢棄。使用 <ul> 代替它。 |
<menu> | 已廢棄。使用 <ul> 代替它。 |
經常使用的列表app
1. 無序列表工具
使用標籤: <ul>, <li>佈局
屬性: disc, circle, square學習
示例:開發工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>聊表</title> </head> <body> <!--無序列表, 列表項爲li--> <!--disc 實心圓, circle 空心圓, square 實行正方形, 依次更改運行看下--> <ul type="disc"> <li>apple</li> <li>orange</li> <li>bananer</li> <li>Berry</li> </ul> </body> </html>
2. 有序列表spa
使用標籤<ol>, <li>code
屬性: A, a, I, i, starthtm
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!--有序列表, 列表項爲li--> <!--A: 以A,B,C...排序 a: 以a,b,c...排序 I: 以I, II, III...排序 i: 以i,ii,iii...排序 start: 本身定義排序的第一個--> <ol type="i"> <li>iOS</li> <li>Android</li> <li>Java</li> <li>Swift</li> <li>Objective-C</li> </ol> </body> </html>
3. 嵌套列表(包含有序列表嵌套, 無序列表嵌套)
使用標籤<ul>, <ol>, <li>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表</title> </head> <body> <!----> <ul type="square"> <li>iOS</li> <ul> <li>iPhone</li> <li>iWatch</li> <li>iPod</li> <li>iPad</li> </ul> <li>Android</li> <ul> <li>Any Call</li> <li>Oppo</li> <li>Vivio</li> <li>Huawei</li> </ul> <li>Objective-C</li> </ul> </body> </html>
4. 自定義列表
使用標籤<dl>, <dt>, <dd>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自定義列表</title> </head> <body> <!--定義自定義列表--> <dl> <!--定義自定義項目--> <dt>cast:</dt> <!--定義自定義描述--> <dd>vi. 1投擲扔拋, 2丟棄, 拋棄 3把...投向, 拋射, 4分派..., 扮演角色 5鑄造, 澆鑄 n. 全體演員</dd> <dt>forecast:</dt> <dd>v. 預測, 預報, /dd> <dd>n. 預測, 預報<</dd> <dt>insight:</dt> <dd>n. 洞察力, 領悟 v. 洞悉, 瞭解</dd> </dl> </body> </html>
HTML塊
1. HTML塊元素
塊元素在顯示時, 一般會以新行開始
如: <h1>, <p>, <ul>
2. HTML內聯元素
內聯元素一般不會以新行開始
如: <b>, <a>, <img>
3. HTML <div>元素
<div>元素也被稱爲塊元素, 其主要是組合HTML的容器
4. HTML <span>元素
span元素是內聯元素, 可做爲文本的容器
例:可粘貼運行一下查看效果(開發工具IntelliJ IDEA)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>塊元素</title> <!--樣式--> <style type="text/css"> #wraper p{ color: blueviolet; } #span span{ color: indianred; } </style> </head> <body> <!--塊元素--> <h1>visual:</h1> <p>視力的, 視覺的</p> <!--內聯元素--> <b>vision:</b> <a>1視力, 2眼光,遠見, 洞察力 3幻想 4設想, 念頭</a> <!--div元素--> <div id="wraper"> <p>prospective</p> <a>1可能的,有望的 2將來的, 即將發生的</a> </div> <!--span元素: 文本的容器--> <div id="span"> <p>respective: <span>分別的,</span> 各自的</p> </div> </body> </html>
HTML佈局
推薦兩種方式:
1. 使用<div>元素佈局
例:css代碼中其實div不用加, 一般也不用添加
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div佈局</title> <style type="text/css"> body{margin: 0px} div#container{ /*能夠充滿全屏*/ width: 100%; height: 950px; background-color: darkgray; } div#heading{ width: 100%; height: 10%; background-color: aqua; } div#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } div#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } div#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style> </head> <body> <div id="container"> <div id="heading">頭部</div> <div id="menu">內容菜單</div> <div id="mainbody">內容主體</div> <div id="footing">底部</div> </div> </body> </html>
2. 使用<table>元素佈局
例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table佈局</title> </head> <body marginheight="0px" marginwidth="0px"> <table width="100%" height="950" style="background-color: darkgray"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: aqua"> 頭部 </td> </tr> <tr> <td width="20%" height="80%" style="background-color: cornflowerblue"> <ul> <li>diktatet</li> <li>diktator</li> <li>diktation</li> </ul> </td> <td width="60%" height="80%" style="background-color: cadetblue">中間部分</td> <td width="20%" height="80%" style="background-color: crimson">右菜單</td> </tr> <tr> <td width="100%" height="10%" colspan="3" style="background-color: coral">底部</td> </tr> </table> </body> </html>
歡迎你們提問和評論, 我盡我所能的爲你們解答, 一塊兒學習, 共同成長~
南心芭比: 熱愛分享, 收穫快樂~