H5语义标签实际案例


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

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

页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素,然后检查它的语义是否适合你的布局很重要。

  The HTML5 Structure

有一点很重要,当编写HTML5代码的时候,不要简单地把<div>标签用html5中的<section>标签代替。有些时候<div>元素在语义

上仍然是一个很不错的选择。比如wrapper或者container div

其中一个新的可以用来替换传统的div元素的标签是<header>元素。在<header>元素中我们也可以放置用来包裹页面的主要导航菜单

的<nav>元素。包含了一个锚点的h1元素是我们blog的标题。


最开始的时候我使用<section>来包裹页面的内容,但是在阅读了一些文档之后,感觉这样在语义上并不是100%正确。还是选择了div元素,

在div元素内部,每一篇博客都包裹在它自己的article元素里面。


在一系列博客的下方,有一对分页链接。通常分页链接的重要性并不和<nav>(可以被用在多个地方,并不只是主导航)元素

对等。但是本次这个博客布局还是把分页链接作为一个主导航处理。


在<aside>元素被修订之前,语义上并没有一个专门的元素作为侧边栏。不过,现在可以放心地使用aside元素儿而不用担心语法上的问题。

本示例中aside元素中包含了若干个section元素。在侧边栏的底部有一个简单的搜索框。它可以让我们接触到HTML5表单的一些新特性。

其中的一个就是placeholder属性


布局最后以footer元素结束。本示例中footer元素需要放置在div容器的外部,这样可以使footer元素的宽度横跨整个页面。

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

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

header {

    margin: 0 0 98px 0;

}

     

    header h1 {

        float: left; font-size: 36px;

        font-weight: normal;

    }

     

    header nav {

        float: right; text-align: right;

        padding: 6px 0 0 0;

    }

        header nav ul {

            list-style: none;

        }

            header nav li {

                float: left; font-size: 18px;

                width: 136px; margin: 0 0 0 20px;

            }

             

            header nav li:nth-child(1):before {

                content: "1. ";

                color: #a2a2a2;

            }

            header nav li:nth-child(2):before {

                content: "2. ";

                color: #a2a2a2;

            }

            header nav li:nth-child(3):before {

                content: "3. ";

                color: #a2a2a2;

            }

            header nav li:nth-child(4):before {

                content: "4. ";

                color: #a2a2a2;

            }

            header nav li:nth-child(5):before {

                content: "5. ";

                color: #a2a2a2;

            }

#sidebar {

width: 292px; float: left;

padding: 4px 0 0 0;

}

#sidebar h3 {

font-size: 18px; font-weight: normal;

margin: 0 0 25px 0;

}

#sidebar ul {

list-style: none;

}

#sidebar section {

margin: 0 0 47px 0;

}

#sidebar #about a.more {

display: block; text-align: right;

}

#sidebar #categories {

width: 136px; float: left;

margin: 0 20px 0 0;

}

#sidebar #social {

width: 136px; float: left;

}

#footer-container {

    background: rgba(0,0,0,0.2);

    overflow: hidden;

}

    footer {

        width: 916px; margin: 0 auto; padding: 10px 22px 50px 22px;

    }

    footer #credits {

        list-style: none; float: left;

        }          

        footer #credits li {

            float: left; margin: 0 6px 0 0;

        }

            footer #credits li.wordpress a {

                display: block; width: 20px; height: 20px;

                background: url(images/credits.png) no-repeat 0 0; text-indent: -9999px;

            }

            footer #credits li.spoongraphics a {

                display: block; width: 25px; height: 20px;

                background: url(images/credits.png) no-repeat -30px 0; text-indent: -9999px;

            }

                 

        footer #back-top {

            float: right; font-size: 12px;

        }

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

相关阅读:

H5怎么做出拖拽效果

怎样使用H5调用摄像头

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

以上就是H5语义标签实际案例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5 内联 svg

h5调用相机拍照并压缩图片

如何使用HTML5+css3实现粒子效果文字动画特效(附完整代码)

HTML5怎么禁止横屏

HTML5转义实体字符的使用详解

h5新特性的用法:监听app自带的返回键

HTML5的drag和drop的用法示例(代码)

HTML5 canvas中如何绘制图像

HTML5无刷新改变当前url

HTML5中canvas的问题总结

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




打赏

取消

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

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

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

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

评论

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

    暂无评论...