[Codecademy] HTML&CSS 第三课：HTML Basic II
本文出自 http://blog.csdn.net/shuangde800
[Codecademy] HTML && CSS课程学习目录
------------------------------------------------------------------------------------------------
Introduction
在这节课中，我们要进入下一阶段：
a. 制作排序列表的和不排序列表
b. 改变字体大小，颜色和类型
c. 改变背景颜色
d. 字体对齐
Ordered lists(排序列表)
排序列表就是在每一行内容的前面有编号，效果如下：
1. 有序列表以<ol>标签开头</ol>结尾。（ol = ordered lists）
2. 有序列表里面的每一项，用<li> </li>括起来。 (li = list item)
3. 有序列表的每一项占一行，所以一般我们把一项的所有内容放在一行里。
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>List of my favorite things</h1>
<ol>
<li>raindrops on roses</li>
<li>whiskas on kittens</li>
<li>call of duty: modern warfare</li>
</ol>
</body>
</html>
效果图：
Unordered Lists（不排序列表）
我们已经学了排序列表，对于要编号排序的东西很适合使用它。但是如果我们不需要排序编号呢？我们可以使用unordered lists（不排序列表）。
不排序列表的使用方式和排序列表一样，不过它的标签是<ul></ul>。（ul = unordered lists）。不排序列表的列表项也是用<li></li>标签
<!DOCTYPE html>
<html>
<head>
<title>Unordered Lists</title>
</head>
<body>
<h1>Some random thoughts</h1>
<p>hahahahaahaha!</p>
<ul>
<li>first line</li>
<li>second line</li>
<li>third line</li>
<li>alksdf</li>
</ul>
</body>
</html>
Lists inside a list（嵌套列表）
我们已经学会了ordered lists 和unordered lists。非常棒！
如果我们想要一个排序列表，但是如果列表项里还嵌套这一个不排序列表怎么办呢？效果图如下：
<!DOCTYPE html> <html> <head> <title>Nested lists</title> </head> <body> <ul> <li>Boys Names.</li> <ol> <li>Daming</li> <li>Lihua</li> <li>Bob</li> </ol> <li>Girls Names.</li> <ol> <li>Alice</li> <li>Lina</li> <li>Lily</li> </ol> </ul> </body> </html>
效果图：
Making comments(注释)
我们已经学习了关于列表的大部分内容，是时候换种口味了！
如果html是网页的骨架，那么css是骨架的皮肤和漂亮的衣服。
在学css之前，我们要先学习inline css(内联css)，使用inline css意味着我们可以装饰html页面，而不需要单独创建一个css文件！我们先学这个，是因为这样可以让后面的css学习更加容易！
在学习fonts(字体)之前，先学习comments(注释)是很重要的，你可以使用注释来标记html文件的代码，这样可以帮助你在以后回忆起这段代码的功能。
注释以<!-- 开头，-->结尾，<!-- This is an example of a comment! -->
Font size（字体尺寸）
在开口标签处，我们可以使用attributes（属性）来让这个标签实现更多的功能！
一个attributes是一个characteristic (特征)或者一些对内容的描述，在之前已经使用过了<img>中的src和<a>中的href
使用style 属性可以改变字体的尺寸：
<p style="font-size: 12px">
<p style="font-size: 10px"> Some text for you to make tiny! </p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
<p style="font-size: 20px"> Some text for you to make normal size!</p>
<p style="font-size: 40px"> Some text for you to make super big!</p>
Font color（字体颜色）
除了字体大小，还有很多其他属性，比如可以改变字体颜色：
<h2 style="color:red">
如果既要改变颜色，又要改变大小，那么两个都加上去：
<h2 style="color: green; font-size:12px">
代码：
<!DOCTYPE html> <html> <head> <title>Changing the colors!</title> </head> <body> <h1 style="color:green;font-size:16px">Big Heading</h1> <p style="color:violet">A giant bear and a little duck were friends.</p> <p style="color:red;font-size:10px">But the bear got hungry and ate the duck.</p> </body> </html>
效果：
有各种颜色的网址：
打开
Font family(字体家族)
除了改变字体的大小和颜色，还可以改变字体类型！
只需要在style属性里添加font-family:Helvetica即可，例如
<h2 style="font-family:Garamond">
Background color背景颜色
同样，只要在style属性里添加一句background-color:read即可
例如：
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body style="background-color:brown">
<h3>Favorite Football Teams</h3>
<ol style="background-color:yellow">
<li>The Hawthorn Football Club</li>
<li>San Franscisco 49ers</li>
<li>Barcelona FC</li>
</ol>
</body>
</html>
效果：
Aligning the text(对齐文字)
可以设置一行字的对齐方式：向左对齐，居中，向右对齐等
同样是在style属性里添加text-align:center
<!DOCTYPE html>
<html>
<head>
<title>Sexy background color!</title>
</head>
<body>
<h3 style="text-align:center">Favorite Football Teams</h3>
<ol>
<li style="text-align:left">The Hawthorn Football Club</li>
<li style="text-align:center">San Franscisco 49ers</li>
<li style="text-align:right">Barcelona FC</li>
</ol>
</body>
</html>
效果：
Strong words!（粗体）
怎样把字变成粗体呢？意外的是，这并不是在style上动手脚，而是使用<strong>标签：
把要变成粗体字的部分，包围<strong></strong>中
例如，把hello world!变成粗体：
<strong>hello world!</strong>
Emphasize words!(斜体)
除了粗体字，我们还会经常使用italicize（斜体）
和设置粗体一样，设置斜体也不是在style里设置的，而是使用<em>标签
例如，把hello world!变成斜体：
<em>hello world!</em>
Summary（小结）
1. 设置排序列表和不排序列表
2. 改变字体的颜色，尺寸，字体类型
3. 在html中添加注释
4. 改变背景颜色
5. 文本对齐
6. 粗体和斜体
