Talk about the structure of a html page

来源：互联网发布：80端口哪个运营商编辑：程序博客网时间：2024/06/18 05:18

At the first time I study html to build a web page ,it is not so hard to understand what the tags mean and how to use them .But when the first time I got a project form my mentor ,and my job was not to build the page with html and obviously css , javascript ,but to modify a demo for building a new page .Actually that was not difficult .And I was told that not just to copy ,paste and delete ,I had to figure out what I don't understand that something I don't know yet .So that was my beginning .And I finally did it .

Alright go to the thing .How to build the html file of a web page ?

First I wanna tell you a normal web page can't work without css and javascript ...So how should we build ?One :you can write the css in the '<style></style>' tag or you can just write them in the tag with a style property .But it is so complicated and not simple .But we can use the '<link/>' tag to import the css file like this :

<link rel="stylesheet" href="mycss.css" />

JUST like this ,you can create a css file in your project files list and you can write the css classes in the css file .So simple .But here is the thing :you might wonder where you write that tag .Yeah ,let me tell you .So my way is :because the page is loaded form the head of the html file to the end ,so there are two choices we get : you can write it in the head tag before the body or you can write it in the end before the '</body>' tag .When the page is loading in the browser ,it can't see the effect of the css classes if you load the css file in the end and it is bad for the users'experience .So you should write it like this :

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>MyTitle</title>    <link rel="stylesheet" href="mycss.css" /></head>

And the second thing ,what about the javascript ?It also can write in the html file with the '<script></script>' .But same problem . I think something already come up in your mind .In most of cases ,the javascript code is not gonna change the page without event like click .So you can write the tag in the end before the '</body>' tag like this:

<script type="text/javascript" src="myjavascript.js"></script></body></html>

So here you go .What about the body ?What's in the body ?

When you get the design of the web page ,you should study it on the whole page .It means you should see how many big parts of the whole page ?For example ,if your page likes this :

How many parts you think ?You can see there are three parts of this page ,the navigate ,the search input with a logo and the news part .So you can write three div tags in the body and add some css classes for them to make them more perfect like this :

<div class="navi"></div><div class="input"></div><div class="news"></div>

And for example ,the navi ,there are two big parts ,the left and the right .So you can write two div tags in the first div tag .Or you can see it in the other way that there are 15 parts in the navi ,it is not wrong .It is up to you .So you can write like this :

<div class="navi">    <div class="left"></div>    <div class="right"></div></div>

So you can complete the page like this way .Hope this would help you~Have a good day !

1 0