TML 支持有序、無序和定義列表
實例
無序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個無序列表:</h4>
<ul>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示無序列表。
有序列表
[demo]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<ol>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
</body>
</html>
[/demo]
本例演示有序列表。
無序列表
無序列表是一個項目的列表,此列項目使用粗體圓點(典型的小黑圓圈)進行標記。
無序列表始于 <ul> 標簽。每個列表項始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
瀏覽器顯示如下:
Coffee
Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
有序列表
同樣,有序列表也是一列項目,列表項目使用數字進行標記。
有序列表始于 <ol> 標簽。每個列表項始于 <li> 標簽。
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
瀏覽器顯示如下:
Coffee
Milk
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
定義列表
自定義列表不僅僅是一列項目,而是項目及其注釋的組合。
自定義列表以 <dl> 標簽開始。每個自定義列表項以 <dt> 開始。每個自定義列表項的定義以 <dd> 開始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
瀏覽器顯示如下:
Coffee
Black hot drink
Milk
White cold drink
定義列表的列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
更多實例
不同類型的無序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>Disc 項目符號列表:</h4>
<ul type="disc">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Circle 項目符號列表:</h4>
<ul type="circle">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
<h4>Square 項目符號列表:</h4>
<ul type="square">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ul>
</body>
</html>
[/demo]
本例演示一個無序列表。
不同類型的有序列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>數字列表:</h4>
<ol>
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>字母列表:</h4>
<ol type="A">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫字母列表:</h4>
<ol type="a">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>羅馬字母列表:</h4>
<ol type="I">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
<h4>小寫羅馬字母列表:</h4>
<ol type="i">
<li>蘋果</li>
<li>香蕉</li>
<li>檸檬</li>
<li>桔子</li>
</ol>
</body>
</html>
[/demo]
本例演示不同類型的有序列表。
嵌套列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示如何嵌套列表。
嵌套列表 2
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h4>一個嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>紅茶</li>
<li>綠茶
<ul>
<li>中國茶</li>
<li>非洲茶</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
</body>
</html>
[/demo]
本例演示更復雜的嵌套列表。
定義列表
[demo]
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2>一個定義列表:</h2>
<dl>
<dt>計算機</dt>
<dd>用來計算的儀器 ... ...</dd>
<dt>顯示器</dt>
<dd>以視覺方式顯示信息的裝置 ... ...</dd>
</dl>
</body>
</html>
[/demo]
本例演示一個定義列表。
列表標簽
標簽 描述
<ol> 定義有序列表。
<ul> 定義無序列表。
<li> 定義列表項。
<dl> 定義定義列表。
<dt> 定義定義項目。
<dd> 定義定義的描述。
<dir> 已廢棄。使用 <ul> 代替它。
<menu> 已廢棄。使用 <ul> 代替它。
下是一個使用HTML和CSS實現綻放的煙花的示例代碼:
```html
<!DOCTYPE html>
<html>
<head>
<title>綻放的煙花</title>
<style>
.firework {
position: relative;
width: 100px;
height: 100px;
background-color: #ff0000;
border-radius: 50%;
animation: explode 1s ease-in-out infinite;
}
@keyframes explode {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
</head>
<body>
<div class="firework"></div>
</body>
</html>
```
這段代碼創建了一個`div`元素,并將其樣式設置為一個圓形的紅色煙花。使用CSS的動畫效果,通過`@keyframes`定義了一個名為`explode`的動畫,使煙花在1秒鐘內以縮放的方式產生綻放效果。動畫會無限循環播放,直到頁面關閉。
你可以將上述代碼保存為一個HTML文件,并在瀏覽器中打開,就能看到綻放的煙花效果了。希望你喜歡!
TML(HyperText Markup Language)是一種用于創建網頁的標記語言。它由一系列的標簽組成,這些標簽用于描述網頁的結構和內容。HTML標簽通常由尖括號包圍,例如<tag>。
HTML標簽可以分為兩類:塊級元素和內聯元素。塊級元素用于組織網頁的結構,例如段落、標題、列表等。內聯元素用于標記文本中的特定部分,例如鏈接、強調文本等。
HTML標簽可以包含屬性,屬性提供了有關標簽的額外信息。例如,<a>標簽用于創建鏈接,可以使用href屬性指定鏈接的目標URL。
除了標簽和屬性,HTML還支持一些特殊字符實體,用于表示特殊字符,例如小于號(<)、大于號(>)等。
HTML可以與CSS(層疊樣式表)和JavaScript一起使用,以增強網頁的外觀和功能。CSS用于控制網頁的樣式,例如顏色、字體、布局等。JavaScript用于實現交互性和動態效果,例如表單驗證、動畫等。
通過使用HTML,開發人員可以創建具有結構良好、易于理解和導航的網頁。它是構建互聯網的基礎之一,被廣泛應用于網站開發和內容管理系統。
HTML的語法由標簽、屬性和內容組成。下面是HTML的基本語法規則:
下面是一個簡單的HTML示例:
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
</head>
<body>
<h1>歡迎來到我的網頁</h1>
<p>這是一個段落。</p>
<a href="https://www.example.com">點擊這里</a>訪問示例網站。
</body>
</html>
在這個示例中,<!DOCTYPE html>聲明了文檔類型為HTML5。<html>標簽是HTML文檔的根元素。<head>標簽用于定義文檔的頭部信息,例如標題和樣式表。<title>標簽定義了網頁的標題,將顯示在瀏覽器的標題欄中。<body>標簽用于定義文檔的主體內容。<h1>標簽定義了一個一級標題,<p>標簽定義了一個段落,<a>標簽定義了一個鏈接。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。