HTML清單
清單標籤
| 描述 | |
| #定義無序列表。 | |
| #定義清單項目。 | |
| dl>#定義定義清單。 | |
| #定義定義項目。 |
#定義定義的描述。
<
dir
<!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><!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>## &## 使用標籤
<!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)### 元素佈局###### 例: css程式碼中其實p不用加, 通常也不用加### 以上是HTML5學習筆記（四）-列表, 區塊和佈局程式碼實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！################### ##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>登入後複製### 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>登入後複製
相關標籤：
來源：php.cn
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
2023-03-15 16:54:01
2023-03-15 12:26:02
2023-03-14 18:58:01
2023-03-14 11:30:01
1970-01-01 08:00:00
2023-03-16 15:20:01
1970-01-01 08:00:00
1970-01-01 08:00:00
1970-01-01 08:00:00
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
相關專題
更多>
熱門教學
更多>
php入門教程之一週學會PHP
4236230
JAVA 初級入門影片教學
2431324
小甲魚零基礎入門學習Python影片教學
499905
PHP 零基礎入門教學
838093
