前端

haiyang11 2019-08-07 原文

前端：
html：

前端：

web端的组成：
- html 纯文本文件，使用标签来描述文字的，是一种描述性的标记语言
- css 描述了标签的样式，让页面更好看
- js/jq 动态的效果
http和socket：
- B/S架构是基于socket的TCP协议通信的
- http基于socket通信的
http reques ：http请求
http response ：http响应

html：

超文本标记语言
- 超文本：图片，音频，视频
- 标记：所有内容都是包裹在标签中
标记（标签）的分类：
- 双标标记：<body> <body> （双闭合标记）
- 单标标记：<meta> （单闭合标记）
标签：
- head：一个人的思想
  - 写在head标签的内容不不可见
- title:
  - 整个网页的标题，游览器最上方显示
- meta:
  - 网页的源信息，收录，编码，游览器版本，关键字，网页的基本信息
```
import socket
sk = socket.socket()
sk.bind(("192.168.13.146",6677))
sk.listen()

while 1:
    try:
        conn,addr = sk.accept()
        ret = conn.recv(1024)
        conn.send(b"HTTP/1.1 200 OK \r\n\r\n")
        with open('demo-01.html', encoding='utf-8') as f:
            conn.send(f.read().encode('utf-8'))

    except Exception as e:
        print(e)

<!doctype html>           #版本，默认html5
<html lang="zh-cn">       #编码
<head>                    #head下的内容不可见
    <meta charset="UTF-8">
    <meta name="viewport" content="python,go">   #百度收录
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">  #重定向
    <meta name="Description" content="搜索页面的标签/>
    <title>haha</title>   #显示在网页标签上的名字

</head>
<body>

</body>
</html>
```
- boby：
  - 内联标签(行内标签)
    - 注释：
    - 字体标签：b标签加粗，strong标签不换行
    - 斜体：i标签或者em
    - 上下标：sup sub
    - 中划线：del或s del新标签，在字符串中划一条横线
    - 下划线：u
    - 空格：br/ 单边
    - 特性：空白折叠，&nbsp空格，&lt 大于号，&gt 小于号
    - img 单边标签-内联：
      - <img src="资源路径" alt="图裂说明" height="200px">
      - src 图片的网络地址，（width宽度 height高度）宽高二选一
        
        src 本地路径存放 img/0.jpg
      - alt 在图片加载失败的时候显示内容，用户体验，爬虫
    - a 超链接标签：
      - <a href="www.baidu.com">淘宝</a>
      - href
        
        属性可以连接网络资源，点击跳转
        
        href=mailto:邮箱地址连接到本地邮件服务器
        
        回到顶部：`回到顶部
        
        如果设置id值，跳到对应的标签
      - target：
        
        self：默认在当前网页打开
        
        _blank：在新网页跳转打开
      - title：鼠标悬浮显示小标题
  - 块级标签（占满一整行）
    - 标题标签：h1-h6
    - 内容标签：span 没有任何样式的内容