Home > Developer > Web Develop
HTML/CSS Basic Frame structure explained
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title></title>
<style></style>
<body></body>
Comments:
No matter how much you write, it's written in this basic framework!
<! DOCTYPE html>---- This is a statement as a HTML5 document, just like you write a note on a piece of paper, this piece of paper is a reason to leave.
Text description page between and , you can imagine the same as the whole strip of leave.
write rules between and <body> and </body> Between the content. Head is the meaning of the brain, similar to the mind to judge the shape of the object you see and to make some rules.
Head> and respectively have <meta charset= "Utf-8" > <title></title> < Style></style>.
<meta charset= "Utf-8" > is the provisions of the Loadline table is internationally recognized the most widely used, like a lot of foreign languages and English is the most extensive, loadline table is a well-established text of the display rules, some pages will show garbled is loadline table reason!
<title></title> is written between the title is to give a summary of the page, for example, open Baidu is in the top display Baidu's name.
650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M01/92/F8/wKioL1kGGDTRgmuWAAB5L0QccGE577.png-wh_500x0-wm_ 3-wmp_4-s_4043172373.png "title=" 2017-05-01_005337.png "alt=" Wkiol1kggdtrgmuwaab5l0qccge577.png-wh_50 "/>
Between <style> and </style> is to rule <body> and </body> The style of the display content between.
The text between <body> and </body> is visible in the content of the page , just like the eye sees something, the shape of something such as: long, wide, high, color, etc. .. have the brain to analyze and judge the rules between and rule out <body> and </body> between the content.
Let's write an example.
<! DOCTYPE html>
<meta charset= "Utf-8" >
<title> tian Zi ge </title>
<style>
Div
{
width:100px;
height:100px;
Background: #7fff00;
Border:solid 10px Black;
Float:left;
}
. Big
{
margin:0px Auto;
width:240px;
height:240px;
border:0px;
}
</style>
<body>
<div class= "Big" >
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
Note:<div></div> By default is a high 0x width of 0 blocks in <style ></style> defines the width, height, and background color of the Div , the style and colors of the border, and floats to the left.
<div></div> It is a big div to put four small packets up, so wide and high not the same, give this big div a The ID is very . Big. that represents class .
Open the result to
650) this.width=650; "Src=" https://s4.51cto.com/wyfs02/M02/92/F8/wKioL1kGGGDwX-8sAAAd5FEbuQY733.png-wh_500x0-wm_ 3-wmp_4-s_3648461798.png "title=" 2017-05-01_005306.png "alt=" Wkiol1kgggdwx-8saaad5febuqy733.png-wh_50 "/>
This article is from the "arrogant Colonel" blog, make sure to keep this source http://wwwlyl.blog.51cto.com/12832074/1920901
Web Development HTML/CSS basic framework structure explained
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
