简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > H5教程 > 主體

HTML5中div標籤的實例程式碼

不言
發布： 2018-08-09 15:01:10
原創
3359 人瀏覽過

这篇文章给大家介绍的内容是关于HTML5中div标签的实例代码，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <link rel="stylesheet" href="CSS\17-p.css"> -->
<style>
/* 块元素的特点
1.默认宽度 父元素的百分百；一致
2.霸占一行
3.支持全部样式
*/
.box{
width: 100px;
height: 50px;
background-color: red;
}
span{
/* 1.行内元素排列一行，遇到边界 会自动换行 */
background-color: red;
/* 2.宽高有内容决定 不支持宽高 不支持margin上下 */
width: 200px;
height: 200px;
margin: 100px 20px;
/* 3.padding上下有问题 */
/* padding: 50px 20px; */
}
</style>
</head>
<body>
<p class="box"></p>
<p>段落</p>
<h1>标题标签</h1>
<!-- ol>li{有序$}*5 -->
<ol>
<li>有序1</li>
<li>有序2</li>
<li>有序3</li>
<li>有序4</li>
<li>有序5</li>
</ol>
<!-- ul>li{无序$}*3 -->
<ul>
<li>无序1</li>
<li>无序2</li>
<li>无序3</li>
</ul>
<!-- dl>dd{定义列表}*3 -->
<dl>
<dt>title</dt>
<dd>定义列表</dd>
<dd>定义列表</dd>
<dd>定义列表</dd>
</dl>
<form action="">
<label for="">标注</label>
<input type="text" name="" id="">
</form>
<span>行内元素</span>
<span>行内元素</span>
</body>
</html>
登入後複製

运行效果如下：

HTML5中div標籤的實例程式碼

相关推荐：

HTML5属性：form表单属性的用法实例

HTML5的option属性：如何使用option属性实现级联下拉列表

以上是HTML5中div標籤的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
HTML5中div标签
來源：php.cn
上一篇：HTML5屬性：form表單屬性的用法實例 下一篇：HTML5屬性：margin屬性的用法實例
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
SQL Count() 也需要 0 我只有一張表，我想計算起始為0的標籤的每個條目現在我嘗試這樣：SELECT標籤，COUNT(start)ASAnzahl，user_idFROMdatensammlung其中(st...
來自於 2024-04-06 19:48:53
0
1
449
為什麼我的 hr 標籤設定為白色純色時是半透明的？ 我有一個html（帶有引導程式）和一個CSS，在我的html中我有一個<hr>標籤，它有一個類，然後在我的CSS中我有它的邊框樣式。它是半透明的，你可以看到白色，但它不...
來自於 2024-04-06 16:13:26
0
1
500
如何讓我的圖像顯示在頁面的主顯示幕上？ 我想做的是使用NASAAPI接收一些照片。然後在我的網頁的縮圖和主顯示屏上顯示這些照片。我只是弄清楚為什麼程式碼不從縮圖中獲取圖像並將其顯示在頁面上。我還使用HTML5以上版本的模...
來自於 2024-04-06 15:33:12
0
1
433
父級的填充被黏性定位的子級忽略 如何防止黏性元素進入標題後面？當前程式碼片段在父級上使用填充頂部，我也嘗試在額外的子級上使用margin-top或透明50px邊框，但它似乎不起作用。我知道在這種情況下我可以輕鬆地...
來自於 2024-04-06 11:42:51
0
1
338
為什麼刪除連結後工具提示仍然有效？ 只有當我刪除連結時，我才能看到帶有工具提示的div標籤。這兩者有何關係？ div內容未與連結一起出現。 .tooltip{position:relative;display:inl...
來自於 2024-04-05 09:51:08
0
1
1419
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！