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.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