Home > Developer > Web Develop
In the company to develop Android also has a period of time, the recent company also started a new project, to do a start-up conference, at the meeting pointed out that we hope that our mobile phone team (Android,ios) can put HTML5 this piece also eat, this piece is to ask the Java group of people to do. and HTML5 in development is also very convenient, a development, multi-platform use, indirect integration of Android and iOS
After the meeting, the eldest brother also did a little indirect to HTML5
In fact, HTML5 can be understood as opposed to Android.
HTML5 Part-–layout.xml
CSS3 Part-–style.xml
JavaScript Section-–java Logic code
According to the above correlation, it is very good to understand the HTML, it seems easy to learn, so the boss gave us a few days, let us as soon as possible familiar with HTML5 and the production page.
Development tool SelectionOf course, the development of the first step is to choose a tool, Android I am using eclipse, but Html5 obviously not, this tool is not good to use, in the Internet to find the next, Hbuilder is good, easy to use, learn the words directly using this is good
This tool directly to the official website to download, the address is Hbuilder official website
Download content is a compressed package, decompression can be used directly, only need to register an account.
Build a projectThis step is simple, just choose the mobile app project, the empty template can
We'll look at the structure of the project after we get in.
Manifest.json configuration fileThis is just the default file structure of Hbuilder, you can also create or delete these directories according to your preference, this is not a fixed structure
Manifest.json is a bit like the android manifest configuration file, but also to do some basic configuration of the system, HTML5 mobile app configuration includes:
This information in the Manifest.json has the corresponding comments, I believe that all very well understood, here is just a note
CSS style selector formatOn the first day of learning, I realized the CSS style and found that it is more powerful than the Android style in that it has a tag selector, which allows you to manage some tags in a unified fashion.
There are three ways to define in a tag, you can use styles in CSS
One, direct signature, use tag name plus {} in CSS to define its style
<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>Where the body tag, directly in the CSS defines a style, the property is the background color red
Second, the definition of the class attribute, which defines its style in CSS using the. Class {} method.
<! 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>We define a class attribute in the P tag named Test, and then we can define all the tags of class test in CSS, which is used for all class test tags. + Class Property value {} to define
Third, the ID definition, CSS to the ID using #id {} way to define its style
<! 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: + px; } </style> </head> <body> <p class="Test" id="pp">This is a Test.</P> </body></html>The above three definitions can not only be defined in a single definition, but also can be mixed definition, such as the level tag, the p tag inside the span tag, we can write in the CSS p span {xxx:xxx;} mixed with a space in the middle of the time, so that can do a lot of mixing more, the more detailed definition of the more accurate
Note: When defining these styles, the ID is the only attribute, class can be repeated, so the class style, as long as the class value of the same label can be used, and the label style, is the same label can be used, which the secret to understand yourself
<style type="text/css"> body{ background-color:red; }</style>
This style means that the background color in the body tag is red
2. Inline style loading, defined directly in the tag element using the Style property within the tag
give me another chestnut .
<p style="color: red; margin-left: 20px;"> This is a Test.</p>
The above content is displayed in a section of the font color red with the left margin 20px away from the text, the content is a Test
3. External style sheet, using the content of the file in CSS format inside the external file, using the < link> tag to load the style sheet in the < head> header
For a chestnut
<head> <link rel="stylesheet" type="text/css" href="xx.css" /></head>
where the Rel attribute and the type attribute are generally so fixed, the following href attribute is the path where your CSS file is stored, and you can use the style content in CSS after loading.
Not much content, tomorrow to learn new and new content!
HTML5 Learning-day1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
