Web基础知识总结

一.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. = function(){    //实现点击按钮想做的事情}

2>直接写在标签内部

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

3>不常用

function login(){    //实现点击按钮想做的事情}var button = document.getElementById('login');
button. = 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

作者：西风颂
链接：https://www.jianshu.com/p/080697291839
。