• 前端之HTML


    前端简介:

      前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。任何与用户直接打交道的操作界面都可以称之为前端;比如说我们平时使用的电脑界面、手机界面、平板界面等等...

    HTML:

      HTML是超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页,对于不同的浏览器(由于兼容性问题)可能对同一个标签会有不同的解释。简单讲就是说要想让你的页面能够正常被浏览器显示出来 你所写的页面 就必须遵循html标记语法,也就意味着所有能够被浏览器显示出来的页面 内部都是html代码。而且浏览器只认识html css js

      简而言之HTML是一种标记语言(markup language),而不是一种编程语言;HTML是使用标签来描述网页的。

    最基本的HTML文档结构

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <title>css样式优先级</title>
    </head>
    <body>
    
    </body>
    </html>
    
    
    
    <!--

    HTML标签是由尖括号包围的关键字,如<html>, <div>等 HTML标签通常是成对出现的,比如:<div>和</div>,第一个标签是开始,第二个标签是结束。结束标签会有斜线。 也有一部分标签是单独呈现的,比如:<br/>、<hr/>、<img src="1.jpg" />等。
    head内的标签 不是用来展示给用户看的  而是定义一些配置 主要是给浏览器看的
    body内的标签 就是浏览器展示给用户看的内容 标签里面可以有若干属性,也可以不带属性
    对于中文网页需要使用 <meta charset="utf-8"> 声明编码,否则会出现乱码。
    有些浏览器会设置 GBK 为默认编码,则你需要设置为 <meta charset="gbk">

    -->

    标签语法:

      <标签名 属性1=“属性值1” 属性2=“属性值2”……>内容部分</标签名>

      <标签名 属性1=“属性值1” 属性2=“属性值2”…… />

    几个很重要的属性:

      id:定义标签的唯一ID,HTML文档树中唯一

      class:为html元素定义一个或多个类名(classname)(CSS样式类名)

      style:规定元素的行内样式(CSS样式)

    HTML的注释格式:

      注释是代码之母。

    <!--  四个横杠之间存放的是要注释的内容  -->

    HTTP协议:

      HTTP协议是超文本协议,它规定了浏览器与服务器之间消息传输的数据格式。

      HTTP的四大特性:

        1.基于请求回应

        2.基于TCP/IP之上的作用于应用层的协议

        3.无状态(服务端无法保存用户状态,就算同一个用户来N次,服务端也记不住这个用户)

        4.无连接(请求一次服务端相应一次  然后立马断开连接  两者之间就不再有任何关系了)

          (websocket 相当于是HTTP协议的一个大的补丁 它支持长连接)

    请求数据格式:

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

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

       /r   /n

      请求体(携带的是一些敏感的信息比如密码、身份证号等......)

    相应数据格式:

      相应首行(标识HTTP协议版本,相应状态码)

      相应头(一大堆k、v键值对)

       /r    /n

      相应体(返回给浏览器页面的数据,通常响应体都是html页面)

    相应状态码:

      用一串简单的数字来表示一些复杂的状态或者提示信息。

      1xx: 服务端已经成功接收到了你的数据正在处理  你可以继续提交额外的数据

      2xx: 服务端成功相应你想要的数据 (请求成功200)

      3xx: 重定向(当你在访问一个需要登录之后才能访问的页面 就会发现窗口会自动调到登录页面  301  302)

      4xx:请求错误(请求资源部存在 404, 请求不合法不符合内部规定或者权限不够 403)

      5xx:服务器内部错误 500

     请求方式:

      1.get请求

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

      2.post请求

        朝服务端提交数据(比如用户登录 提交用户名和密码)

    url:统一资源定位符,就是网址

    标签分类:

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

      单标签(自闭和标签:<img/>)

    常用的标签:

    <b>加粗</b>
    <i>斜体</i>
    <u>下划线</u>
    <s>删除</s>
    
    <p>段落标签</p>
    
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    
    <!--换行-->
    <br>
    
    <!--水平线--><hr>

    标签的分类2
      1.块儿级标签(独占浏览器一行)
        div p h
        1.块儿级标签可以修改长宽
        2.块儿级标签内部可以嵌套任意的块级标签
         但是p标签虽然是块儿级标签 但是他不能够其他块儿级标签 包括自身可以嵌套行内标签
        总结:
        只要是块儿级标签 都可以嵌套行内标签
        p标签只能嵌套行内 其他块儿级可以嵌套任意的块儿级标签
      2.行内标签(自身文本多大就占多大)
        span b s i u
        div和span通常都是用来构建网页布局的

    特殊字符:

    空格    &nbsp;
    >    &gt;
    <    &lt;
    &    &amp;
    ¥    &yen;
    版权    &copy;
    注册    &reg; 

    head内常用标签:

      title用来显示网页标题

      style用来控制样式的 内部也支持写css代码

      script内部支持写js代码 也支持导入外界的js文件

      link专门用来引入外部的css文件

    常用标签
      div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
      span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
      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代码 属于行内样式 优先级最高
        任何标签都支持自定义属性!!!

    列表标签:

      <table>
      <thead></thead>
      <tbody></tbody>
      </table>
      tr表示一行
      th和td都是文本
      建议在thead内用th
      tbody内用td
      colspan表示的水平方向
      rowspan表示的竖直方向

    表单标签:

      能够接收用户输入(输入 选择 上传)并将其发送给后端
      以注册实例位例讲解form表单

      action控制数据提交的目的地
        1.不写的情况下 默认提交到当前页面所在的路径
        2.写全路径(https://www.baidu.com)
        3.路径后缀(/index/)

      input input标签就类似于是前端变形金刚
        type
          text:普通文本
          password:密文 不展示明文
          date:日期
          submit:触发提交动作
          button:普通按钮 没有实际意义 但是可以通过js绑定事件实现自定义动作
          reset:重置表单内容
          radio:单选 可以通过checked控制默认选择(当属性值和属性名相同的情况下 可以简写 checked) checked="checked"
          checkbox:多选 同上 可以设置默认值
          file:获取用户上传的文件

      select标签
        默认是单选 可以通过multiple变成多选
        如果想默认选择 用selected (selected="selected")

      textarea标签
        获取用户输入的大段文本

    form表单默认是get请求 你需要通过method参数 换成post提交
    form表单中 要想触发提交动作
      只有两种情况可以
        1.input标签type指定成submit
        2.直接写button标签
      获取用户输入(输入 选择 上传...)的标签 都必须有一个name属性
      这个name属性就类似于字典的key,而标签获取到的用户写入的值就类似于字典的value
    <input type="text" id="d1" name="username" value="默认值">
      name就相当于是字典的key
      value就是字典的值
      获取都的用户输入都会被放入value属性中
    form表单传文件的时候 需要指定enctype参数

  • 相关阅读:
    随机抢红包算法实现
    C#Random函数在循环中每次获取一样的值
    YouTube Cobalt 浏览器支持
    原生js,通过document.getElementByClassName获取元素的索引值
    http请求415错误Unsupported Media Type
    axios
    vue项目中,localhost可以访问,IP无法访问的问题
    时间戳
    Vue.Draggable:基于 Sortable.js 的 Vue 拖拽组件使用中遇到的问题
    empty 与 remove 的区别
  • 原文地址:https://www.cnblogs.com/sweet-i/p/11455285.html
Copyright © 2020-2023  润新知