HTML5 learning-Day1, html5-day1
Collation
I have been developing Android for some time in the company. Recently, the company wants to start a new project. For this reason, we have also started a project. At the conference, I pointed out that we hope our mobile phone Team (Android, IOS) can also eat HTML5. In the past, this was done by the Java team .. in addition, Html5 is also very convenient for development. One Development and multiple platforms are used to indirectly integrate Android and Ios
After the meeting, the boss made some indirect adjustments to Html5.
In fact, HTML5 is similar to Android.
HTML5 part -- layout. xml
CSS3-style. xml
JavaScript-Java logic code
According to the above association, it seems very easy to understand Html, so the boss gave us a few days to get familiar with html5 as soon as possible and get started with page creation.
Development Tool SelectionOf course, the first step of development is to select a tool. for Android, I use Eclipse, but Html5 obviously does not work. This tool is not easy to use. After searching for it online, HBuilder is good and easy to use, if you are learning, you just need to use this.
This tool can be downloaded directly from the official website at the official HBuilder website.
The downloaded content is a compressed package, which can be used directly after decompression. You only need to register an account.
Create a projectThis step is simple. You only need to select a mobile APP project and an empty template.
After entering, let's take a look at the project structure.
Manifest. json configuration fileThis is only the default file structure of HBuilder. You can also create or delete these directories based on your preferences. This is not a fixed structure.
Manifest. json is a bit like the configuration file in Android. It also makes some basic system configurations. The Html5 configuration for mobile apps includes:
This information has corresponding comments in manifest. json. I believe it is easy to understand. Here is just a note.
Css style selector formatOn the first day of study, I learned about css styles and found that css styles are more powerful than android styles. It has a tag selector, which allows you to manage tags in a unified manner.
There are three methods to define tags. You can use styles in css.
1. Use the Tag Name and {} in css to define the style.
The body tag defines a style directly in css. The attribute is that the background color is red.
Ii. class Attribute definition: use. class {} in css to define its style
<!DOCTYPE html>
We define a class attribute in the p tag and name it test. Then we can define all the labels of class As test in css, which is used by all the labels of class As test. + class attribute value {} to define
Iii. id definition. css uses the # id {} Method for id to define its style.
<!DOCTYPE html>
The preceding three definition methods can be defined separately or in a hybrid manner. For example, the level label and the span label inside the P label can be written into the css p span {xxx: xxx ;} in this way, you can add a space in the middle of the hybrid operation. The more you can differentiate between the hybrid operation, the more detailed and accurate the definition.
Note: When defining these styles, id is a unique attribute and the class can be repeated. Therefore, the class style can be used as long as the labels with the same class value are used, while the label style, it can be used with the same tags. You can understand the secrets.
- Loading Method
1. Load the internal style table, which is defined in the Example
<style type="text/css"> body{ background-color:red; }</style>
This style indicates that the background color in the body label is red.
2. inline style loading, which is directly defined in the label element using the style attribute in the label
Let's look at another example.
<p style="color: red; margin-left: 20px;"> This is a Test.</p>
The above content is the text with a font color of 20 PX between red and the left margin. The content is This is a Test
3. Use the css file content stored in the external file to load the style sheet using the <link> label in the
For a chestnut
The rel and type attributes are usually fixed in writing. The href attribute is the path of your css file. After loading, you can use the style content in css.
There is not much content, so I will learn new content tomorrow!
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
