HTML&CSS-0

来源：互联网发布：淘宝个人退货率怎么看编辑：程序博客网时间：2024/06/06 03:24

教材：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> 元素中的内容

0 0