當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

HTML5学习笔记四: 列表, 块和布局

發(fā)布時間：2023/12/18 HTML 18 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML5学习笔记四: 列表, 块和布局小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

HTML列表

　　列表標簽

標簽描述

<ol>	定義有序列表。
<ul>	定義無序列表。
<li>	定義列表項。
<dl>	定義定義列表。
<dt>	定義定義項目。
<dd>	定義定義的描述。
<dir>	已廢棄。使用 <ul> 代替它。
<menu>	已廢棄。使用 <ul> 代替它。

常用的列表

1. 無序列表

使用標簽: <ul>, <li>

屬性: disc, circle, square

示例:

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>聊表</title> </head> <body>   <ul type="disc"><li>apple</li><li>orange</li><li>bananer</li><li>Berry</li> </ul> </body> </html>

2. 有序列表

使用標簽<ol>, <li>

　　屬性: A, a, I, i, start

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>列表</title> </head> <body>   <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內聯(lián)元素

　　內聯(lián)元素通常不會以新行開始

　　如: <b>, <a>, <img>

　　3. HTML <div>元素

　　<div>元素也被稱為塊元素, 其主要是組合HTML的容器

　　4. HTML <span>元素

　　span元素是內聯(lián)元素, 可作為文本的容器

　　例:可粘貼運行一下查看效果(開發(fā)工具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 id="wraper"><p>prospective</p><a>1可能的,有望的 2未來的, 即將發(fā)生的</a> </div>  <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>

歡迎大家提問和評論, 我盡我所能的為大家解答, 一起學習, 共同成長~

南心芭比: 熱愛分享, 收獲快樂~?　

轉載于:https://www.cnblogs.com/winsoncheung/p/6559629.html

總結

以上是生活随笔為你收集整理的HTML5学习笔记四: 列表, 块和布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： .....
下一篇： 2017年html5行业报告,云适配发布