HTML5學習-Day1，html5-day1
序
在公司開發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項目，空的模板即可
進入後我們先看下項目的結構
manifest.json 設定檔這隻是HBuilder 的預設檔案結構，你也可以根據自己的喜好建立或刪除這些目錄，這不是固定的結構
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值一樣的標籤都能使用，而標籤樣式，是相同的標籤都能使用，其中奧妙請自己領悟
<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中的樣式內容了
內容不多，明天學習新的再上新的內容！
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
