zoukankan      html  css  js  c++  java
  • 前端--HTML简介

    软件开发架构:

      c/s架构

        客户端

        服务端

      b/s架构

        浏览器

        服务端

      本质:b/s架构也是c/s架构

    HTTP协议

      超文本传输协议:规定了客户端与服务端之间消息传输的格式

      四个特性:

        1、基于TCP/IP协议作用于应用层的协议

        2、基于请求响应

        3、无状态(服务端无法保存用户的状态,一个人来千万次我都记不住)

        4、无连接(请求来一次响应一次之后就立刻断开连接,两者之间就没有任何关系了)

      websocket是HTTP最大的一个补丁,它支持长连接

       get请求:

        朝服务端要资源

      post请求:

        朝服务端提交数据

      数据格式之请求:

        请求首行(标识HTTP协议的版本, 当前请求的方式 )

        请求头(一堆k,v键值对)

         

        请求体(post请求携带的数据)

      请求数据之响应:

        响应首行

        响应头(一堆k,v键值对)

         

        响应体(post请求携带的数据)

      响应状态码:

        1xx:服务器已经成功接受到你的数据正在处理,你可以继续提交其他数据

        2xx:请求成功 服务器已经成功将你请求的数据发给你了

        3xx:重定向

        4xx:请求资源不存在

        5xx:服务器错误

    Web服务的本质:

      1、浏览器朝服务端发送请求

      2、服务端接收到请求

      3、服务端返回相应的内容

      4、浏览器接受响应,根据特定的规则渲染页面展示给用户看

    请求方式:

      get请求

        朝服务端要资源(比如浏览器窗口输入的www.baidu.com)

      post请求

        朝服务端提交数据(比如用户登陆的时候要提交的用户名和密码)

      URL:统一资源定位

    HTML:

      超文本标记语言

      浏览器只认识html、css、js

      

    HTML中的注释:

      <!--单行注释-->

      <!--

      多行注释

      多行注释

      -->

    HTML文档结构:

    <html>
    <head></head>:head内的标签 不是用来展示给用户看的 而是定义一些配置 主要是给浏览器看的
    <body></body>:body内的标签 就是浏览器展示给用户看的内容
    </html>

    头尾一定要对齐。方便理解 

    head中常用的标签:

      title --> 定义网页的标题

      style --> 定义内部样式表

      script --> 定义JS代码或引入外部JS文件

      link --> 引入外部样式表文件或网站图标

      meta --> 定义网页原信息

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩教育Python学院">
    <!--
    name属性:主要用于描述网页,与之对应的属性值为content,content中的
    内容主要是便于搜索引擎机器人查找信息和分类信息用的
    -->

    打开HTML页面的两种方式:

      1、找到文件路径 选择浏览器打开

      2、pycharm快速打开

    HTML中的常用标签:

      基本标签:

        p标签:段落标签

        h标签:标题标签

      常用标签:

        div

        span

        p

        img  

          src存放的是图片的路径(这个路径可以是网上的)

            1、可以是url(会自动请求该url获取相应的数据)

            2、也可以直接放图片的二进制数据  会自动转成图片

          alt是当图片加载不出来的时候 显示的是图片的信息

          title是当鼠标悬浮在图片上 提示的信息

          height,width:当你指定一个参数的时候 另外一个会等比例的缩放

        a

          href后面存放的是url的时候点击就会跳转到该url,这个链接如果没有被点过,那么这时候默认的是蓝色的,只要是点过一次,之后就都是紫色的了

          target 默认是_self表示当前页面跳转 还有一个是_blank表示的是新建页面跳转

          锚点功能(回到顶部):href还可以写另一个a标签的id,点击就会跳到id值所对应的a标签

        每一个标签都应该有三个比较重要的属性

          1、id值  该值就类似于人的身份证 再用一个html文档id值应该保证唯一不能重复

          2、class值  该值就类似于面向对象里面的那个继承,可以写多个

          3、style 支持在标签内直接写css代码 属于行内样式 优先级最高

          ps:任何标签都支持自定义属性!!!

      列表标签:

        表格标签:

           <table>
                    <thead></thead>
                    <tbody></tbody>
                </table>
                
                
                tr表示一行
                th和td都是文本
                    建议在thead内用th
                    tbody内用td
                
                colspan表示的水平方向
                rowspan表示的竖直方向
           合并的时候要删掉,否则会挤出去
           border:表格边框
           cellpadding:内边距
           sellspacing:外边距
           width:像素百分比(最好是通过css来设置长宽)
           

        表单标签:

          能够接受用户输入(输入  选择  上传)并将其发送给后端

          form表单:

            action控制数据提交的目的地

              1、不写的情况下 默认提交到当前页面所在的路径

              2、写全路径

              3、路径后缀

            input标签:

              type:

                text:普通文本

                password:密文  不展示明文

                date:日期

                submit:触发提交的动作

                button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作

                reset:重置表单内容

                radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的时候可以简写只写一个)

                checkbox:多选框,同上,可以设置默认值

                file:获取用户上传的文件

                hidden:隐藏输入框

            select标签:

              默认是单选的,但是可以通过multiple变成多选

              默认选择使用selected

            textarea标签:

              name:名称

              rows:行数

              cols:列数

              disabled:禁用

              获取用户输入的大段的文本

            form表单默认的是get请求 你需要使用method参数 换成post提交

            form表单中要是想触发提交动作

              1、input标签type指定submit

              2、直接写button标签

              ps:在获取用户输入、选择、上传的时候都必须有一个   属性,这个name属性就类似于字典的key值,而标签获取到的用户写入的值就类似于字典的value

            form表单提交数据的时候需要指定enctype参数

    特殊字符:

      空格 --> &nbsp;

      > --> &gt;

      > --> &lt;

      & --> &amp;

      ¥ --> &yen;

      版权 --> &copy;

      注册 --> &reg;

  • 相关阅读:
    确认端口占用
    [转]自建Syncthing中继服务器(私密传输或造福大众)
    【转】Syncthing – 数据同步利器---自己的网盘,详细安装配置指南,内网使用,发现服务器配置
    【转】搭建和配置Syncthing发现和中继服务器
    【转】Syncthing的安装与使用
    pycrypto安装出错的问题 intmax_t C:Program Files (x86)Windows Kits10include10.0.10240.0ucrtinttypes.
    Git从库中移除已删除大文件
    词云图
    [转].NET 性能测试工具 -- 事件跟踪器(ETW)
    [转]ANTS Performance Profiler和ANTS Memory Profiler 使用
  • 原文地址:https://www.cnblogs.com/tulintao/p/11454919.html
Copyright © 2011-2022 走看看