• 前端之HTML


    ---恢复内容开始---

    前端:

    什么是前端:

    任何和用户打交道的都是前端。

    什么是后端:

    不直接与用户打交道,幕后操作者

    软件开发架构:

    c/s:客户端与服务端

    B/S:浏览器与客户端

    ps:b/s本质上也是c/s

    Web服务的本质:

    浏览器中敲入网址发生了哪些事情?

    1.浏览器向服务端发送请求

    2.服务端接收到请求

    3服务端返回响应

    4.浏览器拿到响应后,根据特定的规则渲染页面给用户看。

    HTTP协议:

    解释:超文本传输协议,其规定了浏览器与服务端之间传输数据的格式

    四大特性:

    1.是基于TCP协议上应用于应用层的协议

    2.基于请求响应

    3无状态(因为服务端不会保留客户端的状态)

    4无连接(因为我服务端接收到浏览器的请求后,返回响应后会立即断开连接,你客户端想要数据就要继续发送请求,拿到请求后再响应,再断开,所以说无连接。

    请求数据格式:

    请求首行(HTTP协议当前版本,请求格式)

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

    (这里是个空格,记住了是空格,不是什么都没有)

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

    响应数据之格式:

    响应首行(HTTP协议当前版本,响应状态码)

    响应头(k与v的键对值)

    (这里也是个空格,记住了是空格,不是什么都没有)

    响应体

    响应状态码:

    1xx:表示服务器已经成功接收到浏览器的请求,客户端可以继续发送数据

    2xx:表示服务器已经成功返回响应给浏览器

    3xx:表示重定向,302暂时,303永久

    4xx:表示请求错误,404就是,403表示权限不够禁止访问

    5xx:表示服务器错误,500就是,502表示网关错误

    请求方式:

    get:向服务器要数据

    post:向服务器提交数据

    url:

    就是网址通俗点。

    HTML:

    超文本标记语言,是一个网页的骨架,我们现在看到的代码都是HTML代码搭建而成。

    HTML注释:

    注释是代码之母:
    <!--单行注释-->

    <!--

    多行注释

    -->

     HTML文档结构

    <html>

    <head></head>:head内的标签不是用来展示的

    <body></body>:body内的标签就是浏览器展示的

    </html>

    <meta>元素可提供有关页面的元信息(mata-information),针对搜索引擎和更新频度的描述和关键词。

    <meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
    <meta name="description" content="老男孩教育Python学院">

    打开html页面的2种方式:

    1.找到文件路径,直接用浏览器打开

    2.用pycharm快捷方式直接打开

    标签的分类

    单标签(<img>)也叫自闭和标签

    双标签(<h1></h1> <a></a>)

    块级标签(div,span,p.....)

    特点:占一整行,再少也是一整行,数据多一行不够,自动换行

    并且块级标签内页可以嵌套块级标签,但p标签除外,p标签不能嵌套块级标签,只能放行内标签

    行内标签(b,i,s,u)

    特点:有多少占多少,根据自身来定

    div和span是用于网页布局的(重点)

    body内常用标签:

    h标签是标题标签

    p标签是段落标签

     特殊字符:

    &nbsp; 代表空格

    &yen; 代表的人名币符号

    &reg;代表的是注册商标

    &copy;代表的是版权

    &gt;代表的大于

    &lt;代表的小于

    &amp;代表的是&原义

    常用标签:

    img(图片地址)

      src存放的可以是网页上 的地址,也可以是本地上的地址。另外也可以自动放url,也可以直接放图片的二进制数据。

       alt是当图片出异常的时候的提示信息

      title是鼠标悬浮展示的信息

      height和width当你只指定了一个参数时,另外一个参数会自动调整,根据比例缩放。

    a(超链接标签)

      href后面存放的是url地址, 点击就会跳转到该网址

      如果链接没有被点过那么就是蓝色,点过了就是紫色

      target默认是_self就是根据当前页面跳转

      可以改为_blank就是再开一个窗口跳转页面

      锚点功能(回到顶部)

        就是href可以指定另一个标签的id,当点击的时候就会跳转到那个标签

    列表标签

    无序列表:

    ul里面套li

    有序列表

    ol里面套li

    表格标签

    先来一个固定格式

    <table>

      <thead></thead>

      <tbody></tbody>

    </table>

    tr表示一行

    tr里面放th和td

     th和td都是文本标签只是th加粗

    建议在thead里面写th,tbody里面写td

    colspan表示并几列

    rowspan表示并几行

    表单标签(form)

    就是能够接收用户输入(输入,选择,上传)的数据,并将其发送给后单。

    action控制数据提交的目的地。

    默认是当前文件所在目录路径,也可以写全路径(https://www.baidu),还可以写前缀(/index/)

    type:

      text表示普通文本信息

      password表示密文

      date:表示日期

      submit:触发提交动作

      button:就是一个普通按钮

      reset:重置

      radio:单选,可以通过checked来设置默认值,当属性值和属性名相同的情况下可以简写checked,正规写法'checked'=checked

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

      file:可以获取用户上传的文件

    select标签

    默认是单选,可以通过muiltple来设置多选,如果想设置默认值可以通过selected('selected'=selected

    textarea标签

    获取用户输入的大段文本

    form表单标签默认是get请求,可以通过method来设置mothed=post来设置成post请求

    在form表单中想触发提交操作只有2种情况

    1.通过input中的type的submit

    2.通过button标签

    获取用户输入的标签,都必须要有一个name属性,

    这个name类似于子弟那的key,而标签获取到的用户写入的值就类似于字典的v

    <input type="text" id="d1" name="username" value="默认值">

    name就相当于字典的key,value就相当于字典的v

    fom表单传文件的时候要指定enctype参数

    ---恢复内容结束---

  • 相关阅读:
    php判断token有效期
    ecshop数据库操作
    CSS3选择器 :nth-child(n) 如何理解
    socket_wirte、socket_read、socket_send、socket_recv
    Mysql按指定顺序排序的两种写法
    Photoshop图片优化文件大小
    Wordpress中的自定义栏目是什么玩意,有什么用?
    Windows使用压缩包安装Mysql5.7.17服务
    Discuz论坛搬家后出现 Unknown column 'app1' in 'where clause' 原因及解决办法
    .PHP后缀大写导致Linux下Composer找不到类
  • 原文地址:https://www.cnblogs.com/xinfan1/p/11455305.html
Copyright © 2020-2023  润新知