Basic composition of Pc-side Web pages

Source: Internet
Author: User

first, A front-end is the most basic is the row of pages, some people will not look at the page, think is not a page, what, minutes of things, but he did not know that a page contains a lot of content, like if we do not understand margin,padding, will often cause trouble to our Pages.

To top it off, a Web page consists of three layers: the structure layer (html), the presentation layer (css), the behavior layer (js). Let's take a look at each of them, and how we use and link them to the Page.

   1> structure Layer (html):

The so-called structural layer is a frame, just want us to build the house, we have to let the framework of the house out First. So the composition of this HTML is actually very simple,

<!doctype html>

<meta charset= "UTF-8" >
<title>Document</title>

<body>

</body>

so, the above is the basic structure of our page, and we'll just put the tags we need in <body></body>, which we'll cover in detail later.

  2> Presentation Layer (css)

   We just said that the structure layer is the frame of a house, then the presentation layer (css) is we start to dress up a house, we want to make this House blue, or Purple. To get her to the north or south, give us a simple example:

<div class= "box" ></div>

. box{

width:100px;height:100px;background:blue;

}

well, This curly brace is what we're talking about, what she looks like in this box. Then this point in front of box represents the class name, which we later explain slowly. Some people say I write a lot of styles, I have to put in a file, of course not, and we do not recommend this, because this will make the page load slow, then we can put a lot of our written style in a file, the file suffix named. css. Then how do we establish a contact with the page, we say a label link, she put in head can, like this <link rel= "stylesheet" href= "css/index.css"; Index.css is our CSS file, or it can be called a cascading style Sheet.

In fact, CSS into the HTML there are three ways, the first is that we introduced above, outside the chain, but also we recommend, the second, embedded, that is style <style></style>. well, the style we've written is okay in it, like

    

<style>

. box{

width:100px;height:100px;background:blue;

}

</style>

The third kind, in line, this we generally do not recommend, the wording is very simple, <div style= "width:100px;height:100px;background:blue;" ></div>

  3> Behavior Layer (js)

The last one is the behavior layer (js), This is the most important one, this important not only refers to the page is an important part, but also about our future in the front of the road to focus on the development of one, this is still hope that we have to master, that his link in the way and CSS and the same, such as <script src= "js/jquery.js" ></script>

That is the most basic composition of our platoon, do not underestimate these things, each part of the need for our constant exploration, in order to walk on the front road more and more Stable.

Basic composition of Pc-side Web pages

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.