How to make html5 page layout

Introduction

The web page rendered in the browser is composed of many things - logo, informational text, pictures, hyperlinks, navigation structure and so on.

HTML5 provides a series of tags for web pages that allow you to create a structured layout. These elements are often called semantic tags because they clearly communicate their meaning and purpose to developers and browsers. This article will discuss some important HTML5 tags that help in web page layout.

HTML5 new elements and their characteristics

HTML5’s semantic tags and attributes can make it very convenient for developers to achieve clarity With the web page layout and CSS3 effect rendering, it is very simple to quickly create rich and flexible web pages.

The new tag elements for learning HTML5 this time are:

• ##

  Define the header of the page or section;

• Definition of the footer of a page or section;

• ##

  Definition The navigation area of ​​a page or section;

##
The logical area or content combination of a page;
Define text or complete content;
##
Define supplementary or related content;
The best way to learn these tags is of course to try using them. Although there are many ready-made web page layout templates that can be easily used, for beginners, it is absolutely necessary to implement a simple page layout by yourself.
Here is a simple page layout example to show how to use the above tags.

Example: Imitate the layout of the blog homepage

Realize the web page structure as shown in Figure 2-1, which is a very typical blog page: head, tail, horizontal navigation columns, sidebar navigation, and content.

Figure 2-1

As you can see in Figure 2-1, the areas implemented by the corresponding tags are marked with names, such as Header

Before writing the page, it is necessary to say that the page elements are implemented by HTML5, and the display effect of the elements is rendered by CSS3. The CSS3 code can be placed in the same file as the HTML5 code, or it can be independent files, as long as they are referenced in HTML5 files. It is recommended that each be an independent file. The benefits are:

1) Comply with the single responsibility principle: the HTML5 page is responsible for managing elements, while the CSS3 file is only responsible for rendering the display effect of the corresponding HTML5 file, independent of each other. , do not intersect with each other.

2) Reduce the complexity of the page and facilitate maintenance: Just imagine, when the number of elements on the page increases to a lot, how readable it will be if the elements and the display attributes of the elements are managed on one page at the same time. Poor, subsequent maintenance will be a pain in the ass.

3) Speed ​​up the loading speed of the browser: Another benefit of point 2) is that simple pages will naturally load faster.

Of course, if you are used to putting HTML5 CSS3 in one file, it is not a bad idea. Here are just suggestions.

Let’s implement Figure 2-1 in detail.

is divided into two parts: 1) HTML5 file; 2) CSS3 file

##1.HTML5 part

1. HTML5 document declaration

Create a new index.html file. If the web page writing tool used already supports the HTML5 file type, then the following HTML5 template should be generated:

 
 1 nbsp;html>
 2 
 3 
 4 <meta>
 5 <title>Layout TEST</title>
 6 
 7 
 8 
 9 

It doesn’t matter if the web page writing tool does not support HTML5 for the time being. It is very simple to write these lines of code yourself. Explanation: The first line:

DOCTYPE html

> is HTML5’s simplification of document types, simplifying the complex; (Document type Function: The validator uses it to determine which rules should be used to verify the code; forcing the browser to render the page in standard mode) 2. Header

tag implementation

<header>
    <h1 id="Header">Header</h1>
</header>

Note: 1) The header cannot be confused with the titles h1, h2, and h3.

can contain everything from your company logo to a search box. The example contains only the title.

2) The same page can contain multiple

elements. Each independent block or article can contain its own

. Therefore, in the example, a unique id attribute is added to

to facilitate flexible rendering in CSS3. You will see the role of the id tag in the CSS file.

3. Footer

tag implementation

<footer>
    <h2 id="Footer">Footer</h2>
</footer>

Description: The position is the end of the page or block, and the usage is the same as

4. Navigation

tag implementation

<nav>
    <ul>
        <li><a>Home</a></li>
        <li><a>One</a></li>
        <li><a>Two</a></li>
        <li><a>Three</a></li>
    </ul>
</nav>

Description: The importance of navigation is vital to a web page. Fast and convenient navigation is necessary to retain visitors.

1）可以被包含在

或

或者其他区块中，一个页面可以有多个导航。

2）导航一般需要CSS来渲染，随后将会看到CSS的渲染。

5. 区块和文章

和

标签实现

<section>
        /*可以包含多个*/
    <article>
         /*article的内容*/
        </article>
        <article>
         /*article的内容*/
        </article>
