[网络协议]html元素特点与http协议

1.web的第一门编程语言：JavaScript
HTML是标记语言
2.HTML、CSS、JavaScript的关系
网页三要素
HTML：网页框架构建 结构
CSS：网页样式设计 表现
JavaScript：网页动态事件 行为
3.HTML
生成html文档的快捷键：! or html:5
注释快捷键: control+/ 注释不显示在页面上，开发人员用来提示代码区域内容
4.实体
? 空格
< <
> >
5.块级、行内
块级：div,p,h1~h6,body,html,ul>li,ol>li… 文档结构中的元素
特点： 独占一行
宽度默认100%，如有父元素，100%相对父元素而言，如没有，相对浏览器视图区而言
高度由子元素和内容决定
块级可以包含块级与行内元素
行内：span，img，a，input…
特点： * 与其他行内元素共享一行空间
* 宽高由自身决定
* 由于不用来搭建网页结构，所以也无需通过css指定其宽度
* 行内元素中不可以嵌套块元素
a: 链接外部或外部网址 href=“相对路径./ …/ \ 绝对路径 http(s)😕/ip:端口号/项目/文件名”
经典应用:锚点 定义锚点、连接锚点
1.给一个跳转按钮、也就是触发跳转的按钮 返回中部
2.要跳转位置：

    img:
        src：放图片地址
        width：图片宽度
        height：图片高度
        alt：图片加载出现问题时的文本代替
        title：鼠标悬停时的提示文字

块级元素与行内元素的区别 面试题80%
1.经典：块级元素独占一行，行内元素与其他元素共享一行。
2.宽高：块级可以直接设置宽高，行内不可直接设置宽高，需要通过display改变元素属性来设置。(input,img 特殊的行内元素，置换元素)。
3.块级元素可以包含块级与行内，行内只能包含行内。

1.列表元素
无序列表：ul>li 班级与同学的关系
给一堆数据添加列表语义, 并且这一堆数据中所有的数据都没有先后之分

• 
  
• 要展示的数据
• 
  

表格标签
    一对table标签就是一个表格
    一对tr标签就是表格中的一行
    一对td标签就是一行中的一个单元格
    <table>
        <tr>
            <td>姓名</td>
            <td>年龄</td>
            <td>身高</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>19</td>
            <td>1.78</td>
        </tr>
    </table>
    【注意】1.表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框(属性之间用分号隔开)
    2.表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
    3.可以给table标签和td标签使用
        表格的宽度和高度: 默认是按照内容的尺寸来调整的
                        手动改变 table的width,height
        单元格的宽高:td的width,height
        行内样式：style=""
    4.表格内单元格的水平、垂直对齐
        水平：align  table(表格水平对齐方式),tr,td(当前单元格内容的水平对齐方式)
        垂直：valign tr,td(当前单元格内容的在垂直方向上的对齐方式)
    5.表格的内，外边距属性
        - cellspacing：外边距就是单元格和单元格之间的距离，默认情况下是2px
        - cellpadding：内边距就是单元格的边框和文字之间的间隙(调整表格内内容与边框的距离) 默认情况下内边距是1
    6.单元格合并
        colspan 水平方向上的单元格合并
        rowspan 垂直方向上的单元格合并
form表单
    <form action="提交的服务器接口地址">
        <表单元素>
    </form>
    表单元素一定要写在表单中
    基本表单元素
        明文输入框 <input type="text">
        暗文输入框 <input type="password"> 加密操作
        单选框 <input type="radio" name="xx" value="xxx" checked>  checked默认选中
            互斥操作：给每一个单选框设置相同的name属性还必须设置相同的值
        多选框 <input type="checkbox" name="xxx" value="xxx" checked>
        提交按钮 <input type="submit">
            作用: 将表单中已经填写好的数据, 提交到远程服务器
                需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
                若想将表单数据提交给服务器，需要给提交的表单元素添加一个name属性
        普通按钮 <input type="button" value="xxx">
        图片按钮 <input type="image" src="">
            作用: 配合JS完成一些操作
        重置按钮 <input type="reset" value="xx">
            作用: 用于清空表单中已经填写好的数据
                如果想想改重置按钮默认的按钮标题可以通过value属性来修改


H5新增元素
    datalist标签
        <input type="text" list="xxx">
        <datalist id="xxx">
            <option>xxx</option>
        </datalist>
        1.作用: 给输入框绑定待选项
            操作：input的list属性值与datalist的id值相等
    progress 
        <progress value="70" max="100">70%</progress>
        progress表示任务的完成情况，常用于进度条
        max 定义进度元素所要求的任务的工作量，默认值为1  
        value 定义已经完成的工作量，如果max值为1，该值必须是介于0~1之间的小数。
        
    Canvas 与 SVG 的比较

    下表列出了 canvas 与 SVG 之间的一些不同之处。
    Canvas
        依赖分辨率
        不支持事件处理器
        弱的文本渲染能力
        能够以 .png 或 .jpg 格式保存结果图像
        最适合图像密集型的游戏，其中的许多对象会被频繁重绘
        Canvas 是逐像素进行渲染的。
        在 canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象。
    SVG
        不依赖分辨率
        支持事件处理器
        最适合带有大型渲染区域的应用程序（比如谷歌地图）
        复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
        不适合游戏应用



Http协议
    HTTP是一种能够获取如 HTML 这样的网络资源的 protocol(通讯协议)。它是在 Web 上进行数据交换的基础，是一种 client-server 协议，也就是说，请求通常是由像浏览器这样的接受方发起的。
    HTTP因为其良好的扩展性，时至今日，它不仅被用来传输超文本文档，还用来传输图片、视频或者向服务器发送如HTML表单这样的信息。HTTP还可以根据网页需求，仅获取部分Web文档内容更新网页。
    
        表单：提交数据
        交互：HTTP协议
        客户端大前端 请求------>
        <------响应   服务端 后端
    HTTP报文的分类有两种：请求报文和响应报文。顾名思义，请求报文就是客户端向服务端发送请求的信号，响应报文就是服务端响应处理后回传给客户端的信号。
    举例，GET /index.php HTTP/1.1，GET是请求方法，/index.php是URL，HTTP/1.1表示使用的HTTP版本为1.1。
    请求方式：
    请求报文
        请求行、请求头、空行和请求体
        get与post请求的区别 面试
            get 传输数据量小 参数携带在URL后 没有请求体 没有数据保密性
            post 传输数据量大 参数携带在请求体里 数据保密性较强(如登陆注册)
        cookie
            在电脑本地创建了一个关于用户喜好的一个记忆，当用户下次再浏览时相同，会在电脑本地拿到cookie，进行喜好筛选推荐
        请求头
            Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机
                eg:百度 --- sp1.baidu.com
                包含请求携带数据，所以get没有请求体的
        空行
            用于请求头与请求体之间的内容分隔
        请求体
            请求数据，正如上文提到的，当使用的是GET方法的时候，没有请求体
    响应报文
        状态行、消息报头、空行和响应正文
        状态行
            告诉前端请求是否正确，若错误，通过状态码分析错误原因，调整bug
            200 OK：客户端请求成功
            4xx : 前端请求错误 url错误/请求数据格式错误/语法错误/...
            5xx : 后端错误 联系后台人员解决
        响应头
            Content-Type：返回的资源类型 (MIME)；
            Connection：连接方式；
            close：连接已经关闭；
            keep-alive：连接已保持，在等待本次连接的后续请求；
        空行
            分隔响应头与响应体
        响应体
            返回给前端的数据(服务器返回给浏览器的响应信息)