便于iOS开发的网页前端知识学习

一、HTML

1. 何为html

页面上每一个显示的内容都是标签,整个页面都是由标签构成的,html的代码内容控制的是页面显示的内容,这些内容的代码呈现方式都是标签。标签元素是html最根本的东西。

  1. 标签,属性 -----可以通过查看www.w3school.com来学习,里面有详细的教程
  2. 标签之间的关系 : 一个标签在另一个标签的里面叫做父子关系,或者是平级的兄弟关系
  3. 标签(元素)的类型

a) 块级元素(block):独占一行,能够随意的修改尺寸

b) 行内元素(inline):多个行内元素能够显示在同一行,不能修改尺寸,尺寸决定于内容的多少

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

  1. 盒子模型:标签的元素都是以盒子模型的方式进行显示的,有边界(margin)、框边(border)、填充(padding)、内容(content)一层一层的套起来的。具体图示可百度。
  2. 常用属性

a) Font-size : 字体的大小

b) Color:文字颜色

c) Background:背景

d) Display:显示的类型block,inline,inline-block,none

e) Padding

f) Margin

  1. 标准流:网页的布局方式都是一种从上到下,从左到右的一种排列方式,这是一种“标准”的排列方式,所以叫做标准流。
  2. 脱离标准流:有些内容不想要这种中规中矩的摆列方式,需要脱离标准流,形成一种自由的或是绝对的位置,这里就出现了脱离标准流。

a) Float(浮动):left、right属性,用来设置靠窗口的左右

b) 绝对定位:position:absolute、right:0px、bottom:0px 这样设置是在右下角的位置,设置父节点的positon为reletive,那么相对的对象就成了父节点,设置的时候遵守的原则就是:子绝父相

二、CSS

1.html的代码内容控制的是显示的内容,html只管内容,显示的样式就是由CSS控制

2.Css样式的控制-选择器

a) 标签选择器:tagName

b) 类选择器:.className

c) Id选择器:#id

d) 后代选择器(多个选择器之间用空格隔开):tagname .className .classname tagName

e) 群组选择器(多个选择器之间用,隔开):tagName, .className , tagname tagname

f) 直接后代选择器(多个选择器之间用>分开):tagname > .classname

g) 属性选择器:tagName【arrtname = “attributeValue”】

h) 选择器组合(多个选择器黏在一起):tagName.className#id

i) 数值控制的数值优先:每一个选择控制器都有一个值来控制,组合起来值最大就选择谁, !Important是最大的。

j) 伪类:主要控制其元素在某些特定状况下的显示效果 :tagName:hover

三、JS

  1. JS是一门轻量级的编程语言,是一门脚本语言,是顺序执行的语言,不需要编辑就可以执行,主要是编浏览器进行执行
  2. 节点的基
  3. 本操作(CRUD增删改查)

a) Create:

var div = document.createElement(‘div’);

document.body.appendChile(‘div’)

b) Read:

Var div = document.getElement(‘div’);

Var div = document.getElementsByTagname(‘div’)[0];

等等方法

c) Update

`var img = document.getElementById(‘logo’);

Img.src = ‘imges/01.png’

d) Delete

`var img = document.getElementById(‘logo’);

img.parentNode.removeChild(img);

四、JQuery:功能强大的JS框架,里面使用JS封装了许多的控件和功能

百度搜索“JQuery中文文档”里面有非常多详尽的内容

  1. 通过选择器查找元素

a) $(‘选择器’)

b) jQuery支持绝大部分的css选择器

  1. 属性操作

a) 获得属性:$(‘选择器’).attr(‘属性名’)

b) 设置属性: $(‘选择器’).attr(‘属性名’,‘属性值’);

  1. 显示和隐藏

a) 显示:$(‘选择器’).show()

b) 隐藏:$(‘选择器’).hide()

c) 显示和隐藏来回切换:$(‘选择器’).toggle();

  1. 事件绑定

a) 点击事件

$(‘选择器’).click(function(){ 这里写你需要做的事情 })

链式编程:$(‘选择器’).click(function(){ 这里写你需要做的事情 }).show

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

  1. 概念

a) 有个html5框架,编写简易的几行JS代码,就能实现非常漂亮的手机界面

b) Html框架封装了大量的DOM节点的操作,封装了大量的css样式

c) 对JS的要求比较高,对CSS的要求并不高

  1. 常见的HTML5框架
  2. PhotoGap
  3. jQuery Mobile
  4. Sencha-touch
时间: 2024-10-09 13:19:16

便于iOS开发的网页前端知识学习的相关文章

前端知识学习步骤

著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处.作者:龚一峰链接:https://www.zhihu.com/question/19862294/answer/44311692来源:知乎 css 编写规范 http://cssguidelin.es/ 前端性能优化的24种方法 http://browserdiet.com/en/ 学习js正确的方法 JS: The Right Way 很有趣的js编程教材(才出的) Eloquent JavaScript 设计师写的js入门教

16-11-12 网页前端技术学习总结

