前端入门——review01（HTML＆CSS＆JS）

Posted 2021-02-18 凌醉枫

上周内容回顾

• html

  # HTTP协议
  ?
  # 超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准
  ?
  # 注释 <!---->
  ?
  # web服务的本质
          服务端
          客户端
      文件(.html)
      （你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的）
  ?
  # HTML文档结构
          html
          head
          body
        
  # 标签的分类
      1.
      单标签
      双标签
    2.
      块儿级标签
      行内标签
          特例:p标签
          
  # 一堆标签
      标题:h1~h6
    u i s b
    hr br
    段落:p
      
  # 特殊符号
      &nbsp;
    &amp;
    &gt;
    &lt;
    &copy;
    &reg;
    &yen;
  ?
  # 标签笔记重要的两个属性
      id
    class
    
  # 常用标签
      div
    span
      自己联想简易版本的博客园页面搭建，体会上述标签的作用
    
    a链接标签
      href
          1.放url 点击跳转
        2.放其他标签的id值 锚点功能
      target
          默认是当前页面跳转 _self
        也可以新建页面打开 _blank
      
    img图片标签
      src
          图片的地址
      
      alt
          图片加载不出来的情况下展示提示信息
      
      title
          鼠标悬浮上去之后展示的提示信息
      
      height、width
  ?
  # 列表标签
      ul
      li
      list-style-type:none
      padding-left:0px
    
    ol
      li
      
    dl    
      dt
      dd
  ?
  # 表格表格
      表格标签不一定非要讲thead和tbody都写出来 也可以只有tbody没有thead
      table
      thead
          tr
          th/td
      tbody
      
          colspan
      rowspan
  ?
  # form表单
      朝后端发的获取用户数据的标签 一定要写在form表单内
      action  控制数据提交的路径
      1.不写
      2.全写
      3.后缀
    
    method  控制提交方式get/post
      form默认是get请求
      
    enctype  控制数据提交的编码格式  
      urlencoded
      formdata
      ...
      
  # input标签
      type属性
      text
      password
      date
      radio
          checked  属性名和属性值相同的情况下可以简写
      checkbox
          checked
      file
      
      submit
          button标签也可以
      button
      reset
      
  # select标签      
      默认是单选 可以设置成多选multiple
    一个个的下拉选项是由一个个的option标签组成
      selected
  ?
  # textarea标签
      获取大段文本
  ?
  # label标签
  ?
  """
  获取用户数据的标签都应该有name属性用来表明数据的含义 类似于字典的key
  获取到的用户数据类似于字典的value(也是存储到标签的value属性中了)
  """

   

• CSS

  # 样式
  ?
  # 注释 /**/
  ?
  # 引入方式
      三种方式
      1.style
      2.link
      3.行内
      
  # 如何查找标签
      选择器 {属性名:属性值;...}
  ?
  # 基本选择器
      id选择器
      #d1
      class选择器
      .c1
      标签选择器
      div
      通用选择器
      *
  
  # 组合选择器  我们将标签的嵌套关系比喻成了亲戚关系
    div span
    
    div>span
    
    div+span
    
    div~span
  ?
  
  # 属性选择器
      input[username=‘jason‘]
  ?
  
  # 不同选择器之间可以并列、混用
      div,p,span 
    
      div,#d1,.c1
  ?
  # 伪类选择器
      a标签的四个状态
      :link
      :hover  鼠标放上去
      :active
      :visited
      :focus  聚焦
  
  # 伪元素选择器
      :first-letter
      :before
      :after
      解决浮动带来的影响
      .clearfix:after {
          
        }
  
  # 选择器的优先级
      行内  id  class 标签
  ?
  # 属性相关
      font-family
      font-size
      font-weight
      color
      red
      #eee
      rgb()
      rgba()
      取色工具
      
    text-align
      center
    text-decoration
      none
      a标签自带的下划线
    text-indent
    
    backgroud:red url(‘‘) no-repeat center center 
          背景图片不动
        葫芦娃...
    
    border:3px solid red;
     
      border-radius
      50%  圆形头像
     
      display
      none
      block
      inline
      inline-block
    
    盒子模型
      margin
      border
      padding
      content
    
    浮动
      float
          0.浮动多用于前期页面布局
          1.浮动的元素会造成父标签塌陷
    
    清除浮动
      1.clear
      2.通用的方式
          哪里塌陷加哪里
        .clearfix:after{
          content:‘‘;
          display:block;
          clear:both
        }
  
    溢出
      overflow
      圆形头像
    
    定位
      静态 static
      相对定位  relative
      绝对定位  absolute
      固定定位    fixed
      
    z-index
      模态框
    
    透明度
      opacity
      
    box-shadow:3px 3px 3px rgba(0,0,0,0.5)

   

• JS

  # 面向对象的编程语言
  ?
  # 注释    //      /**/
  ?
  # 引入方式
      script
  ?
  # 数据类型
  ?
  # 变量
      var 5.1版本及之前的
    let 6.0版本新出的
    
    变量命名规范
      1.数字 字母 下划线 $
      2.驼峰命名
          userName
      3.不能有关键字
  # 常量
      const
  ?
  # 数值类型 number
      NaN
  # 字符类型string
      模版字符串
      res = `
      sd
      ads
      `
      
      res=`
      asdsa ${name} ...
      `
  # 布尔值boolean
      true、false
  ?
  # null与undefined
      厕纸图片
  ?
  # 数组对象  python中的列表 []
  ?
  # 运算符
      ++
    
    ===
    
    && || !
    
  # 流程控制  （）条件        {}代码块
  if-else if -else
      if(){}else if(){}else{}
  ?
  switch
  ?
  for
      for(let i=0;i<10;i++){}
  ?
  while
      while(i<100){}
  ?
  # 三元运算
      1>2?3:4
  # 函数
  function func(arg1,arg2,...){
    arguments
    return  不能返回多个 需要你自己构造容器类型返回
  }
  ?
  # 箭头函数
  var func1 = v => v
  ?
  # 自定义对象
  """
  在js中创建对象有一个关键字new
  """
  d1 = {‘name‘:‘jason‘,‘password‘:123}
  d1.name 
  ?
  d2 = new Object()
  d2.name = ‘jason‘
  ?
  ?
  # Date对象
  ?
  # JSON对象
      JSON.stringify()            dumps
    JSON.parse()                  loads
  ?
  # RegExp对象
      1.全局模式下有一个lastIndex属性
    2.什么都不写默认匹配undefined
  ?
  # Math对象(了解)