目录
简单来说，任何直接与用户打交道的操作界面都叫前端。
html ---> 骨架
css ----> 衣服、打扮
JavaScript ----> 动态效果
c/s
b/s 本质上也是c/s
客户端向服务端请求，
服务端向客户端相应
当在浏览器地址栏输入网址，回车会发生什么事情：
import socketserver = socket.socket()server.bind(('127.0.0.1', 9527))server.listen(5)while True: conn, addr = server.accept() data = conn.recv(1024) conn.send(b'HTTP/1.1 200 ok\r\n\r\n') conn.send('hello'.encode('utf-8')) conn.close()
import socket
server = socket.socket()
server.bind(('127.0.0.1', 9527))
server.listen(5)
while True:
conn, addr = server.accept()
data = conn.recv(1024)
conn.send(b'HTTP/1.1 200 ok\r\n\r\n')
conn.send('hello'.encode('utf-8'))
conn.close()
超文本传输协议，规定了浏览器与服务端数据传输的数据格式。
请求格式
请求首行（请求方式 协议版本）请求头（一大堆k:v键值对）请求体（敏感信息 密码 身份证号码）
请求首行（请求方式 协议版本）
请求头（一大堆k:v键值对）
请求体（敏感信息 密码 身份证号码）
注意：请求头下面有一行空格，\r\n
响应格式
响应首行（响应方式 协议版本）响应头（一大堆k:v键值对）响应体（给用户看的数据）
响应首行（响应方式 协议版本）
响应头（一大堆k:v键值对）
响应体（给用户看的数据）
就是用数字来表示一串文字需要表达的意思
HTML全称为超文本标记语言（Hyper Text Markup Language），是一种创建网页的标记语言
最基本的HTML文档
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title></head><body></body></html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html> 声明为HMTL5
<html> </html>
<head> </head>
<title> </title>
<body> </body>是文本的主体内容
<body> </body>
<!--单行注释--><!--多行注释1多行注释2-->
<!--单行注释-->
<!--
多行注释1
多行注释2
-->
双标签：h1 a
自闭合标签：img
块级标签：h1~h6 p br hr div 独占一行
行内标签 s i u b span
内部文本多大，就占多大
行内不能嵌套行内和块级标签
<title></title>
<style></style>
<script></script>
<link/>
<meta/>
meta标签 内部keyword关键字提高被搜索引擎搜索的概率
&
¥
>
<
©
®
div 就是一块区域
span 用来定义内联(行内)元素，并无实际的意义。主要通过CSS样式为其赋予不同的表现。
div和span是前期构建网页的基本骨架
<a href="https://www.baidu.com" target="_blank">首页</a>
href 参数控制跳转的地址，target参数： target = '_blank' 表示新建窗口打开；target = '_self' 在当前窗口跳转
_blank
_self
给a标签设置id值, 然后在href中书写对应的a标签id值 点击即可跳转到对应的位置
<h1 id="h1">我是标题1</h1><a href="#h1">首页</a>
<h1 id="h1">我是标题1</h1>
<a href="#h1">首页</a>
<img src="3.jpg" alt="这里是图片" title="美化" width="200">
src 是图片地址
alt 当图片加载不出来时展示的信息
width和height 这两个参数 你只需要设置一个 就可以 默认是等比例缩放
<ul type="circle"> <li>内容1</li> <li>内容2</li> <li>内容3</li></ul>type参数 disc（实心圆点，默认值） circle（空心圆圈） square（实心方块） none（无样式）
<ul type="circle">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
type参数
disc（实心圆点，默认值）
circle（空心圆圈）
square（实心方块）
none（无样式）
<ol type="a"> <li>内容1</li> <li>内容2</li> <li>内容3</li></ol>type参数 1 数字列表，默认值 A 大写字母 a 小写字母 Ⅰ大写罗马 ⅰ小写罗马
<ol type="a">
</ol>
1 数字列表，默认值
A 大写字母
a 小写字母
Ⅰ大写罗马
ⅰ小写罗马
<dl> <dt> 标题1 </dt> <dd> 章节1 </dd> <dt> 标题2 </dt> <dd> 章节2 </dd></dl>
<dl>
<dt>
标题1
</dt>
<dd>
章节1
</dd>
标题2
章节2
</dl>
展示数据
<table border="1"> <thead> <tr> <th>user</th> <th>pwd</th> <th>age</th> </tr> </thead> <tbody> <tr> <td>neo</td> <td>123</td> <td>20</td> </tr> <tr> <td>jason</td> <td>qwe</td> <td>18</td> </tr> </tbody></table>
<table border="1">
<thead>
<tr>
<th>user</th>
<th>pwd</th>
<th>age</th>
</tr>
</thead>
<tbody>
<td>neo</td>
<td>123</td>
<td>20</td>
<td>jason</td>
<td>qwe</td>
<td>18</td>
</tbody>
</table>
属性:
原文链接：http://www.cnblogs.com/setcreed/p/11845354.html
本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728
经验首页