HTML/CSS快速入门课程知识点总结（二）

最新推荐文章于 2024-09-26 10:01:01 发布

zhanghui_cuc

最新推荐文章于 2024-09-26 10:01:01 发布

阅读量1.2k

点赞数

文章标签： codecademy css html

本文链接：https://blog.csdn.net/nonmarking/article/details/17375189

版权

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>

上面这段代码最后的效果就是这样子的