company web The project is finally about to start , This thought django Learning can be done in real combat , It turns out that Drupal frame , ok , Then we will PHP Walk up , Bought a book 《 Elaborate PHP》, I'll go over it first Web Introduction to development .

HTTP agreement

HTTP agreement : be-all WWW All documents must be complied with HTTP agreement ,HTTP It's a client browser or other program with Web Application layer communication protocol between servers .HTTP The agreement is based on TCP/IP agreement , in other words , It's a reliable transport protocol , It means that two devices must establish a reliable connection before transmission ( handshake ), The specified port initiated by the client to the server ( The default is 80)HTTP request , And the server will respond accordingly , In response to the request .

HTTP Agreement passed URL(Uniform Resource Locator) Unify resource locators to find web pages ,URL( for example :http://www.brophp.com/book/index.html, It's advertising ...) It's made up of six parts :1.http:// For hypertext transfer protocol , Usually you don't have to type ;2.www The representative visited a Web The server ;3. brophp.com/ Represents the domain name of the server with the web page or the name of the web server ;4. book/ Represents a subdirectory on the server ; 5. index.html Representatives visited html file ;6. port , If it's the default 80 You can not write

HTTP A protocol is a stateless protocol , once HTTP An operation is called a transaction , The client completes a session between the server through request and response . The data sent by both sides in each session is called a message . The working process of the protocol is divided into four steps :1. Establish a connection between the client and the server ;2. The client wants the server to send the request ;3. The server responds to the request to the client ;4. disconnect .

HTTP Messages are divided into request messages and response messages , The two kinds of messages are composed of three parts :

The request message : By the requesting line 、 Request header 、 The request body consists of ,

among , The request line has three fields : Method fields 、URL Field 、HTTP Version field , Such as :GET /book/index.html HTTP/1.1. The request fields include GET、POST、HEAD etc. ;URL Field represents the full path of the request object ;

The request header consists of many lines , Indicates the details of the request , Such as :

Host:www.brophp.com
        Connection:close
        User-agent:Mozilla/4.0
        Accept-language:zh-cn

Each line indicates : Access server address 、 Do not use persistent connections ( That is, the server sends the request and closes the connection ), Access the user agent used ( Browser kernel model )、 The server should send the simplified Chinese version first

The requester is not required , It contains the form content submitted by the user to the server

The response message : From the status line 、 Response head 、 The response body consists of ,

among , The status line has three fields : Protocol version field 、 Status code field 、 The reason phrase field , Such as :HTTP/1.1 200 OK. The status code fields are :

200: success , The server successfully returned to the web page
        301: A permanent move , The requested page has been permanently moved to a new location , The server automatically transfers the requester to that location
        304: not changed , Since last request , The requested page has not been modified , When the server returns this response , Page content will not be returned
        400: Wrong request , The server does not understand the syntax of the request
        404: Not found , The server could not find the requested page
        500: Server internal error , Server encountered an error , Unable to complete request
        502: Bad Gateway , Server as gateway or agent , Invalid response received from upstream server
        505:HTTP Version not supported , The server does not support HTTP Protocol version

The response header is similar to the request header , Show the details of the response , Such as :

Connection:close
        Server:Apache/2.2.9(Unix)
        Last-Nodified:Mon,22 Jun 2008 09;23;24; GMT
        Content-Length:6821
        Content-Type:text/html

Each line represents : Not for persistent connections 、Web Server name and version 、 The date or time when the object itself was created or last modified 、 The number of bytes sent to the object 、 The type of sending object .

The response body contains the resources corresponding to the request 、 Web pages, etc .

review :Python Network programming

HTML Hypertext markup language

HTML It's a hypertext markup language , Include... In plain text HTML Instruction code , Through these codes for page layout design . Every HTML Should contain the following body tags :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script src="script/main.js”></script>
        <link rel=“stylesheet” href="stype/main.css”/>
    </head>
    <body>

</body>
</html>

The first tag indicates that the format of the text is html, Whole html By a html The label covers , stay html in ,head label Define the header of the document , It's the container for all the head elements , Such as meta label Defines the meta information of the page ,charset Indicates the character set used .title Tags define the title of the document , yes head The only thing that must be included in the label .script label Reference a client script .link label Link an external style sheet, etc . stay body In the label , Is the content body of the document .

HTML Labels always start with - Content - Closed form .

HTML Syntax is case-insensitive .

You can add attributes to the tag , Property is always named = The form of the value appears in the tag , Each attribute is optional , There is no order between the attributes .

HTML Character entities : There are some characters in HTML Has a special meaning in , If you want to enter these characters , You need to use font numbers :

HTML In the main body of the content , Usually contains various format tags :

<br >: Line break
    <p>: Change the paragraph
    <center>: Align center
    <pre>: Preformation , The format of the text in the label in the source code will be preserved
    <li>: List items
    <ul>: Unordered list
    <ol>: Ordered list
    <hr>: Horizontal split line

stay HTML in , You can use various text style tags to display different types of text , More tag content , You can see w3cschool

HTML form :

1. table label , Used to define a table , And whether the table border is visible (frame、rules)、 Table border width (border)、 Table width (width)、 Table height (height) Equal attribute

2. caption label , Used to define the title of the table

3. tr label , Define a line of labels , There are many of them td、th Cell defined by label

4. td、th label ,th Labels are used to define header cells , It will highlight ,td Tags are used to define data tags , Contains specific data content

HTML Form design :

1. form label , The user defines the beginning and end of a form , among action Property specifies the program name of the handler , Such as login.php,action Property must specify , If you don't need to , You have to define action=“no”.method Property specifies how the handler gets the content of the form , There are GET and POST.GET Method to attach the form content to URL After the address , So the length of the submitted information cannot exceed 8192 Characters , also GET Methods are not confidential , And can't transmit ASCAII character .POST Method to include the data filled in by the user in the main body of the form , Send it to the server for processing , The submitted information will not be displayed in the address bar of the browser .

2. input label , Defines an input control , The tag is a single tag ,type Property is used to specify what the user enters ,type="text” Represents entering a text field ,type="password" Means to enter a password field . There are also some commonly used type:submit Represents a submit button ,reset Represents a reset button ,button Represents a different button ,hidden Indicates the hidden domain ,checkbox Represents a check box ,radio Represents a radio button ,select and option Represents a drop-down box , also option Appoint selected Property to set the default , Such as :

<html>
<body>
    <form>
        <select name="cars">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="fiat" selected="selected">Fiat</option>
        <option value="audi">Audi</option>
        </select>
    </form>
</body>
</html>

3. textarea label , Defines an area for multiple lines of text input , There is no length limit to this area .

Form instance : Send email from form :

<html>
<body>
    <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
    <h3> This form will send an email to W3School.</h3>
    full name :<br />
    <input type="text" name="name" value="yourname" size="20">
    <br />
    Email :<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br /> 
    Content :<br />
    <input type="text" name="comment" value="yourcomment" size="40">
    <br /><br />
    <input type="submit" value=" send out ">
    <input type="reset" value=" Reset ">
    </form>
</body>
</html>

CSS Cascading style sheets

CSS Express Cascading Style Sheets, Cascading style sheets ,CSS Defines the appearance of a web page : typeface 、 background 、 Text 、 Location 、 Layout 、 edge 、 List, etc , Cascading style sheets means that a set of styles are cascaded , Display in order of the attributes in the style sheet , The stacking order is from small to large , The meaning of cascade is similar to Python The namespace in , therefore CSS There will be some object-oriented representations . adopt CSS, You can separate content from style , Better handling of web content , Increase work efficiency .

CSS It is mainly composed of selector and declaration , Through a pair of braces {}, Put the statements together : Selectors 1, Selectors 2, Selectors n{ attribute 1: value 1; attribute 2: value 2; attribute n: value n;}

CSS in ,fontsize、width、height And so on, we need to use the unit of length ,CSS The unit of length in is :em: It's about one character high ;px: One pixel ;pt: pounds ;%: percentage , The percentage attribute is relative to other attributes , as well as pc、cm、mm、in etc. .

CSS Can be used in rgb(x,y,z) To show color , It can also be used. rgba Represents a color with transparency , meanwhile #rrggbb,#rgb And other formats can represent colors .

CSS The selectors in include HTML Selectors 、 Class selectors 、ID Selectors 、 Association selector 、 Pseudo elements, etc ;

HTML The selector specifies to change a HTML Style of label ;

Class selector to . start , In the element class For the style of this class ;

id Selector to # start , Show elements id Is the style of the value ;

Association selectors are multiple single selector strings separated by spaces , It's a connection , Such as .note p Express note Class p Label style , These selectors tend to have higher priority .

Pseudo element selectors represent the style of multiple states of an element , Such as :

a:link{    color:red;};
a:hover{    color:yellow;    font-size: 125%;};
a:active{    color: blue;    font-size: 125%;};
a:visited{    color: green;    font-size: 85%;};

link Indicates that the connection has no action ;hover Represents the state of the mouse as it moves ;active Indicates the state of the hyperlink selection ;visited Indicates the state of the visited hyperlink ;

The priority of the main selector is : Association selector > ID Selectors > Class selectors > HTML Selectors , Judging priority can start with judging range size , The smaller the scope , The more precisely you can define an element , The higher the priority .

CSS Common properties : Font properties Background properties Text attribute A list of attributes etc. , See w3cschool

Mouse cursor properties :CSS Can pass cursor Property to change the shape of the mouse : Default :default、 Little hands :hand、 Cross :crosshair、 Text selection :text、Windows hourglass :wait、 Mouse with question mark :help And arrow attribute values in all directions .

CSS+DIV Page layout

Two essays have been discussed before : essays 1 essays 2;

Don't repeat the same thing ,《 Elaborate PHP》 The last example is very classic , As a demonstration :

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS A simple example of page layout </title>
<link rel="stylesheet" href="my.css" type="text/css">
</head>
<body>
<div id="container">
<div id="header">
<div id="logo" class="bgcolor">LOGO</div>
<div id="banner">
<div id="left" class="bgcolor">BANNER1</div>
<div id="right" class="bgcolor">BANNER2</div>
</div>
</div>
<div class="nav"></div>
<div id="menu" class="bgcolor"> Horizontal navigation bar </div>
<div class="nav"></div>
<div id="content">
<div class="left_box border"> The column ( One )</div>
<div class="right_box border"> The column ( Two )</div>
<div class="nav"></div>
<div class="left_box">
<div class="left border"> The column ( 3、 ... and )</div>
<div class="right border"> The column ( Four )</div>
</div>
<div class="right_box">
<div class="left border"> The column ( 5、 ... and )</div>
<div class="right border"> The column ( 6、 ... and )</div>
</div>
</div>
<div id="sidebar">
<div class="bar border"> The column ( 7、 ... and )</div>
<div class="nav"></div>
<div class="bar border"> The column ( 8、 ... and )</div>
<div class="nav"></div>
<div class="bar border"> The column ( Nine )</div>
</div>
<div class="nav"></div>
<div id="footer" class="bgcolor"> The footer </div>
</div>
</body>
</html>

CSS:

 body{
margin:;
padding:;
text-align: center;
font: 12px Arial, Song style ;
}
.border{
border:1px solid #888;
}
.bgcolor{
background: #DDD;
}
#container{
width: 960px;
margin: 0 auto;
}
#header{
float: left;
width: 100%;
height: 80px;
}
#logo{
float: left;
width: 200px;
height: 80px;
}
#banner{
float: right;
width: 750px;
}
#banner #left{
float: left;
width: 540px;
height: 80px;
}
#banner #right{
float: right;
width: 200px;
height: 80px;
}
.nav{
float: left;
height: 10px;
width: 100%;
overflow: hidden;
clear: both;
}
#menu{
float: left;
width: 100%;
height: 30px;
}
#sidebar{
float: right;
width: 200px;
height: 410px;
}
#sidebar .bar{
float: left;
width: 100%;
height: 130px;
}
#content{
float: left;
width: 750px;
}
#content .left_box{
float: left;
width: 370px;
height: 200px;
}
#content .right_box{
float: right;
width: 370px;
height: 200px;
}
#content .left{
float: left;
width: 180px;
height: 200px;
}
#content .right{
float: right;
width: 180px;
height: 200px;
}
#footer{
float: left;
width: 100%;
height: 60px;
}

