再來發一篇在Code Cademy上學習HTML的筆記。
Basic I
1. heading tags and paragraph
<body>
<h1> head1 </h1> # h1 這里表示heading tags, 類似的還有h2, h3, h4, h5, h6.
<p> hi, this is paragraph. </p> #這里p表示段落
</body>
顯示結果如下:
Screen Shot 2015-03-17 at 3.11.08 PM.png
2. hyperlinks
<a href=""> </a>
<a >My Favorite Site!</a>
顯示結果如下：
Screen Shot 2015-03-17 at 3.12.44 PM.png
3. images
show image : <img src=""/>
click image:
<a >
<img src="http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
</a>
顯示結果如下：
Screen Shot 2015-03-17 at 3.13.26 PM.png
4. ordered lists
使用tag <ol>, 然后內部每個item用<li></li>包起來。
<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>
顯示結果如下：
Screen Shot 2015-03-17 at 3.14.05 PM.png
5. unordered lists
使用tag <ul>，然后內部每個item用<li></li>包起來。
<h2>Taco Ingredients</h2>
<ul>
<li>Cheese</li>
<li>Sour Cream</li>
</ul>
顯示結果如下：
Screen Shot 2015-03-17 at 3.14.33 PM.png
6. lists inside a list
lists是可以支持嵌套的。
<!DOCTYPE html>
<html>
<head>
<title>Nested lists</title>
</head>
<body>
<ol>
<li>Dad's interests
<ul>
<li>football</li>
<li>knitting</li>
</ul></li>
<li>Mom's interests
<ul>
<li>hating football</li>
<li>skydiving</li>
</ul></li>
</ol>
<ul>
<li>Favorite Boys' Names
<ol>
<li>Tom</li>
<li>Jason</li>
<li>Thomas</li>
</ol></li>
<li>Favorite Girl' Names
<ol>
<li>Lisa</li>
<li>Angela</li>
<li>Xindy</li>
</ol></li>
</ul>
</body>
</html>
顯示結果如下：
Screen Shot 2015-03-17 at 3.15.12 PM.png
7. making comments
<!— comment -->
8. font size
可以在opening tags中加入style屬性來指定字體大小。
<p style="font-size: 10px"> Some text for you to make tiny!
</p>
顯示結果如下：
Screen Shot 2015-03-17 at 3.15.48 PM.png
9. font color
類似于font size，在style屬性里也可以指定字體顏色。所有可用的colors列表參見這里：http://www.w3.org/TR/css3-color/#svg-color
<h1 style="color: green; font-size: 16px"> Big Heading </h1>
顯示結果如下：
Screen Shot 2015-03-17 at 3.16.12 PM.png
10. font family
同上，還可以指定字體類型。所有可用的fonts列表參見這里：http://www.w3.org/TR/CSS21/fonts.html#generic-font-families
<li style="font-family: Arial; font-size: 16px">This item is big Arial.</li>
顯示結果如下：
Screen Shot 2015-03-17 at 3.16.38 PM.png
11. background color
使用background-color屬性。
<p style="background-color: yellow">Introduction</p>
顯示結果如下：
Screen Shot 2015-03-17 at 3.17.42 PM.png
12. aligning the text
使用text-align屬性。
<li style="text-align:left">list1</li>
顯示結果如下：
Screen Shot 2015-03-17 at 3.19.03 PM.png
13. strong words
使用<strong></strong>將words包圍起來，就能起到粗體的效果。
<p>Do you hear the people <strong>sing</strong>?</p>
顯示結果如下：
Screen Shot 2015-03-17 at 3.19.31 PM.png
14. emphasize words
使用<em></em>將words包圍起來，就能起到粗體的效果。
<p>Hey, don't say <em>that</em>!</p>
顯示結果如下：
Screen Shot 2015-03-17 at 3.20.05 PM.png
Basic II
1. tables
<table>標簽來創建表。
<tag>標簽來創建表的一行。
<tag>標簽里的<td>(table data)標簽來創建表的一列。
<table border="1px">
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</table>
顯示結果如下：
Screen Shot 2015-03-17 at 3.20.36 PM.png
2. tables -- thead and tbody
<thead>和<tbody>標簽類似于<head>和<body>標簽，讓table更醒目。
<html>
<head>
<title>Table Time</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
<tbody>
<tr>
<td>King Kong</td>
<td>1933</td>
</tr>
<tr>
<td>Dracula</td>
<td>1897</td>
</tr>
<tr>
<td>Bride of Frankenstein</td>
<td>1935</td>
</tr>
</tbody>
</table>
</body>
</html>
顯示結果如下：
Screen Shot 2015-03-17 at 3.21.04 PM.png
3. tables -- naming
在原來<th>的基礎上加入colspan屬性，即可將一列擴展到多列，類似于合并單元格的功能。這樣就能完成table的naming了。
<thead>
<tr>
<th colspan="2">Famous Monsters by Birth Year</th>
</tr>
<tr>
<th>Famous Monster</th>
<th>Birth Year</th>
</tr>
</thead>
4. tables -- style that head
在table的相關tag中也可以加入style屬性來給表格添加style。
<table style="border-collapse:collapse;">
<thead>
<tr>
<th colspan="2" style="color: red">Famous Monsters by Birth Year</th>
</tr>
<tr style="border-bottom:1px solid black;">
<th style="padding:5px;">
<em>Famous Monster</em>
</th>
<th style="padding:5px;border-left:1px solid black;">
<em>Birth Year</em>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="padding:5px;">King Kong</td>
<td style="padding:5px;border-left:1px solid black;">1933</td>
</tr>
<tr>
<td style="padding:5px;">Dracula</td>
<td style="padding:5px;border-left:1px solid black;">1897</td>
</tr>
<tr>
<td style="padding:5px;">Bride of Frankenstein</td>
<td style="padding:5px;border-left:1px solid black;">1944</td>
</tr>
</tbody>
</table>
顯示結果如下：
Screen Shot 2015-03-17 at 3.21.58 PM.png
5. div
div即為division，可以創建容器。
<div style="width:50px; height:50px; background-color:red"></div>
顯示結果如下：
Screen Shot 2015-03-17 at 3.22.40 PM.png
6. div -- link it
也可以用<a></a>把<div>包起來，這樣整個div容器即變成可以linkable的了。
<a href="www.baidu.com">
<div style="width:50px; height:50px; background-color:yellow"></div>
</a>
7. span
<span>允許我們來控制一些小的部分的style，例如一句話中將某個單詞設置為特殊的顏色，特殊的字體。
<p>This text is black, except for the word <span style="font-family:Impact; color:red">red</span>!</p>
顯示結果如下：
Screen Shot 2015-03-17 at 3.23.18 PM.png
8. recap
綜合練習。
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css" />
<title>My Photo Page</title>
</head>
<body>
<table border="1px">
<thead>
<tr>
<th colspan="3" style="font-size:60px; color: blue; font-family:Impact">9 LOGOs</th>
</tr>
</thead>
<tr>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
</tr>
<tr>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
<td>
<a href="www.baidu.com">
<img src="http://www.baidu.com/img/bdlogo.png" />
</a>
</td>
</tr>
</table>
</body>
</html>
顯示結果如下：
Screen Shot 2015-03-17 at 3.25.16 PM.png
