(一) Web语言:开始了解HTML

冷暖自知 提交于 2020-03-01 01:21:30

1.  HTML和CSS是用来创建网页的语言。HTML即"HyperText Markup Language"(超文本标记语言)的缩写,用来建立网页结构。CSS即"Cascading Style Sheets"(层叠样式表)的缩写,用来控制HTML网页的表现。

2.  HTML利用一个个尖括号组成的标记如"<html>  </html>"标示内容提供网页的结构。把匹配标记以及其包围的内容称为元素。所以元素由三部分组成:开始标记、内容和结束标记。开始标记和结束标记的区别是结束标记名字前由一个 "/"。开始标记可以有可选的属性,例如"type"。

3.  所有页面都有<html>元素,其中包含<head>和<body>元素。网页信息放在<head>元素里,浏览器看到的东西放在<body>元素里。

4.  浏览器会忽略掉大部分空白和制表符、空格等,但是这些空格和制表符等可以让html代码更有可读性。

5.  CSS规则放在<style> 元素里,<style>元素放在<head>元素里。

6.本节的代码:

    A.  index.html:

<html>
  <head>
    <title>Starbuzz</title>
    <style type="text/css">
        body {
              background-color: rgb(0,255,0);
              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>
    
    <h2>House Blend, $1.49</h2>
    <p>
        A smooth, mild blend of coffees from
        <em>Mexico, Bolivia, and Guatemala.</em>
    </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 dring made with black tea, spices,
        milk, and honey.
    </p>
  </body>
</html>

    B.  misson.html:

<html>
  <head>
    <title>Starbuzz Coffee's Mission</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's Misson</h1>
    <p>
        To provide all the caffeine that you need to power your life.
    </p>
    <p>
        Just drink it.
    </p>
  </body>
</html>

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!