前端初识

1.前端初识

import socket
sk = socket.socket()
sk.bind(('127.0.0.1',9000))
sk.listen()
try:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    conn.send(b'HTTP/1.1 200 OK 

')
    # conn.send('你好'.encode('GBK'))    # bytes
    with open('new.html',encoding='utf-8') as f:
        conn.send(f.read().encode('GBK'))
except Exception as e:
    print(e)
finally:
    conn.close()
    sk.close()

B/S
b browser
s server
http request http请求
http response http响应
http和socket
B/S架构是http协议
http协议基于socket的TCP协议在通信
为了标识new是一个前端显示的文件,我们要给他取一个后缀名 : .html

2.标签

浏览器怎么和server端交互
前端的文件有一个后缀名 : html
web端的组成 :
html 一堆标签组成的内容 基础的排版和样式
css 描述了标签的样式
js/jq 动态的效果
html 超文本标记语言
超文本 :图片 音频 视频
标记:所有内容都是包裹在标签中
标记(标签)的分类
双边标记 双闭合标记
单边标记 单闭合标记



1.html标签
head : 一个人的思想
写在head标签中的所有内容在网页上都不可见
title 打开网页的时候标签页显示的内容
meta 网页元信息,编码,浏览器版本,关键字,描述
body : 一个人的身体
特性:
1.空白折叠
空格  
其他的网页上的特殊字符 :&lt &gt
2.对回车制表符也不敏感
标签的分类:
内联标签(行内标签)
字体标签
加粗 b /strong
斜体 i /em
上标 sup 下标 sub
中划线 s del 下划线 u
换行符

内容标签 没有任何样式的内容
标签 img
src 属性
一张图片的网络地址 "http://xxxx"
一张图片的本地路径 "img/0.jpg"
width 属性
设置图片的宽度 "200px"
height 属性(和width属性二选一)
设置图片的高度 "400px"
alt 属性
在图片加载失败的时候显示的内容
用户体验 爬虫
标签 a 超链接标签
锚 anchor
href 属性
1.网络资源,点击跳转到一个网址
2.邮件资源,"mailto:邮箱地址"
3.设置锚点
a.跳转到本页的起始 : href = '#'
b.跳转本地页的某一个地方
给这个地方添加一个标签,属性是id
在a标签设置锚"#id的值"跳转到对应的标签
target 属性
'_self'(默认) 在当前网页打开
'_blank' 在新网页跳转
title 属性
鼠标悬浮显示的小标题
块级标签
标题标签 h1-h6