溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

html5中的頁(yè)面布局怎么做

發(fā)布時(shí)間：2022-03-03 09:44:34 來(lái)源：億速云 閱讀：160 作者：小新 欄目：web開發(fā)

這篇文章主要介紹html5中的頁(yè)面布局怎么做，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

瀏覽器中渲染的網(wǎng)頁(yè)由許多東西組成-logo、信息文本、圖片、超鏈接、導(dǎo)航結(jié)構(gòu)等等。

HTML5為網(wǎng)頁(yè)提供了一系列允許你創(chuàng)建結(jié)構(gòu)化布局的標(biāo)簽。這些元素通常被稱為語(yǔ)義化標(biāo)簽，因?yàn)樗鼈兡軌蚯宄亟o開發(fā)者和瀏覽器傳達(dá)它們的意義和目的。本文將討論一些有助于網(wǎng)頁(yè)布局的重要的HTML5標(biāo)簽。

html5中的頁(yè)面布局怎么做

HTML5新元素及其特性

HTML5的語(yǔ)義化標(biāo)簽以及屬性，可以讓開發(fā)者非常方便地實(shí)現(xiàn)清晰的web頁(yè)面布局，加上CSS3的效果渲染，快速建立豐富靈活的web頁(yè)面顯得非常簡(jiǎn)單。

本次學(xué)習(xí)HTML5的新標(biāo)簽元素有：

<header>定義頁(yè)面或區(qū)段的頭部；

<footer>定義頁(yè)面或區(qū)段的尾部；

<nav>定義頁(yè)面或區(qū)段的導(dǎo)航區(qū)域；

<section>頁(yè)面的邏輯區(qū)域或內(nèi)容組合；

<article>定義正文或一篇完整的內(nèi)容；

<aside>定義補(bǔ)充或相關(guān)內(nèi)容；

學(xué)習(xí)這些標(biāo)簽最好的方法當(dāng)然就是試著使用它們。雖然現(xiàn)在有很多現(xiàn)成的網(wǎng)頁(yè)布局的模板可以方便的拿來(lái)用，但是對(duì)于初學(xué)者來(lái)說(shuō)，自己實(shí)現(xiàn)簡(jiǎn)單的頁(yè)面布局絕對(duì)是有必要的。

這里通過(guò)一個(gè)簡(jiǎn)單的頁(yè)面布局的例子，來(lái)展示上述標(biāo)簽的使用方法。

示例：模仿博客首頁(yè)布局

實(shí)現(xiàn)如圖2-1的網(wǎng)頁(yè)結(jié)構(gòu)，這是一個(gè)非常典型的博客頁(yè)面：頭部、尾部、水平導(dǎo)航欄、側(cè)邊欄導(dǎo)航以及內(nèi)容。

html5中的頁(yè)面布局怎么做

圖2-1

在圖2-1中已經(jīng)看到，相應(yīng)標(biāo)簽實(shí)現(xiàn)的區(qū)域用名稱標(biāo)注了出來(lái)，比如頭部Header

在編寫頁(yè)面前，有必要說(shuō)一下：頁(yè)面元素由HTML5實(shí)現(xiàn)，而元素的顯示效果是CSS3渲染的，CSS3的代碼可以和HTML5的代碼放在同一個(gè)文件，也可以是獨(dú)立的文件，只要在HTML5文件里引用即可。建議最好各自是獨(dú)立的文件，這樣的好處有：

1）符合單一職責(zé)原則：HTML5頁(yè)面就負(fù)責(zé)管理元素，而CSS3文件只負(fù)責(zé)對(duì)相應(yīng)HTML5文件顯示效果的渲染，相互獨(dú)立，互不相交。

2）降低頁(yè)面的復(fù)雜度，便于維護(hù)：試想，當(dāng)頁(yè)面的元素?cái)?shù)量增到很多的時(shí)候，同時(shí)在一個(gè)頁(yè)面里管理元素和元素的顯示屬性，可讀性是該有多差，后期的維護(hù)會(huì)很蛋疼。

3）加快瀏覽器的加載速度：第2）點(diǎn)的另外一個(gè)好處，簡(jiǎn)單的頁(yè)面自然加載更快。

當(dāng)然，如果就是習(xí)慣HTML5+CSS3放在一個(gè)文件里，也未嘗不可，這里也只是建議。

下面來(lái)具體實(shí)現(xiàn)圖2-1。

分為兩個(gè)部分：1）HTML5文件；2）CSS3文件

一.HTML5部分

1. HTML5的文檔聲明

新建index.html文件，如果用的網(wǎng)頁(yè)編寫工具已經(jīng)支持HTML5文件類型，那么，應(yīng)該生成如下的HTML5模板：

1

2

3

4

5

6

7

8

9

1 <!DOCTYPE html>

2 <html lang="en-US">

