HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例-H5教程-PHP中文網

HTML清單

　　清單標籤

描述定義有序列表。

#定義無序列表。

#定義清單項目。 <

#定義定義項目。








dl>#定義定義清單。

#定義定義的描述。

dir

>#已廢棄。使用

已廢棄。使用

##屬性

: 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. 有序列表

使用標籤

, < ;li>

<!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>

登入後複製

<!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. 自訂列表

## &##　　使用標籤

, <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)###
<!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 id="wraper"> <p>prospective</p> <a>1可能的,有望的 2未来的, 即将发生的</a></p><p id="span"> <p>respective: <span>分别的,</span> 各自的</p></p></body></html>
登入後複製
################### ##HTML佈局##################推薦兩種方式:#######　　1. 使用
元素佈局######　　例: css程式碼中其實p不用加, 通常也不用加###
<!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>
登入後複製
###　　2. 使用元素佈局######　　例:###
<!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>
登入後複製
############　　例:###rrreee##########
以上是HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5，布局，列表

來源：php.cn

上一篇：HTML5學習筆記（三）-HTML5樣式, 連接與表格程式碼詳解下一篇：詳解HTML5預測取代本地App將成為可能

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

作者最新文章

從零開始打造自己的PHP框架的影片資料

2023-03-15 16:54:01

PHPMailer如何利用QQ信箱完成郵件傳送功能的實例分析

2023-03-15 12:26:02

php中關於IMAP如何收取電子郵件的方法介紹

2023-03-14 18:58:01

php如何快速實現數組去重的實例

2023-03-14 11:30:01

html中關於標籤的全部屬性的使用總結

1970-01-01 08:00:00

php基礎知識總結（新手入門必備）

2023-03-16 15:20:01

JavaScript中typeof的使用方法介紹

1970-01-01 08:00:00

JavaScript中confirm()方法的使用介紹

1970-01-01 08:00:00

HTML5 Placeholder屬性的詳情介紹

1970-01-01 08:00:00

ReactJS中表單的單選多選與反選的實作方法

1970-01-01 08:00:00

最新問題

實作一個網格佈局，包含3列，其中一個項目跨越整個第一列的高度我想在CSS中偏移1列內容。我認為就像執行以下操作一樣簡單。現在，這確實偏移了頂部，但它使第二列與第一列的高度（包括邊距）相符。我還能如何偏移第一列？ https://jsbin....

來自於 2024-04-02 09:05:41

0

1

301

CSS 可以顯示網格線嗎？我開始學習CSS的網格佈局。在理想的情況下，我將能夠設置一個div多個網格框，並將我的元素精確地放置在其中，在需要時提供疊加（有點像在Illustrator中使用粘在網格上）。如果...

來自於 2024-03-31 20:38:21

0

2

395

React.js CSS 視窗寬度我正在使用React開發一個響應式網站。對於樣式，我使用CSS樣式表。回應部分是使用@media查詢在CSS中實現的。問題是，當我使用Chrome時，元素看起來更大，佈局就像我從較...

來自於 2024-03-31 16:31:23

0

1

386

相關專題
更多>

html5動畫製作有哪些製作方法

 HTML與HTML5的差別

 Linux查看連接埠的方法

 耳機插在電腦上沒有反應是怎麼回事

 資料加密儲存都包含哪些

 dubbo和zookeeper有什麼差別

 linux中rm-rf指令是什麼意思

 html title標籤的作用

熱門推薦

h5是什麼

不懂程式碼怎麼製作h5頁？ H5頁面製作平台推薦

html5的新特性有哪些

什麼是h5頁面製作

h5和小程式有什麼差別

熱門教學
更多>

相關教學

熱門推薦

最新課程

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1417324

php入門教程之一週學會PHP

4258318

JAVA 初級入門影片教學

2479037

小甲魚零基礎入門學習Python影片教學

504088

PHP 零基礎入門教學

844333

最新ThinkPHP 5.1全球首發影片教學(60天成就PHP大牛線上訓練課程)

1417324次學習

JAVA 初級入門影片教學

2479037次學習

小甲魚零基礎入門學習Python影片教學

504088次學習

Web前端開發極速入門

215314次學習

零基礎精通 PS 影片教學

877895次學習

【web前端】Node.js快速入門

6458次學習

國外Web開發全端課程全集

5076次學習

Go語言實戰之 GraphQL

4262次學習

550W粉絲大佬手把手從零學JavaScript

634次學習

python大神Mosh，零基礎小白6小時完全入門

21712次學習

最新下載
更多>

網站特效

網站源碼

網站素材

前端模板

[表單按鈕] jQuery企業留言表單聯絡程式碼

[播放器特效] HTML5 MP3音樂盒播放特效

[選單導航] HTML5酷炫粒子動畫導覽選單特效

[表單按鈕] jQuery可視化表單拖曳編輯程式碼

[播放器特效] VUE.JS仿酷狗音樂播放器代碼

[html5特效] 經典html5推箱子小遊戲

[圖片特效] jQuery滾動添加或減少圖片特效

[相簿特效] CSS3個人相簿封面懸停放大特效

[前端模板] 家居裝潢清潔維修服務公司網站模板

[前端模板] 清新配色個人求職履歷引導頁模板

[前端模板] 設計師創意求職履歷網頁模板

[前端模板] 現代工程建築公司網站模板

[前端模板] 教育服務機構響應式HTML5模板

[前端模板] 網上電子書店商城網站模板

[前端模板] IT技術解決互聯網公司網站模板

[前端模板] 紫色風格外匯交易服務網站模板

[PNG素材] 可愛的夏天元素向量素材(EPS+PNG)

[PNG素材] 四個紅色的 2023 畢業徽章的向量素材(AI+EPS+PNG)

[banner圖] 唱歌的小鳥和裝滿花朵的推車設計春天banner向量素材(AI+EPS)

[PNG素材] 金色的畢業帽向量素材(EPS+PNG)

[PNG素材] 黑白風格的山脈圖示向量素材(EPS+PNG)

[PNG素材] 不同顏色披風和不同姿勢的超級英雄剪影向量素材(EPS+PNG)

[banner圖] 扁平風格的植樹節banner向量素材(AI+EPS)

[PNG素材] 九種漫畫風格的爆炸聊天氣泡向量素材(EPS+PNG)

[前端模板] 家居裝潢清潔維修服務公司網站模板

[前端模板] 清新配色個人求職履歷引導頁模板

[前端模板] 設計師創意求職履歷網頁模板

[前端模板] 現代工程建築公司網站模板

[前端模板] 教育服務機構響應式HTML5模板

[前端模板] 網上電子書店商城網站模板

[前端模板] IT技術解決互聯網公司網站模板

[前端模板] 紫色風格外匯交易服務網站模板

關於我們免責聲明 Sitemap

PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！