Head First HTML与CSS Part.1

最新推荐文章于 2025-05-23 14:30:13 发布

翻译最新推荐文章于 2025-05-23 14:30:13 发布 · 368 阅读

html+css 专栏收录该内容

9 篇文章

订阅专栏

概念

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>