HTML学习笔记

作者: 秦梦 | 来源:发表于2015-03-19 15:24 被阅读576次

HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
html
HTML5基本介绍
HTML5—HTML学习
初学HTML
HTML基础学习笔记
cocos2d-html5 学习笔记

再来发一篇在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>

显示结果如下：