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