学习了将近一个月的前端知识,也学到了不少之前仅有概念的东西,整个网页的制作目前也只是学了一些浅显的东西.网页分为HTML,CSS,JS(JQ).这三类应用技术时目前所学到的前端应用技术,最底层的HTML代码负责整个页面的内容注入,虽然也有样式语句,但是样式的语句都是由CSS来负责完成,而一些其他的页面的演示效果由JS(JQ)来完成.HTML语句中最重要的框架标签<html></html>用于声明页面格式,<meta charset="">用于设置代码

李洪强iOS开发之【零基础学习iOS开发】【02-C语言】02-第一个C语言程序

前言 前面已经唠叨了这么多理论知识,从这讲开始,就要通过接触代码来学习C语言的语法.学习任何一门语言,首先要掌握的肯定是语法.学习C语言语法的目的:就是能够利用C语言编写程序,然后运行程序跟硬件(计算机.手机等硬件设备)进行交互.由于我们的最终目的是学习iOS开发,学习iOS开发的话必须在Mac系统下,因此我就在Mac系统环境下开发C语言程序,而不是在Windows环境下. 接下来,就在Mac系统环境下编写第一个C语言程序,最后把程序运行起来,跟计算机做一个小小的互动 一.编写第一个C语言程序-

李洪强iOS开发之【零基础学习iOS开发】【01-前言】02-准备

在上一讲中,介绍了什么是iOS开发.说简单一点,iOS开发,就是开发运行在iPhone或者iPad上的软件.这么一说完,应该有很多人就会产生一些疑惑,比如学习iOS开发是不是一定要买iPhone?需不需要买苹果电脑呢?学软件开发是不是一定要计算机专业的?因此,在这讲中,我会为广大有意学习iOS开发的朋友们进行解惑,说明一下学习iOS开发究竟需要那些准备. 一.程序设计语言 上一讲已经说到:要想开发一款软件,首先得学习一些相应的程序设计语言.至于iOS开发,需要学习的语言主要有:C.C++.Obj

李洪强iOS开发之【零基础学习iOS开发】【01-前言】01-开篇

从今天开始,我就开始更新[零基础学习iOS开发]这个专题.不管你是否涉足过IT领域,也不管你是理科生还是文科生,只要你对iOS开发感兴趣,都可以来阅读此专题.我尽量以通俗易懂的语言,让每个人都能够看懂.若遇到不明白的地方或者对此文有异议,望及时评论. 一.什么是iOS 要想学习iOS开发,首先要搞清楚什么是iOS.iOS其实是一款操作系统,就像平时我们在电脑上用的XP.Win7,都是操作系统. 那什么是操作系统呢?操作系统其实是一种软件,是直接运行在硬件(电脑.手机等)上的最基本的系统软件,任何

安全测试2_Web前端知识学习

上次讲到安全的简介,这次就来简单的讲解下基本的前端知识(html.js.css(不作讲解),牛逼的请忽略!!! 1.Html简单概述: Html和Html DOM 2.Html字符实体(借用别人的,详细可以百度了解更多字符实体): 3.了解Html常见事件属性: onerror(在错误发生时运行的脚本).onload(页面结束加载之后触发).onclick(元素上发生鼠标点击时触发).onchange(在元素值被改变时运行的脚本).onfocus(当元素获得焦点时运行的脚本).oninput(当

李洪强iOS开发之【零基础学习iOS开发【01-前言】03-前景和难易度分析

一.iOS开发的前景 2012年3月份,苹果公司的市值已经突破5000亿美元,成为世界上市值最大的公司.5000亿是神马概念呢? 可以帮助陷入欧债危机的8个国家偿还债务 可以买下35个天安门广场.34座卢浮宫.109座圆明园 可以同时买下雅虎.戴尔.百思买.摩托罗拉.动视暴雪 超过105个国家一年的GDP 平铺在地上,能覆盖42%的美国领土 每个苹果员工可以分到660万美元 ...... 这个5000亿,真可谓“富可敌国”.在此,我们还要感谢苹果公司给雅安捐款5000万.其实,苹果对我们中国消费

iOS开发-由浅至深学习block

关于block 在iOS 4.0之后,block横空出世,它本身封装了一段代码并将这段代码当做变量,通过block()的方式进行回调.这不免让我们想到在C函数中,我们可以定义一个指向函数的指针并且调用: 1 2 3 4 5 bool executeSomeTask(void) {     //do something and return if success or not } bool (*taskPoint)(void); taskPoint = something; 上面的函数指针可以直接

活到老学到老:iOS开发中的基础知识(一)

本文参考 标哥的博客:宝库iOS开发笔试题 进行学习整理.与其说是看面试题,不如说是对自己知识的巩固.工欲善其事必先利其器,基础知识不牢固可能会导致编程中的一些注意不到的问题.总之一句话:活到老,学到老. 1.数组中的元素去重问题. //重复元素 NSArray *array = [NSArray arrayWithObjects:@"1",@"2",@"3",@"4",@"5",@"1"