日志1

63 阅读2分钟

Q1: url输入后浏览器都发生了什么?

client side 向 server side先发送一个请求request, 然后再发回一个response.

  1. URL 解析(通过UDP发送请求,UDP是stateless)
  2. DNS 查询
  3. TCP 连接(请求后有state)
  4. 处理请求
  5. 接受响应
  6. 渲染页面html,显示后开始加载css,js文件

http是明文协议

https是http基础上加了一层加密协议,内容不会被破译

http协议里有几种method: 经常有get post delete等请求/方法

image.png

html相当于骨架 结构 有哪些元素 icon button input box css相当于外观 相对关系 长什么样子 在哪 javascript相当于动作,最核心

http是基于tcp的一个协议:稳定可靠,有很多重发机制,确保能连上,client和server可以连接 udp是另一种:不稳定,不太reliable,发出的请求,不care response,需要更快的请求

先从浏览器预存的domain域名检查url的IP地址

编辑器:vs code 黑马pink老师推荐的插件非常不错: chinese 会了吧 one dark pro open in browser直接右键 live server实时改动 easy LESS vscode-icons图标很好看 auto rename tag可以把匹配的tag都改掉,只用改一次

还有格式化,要在设置里搞

在一个页面中最多一个H1 出于auto web accessibility ,帮助残障人士,比如mac的voice over tool,类似于一篇论文只有一个大标题

放一长段文字,告诉浏览器这是一个段落 加粗中间的单词 斜体 斜体 下划线 www.google.com archor tag就是鼠标点到超链接后会出现手的姿势,但是仅仅如此不会有任何用

在tag内部加的叫attribute www.google.com

  1. Bei jing
  2. Shang hai
  3. Cheng du
  • element is used to represent an item in a list. 这个是用的最多的
    <ul>
        <li>Bei jing</li>
        <li>Shang hai</li>
        <li>Cheng du</li>
    </ul>
    

    li: list item

    表示非常小的一段文字

    是self closing的标签,也可以写成 src网址一定得是图片的地址,还可以是本地图片弄上去 alt=""不是必须加入的描述

    双标签:open and close标签

    分为table header和table row
    Id name
    1 Steve
    2 Jobs

    table的代码写法: table row一行一行填写

    image.png

    最general的container,可以替代前面任何一个tag,万金油tag
    但是不建议全都是div,标签表达的含义不是很明确

    尽量使用准确的tag

    一切皆可div

    HTML5的新feature: semantic tag:

    1.代码更可读,一看就知道是哪一块;

    2.使search engine 更精确,SEO更靠前,search engine optimization

    3.提高accessibility ,向用户告知我们的分布信息

    导航栏
    自动换行 break

    ARIA annotation: 提高accessibility,不要全都用div 往一些tag上加ARIA annotation

    form如何写?

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png

    image.png