HTML第一章学习——续

最新推荐文章于 2024-06-07 08:21:52 发布

DP36

最新推荐文章于 2024-06-07 08:21:52 发布

阅读量145

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/m0_55932565/article/details/127708393

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

参考书籍：Head First HTML与CSS

作者为：Elisabeth Robson & Eric Freeman

译者：徐阳，丁晓峰等

【例题】

你在 Strabuzz Coffe 交好运了！

Strabuzz Coffe 发展的太快了，他们甚至没时间来建立自己的Web网站...你的好机会来了。很凑巧，你在 Strabuzz 买 Chai Tea 时，刚好碰见 Strabuzz Coffe 的CEO

“嘿！我的伙计，听说你懂点HTML。我们恰好需要建一个Web页面来推广我们的Starbuzz的饮品，你有兴趣吗？这是我们希望发布的信息：

                        Starbuzz Coffee Beverages



 House Blend,$1.49

 A smooth, mild blend of coffee from Mexico, Bolivia and Guatemala.



Mocha cafe Latte, $2.35

Espresso, Steamed milk and chocolate syrup.



cappuccino, $1.89

A mixture of espresso, steamed milk and foam.



Chai Tea, $1.85

A spicy drink made with black tea, spices, milk and honey.

那么分析可知，Starbuzz Coffee 将作为我们网页的标题——title

Starbuzz Coffee Beverages 将作为我们网页的正文的一级标题——h1

每个饮品的名称和价格将作为二级标题——h2

段落（paragraph，p）的内容则是介绍

于是代码如下：

<html>
    <head>
        <title>Starbuzz Coffee</title>
    </head>
    <body>
        <h1>
            Starbuzz Coffee Beverages
        </h1>
        <img src="test_gif.gif">
        <h2>
            House Blend,$1.49
        </h2>
        <p>
            A smooth, mild blend of coffee from Mexico, Bolivia and Guatemala.
        </p>
        <h2>
            Mocha cafe Latte, $2.35
        </h2>
        <p>
            Espresso, Steamed milk and chocolate syrup.
        </p>
        <h2>
            cappuccino, $1.89
        </h2>
        <p>
            A mixture of espresso, steamed milk and foam.
        </p>
        <h2>
            chai Tea, $1.85
        </h2>
        <p>
            A spicy drink made with black tea, spices, milk and honey.
        </p>
    </body>
</html>

网页看起来会枯燥，这时候将会用到CSS（层叠样式表，cascading style sheets）

在<head>和</head>中，用<style>XXX</style>，XXX来说明你所要的样式。

当然CSS也不一定会在<style> </style>中，这个将会在后面学到。

基础代码如下：

<!--认识 style 元素-->
<html>
<head>
    <title>Starbuzz Coffee</title>
    <style>
        body{
            background-color: #d2b48c;
            margin-left: 20%;
            margin-right: 20%;
            border: 2px dotted black;
            padding: 10px 10px 10px 10px;
            font-family: sans-serif;
        }
    </style>
</head>

<body>
    <h1>Starbuzz Coffee Beverages</h1>
    <img src="test_gif.gif">

    <h2>House Blend, $1.56</h2>
    <p>A smooth, mild blend of coffee from Mexico, Bolivia and Guatemala.</p>

    <h2>Mocha cafe Latte, $2.35</h2>
    <p>Espresso, Steamed milk and chocolate syrup.</p>

    <h2>cappuccino, $1.89</h2>
    <p>A mixture of espresso, steamed milk and foam.</p>

    <h2>chai Tea, $1.85</h2>
    <p>A spicy drink made with black tea, spices, milk and honey.</p>
</body>
</html>