Head First HTML与CSS Part.1

concept

HTML and CSS is a language used to create web pages
web server stores and provides website created by HTML and CSS. Acquiring browser page, and displays the content of the page according to HTML and CSS
HTML is the acronym HTML (HyperText Makeup Language) is used to create web pages structure
CSS is an abbreviation for Cascading Style Sheets (Cascading Style Sheets) are used to control the performance of HTML
By HTML, we use tags to provide labeling information structure, we match the mark, and what they called an element surrounded.
Element start tag = + + content element end tag (of course there are also some element uses a shorthand method, only a flag)
Label = name tag angle brackets on both sides and
Start tag can have attributes, properties can provide some additional information for the element
All pages must have a html element, which have a head element and a body element. Web page information on the head information, the content in the body is a browser to see content
CSS rules can be written in a style element, add CSS to HTML pages. Note that the style
CSS can be used to specify properties of elements in HTML

The first HTML

Create a simple page using 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>

Adding 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>

Muzi Lam

Published an original article · won praise 0 · Views 43

Private letter concerns

Head First HTML与CSS Part.1

concept

The first HTML

Create a simple page using HTML

Adding CSS

Guess you like