Codecademy上的HTML/CSS课程知识点总结(二)

HTML基础(二)

有序表(ordered list)

<ol>
<li>Raindrops on roses</li>
<li>Whiskers on kittens</li>
<li>Bright copper kettles</li>
<li>Warm woolen mittens</li>
</ol>



一目了然,无需解释了吧


无序列表(unordered list)

举一反一,只需要把上面的ol换成ul即可。需要说明的是,有序表和无序表是可以互相嵌套的。

注释

<!-- This is an example of a comment! -->


内联CSS

在没有单独的css文件的情况下完成一些设计功能,先了解一下内联css有助于我们将来学习css,内联css基本上都是靠设置属性来完成的,具体例子如下面要讲到的


修改字号

<p style="font-size: 12px">blabla</p>


修改字体颜色

我们经常会用到style属性,不仅用在段落上,也可以用在标题上,比如要同时修改标题的颜色和字号的话可以这样
<h2 style="color: green; font-size:12px">blabla</h2>


修改字体

没错我们还是用style属性,这次用在列表项身上
<li style="font-family:Garamond">blabla</li>
有关可用的字体和颜色在网上都是可以查到的


修改背景颜色

不解释了,还是用style属性
<body style="background-color:brown">
</body>




对齐文本

<li style="text-align:left">The Hawthorn Football Club</li>
当然也可以用right或者center


加粗字体

这次终于不用style了!只要选中你要加粗的字体,然后加上<strong></strong>就好了
<p>Do you hear the people <strong>sing</strong>?</p>


斜体字

我们有时候用斜体字起强调( emphasis)作用,所以……
<p>Hey, don't say <em>that</em>!</p>

表格

先来看一个完整的表格要怎么写
<html>
    <head>
        <title>Table Time</title>
    </head>   
    <body>
        <table border="1px">
            <thead>
                <tr>
                    <th colspan="2">Famous Monsters by Birth Year</th>
                </tr>
                <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>
上面这段代码最后的效果就是这样子的
Codecademy上的HTML/CSS课程知识点总结(二)_第1张图片
我们来一点一点的看:
首先我们看到最外层有

你可能感兴趣的:(html,css,Codecademy)