一、HTML + CSS

1.能看到标签的结构
* 父子关系
<p>
    <span>123</span>
</p>

* 属性
<img src="data:images/01.png">

2.了解元素(标签)的类型
1> block:块级
* 独占一行
* 能随意修改尺寸

2> inline:行内
* 多个行内元素能显示在同一行
* 不能修改尺寸,尺寸取决于内容的多少

3> inline-block:行内-块级
* 多个行内-块级元素能显示在同一行
* 能随意修改尺寸
* 不设置尺寸,默认的尺寸取决于内容的多少

3.了解常见的属性
1> font-size : 字体大小
2> color: 文字颜色
3> background: 背景
4> display: 显示的类型(block、inline、inline-block、none)
5> padding
6> margin
7> border
8> width
9> height

4.脱离标准流
1> float: left\right
2> 绝对定位
* position : absolute;
* right: 0px;
* bottom: 0px;
// 右下角
// 如果想相对于父节点进行定位,最好设置父节点的position为relative
// 原则:子绝父相

5.常见的选择器
1> 标签选择器:tagName
2> 类选择器:.className
3> id选择器:#id
4> 后代选择器(多个选择器之间用空格隔开):tagName .className .className tagName
5> 群组选择器(多个选择器之间用逗号,隔开):tagName, .className, tagName, .className
6> 直接后代选择器(多个选择器之间用大于号>隔开):tagName > .className > .className > tagName
7> 属性选择器:tagName[arrtName="attrValue"]
8> 选择器组合(多个选择器粘在一起):tagName.className
9> 伪类
* tagName:hover
* .className:hover
* tagName.className tagName:hover

6.进阶
* 百度

二、JS

1.节点的基本操作(CRUD)
* C(Create):
var div = document.createElement('div');
document.body.appendChild(div);

* R(Read):
var div = document.getElementById('logo');
var div = document.getElementsByTagName('div')[0];
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);

2.事件绑定
1> 推荐做法
var button = document.getElementById('login');
button.onclick = function() {
    // 实现点击按钮想做的事情
};

2> 直接写在标签内部
<button onclick="var age = 20; alert(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() {
    // 实现点击按钮想做的事情
}).hide();
// 先给节点绑定事件,再隐藏

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

四、参考手册

1.www.w3school.com.cn
2.http://www.w3school.com.cn/jquery/jquery_reference.asp
3.http://www.php100.com/manual/jquery/

五、HTML5框架(大部分都是为移动设备而写的)

1.概念
* 有了HTML5框架,编写简易的几行JS代码,就能实现非常漂亮的手机界面
* HTML5框架封装了大量的DOM节点操作,封装了大量的CSS样式
* 对JS的要求比较高,对CSS的要求并不高

2.常见的HTML5框架
* PhoneGap
* jQuery Mobile
* sencha-touch

IOS HTML+CSS+JS 总结的更多相关文章

  1. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  2. 前端小白页面开发注意事项及小工具(html\css\js)

    技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...

  3. html+css+js+Hbuilder开发一款安卓APP,根本不用学Android开发!

    我们知道,要做一款安卓APP,咱们得先学安卓开发语言,例如java,前端后端.那么没有这些开发语言基础,咱们怎么做呢?其实现在有比较好的开发方案就是做webAPP,咱们可以用web前端知识构建安卓客户 ...

  4. CSS & JS 制作滚动幻灯片

    ==================纯CSS方式==================== <!DOCTYPE html> <html> <head> <met ...

  5. 【转】Maven Jetty 插件的问题(css/js等目录死锁)的解决

    Maven Jetty 插件的问题(css/js等目录死锁,不能自动刷新)的解决:   1. 打开下面的目录:C:\Users\用户名\.m2\repository\org\eclipse\jetty ...

  6. Css Js Loader For Zencart

    Css Js Loader 描述:这个插件很早就出来了,可能知道人非常少 这个插件的功能是整合所有的网站的CSS和JS内容到一个文件里边. 因为CSS和JS文件到了一个文件,加快了程序的运行 在配合其 ...

  7. 购物车数字加减按钮HTML+CSS+JS(有需要嫌麻烦的小伙伴拿走不谢)

    之前在写详情页的时候,如下图 因为自己嫌麻烦,就去看其他网站是怎么写的,想直接拿来用,后来看来看去觉得写得很麻烦,于是最后还是决定自己写,附上HTML+CSS+JS代码,一条龙一站式贴心服务2333 ...

  8. vs合并压缩css,js插件——Bundler & Minifier

    之前做了一个大转盘的抽奖活动,因为比较火,部分用户反馈看不到页面的情况,我怀疑js加载请求过慢导致,所以今天针对之前的一个页面进行调试优化. 首先想到的是对页面的js和css进行压缩优化,百度了下vs ...

  9. nginx资源定向 css js路径问题

    今天玩玩项目,学学nginx发现还不错,速度还可以,但是CSS JS确无法使用,原来Iginx配置时需要对不同类型的文件配置规则,真是很郁闷,不过想想也还是很有道理.闲暇之际,把配置贴上来.#user ...

随机推荐

  1. 【记录】SQL注入过滤源码分享

    $id=check_addslashes($_GET['id']);$id= preg_replace('/o*r/i',"", $id); //strip out OR (non ...

  2. vue 修饰符(转载)

    大佬写的很详细,直接转载过来,随时可以参考, 原博:https://www.w3cplus.com/vue/vue-methods-and-event-handling.html 事件处理 如果需要在 ...

  3. TT 安装 之 AIX

    # mkgroup -'A' id='1000' adms='root' tt -- 创建用户 # mkuser id='1000' pgrp='tt' groups='tt' adms='root' ...

  4. query纠错方法

    1. 第一种,在norvig介绍的方法中,详细的阐述了argmaxc P(c|w)的转换和求解办法. 这个概率不好直接算,但可以根据贝叶斯定理等价于argmaxc P(w|c)*P(c) / P(w) ...

  5. (转)DB2 db2diag.log 日志分析

    DB2 db2diag.log 日志分析 原文:http://blog.csdn.net/lyjiau/article/details/52129997 db2diag.log是用来记录DB2数据库运 ...

  6. 018-面向接口编程的BeanFactory模板代码

    1 BeanFactory工具类 package www.test.utils; import org.dom4j.Document; import org.dom4j.Element; import ...

  7. java的访问修饰符

    Java中通过访问控制符(default,private,public,protected)来控制对类.变量.方法.构造方法的访问. 下表说明了4中修饰符的访问权限: 修饰符 当前类 同一包内 子孙类 ...

  8. MYSQL系列-Mysql存储引擎选择

    MYSQL系列-Mysql存储引擎选择 //查看当前数据库支持的存储引擎 show engines \G; 创建表的时候可以通过engine=MyISAM指定存储引擎 MyISAM: .MYISAM不 ...

  9. JS识别不同浏览器信息

    总所周知,不同浏览器兼容是不一致的,然而今天我在Coding的时候深深体会到那个痛苦,一样的代码在Firefox里面是没问题的,可以根据索引找到 对应的对象元素然后进行操作,但是同样的却获取不到对象元 ...

  10. 腾讯蔡晨:十年沉淀,腾讯iOA为企业安全保驾护航

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来"峰会再广州召开,广东省各级政府机构领导.海 ...