effect :

Web More articles on developing introductory learning notes

  1. 《 application Yii1.1 and PHP5 Be agile Web Development 》 Learning notes ( turn )

    The learning address is : http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5   1. Building applications ...

  2. 《Flask Web Development 》 Learning notes

    The first part Flask brief introduction Preface : Want to master a door web frame , Prepare for the upcoming test toolset . Why choose flask To make a skillful framework , Not the others , The main reason is that you can customize it . Special reminder : The generation of this book ...

  3. HTML5 Move Web Development of guidelines - Learning notes ( One )

    One , Browser engine    The browser's kernel engine , It's basically a quarter of the world : Trident: IE With Trident As a kernel engine ; Gecko: Firefox Is based on Gecko Development ; WebKit: Safa ...

  4. nrf51822 Wechat development introductory learning notes 1: Preparation before start

    Reference resources :(id:love--baby)https://blog.csdn.net/hunhun1122/article/details/68922493 Wechat hardware platform :https://iot.weixi ...

  5. 《Node.js introduction 》CentOS 6.5 Next Node.js Web Development environment building notes

    I'd like to try Intel based on WebRTC Collaborative communications Development Suite , So it needs to be built locally Node.js Web Development and test environment for . This is about CentOS How to set up under the environment . Use Windows Please refer to : <No ...

  6. day04 Java Web Introduction to development

    day04 Java Web Introduction to development 1. web Development related introduction 2. web The server 3. Tomcat Problems with server startup 4. Tomcat Directory structure 5. Web Applications ( Virtual directory mapping , default web ...

  7. PyQt4 Introduction notes ( One )

    PyQt4 Introduction notes ( One ) Nothing good has been found pyqt4 A tutorial for , By chance google I found a good introductory document on , Translate it , I'll review it later . The original link is as follows : http://zetcode.com/gui/ ...

  8. Hadoop Introduction notes ---part1

    With the progress of graduation project , Four years of college is coming to an end . Let you play for four years of the University's last homework, finally in the fierce topic dust settled . No matter what topic you choose , No matter what the final result is , For this last assignment in the University , I hope I can do my best , ...

  9. UWP Notes on developing the introductory series ( One ):UWP First look

    label : With Microsoft Build2015 The good news ,Win10 The day of official release is getting closer and closer to us , We are finally glad to see : A unified Windows The platform is attractive to developers , This game is very big -- On ...

Random recommendation

  1. Android Insert pictures into the system album , There will be two in the album The same picture ( It's just that the size of the picture doesn't match )

    When this method is called to insert a picture into the system album , Two identical pictures will appear in the album MediaStore.Images.Media.insertImage One picture is the original, one picture is the thumbnail . In the form of :android4.4. ...

  2. linux Service nfs

    development language :rpc Programming environment Server side : stay linux Deployment under the platform client : It's usually cli Under the interface mount command Related packages :rpcbind,nfs-utils background http://nfs.sourceforge. ...

  3. UIButton Set up UIControlStateSelected and UIControlStateHighlighted Status picture click will flash solution

    [btn setBackgroundImage:img1 forState:UIControlStateSelected|UIControlStateHighlighted]; [btn setIma ...

  4. Careercup - Google Interview questions - 4557716425015296

    2014-05-03 21:57 Topic link The original title is : Many sticks with length, every time combine two, the cost is the sum of tw ...

  5. IIS tilde directory enumeration Vulnerabilities and solutions

    2015 year 6 month 16 Japan 15:19:24   appear  IIS tilde directory enumeration Loophole  Acunetix Web Vulnerability Scanner 9.5 Test out ...

  6. linux Next stricky

    Read the article links http://www.linuxdiyf.com/viewarticle.php?id=79380   suid.sgid It's easy to understand ,stricky Often forget the meaning , Take a note :   This bit is only configured for directory ...

  7. Java Develop online troubleshooting commands that must be mastered

    As a qualified Developer , Not only to be able to write well but also to code , Another very important skill is to check the problem . The troubleshooting problems mentioned here are not just coding In the process of debug etc. , What's more, it's about troubleshooting online problems . Because in a production environment , Generally, there is no way to ...

  8. Pedestrian Attributes Recognition Paper List

    Pedestrian Attributes Recognition Paper List  2018-12-22 22:08:55 [Note] you may also check the upda ...

  9. hdu 5092 Line clipping ( The minimum sum of the longitudinal lines is + The output path )

    http://acm.hdu.edu.cn/showproblem.php?pid=5092 Give me a m*n Matrix , Find a vertical " Line " Make the sum of lines minimum and output this line , The line can go to 8 In two directions ...

  10. APP Performance testing begins

    Do you have the same problems at work as me ,APP After the version goes online, there will be constant feedback from marketing personnel or users that the page loads slowly , Enter the page loading Very long ( The actual loading timeout we set is 15 second ,15 If the content is loaded within seconds, it will be displayed ,15 In seconds ...