React Native优点
1.跨平台
2.高效
3.热更新
因为React Native用到前端的知识,可以去这个网站学习前端知识:http://www.w3school.com.cn
网页前端编程基础
1:概述
工具:webstorm
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言,而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词,比如 <html>
HTML 标签通常是成对出现的,比如 <b> 和 </b>
标签对中的第一个标签是开始标签,第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
2:典型块级元素与行内元素
块元素(block element)
div
h(x) - 标题
p - 段落
table - 表格
ul - 非排序列表
内联元素(inline element)
span - 常用内联容器,定义文本内区块
a - 锚点
i - 斜体
img - 图片
input - 输入框
行内、块状元素区别:
(1).块级元素会独占一行,其宽度自动填满其父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到道一行排不下,才会换行,其宽度随元素的内容而变化
(2). 一般情况下,块级元素可以设置 width, height属性,行内元素设置width, height无效(注意:块级元素即使设置了宽度,仍然是独占一行的)
(3).块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)
行内元素和块状元素的说明
根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”,称为“行内”元素。div这样的块级元素,就会自动占据一定矩形空间,可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样子;与之相反,像“span”“a”这样的行内元素,则没有自己的独立空间,它是依附于其他块级元素存在的,因此,对行内元素设置高度、宽度、内外边距等属性,都是无效的。
标签分类
1.块级标签<div>
display:block
独占一行
可以指定宽高
2.行内标签<span>
display:inline
宽高随内容改变
可以在一行
改变display属性,就可以互换
display:inline-block特性:可以在一行(行内),又可以指定宽高
代码如下:
<html>
<head>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
div{
border: 1px solid red;
width: 100px;
display: inline;
}
span{
border: 1px solid green;
display:inline-block;
width: 100px;
height: 200px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<div>
abc
</div>
<h1>人民日报</h1>
<span>efg</span><span>hij</span>
</body>
</html>
3,CSS
CSS(层叠样式表)
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
h1 {color:red; font-size:14px;}
CSS盒子模型
CSS中, Box Model叫盒子模型(或框模型),Box Model规定了元素框处理元素内容(element content)、内边距(padding)、边框(border) 和 外边距(margin) 的方式。在HTML文档中,每个元素(element)都有盒子模型,所以说在Web世界里(特别是页面布局),Box Model无处不在。下面是Box Model的图示:
说明:上图中,由内而外依次是元素内容(content)、内边矩(padding-top、padding-right、padding- bottom、padding-left)、边框(border-top、border-right、border-bottom、border- left)和外边距(marging-top、margin-right、margin-bottom、margin-left)。
内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。而且,外边距可以是负值,而且在很多情况下都要使用负值的外边距。
下图是W3School的Box Model 图解:
示例代码如下:
<html>
<head>
<style type="text/css">
/* “*” 代表通配符,代表适用于所有标签*/
*{
padding: 0px;
margin: 0px;
}
/*ID选择器*/
#myDiv{
/*实际的宽度,width+左右边距+左右边框*/
width: 200px;
height: 300px;
border: 1px solid red;
/*
padding填充,内边距
*/
/*
1.上下左右的的值
2.上下,左右
3.上,左右,下
4.上,右,下,左(顺时针方向)
*/
padding: 0px 10px 0px;
margin: 10px 20px 10px;
}
#myDiv2{
width: 200px;
height: 300px;
border: 1px solid green;
}
/*类选择器*/
.title{
color: blue;
font-size: 14px;
}
/*混合使用*/
span.title{
font-size: 25px;
}
div > p{ /*代表div下的p标签*/
font-size: 20px;
color: yellow;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
</head>
<body>
<div id="myDiv">
<p>abc</p>
</div>
<div id="myDiv2"></div>
<span class="title">Javascript</span>
<i class="title">ActionScript</i>
</body>
</html>
上面代码涉及选择器的知识,意思是确定该样式用在那个标签上和安卓的设置控件id差不多;
1.通配符
2.标签选择器,页面所有标签都会应用指定样式
3.类选择器,一个页面可以有多个标签有相同的class
4.ID选择器,一个页面可以不能有多个标签有相同的id
学习的网站:
预习资料:
http://www.runoob.com/js/js-tutorial.html
http://es6.ruanyifeng.com/
http://www.runoob.com/react/react-tutorial.html
https://github.com/enaqx/awesome-react