</section>

元素将页面的内容合理归类，合理布局。

下面是

的一般内容

<article>
        <header>
            <h2 id="Article-Header">Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose. 
                </p>
        <footer>
            <h2 id="Article-Footer">Article Footer</h2>
        </footer>
</article>

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

6. 旁白和侧边栏

标签实现旁白，侧边栏则由

实现。

是为主内容添的附加信息，入引言，图片等

<aside>
    <p>sth. in aside
    </p>
</aside>

一般加在

中使用

<article>
        <header>
            <h2 id="Article-Header">Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose. 
                </p>
        <footer>
            <h2 id="Article-Footer">Article Footer</h2>
        </footer>
</article>

侧边栏，不是旁白！看做是右面的一个区域，包含链接，用

和

实现即可。

<section>
    <nav>
    <ul>
          <li><a>April 2012</a></li>
          <li><a>March 2012</a></li>
          <li><a>February 2012</a></li>
          <li><a>January 2012</a></li>
    </ul>
    </nav>
</section>

到这里，每种标签的使用就是这样了，下面是HTML5的完整代码index.html文件

nbsp;html>


<meta>
<link>
<title>Layout TEST</title>



    <h2 id="body">body</h2>
    <header>
        <h1 id="Header">Header</h1>
        <nav>
            <ul>
                <li><a>Home</a></li>
                <li><a>One</a></li>
                <li><a>Two</a></li>
                <li><a>Three</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h2 id="Section">Section</h2>
        <article>
            <h2 id="article">article</h2>
            <header>
                <h2 id="Article-Header">Article Header</h2>
            </header>
            <aside>
                <h2 id="Article-Aside">Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose. 
                        </p>
            <footer>
                <h2 id="Article-Footer">Article Footer</h2>
            </footer>
        </article>
        <article>
            <h2 id="article">article</h2>
            <header>
                <h2 id="Article-Header">Article Header</h2>
            </header>
            <aside>
                <h2 id="Article-Aside">Article Aside</h2>
            </aside>
            <p>Without you?I'd be a soul without a purpose. </p>
            <footer>
                <h2 id="Article-Footer">Article Footer</h2>
            </footer>
        </article>
    </section>

    <section>
        <h2 id="Section">Section</h2>
        <header>
            <h2 id="Sidebar-Header">Sidebar Header</h2>
        </header>
        <nav>
            <h3></h3>
            <ul>
                <li><a>April 2012</a></li>
                <li><a>March 2012</a></li>
                <li><a>February 2012</a></li>
                <li><a>January 2012</a></li>
            </ul>
        </nav>
    </section>

    <footer>
        <h2 id="Footer">Footer</h2>
    </footer>

二.CSS3部分

对于CSS文件，最好能够根据HTML文件的树结构，对应到相应的元素，有组织有层次的进行元素属性的渲染。这样既能够不遗漏元素，又便于查找修改。当然根据个人的习惯来定就好。

CSS3的属性定义更加丰富，这里不再赘述，网上有CSS3参考手册，用的时候查一查就好。更或者，连查都懒得查，还有专门的CSS3控件代码生成工具和网站，例如http://css-tricks.com/examples/，丰富的控件效果示例可以下载。还可以搜一些类似的。

这里直接贴出CSS3代码 style.css文件

@charset "utf-8";
/* CSS Document */
body { /*整个页面的属性设定*/
    background-color: #CCCCCC; /*背景色*/
    font-family: Geneva, sans-serif; /*可用字体*/
    margin: 10px auto; /*页边空白*/
    max-width: 800px;
    border: solid; /*边缘立体*/
    border-color: #FFFFFF; /*边缘颜色*/
}

h2 { /*设定整个body内的h2的共同属性*/
    text-align: center; /*文本居中*/
}

header { /*整个body页面的header适用*/
    background-color: #F47D31;
    color: #FFFFFF;
    text-align: center;
}

article { /*整个body页面的article适用*/
    background-color: #eee;
}

p { /*整个body页面的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;
}

相信无需多解释，一看就能明白。

想要让页面的显示更精美绚丽，CSS3好好看看吧。

目前来看，HTML5的简单但强大，CSS3的丰富，二者结合能做出怎样的惊人的效果真的很令人期待。

The above is the detailed content of How to make html5 page layout. For more information, please follow other related articles on the PHP Chinese website!