Web基础知识总结

作者: 西风颂 | 来源:发表于2016-07-11 17:35 被阅读1524次

    一.HTML

    标签结构以及常用标签的含义

    父子关系:
      <p>
        <span>内容</span>
      </p>
    
    属性
    标签的基本含义

    了解元素(标签)的类型

    1> block: 块级类型

    • 能独占一行;
    • 能随意修改尺寸;

    2> inline:行内类型

    • 多个行内元素能够显示在同一行;
    • 不能修改尺寸,尺寸大小取决于内容的多少;

    3> inline-block:行内-块级类型

    • 多个行内-块级元素能够显示在同一行;
    • 能够随意修改尺寸;
    • 不设置尺寸,默认的尺寸取决于内容的多少;

    了解常见的属性

    • font-size
    • color 文字颜色
    • background 背景
    • display 显示的类型(block, inline,inline-block,none)
    • padding
    • margin
    • border
    • width
    • height
    基本盒子模型
    盒子模型

    脱离标准流

    1> float: left/right
    2> 绝对定位:

    • position : absolute
    • right: 0px
    • bottom: 0px
      表示的右下角

    如果想相对于父节点进行定位,最好设置父节点的 position 为relative;原则是子绝父相

    常见选择器

    • 标签选择器 tagName
    • 类选择器 className
    • id选择器 #id
    • 后代选择器 (多个选择器之间用空格隔开)
      tagName .className .className tagName
    • 群组选择器 (多个选择器之间使用逗号,隔开)
      tagName, .className, tagName, .className
    • 直接后代选择器(多个选择器之间使用大于号>隔开)
      tagName > .className > .className > tagName
    • 属性选择器 tagName[attrName='attireValue']
    • 选择器组合(多个选择器粘在一起) tagName.classNaem
    • 伪类
      - tagName:hover
      - .className:hover
      - tagName.className tagName:hover

    二. JavaScript

    节点的基本操作(CRUD)

    • C (create):
    var div = document.createElement('div');
    document.body.appendChild(div);
    
    • R (read)
    var div = document.getElementById('logo');
    var div = document.getElementByTagName('div');
    var div = document.getElementsByClassName('logo')[0];
    
    • U (update)
    var img = document.getElementById('logo');
    img.src = 'images/01.png';
    
    • D (delete)
    var img = document.getElementById('logo');
    img.parentNode.removeChild(img);
    

    事件绑定

    1>推荐做法

    var button = document.getElementById('login');
    button.onclick = function(){
        //实现点击按钮想做的事情
    }
    

    2>直接写在标签内部

    <button onclick="var age=20;alter(age);">登录</button>
    

    3>不常用

    function login(){
        //实现点击按钮想做的事情
    }
    var button = document.getElementById('login');
    button.onclick = login();
    

    第三方框架的使用

    jQuery

    1.通过选择器查找元素

    • $('选择器')
    • jQuery支持绝大部分的 CSS 选择器

    2.属性操作

    • 获得属性 : $('选择器').attr('属性名');
    • 设置属性 : $('选择器').attr('属性名','属性值');

    3.显示和隐藏

    • 显示: $ ('选择器').show( );
    • 隐藏: $ ('选择器').hide( );
    • 显示和隐藏来回切换: $ ('选择器').toggle( );

    4.事件绑定

    • 点击事件(常用)
    $ ('选择器').click(function(){
         //实现点击按钮想做的事情
    } );
    
    • 点击事件(不常用)
    function login(){
         //实现点击按钮想做的事情
    }
    $ ('选择器').click(login());
    

    常见的前端框架

    • Bootstrap 由 Twitter 公司出品

    常见的 HTML5 框架

    • PhoneGap
    • jQuery Mobile
    • sencha-touch

    相关文章

      网友评论

      • 熊孩子CEO:能不能更多更新
        西风颂: @熊孩子CEO 放心吧!后续有时间还会更新的,关注一下就好了
      • 枫不语:最近刚开始学web,谢谢你的总结~
        西风颂: @疯骨 不客气
      • 9171f3167252:好
        西风颂: @ttcaix6 这个只是一些基础,项目中都是一些综合案例没有纯Web的
        9171f3167252: @西风颂 你有项目可以分享不
        西风颂: @ttcaix6 谢了
      • 幻色尘埃:简单实用
        西风颂: @幻色尘埃 谢谢啦
        西风颂: @幻色尘埃 谢谢啦!
      • 认真的半瓶子醋:学习了。刚开始学html
        西风颂: @认真的半瓶子醋 那就互相学习啦!加油
      • DisplayBlock:var div = document.getElementByClassName('logo')[0]
        原生的有吗?新出来的?求解?
        西风颂:@DisplayBlock 这个就是原生的,应该是这样的var div = document.getElementsByClassName('logo')[0];
        西风颂:@DisplayBlock 是的,谢谢,已更改!
        DisplayBlock:还有jq的不常用点击事件里是不是少个括号啊

      本文标题:Web基础知识总结

      本文链接:https://www.haomeiwen.com/subject/ngrjjttx.html