HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例
HTML清單
清單標籤
| 描述 | |
| #定義無序列表。 | |
| #定義清單項目。 | |
| dl>#定義定義清單。 | |
| #定義定義項目。 |
#定義定義的描述。
<
dir- 代替它。
- 代替它。
常用的清單1. 無序列表使用標籤:
-
: disc, circle, square範例:2. 有序列表 屬性: A, a, I, i, start<!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>登入後複製3. 嵌套列表(包含有序列表嵌套, 無序列表嵌套) 使用標籤<!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>登入後複製- ,
- 4. 自訂列表
<!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>登入後複製## &## 使用標籤
- , <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區塊元素
塊元素在顯示時, 通常會以新行開始如:
,
,
# 2. HTML
內聯元素內嵌元素通常不會以新行開始
如: , ,
3. HTML
元素
元素也被稱為塊元素, 其主要是組合HTML的容器####### 4. HTML 元素######## 4. HTML 元素## #### span元素是內聯元素, 可作為文字的容器###### 例:可貼上執行查看效果(開發工具IntelliJ IDEA)###
################### ##HTML佈局##################推薦兩種方式:####### 1. 使用<!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> <!--p元素--><p id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><!--span元素: 文本的容器--><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>登入後複製元素佈局###### 例: css程式碼中其實p不用加, 通常也不用加###
### 2. 使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{margin: 0px} p#container{ /*可以充满全屏*/ width: 100%; height: 950px; background-color: darkgray; } p#heading{ width: 100%; height: 10%; background-color: aqua; } p#menu{ width: 30%; height: 80%; background-color: darkorange; float: left; } p#mainbody{ width: 70%; height: 80%; background-color: brown; float: left; } p#footing{ width: 100%; height: 10%; background-color: cornflowerblue; clear: both; } </style></head><body><p id="container"> <p id="heading">头部</p> <p id="menu">内容菜单</p> <p id="mainbody">内容主体</p> <p id="footing">底部</p></p></body></html>登入後複製元素佈局###### 例:###
############ 例:###rrreee##########<!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>登入後複製以上是HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題3 週前 By DDD如何修復KB5055523無法在Windows 11中安裝？2 週前 By DDDInzoi：如何申請學校和大學4 週前 By DDD如何修復KB5055518無法在Windows 10中安裝？2 週前 By DDD在哪裡可以找到Atomfall中的站點辦公室鑰匙4 週前 By DDD
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
- ,
- ,
