公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本《细说PHP》,先跟着过一遍Web开发入门。

HTTP协议

HTTP协议:所有的WWW文件都必须遵守HTTP协议,HTTP是客户端浏览器或者其他程序与Web服务器之间的应用层通信协议。HTTP协议建立在TCP/IP协议,也就是说,是一种可靠的传输协议,意味着两台设备在传输之前必须先建立可靠连接(握手),由客户端发起到服务器端的指定端口(默认为80)HTTP请求,并且服务器上会做出相应的应答,响应该请求。

HTTP协议通过URL(Uniform Resource Locator)统一资源定位符来寻找网页,URL(例如:http://www.brophp.com/book/index.html,广告了...)由六个部分组成:1.http:// 代表超文本传输协议,通常不用输入;2.www 代表访问的是一个Web服务器;3. brophp.com/ 代表装有网页的服务器域名或者站点服务器的名称;4. book/ 代表该服务器上的一个子目录; 5. index.html 代表访问的html文件;6. 端口,如果是默认的80则可以不写

HTTP协议是一个无状态的协议,一次HTTP操作称为一次事务,客户机于服务器之间通过请求和响应完成一次会话。每次会话通信双方发送的数据称为消息。协议的工作过程分为四步:1. 建立客户机于服务器的连接;2. 客户机想服务器发送请求;3. 服务器响应该请求到客户机;4. 断开连接。

HTTP消息分为请求消息和响应消息,两种消息又分别由三个部分组成:

请求消息:由请求行、请求头、请求体组成,

其中,请求行有三个字段:方法字段、URL字段、HTTP版本字段,如:GET /book/index.html HTTP/1.1。请求字段包括GET、POST、HEAD等;URL字段表示请求对象的完整路径;

请求头有很多行组成,表明请求的详细信息,如:

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

各行分别表明:访问服务器地址、不使用持久连接(即服务器发送请求后关闭连接),访问使用的用户代理(浏览器内核型号)、服务器应该优先发送简体中文版本

请求体不是必须的,包含的是用户提交给服务器的表单内容

响应消息:由状态行、响应头、响应体组成,

其中,状态行三个字段:协议版本字段、状态码字段、原因短语字段,如:HTTP/1.1 200 OK。状态码字段有:

200:成功,服务器成功返回网页
        301:永久移动,请求的网页已经永久移动到新的位置,服务器自动将请求者转到该位置
        304:未修改,自从上次请求后,请求的网页未修改,服务器返回此响应时,不会返回网页内容
        400:错误请求,服务器不理解请求的语法
        404:未找到,服务器找不到请求的网页
        500:服务器内部错误,服务器遇到错误,无法完成请求
        502:错误网关,服务器作为网关或者代理,从上游服务器受到无效响应
        505:HTTP版本不支持,服务器不支持请求中所使用的HTTP协议版本

响应头和请求头类似,表明响应时的详细信息,如:

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

各行分别表示:不适用持久连接、Web服务器名称以及版本、对象本身的创建或者最后修改的日期或者时间、发送对象的字节数、发送对象的类型。

响应体包含了请求对应的资源、网页等内容。

回顾:Python网络编程

HTML超文本标记语言

HTML是一种超文本标记语言,在纯文本中包含HTML指令代码,通过这些代码对网页进行排版设计。每个HTML都应该包含以下主体标记:

<!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>

第一个标记表示该文本的格式为html,整个html被一个html标签涵盖,在html中,head标签定义文档的头部,是所有头部元素的容器,如其中的meta标签定义了页面的元信息,charset表明使用的字符集。title标签定义文档的标题,是head标签中唯一必须包含的东西。script标签引用一段客户端脚本。link标签链接一个外部样式表等。在body标签中,是文档的内容主体。

HTML标签总是以起始-内容-闭合组成。

HTML语法不区分大小写。

在标签中可以添加属性,属性总是以名称=值的形式在标签中出现,每个属性都是可选的,各属性之间没有先后顺序。

HTML字符实体:有一些字符在HTML中拥有特殊含义,若想输入这些字符,需要使用字体编号:

HTML内容主体中,通常包含各种格式标签:

<br >:换行
    <p>: 换段落
    <center>: 居中对齐
    <pre>: 预格式,会保留标签内文字在源代码中的格式
    <li>: 列表项目
    <ul>:无序列表
    <ol>:有序列表
    <hr>:水平分割线

在HTML中,可以使用各种文本风格标签来展示不同类型的文本,更多标签内容,可以查看w3cschool

HTML表格:

1. table标签,用于定义一个表格,以及表格边框是否可见(frame、rules)、表格边框宽度(border)、表格宽度(width)、表格高度(height)等属性

2. caption标签,用于定义表格的标题

3. tr标签,定义一行标签,其中有多个td、th标签所定义的单元格

4. td、th标签,th标签用于定义表头单元格,会着重显示,td标签用于定义数据标签,包含具体数据内容

HTML表单设计:

1. form标签,用户定义一个表单的开始和结束,其中action属性指定处理程序的程序名称,如login.php,action属性必须指定,如果不需要,也必须定义action=“no”。method属性指定处理程序获取表单内容的方式,可取值有GET和POST。GET方法将表单内容附加在URL地址后面,所以提交信息的长度不能超过8192个字符,并且GET方法不具有保密性,并且不能够传输ASCAII字符。POST方法将用户在表单中填写的数据包含在表单的主体中,一起传送到服务器处理,不会在浏览器的地址栏中显示提交的信息。

2. input标签,定义了一个输入控件,该标记是单个标记,type属性用来指定用户输入的内容,type="text”表示输入一个文本域,type="password"表示输入一个密码域。另外有一些常用的type:submit表示一个提交按钮,reset表示一个重置按钮,button表示一个不同按钮,hidden表示隐藏域,checkbox表示一个复选框,radio表示一个单选按钮,select和option表示一个下拉框,并且option指定selected属性设置默认项,如:

<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标签,定义了一个多行文本输入的区域,该区域没有长度限制。

表单实例:从表单发送电子邮件:

<html>
<body>
    <form action="MAILTO:someone@w3school.com.cn" method="post" enctype="text/plain">
    <h3>这个表单会把电子邮件发送到 W3School。</h3>
    姓名:<br />
    <input type="text" name="name" value="yourname" size="20">
    <br />
    电邮:<br />
    <input type="text" name="mail" value="yourmail" size="20">
    <br /> 
    内容:<br />
    <input type="text" name="comment" value="yourcomment" size="40">
    <br /><br />
    <input type="submit" value="发送">
    <input type="reset" value="重置">
    </form>
</body>
</html>

CSS层叠样式表

CSS表示Cascading Style Sheets,层叠样式表,CSS定义了网页的外观:字体、背景、文本、位置、布局、边缘、列表等内容,层叠样式表的含义是一组样式层叠使用,按照样式表中的属性依次显示,层叠的次序为范围从小到大,层叠的含义类似于Python中的命名空间,所以CSS会有一些面向对象的表现。通过CSS,可以将内容和样式分离,更好处理网页内容,增加工作效率。

CSS主要由选择器和声明两部分组成,通过一对大括号{},将声明组织在一起:选择器1,选择器2,选择器n{属性1:值1;属性2:值2;属性n:值n;}

CSS中,fontsize、width、height等属性需要用到长度单位,CSS中的长度单位有:em:大致为一个字符高度;px:一个像素;pt:磅;%:百分比,百分比属性相对于其他属性,以及pc、cm、mm、in等。

CSS中可以使用rgb(x,y,z)来表示颜色,也可以用rgba表示带有透明度的颜色,同时#rrggbb,#rgb等格式都可以表示颜色。

CSS中的选择器包括HTML选择器、类选择器、ID选择器、关联选择器、伪元素等;

HTML选择器指定改变某个HTML标签的样式;

类选择器以.开头,表示元素中class为该类的样式;

id选择器以#开头,表示元素id为该值的样式;

关联选择器是用空格隔开的多个单一选择器字符串,表示一个承接关系,如 .note p 表示note类中的p标签样式,这些选择器往往具有较高的优先权。

伪元素选择器表示一个元素的多个状态的样式,如:

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表示连接没有任何动作的状态;hover表示鼠标移动时的状态;active表示超链接选中的状态;visited表示访问过的超链接状态;

主要选择器的优先级为:关联选择器 > ID选择器 > 类选择器 > HTML选择器,判断优先级可以从判断范围大小入手,范围越小的,越能够精确界定到某个元素,优先级就越大。

CSS常见属性:字体属性背景属性文本属性列表属性等,详见w3cschool

鼠标光标属性:CSS可以通过cursor属性实现鼠标形状的改变:默认:default、小手:hand、交叉十字:crosshair、文本选择:text、Windows沙漏:wait、带问号的鼠标:help以及各个方向的箭头属性值。

CSS+DIV网页布局

之前有两篇随笔进行了讨论:随笔1随笔2

就不重复相同的内容,《细说PHP》最后给的例子非常的经典,做为一个展示:

HTML:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS简单的页面布局示例</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">水平导航条</div>
<div class="nav"></div>
<div id="content">
<div class="left_box border">栏目(一)</div>
<div class="right_box border">栏目(二)</div>
<div class="nav"></div>
<div class="left_box">
<div class="left border">栏目(三)</div>
<div class="right border">栏目(四)</div>
</div>
<div class="right_box">
<div class="left border">栏目(五)</div>
<div class="right border">栏目(六)</div>
</div>
</div>
<div id="sidebar">
<div class="bar border">栏目(七)</div>
<div class="nav"></div>
<div class="bar border">栏目(八)</div>
<div class="nav"></div>
<div class="bar border">栏目(九)</div>
</div>
<div class="nav"></div>
<div id="footer" class="bgcolor">页脚</div>
</div>
</body>
</html>

CSS:

 body{
margin:;
padding:;
text-align: center;
font: 12px Arial,宋体;
}
.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;
}

