前端入门——review01(HTML&CSS&JS)

Posted 凌醉枫

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端入门——review01(HTML&CSS&JS)相关的知识,希望对你有一定的参考价值。

上周内容回顾

  • 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对象(了解)

     

 

 

 

 

以上是关于前端入门——review01(HTML&CSS&JS)的主要内容,如果未能解决你的问题,请参考以下文章

Html与CSS快速入门01-基础概念

前端入门 HTML+CSS 万字血书总结-强烈安利

牛客编程题零基础入门前端之73题(html,css,ES5,WebAPI)

Electron入门 01:快速入门

值得你拥有的前端好书推荐(前端书籍,面试题,实战视频)

零基础入门前端系列—CSS介绍