您的位置：首页 > Web前端 > HTML5

HTML5学习-Day1

2015-06-17 00:42 597 查看

序

在公司开发Android也有一段时间了，近期公司又要开始新的项目，为此也弄了个开工大会，在会上就指出，希望我们手机端小组（Android，IOS）能够把HTML5这块也吃下，以前这块都是拜托Java小组的人去做的.. 而且Html5 在开发上也很方便，一次开发，多平台使用，间接的整合了Android和Ios

会后老大也对Html5稍微做了间接

其实HTML5 相对于 Android 可以是这样理解的

HTML5部分 —– layout.xml

CSS3部分 —– style.xml

JavaScript部分 —– Java逻辑代码

按照以上这种关联，倒是很好理解Html，似乎很容易学会，所以老大就给了我们几天的时间，让我们尽快熟悉html5并且上手制作页面。

开发工具选择

当然，开发第一步都是选择一个工具，Android我是用Eclipse，但是Html5明显不行，这工具不好用，在网上找了下， HBuilder 还不错，使用起来也简单，学习的话就直接使用这个就好了

这工具直接去官网下载就好了，地址是HBuilder官网

下载内容是个压缩包，解压就可以直接使用了，只需要注册个账号即可。

建立项目

这一步很简单，只要选择移动APP项目，空的模板即可

进入后我们先看下项目的结构

css文件夹

这部分用来存放css样式的文件

img文件夹

这部分用于存放一些图片资源

js文件夹

这部分存放js文件

项目根目录

一般我们html页面就直接丢这里，当然，我初学就无所谓了，懒得去细分结构

这只是HBuilder 的默认文件结构，你也可以根据自己的喜好新建或删除这些目录，这不是固定的结构

manifest.json 配置文件

manifest.json 有点像是Android里面的清单配置文件，也是做一些系统的基本配置，Html5对移动APP的配置包含：

应用信息

传感器信息

平台选择

应用图标和启动图片设置

第三方插件配置

是否全屏的设置

打包配置信息

这些信息在manifest.json 中都有相应的注释，相信都很好理解，这里只是做个笔记

css样式的选择器格式

学习的第一天，认识了css样式，发现它比android的style强大的地方在于，它有个标签选择器，通过这个设置，可以统一的管理一些标签

标签选择器的使用方式

在标签中有三种方式定义，可以在css中使用样式

一，直接标签名，在css中使用标签名加{}来定义其样式

<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello world</title>
<style type="text/css">
body{
background-color:red;
}
</style>
</head>
<body>
This is a Test.
</body>

</html>

其中body标签，就直接在css中对其定义了一个样式，属性为背景色为红色

二，class属性的定义，在css中使用 .class {}的方式定义其样式

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello world</title>
<style type="text/css">
body{
background-color:red;
}
.test{
color: white;
}
</style>
</head>

<body>
<p class="test">
This is a Test.
</p>
</body>

</html>

我们在p标签内定义一个class属性，取名为test，然后就可以在css中对class为test的所有标签进行一个定义，是所有class为test的标签使用 . + class属性值 {}来定义

三，id定义，css对id使用 #id{}的方式来定义其样式

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>hello world</title>
<style type="text/css">
body{
background-color:red;
}
.test{
color: white;
}
#pp{
font-size: 40px;
}
</style>
</head>

<body>
<p class="test" id="pp">
This is a Test.
</p>
</body>

</html>

以上三种定义方式不仅仅可以单定义,还可以混合定义，例如层级标签，P标签内部的span标签，我们可以在css中写 p span { xxx: xxx;} 混合使用的时候中间加个空格就好了，这样能做很多区分混合的越多，定义的就越详细精准

注意事项：在定义这些样式的时候 id是唯一的属性，class可以重复，所以class的样式，只要class值一样的标签都能使用，而标签样式，是相同的标签都能使用，其中奥妙请自己领悟

加载方式

1.内部样式表加载，在< head> 头部通过 < style>定义

举个栗子

<style type="text/css">
body{
background-color:red;
}
</style>

该样式就是指 body标签内背景颜色为红色

2.内联样式加载，直接在标签元素中使用通过标签内的 style属性来定义

再举个栗子

<p style="color: red; margin-left: 20px;">
This is a Test.
</p>

以上内容是在显示一段字体颜色为红色的与左边外边距相距20px位置的文本，内容为This is a Test

3.外部样式表，使用存放在外部文件内的css格式的文件内容，使用时需要在< head>头部内使用 < link>标签加载样式表

for一个栗子

<head>
<link rel="stylesheet" type="text/css" href="xx.css" />
</head>

其中rel属性和type属性一般是如此固定写法，后面的href属性是你的css文件存放的路径，加载后就可以使用css中的样式内容了

内容不多，明天学习新的再上新的内容！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航