H5的块级标签汇总


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来H5的块级标签汇总,怎么使用H5的块级标签?H5的块级标签使用的注意事项有哪些,下面就是实战案例,一起来看一下。

块级元素,简单来说,就是自己独占一行的元素。其特点:

①总是在新行上开始;

 ②高度,行高以及外边距和内边距都可控制;

 ③宽度缺省是它的容器的100%,除非设定一个宽度。

④它可以容纳内联元素和其他块元素

汇总代码如下:

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

<!doctype html> 

<html

<head

    <meta charset="UTF-8"

    <title>Document</title

</head

<body

    <!-- 块状元素 独占一行 --> 

    <!-- div无语义,称它为盒子 --> 

    <div>盒子</div

    <!-- h1-h6语义 定义标题 --> 

    <h1>标题1</h1

    <h2>标题2</h2

    <h6>标题3</h6

    <!-- p 语义 段落标签 写文字--> 

    <p>文章</p

    <!-- 列表多数用来存一系列的相似的数据 --> 

    <!-- 有序列表 --> 

    <ol

        <li>导航1</li

        <li>导航2</li

        <li>导航3</li

    </ol

    <!-- 无序列表 --> 

    <ul

        <li>导航1</li

        <li>导航2</li

        <li>导航3</li

    </ul

    <!-- 定义列表 解释某个名词 --> 

    <dl

        <dt>名词</dt

        <dd>解释名词的位置</dd

    </dl

    <!-- 表格 渲染性能不好 少用 --> 

    <table

        <caption>表格头部</caption

        <!-- tr是行 --> 

        <tr

            <!-- th表头 --> 

            <th>星期一</th

            <th>星期二</th

        </tr

        <tr

            <!-- td单元格 --> 

            <td>上课</td

            <td>上课</td

        </tr

    </table

</body

</html>

相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

相关阅读:

H5怎么做出拖拽效果

关于老版本的浏览器不兼容H5和C3的处理方法

H5的CanvasAPI怎样绘制图形

以上就是H5的块级标签汇总的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5中的script属性及js同步和异步加载实现代码详解

html块级标签,行内标签,行内块标签的显示模式有哪些

h5 语义化标签介绍

利用图片预加载组件提升HTML5移动页面的用户体验

HTML5里面class属性是什么

分享用HTML5来实现一个3d逼真的圣诞树

HTML5开发实例-threejs实现粒子动画飘花效果代码分享

HTML5 高级教程之web storage

HTML5新特性之移动设备api

HTML5动画有什么用?

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...