前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求。比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求上思考,用 HTML5确实是个不错的选择,利用了跨平台的同时,也考虑到了理财类型的app仅仅需要处理的是数据的业务逻辑,不存在较多的本地存储数据,而且涉及到 的财务信息从安全性考虑数据基本都会存储在服务器端,是不可能用于存储在本地的,再加上HTML5对各种手机屏幕的尺寸适配性非常灵活,所以这一类app 用HTML5开发是非常正确的选择。不过本文涉及的内容是针对IOS工程师所需的知识内容,所以并没有涉及网页前端所有的开发细节。
HTML5简介
HTML5 - 简单8年发展 - 标准UI界面跨平台 - 写一份HTML5代码,这个界面就可以运行到任何手机平台运行平台 - 浏览器移动先行 - 以前的HTML(5以上的版本)都是运行在非手持设备运行的原生 - 比如手机自带的手机相册\打电话\拍照 >手机app的常见的开发模式 :原生+HTML5
网页的基本组成
一个有具体功能的完整的网页,一般由3部分组成 HTML 决定网页的具体内容和结构 CSS 代表网页的样式(美化网页最重要的一块内容) JavaScript 网页的交互效果,比如对用户鼠标事件作出响应<HTML和CSS需要了解就好,因为需要掌握大量东西才好做CSS美工方面的东西>
HTML编写
什么是HTML? HyperText Markup Language 超文本标记语言 其实就是文本,由浏览器负责将它解析成具体的网页内容前端开发工具: >sublime text : 拓展性非常强(安装各种插件)\颜色经典 >Dreamwaver : 美工(Adobe公司开发) >WebStorm : 自带了各种插件 比如Nodejs grunt less >Eclipse : 主要开发Java程序head一般放CSS和JS的,body一般放内容。title一般放置描述性内容。常见的HTML的标签: 百度就能了解。
CSS编写
什么是CSS?CSS的全称是Cascading Style Sheets,层叠样式表它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如:
1 2 3 | color : red; background-color : blue font-size : 20px; 冒号左边的是属性名,冒号右边的是属性值 |
CSS的三种书写形式:
- 1、行内样式:(内联样式),就是直接在标签内部添加样式,直接作用到当前样式
1 2 | <p ></p> 弊端:只能作用于当前标签,对于多个重复的多个的,大量的重复的就不好了。 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <head> <style> p{ color: red; font: 40px; background: orange; }这个就是指定p标签的样式CSS </style> </head> <body> <p>loaojhaljeoijfaojfaojf;al</p> <p>loaojhaljeoijfaojfaojf;al</p> <p>loaojhaljeoijfaojfaojf;al</p> 这样这里所有的p标签的样式都会被上面的CSS样式所设定 <p >loaojhaljeoijfaojfaojf;al</p> 如果标签自己又设置了和样式标签有冲突的属性,代码会自动就近原则。 </body> 弊端:只能用在当前网页 |
- 3、外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
为了能够作用到项目里的所有HTML文件,就有必要新建一个xxx.css文件:
1 2 3 4 5 | div{ color:red; font-size: 50px; border: 1px } |
然后在需要设置CSS样式的网页上添加连接这个自定义CSS文件
1 2 3 4 5 6 7 8 | <head> <link rel="stylesheet" href="xxx.css" > rel是relation关系的意思 href就是Hypertext Reference(超文本引用)的缩写 </head> <body> <div>second</div> </body> 三种方式没有优先级,如果要考虑优先,原则就是就近原则。 |
CSS选择器
CSS有两大核心:选择器、属性(学好CSS,只要学好这两个就好了)
代码格式就是:
1 2 3 4 5 | 选择器{ 属性1; 属性2; 。。。。。。 } |
选择器使用实例1
选择器的作用:选择对应的标签,为之添加样式div{ color:red; font-size: 20px; border:5px;}html中的某个标签:...<body> <div>second</div></body>...这个div标签选择器,会根据标签名找到对应标签<div>,然后把选择器里的属性设置到对应标签的内容上。这里就是把color:red;font-size:20px;border:5px;设置在second这个内容上
选择器使用实例2
标签选择器:根据标签名找到标签
1 2 | <div>div1</div> <div>div2</div> |
下面是选择器:
1 2 3 4 5 | div{ color:red; font-size: 20px; border:5px; } |
因为两个标签的标签名都是div,所以选择器里的属性都会作用于div1和div2
下面讲讲不同类型的类选择器:
类选择器:
1 2 3 4 5 | <p class ="high">第一段文件</p> <p>第二段文字</p>
<div class ="high">div1</div> <div>div2</div> |
然后在CSS文件中:
这个标签是作用于class类标签属性是high的标签,所以会作用于"第一段文字"和"div"
总结:class标签就是可以把不同类的标签可以归为一个类class
注意 类选择器开头要有"."符号哦 类选择器的名字可以是标签中class属性字符串的一部分 比如:.he类选择器名可以访问class = "woe he llo"的标签(注意要空格隔开的,不隔开(比如woehello)无用) "."是用来找class属性的,而"#"是用来找id属性的。
id选择器:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head lang = "en"> <meta charset="UTF-8"> <title></title> <style> #rose { font-size: 50px; } </style> </head> <body> <div id="jack">11111</div> <p >2222</p> <a id="rose">222</a> </body> </html> |
如果id="rose"的标签有两个,IDE会报错,浏览器运行无效。和类标签选择器一样,Class通过.符号去选择,id选择器通过#符号去选择#rose选择器表示查找并将这里面的属性设置到标签中id是rose的标签
群组选择器
1 2 3 | div , p , a { font-size:50px; } 其实质意义上div,p,a三者是并列的。 |
再举一个并列选择器(或者):
1 2 3 | div , .high{ color: red; }; |
作用:只要标签中有div或者有class=”high”或者是div和class=”high都有的都能设置
另外,如果要设置所有标签的设置,那么选择器名可以是符号 *
复合(并且):
1 2 3 | div.high{ color: red; } |
还有就是需要同时符合三个条件,而且顺序不能乱:
1 2 3 | div.high#jack{ color: blue; } |
意思就是,必须既是div,而且是class属性有high,最后还要id为jack都满足的标签
后代选择器(之间空格):
1 2 3 | div .tom { color: red; } |
就是找到div里面class=”tom”的所有子标签
如果是:
就要找到div包含的p,这个p包含的div,这个div包含的span,这个span包含的p
然后根据后代又分为两种: 1、直接后代选择器,2、相邻兄弟选择器
这里就是针对直接后代的,就是div包含的直接p标签,不是间接包含的标签
相邻兄弟选择器,找到相邻的选择器
属性选择器:
1 2 3 4 | div[name]{ } div[name][id]{ } |
CSS的优先级(从1~4优先级别越来越低):
1 2 3 4 5 6 7 8 | 带有 !important 的属性 在style属性中的样式 先比较选择器的优先级,优先级高的会覆盖优先级低的。 针对性越强(范围越小)的选择器,优先级越高 针对性越弱(范围越大)的选择器,优先级越低 例子:<div id="jack">hewelf</div> 这里明显,id属性能够限定的标签最小,甚至对应的是一个标签。 如果优先级都相同,再比较选择器的先后顺序,后面的会覆盖前面的。 |
还有一种别人总结的经验:算权值标签 1 类 10 id 100 然后求和计算css的选择器的权值 CSS的注释是这样的 /* 内容 */但是在CSS中//这样的注释是无用的。
1 2 3 4 | CSS标签用的冒号叫"伪类" div:hover { color: blue; }hover表示鼠标悬浮在div标签上面的时候,会设置相关的属性,这里会让div标签内容变成蓝色 |
CSS选择器–伪类(了解):
HTML的输入框初识
...<input placeholder="请输入用户名">这个就是在输入框内添加浅色的提示...
Term和Alfred2的使用
iTerm和Alfred2的安装和使用笔记网址:http://www.cnblogs.com/goodboy-heyang/p/4909296.html
标签类型
根据显示的类型,主要分为3大类
块级标签
绝对独占一行的标签随时设置自己的宽度和高度(比如div、p、h1、h2、ul、li)
行内标签(内联标签)
多个行内标签能同时显示在一行宽度和高度取决于内容的尺寸(比如span、a、label)
行内-块级标签(内联-块级标签)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | 多个行内-块级标签可以显示在同一行 能随时设置宽度和高度(比如input、button)
display:显示 比如: display:inline-block 行内-区块 display:inline 行区 display:block 块 使用示例,这里将默认是块级的div设置为行内: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div{ display: inline; } </style> </head> <body> <div >hello</div> <div >world</div> </body> </html> 这里实例原本div标签的hello和world是分别显示在两行的,各自独占一行, 然后因为div选择器设置display: inline;意思就是将div标签设置为行内标签, 那么会发现效果hello和world就都显示在一行里了。 |
1 2 | display:inline-block 可以将内容设置为既是行内标签又是块级标签,这样你可以仅仅把div当做简单的容器就是了。 |
1 2 | display:none就会让内容不显示,这个display相当于IOS里的show方法 visiblity:hidden 仅仅是看不到 |
百度首页
源码下载百度云备份链接: 百度首页实例 密码: yzyv
网页开发须知: 工程项目文件目录 css文件夹 index.css script文件夹 index.html美工开发一般步骤: 先在html.index内定好结构,类似IOS开发中的规划好UI布局,每一块放好一块内容。 然后在index.css文件中根据html.index分好的块分别设置样式。 然后就是慢慢调整,很耗费时间的。
bootstrap
1 2 3 4 5 | 这是网页前端最受欢迎的第三方框架 另外,如果要学习可以到网站 v3.bootcss.com 在下载的bootstrap框架中css/下的我们能用到的就是bootstrap.css和bootstrap.min.css,其他的可以删除。 bootstrap.css和bootstrap.min.css的区别就是min将内部的空格都去了,这样文件小了,就可以节省流量。 所以bootstrap.css叫开发版本,然后bootstrap.min.css叫上线版本 |
官方开发文档展示了很多模板代码使用样式
说白了,这个框架就是帮你封装了一堆漂亮的样式,然后你只要会用即可。有一些图标被设计成字体,然后存储在fonts文件夹下的字体文件内,所以需要把整个fonts文件夹拷贝进工程根目录。在使用图片文字的时候,如果要调整大小,要注意,因为是文字,所以直接用font-size属性设置值就对了。
JS核心语法
浏览器就是JS的运行平台,就好比IOS就是OC的运行平台。
JS的常见用途
HTML DOM操作(节点操作,比如添加、修改、删除节点)给HTML网页增加动态功能,比如动画事件处理,比如监听鼠标点击、鼠标滚动、键盘输入
JS的书写方式
1 2 3 4 5 6 7 | 1、JS代码写在双引号里面。 <button onclice="alert(10);alert(99);">拍照</button> 这段JS代码可以写在html的<body>标签里,效果 2、脚本中执行 <scipt> console.log(100); </scipt> |
另外,JS所有的变量都是用var,实例:var 变量名 = 变量值
数据类型
1 2 3 4 5 | number 所有数字,比如小数/整数 object 所有类型 比如{}.[] string 字符串类型,用双引号""或者单引号'',建议JS都用单引号 原因示例:<body onclick ="alert('hello')"></body>如果hello用双引号,肯定会冲突的。 function 函数类型 |
定义函数
1 2 3 4 5 6 7 8 9 10 | function 函数名(形参){ //函数体 } 函数定义注意,如果两个或者两个以上的函数函数名一样,后面的会直接覆盖前面的, 没有重载的意义,就是直接的覆盖。最后使得只有最后一个函数有用或者会被调用。 function sum(num1,num2,num3,num4){ return num1 = num2 + num3 + num4; } //会返回NaN = Not a Number console.log(sum(10,20)); |
函数实例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | 1.简单的示例: var dog = { age : 30; run : function(){ //this 相当于 OC里的self console.log(this.age + '岁的狗跑起来。'); } } 2.关于多个参数的示例: function sum(){ console.log(arguments); } //JS会把多个参数存储在一个默认的数组arguments里面 sum(2+2+12);//然后会打印出[2,2,12] 3.求和多个参数 function sum(){ for (var i = 0,){ } } //JS会把多个参数存储在一个默认的数组arguments里面 sum(2+2+12);//然后会打印出[2,2,12] 3.多个参数返回求和(可以把字符串数值和数值类型数值都能相加) <script> function sum(){ var num = 0; for(var i = 0;i<arguments.length;i++){ var temp = arguments[i]; if (typeof temp == 'number'){ num += temp; }else if(typeof temp == 'string' && !isNaN(temp *= 1)){ num += temp; } } console.log(num); } sum('1',2,3,4,'hello'); </script> 4.看看函数的类型 console.log(sum)//不要用sum()这个是调用函数了 |
对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 最简单的对象 var dog = {}; 然后添加属性: var dog = { age : 20; name: 'rose'; }; console.log(dog.name); 然后要访问这个dog的属性的两种方法: console.log(dog.age);//点访问属性 console.log(dog['age']);//字典访问属性 这里提一个易错点:dog[age]这样会得到age的变量值,然后再访问字典字,所以会出bug的。 下面讲讲对象的方法: function temp(){ console.log('跑起来'); } var dog = { age : 20; run : temp; }; 当然把函数写成匿名函数,把函数直接封装在对象里面 var dog = { age : 20; run : function(){ console.log(this.age + '岁的狗跑起来') } }//如果this.age没有this的话,就会报错,JS明确必须要用this dog.age = 40; dog.run(); //函数也可以重新赋值或者叫覆盖 dog.run = function(){ console.log(this.age + '岁汪汪叫'); } |
数组、字典都是对象类型
数组实例:
var array = [12,'dog',24,'jack',{ name : 'wangcai'},[],function(){ console.log(10);}];array[array.length-1]();
原标题:HTML5的简介
关键词:HTML