概念
- HTML和CSS是用来创建网页的语言
- web服务器存储并提供由HTML和CSS创建的网页。浏览器获取页面,并且根据HTML和CSS显示网页的内容
- HTML是超文本标记语言(HyperText Makeup Language) 的缩写用来建立网页结构
- CSS是层叠样式表(Cascading Style Sheets)的缩写用来控制HTML的表现
- 通过HTML,我们利用标记来标示内容提供结构,我们把匹配标记,以及他们包围的内容称为元素。
- 元素=开始标记+元素内容+结束标记 (当然也存在有些元素使用简写方法,只有一个标记)
- 标记=标记名和两边的尖括号
- 开始标记可以有属性,属性能为元素提供一些额外信息
- 所有页面都要有一个html元素,其中要有一个head元素和一个body元素。网页信息放在head信息里,body中的内容就是浏览器中看到的内容
- 可以在style元素中写CSS规则,为HTML网页增加CSS.注意的是style
- 可以使用CSS在HTML中指定元素特性
第一个HTML
用HTML创建简单的页面
<html> <!-- 用于告诉浏览器文件的内容是HTML-->
<head> <!-- 首部包含web页面有关的信息,如页面的标题等 -->
<title>Starbuzz Coffee</title> <!--在head中放入title标记,title总出现在浏览器窗口的顶部-->
</head>
<body> <!-- 页面的主体部分,包括web页面看到的页面与结构-->
<h1> Statbuzz Coffee Beverages </h1> <!-- hn表示n级标题-->
<h2> House blend,$1.49</h2>
<p>A smooth,mild of blend of coffees form Mexico,Bolivia and Guatemala.</p>
<h2>Mocha Cofe Latte,$2.35</h2>
<p>Espresso,steamed milk and chocolate syrup</p>
</body>
</html>
加入CSS
<html> <!-- 用于告诉浏览器文件的内容是HTML-->
<head> <!-- 首部包含web页面有关的信息,如页面的标题等 -->
<title>Starbuzz Coffee</title> <!--在head中放入title标记,title总出现在浏览器窗口的顶部-->
<style type="text/css"> <!--style标记有个可选属性名为type,它能告诉浏览器你使用什么类型的样式-->
<!--可以 在这里定义页面的样式-->
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> <!-- 页面的主体部分,包括web页面看到的页面与结构-->
<h1> Statbuzz Coffee Beverages </h1> <!-- hn表示n级标题-->
<h2> House blend,$1.49</h2>
<p>A smooth,mild of blend of coffees form Mexico,Bolivia and Guatemala.</p>
<h2>Mocha Cofe Latte,$2.35</h2>
<p>Espresso,steamed milk and chocolate syrup</p>
</body>
</html>