《Head First HTML与CSS 》笔记-0x1

最新推荐文章于 2022-08-19 17:28:59 发布

原创最新推荐文章于 2022-08-19 17:28:59 发布 · 306 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #H5 #前端

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文详细介绍HTML和CSS的基础知识，通过实际案例演示如何使用HTML标记语言和CSS样式表创建网页，包括布局设计、图片插入、链接设置等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML（HyperText Markup Language）

CSS（Cascading Style Sheets）

Hello World！

Starbuzz Coffee Beverages

Starbuzz Coffee Beverages with style

相对路径

void元素

字符实体

HTML（HyperText Markup Language）
CSS（Cascading Style Sheets）
Hello World！

<html>
	<head>
		<title>Head First Lounge</title>
	</head>
	<body>
		<h1>Welcome to the Head First Lounge</h1>
		<img src="drinks.gif">
		<p>
		 Join us any evening for refreshing elixirs,
		 conversation 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>Direction</h2>
		<p>
			You'll find us right in the center of
			downtown Webville.Come join us!
		</p>
	</body>
</html>

Starbuzz Coffee Beverages

<html>
	<head>
		<title>Starbuzz Coffee Beverages</title>
	</head>
	<body>
		<h1>Starbuzz Coffee Beverages</h1>
		<h2>House Blend,$1.49</h2>
		<p>A smooth,mild blend of coffees fromMexico,
		Bolivia and Guatemala.</P>
		<h2>Mocha Cafe Latte,$2.35</h2>
		<p>Espresso,steamed milk and chocolate syrup.</P>
		<h2>Cappuccino,$1.89</h2>
		<p>A mixture of espresso,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>

Starbuzz Coffee Beverages with style

<html>
	<head>
		<title>Starbuzz Coffee Beverages</title>
		<style type="text/css">
			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>
		<h1>Starbuzz Coffee Beverages</h1>
		<h2>House Blend,$1.49</h2>
		<p>A smooth,mild blend of coffees fromMexico,
		Bolivia and Guatemala.</P>
		<h2>Mocha Cafe Latte,$2.35</h2>
		<p>Espresso,steamed milk and chocolate syrup.</P>
		<h2>Cappuccino,$1.89</h2>
		<p>A mixture of espresso,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>

相对路径

<!--
    目录结构
    root
    |-index.html
    |-images
    |    |-a.jpg
    |-about
    |    |-b.html
    |-others
    |    |-else
    |         |-c.html
-->
<!--当前目录访问子目录-->
<html>
  <head>
    <title>index</title>
  </head>
  <body>
    <img src="images/a.jpg"> 
	<a href="about/b.html">To b.html!</a>
    <a href="others/else/c.html">To c.html!</a>
  </body>
</html>
<!--子目录访问父目录-->
<html>
  <head>
    <title>b</title>
  </head>
  <body>
    <img src="../images/a.jpg"> 
	<a href="../index.html">To index.html!</a>
    <a href="../others/else/c.html">To c.html!</a>
  </body>
</html>
<!--多级子目录访问多级父目录-->
<html>
  <head>
    <title>c</title>
  </head>
  <body>
    <img src="../../images/a.jpg"> 
	<a href="../../index.html">To index.html!</a>
    <a href="../../about/b.html">To b.html!</a>
  </body>
</html>