您的位置：首页 > Web前端 > CSS

HTML&CSS-0

2017-01-22 16:15 357 查看
教材：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>
元素中的内容
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css html xhtml
相关文章推荐
新的分享
章节导航