HTML学习笔记
2015-03-19 本文已影响576人
秦梦
再来发一篇在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 href="http://www.codecademy.com">My Favorite Site!</a>
显示结果如下：
Screen Shot 2015-03-17 at 3.12.44 PM.png
3. images
show image : <img src=""/>
click image:
<a href="http://www.codecademy.com">
<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
