Head First HTML与CSS Part.1

概念

  • 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> 
发布了1 篇原创文章 · 获赞 0 · 访问量 43

猜你喜欢

转载自blog.csdn.net/Whyne1307/article/details/103938575
今日推荐