HTML学习笔记

再来发一篇在Code Cademy上学习HTML的笔记。

Basic I

1. heading tags and paragraph

    
 head1 
  # h1 这里表示heading tags, 类似的还有h2, h3, h4, h5, h6.
    
 hi, this is paragraph. 
   #这里p表示段落

显示结果如下:

Screen Shot 2015-03-17 at 3.11.08 PM.png

2. hyperlinks

My Favorite Site!

显示结果如下：

Screen Shot 2015-03-17 at 3.12.44 PM.png

3. images

show image :
click image:

显示结果如下：

Screen Shot 2015-03-17 at 3.13.26 PM.png

4. ordered lists

使用tag

, 然后内部每个item用
包起来。

    
Raindrops on roses
    
Whiskers on kittens
    
Bright copper kettles
    
Warm woolen mittens

显示结果如下：


Screen Shot 2015-03-17 at 3.14.05 PM.png

5. unordered lists

使用tag

，然后内部每个item用
包起来。

Taco Ingredients
 
     
    
Cheese
     
    
Sour Cream
 

显示结果如下：


Screen Shot 2015-03-17 at 3.14.33 PM.png

6. lists inside a list

lists是可以支持嵌套的。

    
        
    
    
        

            
Dad's interests 
            

                
football
                
knitting
            
            
Mom's interests 
            

                
hating football
                
skydiving
            
        
        

            
Favorite Boys' Names 
            

                
Tom
                
Jason
                
Thomas
            
            
Favorite Girl' Names 
            

                
Lisa
                
Angela
                
Xindy
            
        
    

显示结果如下：


Screen Shot 2015-03-17 at 3.15.12 PM.png

7. making comments

8. font size

可以在opening tags中加入style属性来指定字体大小。

 Some text for you to make tiny! 

显示结果如下：


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

 Big Heading 

显示结果如下：


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

This item is big Arial.

显示结果如下：


Screen Shot 2015-03-17 at 3.16.38 PM.png

11. background color

使用background-color属性。

Introduction

显示结果如下：


Screen Shot 2015-03-17 at 3.17.42 PM.png

12. aligning the text

使用text-align属性。

list1

显示结果如下：


Screen Shot 2015-03-17 at 3.19.03 PM.png

13. strong words

使用将words包围起来，就能起到粗体的效果。

Do you hear the people sing?

显示结果如下：


Screen Shot 2015-03-17 at 3.19.31 PM.png

14. emphasize words

使用将words包围起来，就能起到粗体的效果。

Hey, don't say that!

显示结果如下：


Screen Shot 2015-03-17 at 3.20.05 PM.png

Basic II

1. tables

标签来创建表。
标签来创建表的一行。
标签里的和标签类似于和标签，让table更醒目。

(table data)标签来创建表的一列。 King Kong 1933 Dracula 1897 Bride of Frankenstein 1935 显示结果如下： Screen Shot 2015-03-17 at 3.20.36 PM.png 2. tables -- thead and tbody

Famous Monster	Birth Year
King Kong	1933
Dracula	1897
Bride of Frankenstein	1935

显示结果如下：


Screen Shot 2015-03-17 at 3.21.04 PM.png

3. tables -- naming

在原来的基础上加入colspan属性，即可将一列扩展到多列，类似于合并单元格的功能。这样就能完成table的naming了。

    
        Famous Monsters by Birth Year
    
    
        Famous Monster
        Birth Year
    

4. tables -- style that head

在table的相关tag中也可以加入style属性来给表格添加style。

    

        

            
Famous Monsters by Birth Year
        
        

            

                Famous Monster
            
            

                Birth Year
            
        
    
    

        

            
King Kong
            
1933
        
        

            
Dracula
            
1897
        
        

            
Bride of Frankenstein
            
1944
        
    

显示结果如下：


Screen Shot 2015-03-17 at 3.21.58 PM.png

5. div

div即为division，可以创建容器。

显示结果如下：


Screen Shot 2015-03-17 at 3.22.40 PM.png

6. div -- link it

也可以用把

包起来，这样整个div容器即变成可以linkable的了。

7. span

允许我们来控制一些小的部分的style，例如一句话中将某个单词设置为特殊的颜色，特殊的字体。

This text is black, except for the word red!

显示结果如下：



Screen Shot 2015-03-17 at 3.23.18 PM.png

8. recap

综合练习。

    
        
        
    
    
        

            

                

                    
9 LOGOs
                
            
            

                

                    
                        
                    
                
                

                    
                        
                    
                
                

                    
                        
                    
                
            
            

                

                    
                        
                    
                
                

                    
                        
                    
                
                

                    
                        
                    
                
            
            

                

                    
                        
                    
                
                

                    
                        
                    
                
                

                    
                        
                    
                
            
        
    

显示结果如下：



Screen Shot 2015-03-17 at 3.25.16 PM.png

Reference

Code Cadecademy Web Course