前端技术概要
HTML 裸体 只需要记住20个标签就可以搞定98%的网页
CSS 穿衣服 颜色和位置
Javascript 赋予生命，使其具有能动性。
HTML的本质以及在web程序中的作用
#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes('HTTP/1.1 200 OK
', encoding='utf-8'))
client.send(bytes('Hello, Seven.', encoding='utf-8'))
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 8000))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
然后在浏览器上输入：http://localhost:8000,就会立刻返回 "Hello,Seven.",从本质上来说web服务就是socket服务端，浏览器就是socket客户端。只不过nginx，apache等WEB服务会在上面做了很多的优化。
可以对返回的内容进行着色，修改
#!/usr/bin/env python
# _*_ coding:utf-8 _*_
import socket
def handle_request(client):
buf = client.recv(1024)
client.send(bytes('HTTP/1.1 200 OK
', encoding='utf-8'))
client.send(bytes("<h1 style='background-color:red;'>Hello, Seven.<h1>", encoding='utf-8'))
def main():
sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
sock.bind(('localhost', 8000))
sock.listen(5)
while True:
connection, address = sock.accept()
handle_request(connection)
connection.close()
if __name__ == '__main__':
main()
服务器永远返回的是字符串，而在此时浏览器返回的是红色的字体，则是由浏览器解析到。因此我们必须学习浏览器的解析规则。要发送的字符串的内容（send(xxxxxxx)），我们则可以单独把他写到一个文件中(html文件)，然后读取即可。
HTML规则
-
HTML规则为一套浏览器认识的规则。
-
开发者：
学习HTML规则
开发后台程序：
- 写HTML文件（充当模版的作用） *******
- 数据库获取数据，然后替换到html文件指定位置（这里后面会有web框架专门来做这个事情） -
本地测试
- 找到文件路径，直接浏览器（chrome）打开
- pycharm打开（Pycharm有时会有问题。） -
编写html文件
- document对应关系
- HTML标签，标签内部可以写属性，切记一个文件中HTML标签只能有一个
- 注释： <!-- 注释的内容 --> -
标签分类
- 自闭合标签，如：<meta charset="UTF-8">，比较少，没几个。注意自闭合标签</>，后面可以加个反斜杠，里面大写都不影响。推荐加上斜杠
- 主动闭合标签，如：<title>Title</title>，比较多，一般都是主动闭合标签 -
head标签中
- <meta ->编码，跳转，刷新，关键字，描述，IE兼容
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
表示浏览器能用IE9就用IE9，不能用，用IE8。
- title标签 页面的标头
- <link/> 标头上面的图标，
<link rel="shortcut icon" href="images/favicon.icon">
<link rel="stylesheet", type="text/css", href="css/common.css">
- <style/>
- <script/>
body标签（20个标签）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> # 这里面设置字符编码格式 <title>Title</title> # 这里面的Title为页面的标头 </head> <body> <a href="https:www.baidu.com">百度走起</a> </body> </html> 1. 头document type默认是标准的规范，当然还有很多的规范，如果写成别的规范，得到结果则会不同 2. 类似html这种格式<html>xxxxxx</html>,叫做标签，这个是HTML标签，下面依次类推，head标签，body标签，a标签 3. 标签的内部像：lang='en', charset='UTF-8'都是属性。 4. html的注释是这么写的： <!-- xxxxxxx --> ,如果是多行注释的话把结尾放到多行里面。
head标签里面的标签
- meta标签
定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
提示和注释：
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
必需的属性
属性 值 描述
content some_text 定义与 http-equiv 或 name 属性相关的元信息
可选的属性
属性 值 描述
http-equiv content-type 把 content 属性关联到 HTTP 头部
expires
refresh
set-cookie
name author 把 content 属性关联到一个名称。
description
keywords
generator
revised
others
scheme some_text 定义用于翻译 content 属性值的格式
1，页面编码（告诉浏览器是什么编码）
<meta httpEquiv="content-type" content="text/html;charset=utf-8">,这是复杂的写法，
<meta charset="UTF-8"> # 这是简写
2，刷新和跳转 (用的比较少，后面js会有动态的跳转)
<meta http-equiv="Refresh", Content="30">
<meta http-equiv="Refresh" content="5, url=http://www.baidu.com">
3，关键字（使用表少，这个主要给搜索引擎来用）
<meta name="keywords" content="Java,多线程,博客,栈,阿里云"/>
4，描述（使用较少）
例如：cnblogs
<meta name="keywords" content="开发者,博客园,开发者,程序猿,程序媛,极客,编程,代码,开源,IT网站,Developer,Programmer,Coder,Geek,技术社区">
<meta name="description" content="博客园是一个面向开发者的知。xxxxxxxx,博客园的使命是帮助开发者用代码改变世界。">
5, X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
# 结尾处IE7表示以IE7的标准模式打开
- title标签 页面的标头
- <link/> 标头上面的图标，
<link rel="shortcut icon" href="images/favicon.icon"> # 其中shortcut icon为固定用法，后面为图标的路径
<link rel="stylesheet", type="text/css", href="css/common.css"> # stylesheet为css会用到的
- <style/> 欠下
- <script/> 欠下
body内标签（20多个标签在这里面）
- 图标， > < 分别代指空格，大于号，小于号
- p和br 标签. 其中p标签表示段落，p标签和p标签之间表示不同的段落，br标签则表示换行。
<p>hello world. my name is tom. <br> I am from china !</p>
<p>last week, i went to the school</p>
<p>the sky is blue</p>
- span标签 有多少字符就占多少地方，即使有多行也会放在一行。属于行内标签
- H系列标签（H1--H6）
- div标签 白板
---------小结----------
所有的标签分为：
块级标签：div(白板，被广泛使用), H系列（加大加粗），P标签（段落和段落之间有间距）
行内标签：span（白板）
标签之间可以嵌套
标签存在的意义：CSS操作，js操作（比如定位某个字符串更加简单）
小技能：chrome审查元素的使用：
- 定位
- 查看样式
- input系列 + form标签
input type='text' - name属性 - value 为默认值 (name标签可以让后台程序来区分是那个input标签发送的内容)
input type='password' - name属性 -value 为默认值
input type='submit' - value='提交' 提交按钮，表单
input type='button' - value='登录' 按钮
input type='radio' -单选框 - value(可以用来区别用户选择哪一个), checked=''checked(默认值), name(name相同则互斥)属性
input type='checkbox' -复选框 - value ,checked=''checked, name属性（批量获取数据）
input type='file' - 上传文件，依赖于form表单的一个属性 enctype="multipart/form-data"
inPut type='reset' - 重置
<textarea>默认值</textarea> - 多行文本框 -name属性
select 标签 - name属性，内部option，（optgroup label="河北省" label不能选），value，提交到后台，size=N 显示N个，multiple="multiple" 可以多选
- form标签 输入框中数据是以form的方式提交的。
- a 标签
- 跳转
- 锚 href="#某个标签的ID" 标签的ID不允许重复
- img标签
src 图片路径
alt 当找不到图片就先实现这个字符
title 鼠标放在图片上显示的信息
- 列表 不常用，后来会用css改造
ul
li
ol
li
dl
dt
dd
- 表格 常用
table
thead
tr
th
tbody
tr
td
cospan = 'N' 列合并单元格，N表示合并几个
rowspan = 'N' 行合并单元格，N表示合并几个
- label
用于点击文字，使得关联的标签获取光标。原来点击"用户名"没有反应，关联之后点击用户名就可以获取光标的，进行输入。
<label for="username">用户名：</label> # 用id进行关联
<input id="username" type="text" name="user"/>
- fieldset （边框上面的文字，不常用）
legend
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入框</title> </head> <body> <form action="http://localhost:8888/index" method="GET"> #以'GET'方式提交 <input type="text" name="user"/> <input type="text" name="email"/> <input type="password" name="pwd"/> <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}--> # 这一行为HTML真实提交的内容，是以字典的形式提交的。注意默认只会提交input标签里面的内容 <input type="button" value="登录1" /> <input type="submit" value="登录2" /> # 登录按钮暂时只有submit生效 </form> <br/> <form action="http://localhost:8888/index" method="POST"> #以'POST'方式提交 <input type="text" name="user" /> <input type="text" name="pwd" /> <input type="password" name="email" /> <!--{'user':'用户输入的用户','email':'xxx','pwd':'xxx'}--> <input type="button" value="登录1" /> <input type="submit" value="登录2" /> </form> </body> </html>
GET和POST的区别
如果是以'GET'的方式（也是默认方式），会把提交的数据拼接到URL上，然后发送到后端。
如果是以'POST'的方式,也同样会把提交的数据发送到后台，只不过不会在URL上显示出来。
http请求提交时会传递两部分东西：请求头，请求体(内容)。
如果以'GET'的方式，提交的数据都会放到请求头里面(URL)中提交过去，请求体中没有数据内容。
如果以'POST'的方式，提交的数据则会放到请求体（内容）中提交过去，请求头中则没有数据。
两者没有安全与否的区别，是因为两者在抓包的时候都能够被抓到。
可以利用这个属性写一个搜狗和百度的搜索引擎！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form enctype="multipart/form-data"> <div> <input type="text"/> <p>请选择性别：</p> 男<input type="radio" name="gender" value="1" checked="checked"/> 女<input type="radio" name="gender" value="2"/> 中性<input type="radio" name="gender" value="3"/> <p>爱好：</p> 篮球<input type="checkbox" name="favor" value="1"/> 足球<input type="checkbox" name="favor" value="2" checked="checked"/> 排球<input type="checkbox" name="favor" value="3"/> 桌球<input type="checkbox" name="favor" value="4"/> 网球<input type="checkbox" name="favor" value="5"/> <p>技能：</p> 撩妹<input type="checkbox" name="skill" checked="checked"/> 写代码<input type="checkbox" name="skill" /> <p>上传文件</p> <input type="file" name="filename"/> </div> <input type="submit" value="提交" /> <input type="reset", value="重置"/> </form> </body> </html>
css
CSS
在标签上设置style属性：
backgroup-color:#2459a2
height:48px;
...
获取背景颜色的两种方式：
1，通过chrome-->检察源码--> style-->coolor
2，rgb对照表
总结：对于CSS我们要学习的东西也就是style属性里面的key：value。
编写CSS样式：
1，标签的style属性
2，写在head里面，style标签中写样式
- id选择器 # 不常用
#i1{
background-color: #66bc71;
height: 48px;
｝
- class选择器 # 常用
.名称{
...
}
<标签 class='名称'> xxxx </标签>
- 标签选择器 # 必会
div{
...
}
会在下面所有的div标签中应用样式，定义时可以写其他的标签。
- 层级选择器(空格) # 必会
.c1 .c2 div {
...
}
会在class='c1'的标签下面找class='c2'标签下面找标签是div，然后应用此样式。
最好不要太深，否则用id选择器比较合适！
- 组合选择器(逗号) # 必会
#c1,.c2,div{
...
}
对上面几个CSS选择器进行组合选择
- 属性选择器 # 必会
对选择到的标签再通过属性再进行一次筛选
/*input[type="text"]{background-color: #66bc71; 100px;height: 20px;}*/ # 为注释行
/*input[n="tom"]{background-color: #66bc71; 100px;height: 20px;}*/ ＃ 为注释行
.c1[n="tom"]{background-color: #66bc71; 100px;height: 20px;}
# 还可以对自定义的 n = 'tom' 进行样式应用
3， CSS的存在形式：
1，可以写在标签<style>xxxxx</style>里面
2，CSS样式也可以单独写到文件中
<link rel="stylesheet" href="common.css"/> #写到head标签中对CSS文件进行引用
PS:
优先级，标签里面的style优先，编写顺序，就近原则。
4，注释
/* xxxxxxx */
5，边框
- 宽度，样式，颜色(4px solid coral)
- border-left 只打印边框左边的部分
<div style="border: 4px solid coral">hello world</div>
6，字体
height: 30px; 高度 百分比(单独用无效)
500px; 宽度 像素，百分比
text-align: center; 水平方向居中
line-height: 30px; 垂直方向根据标签高度（和标签高度一样才会居中）
color: darkred; 字体颜色
font-size: larger; 字体大小
font-weight: 900; 字体加粗
border: 3px solid rebeccapurple;
6，背景
7，float
让标签飘起来，块级标签也可以堆叠
老子管不住： <div style="clear: both"></div>
<div style=" 20%;background-color: chartreuse; float: left">hello</div>
<div style=" 80%;background-color: crimson; float: left">world</div>
高级的写法：
利用伪类清除浮动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .clearfix { background-color: cornflowerblue; border: 1px solid red } .clearfix:after{ content: "."; clear: both; display: block; visibility: hidden; height: 0; } #i2{ background-color: green; float: left; height: 100px; } #i3{ background-color: aqua; float: left; height: 50px; } </style> </head> <body> <div class="clearfix"> <div id="i2">hello world</div> <div id="i3">h2</div> <!--<div style="clear: both"></div>--> </div> </body> </html> # 利用伪类清除浮动 ＃ claerfix:after 相当于在这个clearfix这个标签后要进行的操作
8，display
display:inline 块级标签转化成行内标签
display:block 行内标签转化成块级标签
display:inline-block 既有inline的属性(自己有多少占多少)，也有block的属性(可以设置高度，宽度,....)
display:none 让标签消失（在后面学习js的时候会用到）
行内标签无法设置：高度，宽度，padding, margin
块级标签也可以设置：高度，宽度，padding, margin
9，padding margin(0, auto) 边距
padding: 内边距
margin: 外边距
颜色和位置