3 <head>

4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

5 <title>Layout TEST</title>

6 </head>

7 <body>

8 </body>

9 </html>

如果網(wǎng)頁(yè)編寫工具暫時(shí)不支持HTML5也沒(méi)關(guān)系，自己寫這幾行代碼也很簡(jiǎn)單。

說(shuō)明：第一行:<!DOCTYPE html>是HTML5對(duì)文檔類型的簡(jiǎn)化，化繁為簡(jiǎn)；（文檔類型的作用：驗(yàn)證器依據(jù)它來(lái)判斷該采用何種規(guī)則去驗(yàn)證代碼；強(qiáng)制瀏覽器以標(biāo)準(zhǔn)模式渲染頁(yè)面）

2. 頭部

<header>標(biāo)簽實(shí)現(xiàn)

1

2

3

<header id="page_header">

    <h2>Header</h2>

</header>

說(shuō)明：1）header不能喝h2,h3,h4這些標(biāo)題混為一談。<header>可以包含從公司logo到搜索框在內(nèi)的各式各樣的內(nèi)容。例子中只含有標(biāo)題。

2）同一個(gè)頁(yè)面可以包含多個(gè)<header>元素。每個(gè)獨(dú)立的區(qū)塊或文章都可以含有自己的<header>.所以示例中為<header>添加唯一標(biāo)示id屬性，便于CSS3中靈活的渲染。在CSS文件里會(huì)看到id標(biāo)示的作用。

3. 尾部

<footer>標(biāo)簽實(shí)現(xiàn)

1

2

3

<footer id="page_footer">

    <h3>Footer</h3>

</footer>

說(shuō)明：位置是頁(yè)面或者區(qū)塊的尾部，用法和<header>基本一樣，也會(huì)包含其他元素，這里也指定了id.

4. 導(dǎo)航

<nav>標(biāo)簽實(shí)現(xiàn)

1

2

3

4

5

6

7

8

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><a href="#">One</a></li>

        <li><a href="#">Two</a></li>

        <li><a href="#">Three</a></li>

    </ul>

</nav>

說(shuō)明：導(dǎo)航的重要性對(duì)于一個(gè)網(wǎng)頁(yè)至關(guān)重要，快速方便的導(dǎo)航是留住訪客所必須的。

1）可以被包含在<header>或<footer>或者其他區(qū)塊中，一個(gè)頁(yè)面可以有多個(gè)導(dǎo)航。

2）導(dǎo)航一般需要CSS來(lái)渲染，隨后將會(huì)看到CSS的渲染。

5. 區(qū)塊和文章

<section>和<article>標(biāo)簽實(shí)現(xiàn)

1

2

3

4

5

6

7

8

9

<section id="posts">

        /*可以包含多個(gè)< article>*/

    <article class="post">

         /*article的內(nèi)容*/

        </article>

        <article class="post">

         /*article的內(nèi)容*/

        </article>

</section>

<section>元素將頁(yè)面的內(nèi)容合理歸類，合理布局。

下面是<article>的一般內(nèi)容

1

2

3

4

5

6

7

8

9

10

<article class="post">

        <header>

            <h3>Article Header</h3>

        </header>

        <p>Without you?I'd be a soul without a purpose.

                </p>

        <footer>

            <h3>Article Footer</h3>

        </footer>

</article>

可以看到它可以包含很多元素。

6. 旁白和側(cè)邊欄

<aside>標(biāo)簽實(shí)現(xiàn)旁白，側(cè)邊欄則由<section>實(shí)現(xiàn)。

<aside>是為主內(nèi)容添的附加信息，入引言，圖片等

1

2

3

4

<aside>

    <p>sth. in aside

    </p>

</aside>

<aside>一般加在<article>中使用

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<article class="post">

        <header>

            <h3>Article Header</h3>

        </header>

        <aside>

            <p>sth. in aside

            </p>

        </aside>

        <p>Without you?I'd be a soul without a purpose.

                </p>

        <footer>

            <h3>Article Footer</h3>

        </footer>

</article>

側(cè)邊欄，不是旁白！看做是右面的一個(gè)區(qū)域，包含鏈接，用<section>和<nav>實(shí)現(xiàn)即可。

1

2

3

4

5

6

7

8

9

10

<section id="sidebar">

    <nav>

    <ul>

          <li><a href="2012/04">April 2012</a></li>

          <li><a href="2012/03">March 2012</a></li>

          <li><a href="2012/02">February 2012</a></li>

          <li><a href="2012/01">January 2012</a></li>

    </ul>

    </nav>

</section>

到這里，每種標(biāo)簽的使用就是這樣了，下面是HTML5的完整代碼index.html文件

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

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="style.css" type="text/css">

<title>Layout TEST</title>

</head>

 