效果:

Web开发入门学习笔记的更多相关文章

  1. 《应用Yii1.1和PHP5进行敏捷Web开发》学习笔记(转)

    学习地址为: http://www.yiibook.com/book/agile_web_application_development_with_yii1.1_and_php5   1.建立应用程序 ...

  2. 《Flask Web开发》学习笔记

    第一部分 Flask简介 前言:想熟练掌握一门web框架,为以后即将诞生的测试工具集做准备.为什么选择flask要做熟练掌握的一门框架,而不是其他的,最主要的原因是可以随意定制. 特别提醒:这本书的代 ...

  3. HTML5移动Web开发指南-学习笔记(一)

    一,浏览器引擎    浏览器的内核引擎,基本上是四分天下: Trident: IE 以Trident 作为内核引擎; Gecko: Firefox 是基于 Gecko 开发; WebKit: Safa ...

  4. nrf51822微信开发入门学习笔记1:开始前的准备

    参考:(id:love--baby)https://blog.csdn.net/hunhun1122/article/details/68922493 微信硬件平台:https://iot.weixi ...

  5. 《Node.js入门》CentOS 6.5下Node.js Web开发环境搭建笔记

    近期想尝试一下英特尔的基于WebRTC协同通信开发套件,所以须要在本地搭建Node.js Web的开发測试环境. 这里讲的是CentOS 下的搭建方法.使用Windows的小伙伴请參考: <No ...

  6. day04 Java Web 开发入门

    day04 Java Web 开发入门 1. web 开发相关介绍 2. web 服务器 3. Tomcat服务器启动的问题 4. Tomcat目录结构 5. Web应用程序(虚拟目录映射,缺省web ...

  7. PyQt4入门学习笔记(一)

    PyQt4入门学习笔记(一) 一直没有找到什么好的pyqt4的教程,偶然在google上搜到一篇不错的入门文档,翻译过来,留以后再复习. 原始链接如下: http://zetcode.com/gui/ ...

  8. Hadoop入门学习笔记---part1

    随着毕业设计的进行,大学四年正式进入尾声.任你玩四年的大学的最后一次作业最后在激烈的选题中尘埃落定.无论选择了怎样的选题,无论最后的结果是怎样的,对于大学里面的这最后一份作业,也希望自己能够尽心尽力, ...

  9. UWP开发入门系列笔记之(一):UWP初览

    标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...

随机推荐

  1. esp8266 SDK开发之编译流程

    最近刚完成自己8266的小项目,已经发布在github上,有兴趣的朋友可以看一下 github地址:esp-ujn 1. 通过MQTT协议与服务器交互 2. 内置HTTP服务器,支持通过浏览器进行参数 ...

  2. macbookPro 搭建maven环境下载jar包

    今天要用itext的jar包,去官网看发现好像只能用maven下载,而我之前又换了电话,没办法咯,重新搭一次maven环境吧,在此记录,已便分享或自己将来查找 首选确定自己环境上jdk装好了,如果没有 ...

  3. 从零开始构建docker基础镜像

    段子 今年基本已经结束了,我问了很多朋友今年挣钱了没?大多朋友都有挣,而且挣得五花八门:有挣个屁的,有挣个锤子的,有挣个毛的,更有甚者挣个妹的,奢侈之极!最恐怖的是挣个鬼的!有的还可以,挣个球,下午我 ...

  4. Hadoop之SequenceFile

    Hadoop序列化文件SequenceFile能够用于解决大量小文件(所谓小文件:泛指小于black大小的文件)问题,SequenceFile是Hadoop API提供的一种二进制文件支持.这样的二进 ...

  5. 495A - Digital Counter

    A. Digital Counter time limit per test 1 second memory limit per test 256 megabytes input standard i ...

  6. 行编辑距离Edit Distance——动态规划

    题目描写叙述: 给定一个源串和目标串.可以对源串进行例如以下操作:  1. 在给定位置上插入一个字符  2. 替换随意字符  3. 删除随意字符 写一个程序.返回最小操作数,使得对源串进行这些操作后等 ...

  7. libmemcached的安装及測试

    1.安装memcached ~$ wget http://memcached.googlecode.com/files/memcached-1.2.8.tar.gz. $ tar xvzf lmemc ...

  8. poj 2034 Anti-prime Sequences(dfs)

    //相邻的 2.3......d 之和都要不为素数 # include <algorithm> # include <stdio.h> using namespace std; ...

  9. USACO Section 2.1 Healthy Holsteins

    /* ID: lucien23 PROG: holstein LANG: C++ */ #include <iostream> #include <fstream> #incl ...

  10. JAVA IO分析三:IO总结&文件分割与合并实例

    时间飞逝,马上就要到2018年了,今天我们将要学习的是IO流学习的最后一节,即总结回顾前面所学,并学习一个案例用于前面所学的实际操作,下面我们就开始本节的学习: 一.原理与概念 一.概念流:流动 .流 ...