首頁 > web前端 > H5教程 > HTML5中div標籤的實例程式碼

HTML5中div標籤的實例程式碼

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<!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中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板