HTML5+CSS3+JS(第一課)
html5+css3+javascript
一. 簡介
瘋狂的html5+css3+jacascript講義。書就不介紹了,講的內容呢。標題都很清楚了,HTML5和CSS3和JS。就這些內容。
二. 第一章:HTML5簡介吧
1. 發展歷史
HTML4.01、XHTML、DTD這個就不用介紹了。因為頁面要絢爛,程式設計要規範,所以除了這麼個HTML5。
2. HTML5的優勢:
2.1 解決跨瀏覽器問題:我想做過網頁開發的人都知道瀏覽器是個萬惡的東西,不知道花了多少時間來在各種瀏覽器上除錯和修改。以
前不想做網頁也就是因為它太麻煩了。不過呢HMML5要高版本的瀏覽器,所以就不要用IE678等等的了。
2.2 替代部分的JS功能:JS也是個神奇的東西,雖然我只草草的看過一遍,但據大家的評論,語法太過靈活,導致有些人說它太隨意了
。不過在網頁中使用大量的JS確實也有點拖慢程式設計的速度,也很麻煩,能少寫一行程式碼時一行。所以HTML5就用一些標籤替代了JS的簡單功
能。
<body> 圖書:<input type="text" name="book" id="name" /><br/> 價格:<input type="text" name="price" id="price" /> <script type="text/javascript"> document.getElementById("price").focus(); </script> </body>
這幾行程式碼,是讓游標落在價格的輸入框中。像這樣。
在html5中只需要指定屬性就可以了。
<body>
圖書:<input type="text" name="book" /><br/>
價格:<input type="text" autoficus name="price" />
</body>
2.3 更明確的語義:這個就跟XML一樣,可以使用這樣
<book> <price>100¥</price> </book>
而html4的話就只能這樣咯
<div name="book">
<div name="price">100¥</div>
</div>
2.4 增強了頁面的功能:這個沒用過,不知道,也就不抄書了。
3. HTML5的變化。
3.1 這裡的變化,只是說針對於HTML4而言的,升版本嘛,肯定有加新東西,有拋棄久東西。
但基本結果還是沒變的:
<!DOCTYPE html> <!--DTD標識-->
<html> <!--HTML標籤-->
<head> <!--HTML的頭-->
<title>標題</title>
</head>
<body> <!--HTML身體(也就是網頁的主題內容)-->
xxxxx ...
...
</body>
</html>
3.2 說完不變的部分,來說說變的部分吧。
3.2.1 標籤不再區分大小寫(也就是可以大小寫混著寫..這不是增加了程式碼的混亂度嗎,堅決不這麼幹)
<p>HTM5</P>
雖然符合規範,但是這麼寫還是覺得彆扭。
3.2.2 元素可以省略結束標籤
<!--HTML4-->
<img src="picture.jpg" alt="picture"></img>
<!--HTML5-->
<img src="picture.jpg" alt="picture">
記得以前的也是可以省的,後來為了規範又說不讓省,現在又說可以省了,這麼老頭子們是想要鬧哪樣。
3.2.3 允許省略屬性值的屬性
<!--HTML4-->
<input checked="checked" type="checkbox" />
<!--HTML5-->
<input checked type=checkbox />
3.2.4 允許不使用引號
這個就不用介紹了,上面幾行就是很好的例子。在使用屬性的時候可以用也可以不用,看個人喜好。
注意:這些變化唯一的好處就是可以少按幾個鍵盤(個人陋見)。
小結:
自學第一天,看書還沒有寫的多,果斷要多寫寫才會記得住,可以睡覺了。還有一點,用記事本程式設計最蛋疼的一件事就是字寫錯了。