HTML5&&JavaScript
阿新 • • 發佈：2020-12-08
技術標籤：前端學習
- HTML5 是 html(網頁) 的第五版標準,歷時8年才制定完! HTML5 的設計理念就是移動先行。HTML5的設計目的是為了在移動裝置上支援多媒體。新的語法特徵被引進以支援這一點，如video、audio和canvas 標記。
- 跨平臺: 利用 HTML5 編寫的 UI 介面程式碼能夠執行在所有擁有瀏覽器的平臺
- HTML5 並不是萬能的，不能和手機硬體互動。
- HTML5 是未來的一種趨勢! 作為移動端開發人員,要有所瞭解!
- APP的開發方式：Web App、Native App、Hybrid App
- HTML5 的開發使用的UI框架: Sencha-touch jQuery-Mobile
- PhoneGap/Cordova：一個用基於HTML，CSS和JavaScript的，建立移動跨平臺移動應用程式的快速開發平臺
- Written once, run everywhere
- React Native （ReactJS）
- Learn once, write anywhere
- 什麼是HTML
- HTML的全稱是HyperText Markup Language，超文字標記語言
- 其實它就是文字，由瀏覽器負責將它解析成具體的網頁內容
- 比如，瀏覽器會將 左邊的HTML程式碼 轉換為 右邊的網頁內容
- HTML的組成
- 跟XML類似，HTML由N個標籤（節點、元素、標記）組成
- HTML語法非常鬆散，目前的最新版是5.0，也就是HTML 5
常見標籤
標題：h1、h2、h3、h4、h5....
段落：p
換行：br
容器：div、span（用來容納其他標籤）
表格：table、tr、td
列表：ul、ol、li
圖片：img
表單：input
連結：a
http://www.runoob.com/html/html5-intro.html
CSS
- 什麼是CSS
- CSS的全稱是Cascading Style Sheets，層疊樣式表
- 它用來控制HTML標籤的樣式，在美化網頁中起到非常重要的作用
- CSS的編寫格式是鍵值對形式的
color: red;
background-color: blue;
font-size: 20px;冒號:左邊的是屬性名，冒號:右邊的屬性值
CSS的使用
- CSS有3種書寫形式
- 行內樣式：（內聯樣式）直接在標籤的style屬性中書寫
<body style="color: red;">- 頁內樣式：在本網頁的style標籤中書寫
<style>
body {
color: red;
}
</style>- 外部樣式：在單獨的CSS檔案中書寫，然後在網頁中用link標籤引用
<link rel="stylesheet" href="index.css">CSS的選擇器
- 選擇器的作用：選擇對應的標籤，為其新增樣式
- 選擇器的分類：
- 標籤選擇器 div { color:red; }
- 類選擇器 .cls {color:blue; }
- id選擇器 #hi { color:orange; }
- 並列選擇器 div, .cls { color: red ; }
- 複合選擇器 div.cls {color:red;}
- 後代選擇器 div p {color:red;}
- 直接後代選擇器 div > p{color:red;}
CSS常用屬性
- color
- background-color
- display
JavaScript的使用
- JS常見的書寫方式有2種
- 頁內JS：在當前網頁的script標籤中編寫
<script type="text/javascript">
</script>-
- 外部JS
<script src=“index.js"></script>