一.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
。
随时随地看视频
