前端技术概要
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: 外边距
颜色和位置