HTML&CSS-0-CSDN博客

本文链接：https://blog.csdn.net/u012430183/article/details/54669196

教材：Head First HTML与CSS、XHTML（中文版）
HTML实例分析：

<html>
    <head>
        <title>Head First Lounge</title>
    </head>
    <body>
        <h1>Welcome to the Head First Lounge</h1>
        <img src="drinks.gif>
        <p>
            Join us an evening for refreshing elixirs,
            coversation and maybe a game or
            two of <em>Dance Dance Revolution</em>.
            Wireless access is always provided;
            BYOWS(Bring your own web server).
        </p>
        <h2>Directins</h2>
        <p>
            You'll find us right in the center of
            downtown Webville.Come join us!
        </p>
    </body>
</html>

在HTML中注释可以采用，任何写在之间的内容都会被浏览器忽略。

<html>HTML从这里开始
<head>页面“头”开始
<title>标签给页面一个标题
<body>主体开始
<h1>告诉浏览器这是标题
<img src="drinks.gif">在这里放置图片drinks.gif
<p>开始一个段落
<h2>子标题

第一个HTML：

<html>
    <head>
        <title>Starbuzz Coffee</title>
    </head>

    <body>
        <h1><Starbuzz Coffee Beverages</h1>
        <h2>House Blend,$1.49</h2>
        <p>A smooth,mild blend of coffees from Mexico,
        Bolivia and Guatemala.</p>

        <h2>Mocha Cafe Latte,$2.35</h2>
        <p>Expresso,steamed milk and chocolate syrup.</p>

        <h2>Cappuccino,$1.89</h2>
        <p>A mixture of expresso,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>

tips:写HTML时把头部和主体分开。

 <h1> Starbuzz Coffee Beverages</h1>

整个语句称为一个元素，一个元素由闭合标记及它们之间的内容组成。称一对开始标记和结束标记为匹配标记。
元素=开始标记+内容+结束标记

CSS：Cascading Style Sheets 级联样式表

在上述代码中加入样式元素<style>：

<html>
    <head>
        <title>Starbuzz Coffee</title>
        <style type="text/css">
            body{
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20% border: 1px dotted gray;
                padding: 10px 10px 10px 10px;
                font-family:sans-serif;
                }
        </style>
    </head>

    <body>
        <h1><Starbuzz Coffee Beverages</h1>
        <h2>House Blend,$1.49</h2>
        <p>A smooth,mild blend of coffees from Mexico,
        Bolivia and Guatemala.</p>

        <h2>Mocha Cafe Latte,$2.35</h2>
        <p>Expresso,steamed milk and chocolate syrup.</p>

        <h2>Cappuccino,$1.89</h2>
        <p>A mixture of expresso,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>

<style>样式元素中有一个名为type的属性，用来告诉浏览器所使用样式的种类，由于即将使用CSS，因此指定为“text/css”类型：

<style type="text/css">
body{
                background-color: #d2b48c;
                margin-left: 20%;
                margin-right: 20%
                border: 1px dotted gray;
                padding: 10px 10px 10px 10px;
                font-family:sans-serif;
                }
</style>

样式元素中的属性用来为一个元素提供附加信息
background-color：指定背景颜色
margin-left：20% 左边界设置为每边占页面的20%
border：1px dotted gray 指定主体周围边框线为点式且颜色为灰色
padding：10px 10px 10px 10px 在页面主体周围创建某种填充
font-family：指定文本使用的字体

CSS含有的body代表“｛“和“｝”之间的所有CSS将应用于HTML<body> 元素中的内容