<body>

    <h3>body</h3>

    <header id="page_header">

        <h2>Header</h2>

        <nav>

            <ul>

                <li><a href="#">Home</a></li>

                <li><a href="#">One</a></li>

                <li><a href="#">Two</a></li>

                <li><a href="#">Three</a></li>

            </ul>

        </nav>

    </header>

    <section id="posts">

        <h3>Section</h3>

        <article class="post">

            <h3>article</h3>

            <header>

                <h3>Article Header</h3>

            </header>

            <aside>

                <h3>Article Aside</h3>

            </aside>

            <p>Without you?I'd be a soul without a purpose.

                        </p>

            <footer>

                <h3>Article Footer</h3>

            </footer>

        </article>

        <article class="post">

            <h3>article</h3>

            <header>

                <h3>Article Header</h3>

            </header>

            <aside>

                <h3>Article Aside</h3>

            </aside>

            <p>Without you?I'd be a soul without a purpose. </p>

            <footer>

                <h3>Article Footer</h3>

            </footer>

        </article>

    </section>

 

    <section id="sidebar">

        <h3>Section</h3>

        <header>

            <h3>Sidebar Header</h3>

        </header>

        <nav>

            <h4></h4>

            <ul>

                <li><a href="2012/04">April 2012</a></li>

                <li><a href="2012/03">March 2012</a></li>

                <li><a href="2012/02">February 2012</a></li>

                <li><a href="2012/01">January 2012</a></li>

            </ul>

        </nav>

    </section>

 

    <footer id="page_footer">

        <h3>Footer</h3>

    </footer>

 

</body>

</html>


二.CSS3部分

對(duì)于CSS文件，最好能夠根據(jù)HTML文件的樹結(jié)構(gòu)，對(duì)應(yīng)到相應(yīng)的元素，有組織有層次的進(jìn)行元素屬性的渲染。這樣既能夠不遺漏元素，又便于查找修改。當(dāng)然根據(jù)個(gè)人的習(xí)慣來(lái)定就好。

CSS3的屬性定義更加豐富，這里不再贅述，網(wǎng)上有CSS3參考手冊(cè)，用的時(shí)候查一查就好。更或者，連查都懶得查，還有專門的CSS3控件代碼生成工具和網(wǎng)站，例如http://css-tricks.com/examples/，豐富的控件效果示例可以下載。還可以搜一些類似的。

這里直接貼出CSS3代碼 style.css文件

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

91

92

93

94

95

@charset "utf-8";

/* CSS Document */

body { /*整個(gè)頁(yè)面的屬性設(shè)定*/

    background-color: #CCCCCC; /*背景色*/

    font-family: Geneva, sans-serif; /*可用字體*/

    margin: 10px auto; /*頁(yè)邊空白*/

    max-width: 800px;

    border: solid; /*邊緣立體*/

    border-color: #FFFFFF; /*邊緣顏色*/

}

 

h3 { /*設(shè)定整個(gè)body內(nèi)的h3的共同屬性*/

    text-align: center; /*文本居中*/

}

 

header { /*整個(gè)body頁(yè)面的header適用*/

    background-color: #F47D31;

    color: #FFFFFF;

    text-align: center;

}

 

article { /*整個(gè)body頁(yè)面的article適用*/

    background-color: #eee;

}

 

p { /*整個(gè)body頁(yè)面的p適用*/

    color: #F36;

}

 

nav,article,aside { /*共同屬性*/

    margin: 10px;

    padding: 10px;

    display: block;

}

 

header#page_header nav { /*header#page_header nav的屬性*/

    list-style: none;

    margin: 0;

    padding: 0;

}

 

header#page_header nav ul li { /*header#page_header nav ul li屬性*/

    padding: 0;

    margin: 0 20px 0 0;

    display: inline;

}

 

section#posts { /*#posts 的section屬性*/

    display: block;

    float: left;

    width: 70%;

    height: auto;

    background-color: #F69;

}

 

section#posts article footer { /*section#posts article footer屬性*/

    background-color: #039;

    clear: both;

    height: 50px;

    display: block;

    color: #FFFFFF;

    text-align: center;

    padding: 15px;

}

 

section#posts aside { /*section#posts aside屬性*/

    background-color: #069;

    display: block;

    float: right;

    width: 35%;

    margin-left: 5%;

    font-size: 20px;

    line-height: 40px;

}

 

section#sidebar { /*section#sidebar屬性*/

    background-color: #eee;

    display: block;

    float: right;

    width: 25%;

    height: auto;

    background-color: #699;

    margin-right: 15px;

}

 

footer#page_footer { /*footer#page_footer屬性*/

    display: block;

    clear: both;

    width: 100%;

    margin-top: 15px;

    display: block;

    color: #FFFFFF;

    text-align: center;

    background-color: #06C;

以上是“html5中的頁(yè)面布局怎么做”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手