本文是《HTML与CSS网站设计实践之旅》的读书笔记，详细介绍了如何使用HTML和CSS创建网页，包括基本元素如标题、段落、列表、图像、链接和表单的使用，并提供了示例代码，帮助理解网页设计的实践应用。
HTML与CSS网站设计实践之旅
BuildYour Own Web Site the Right Way Using HTML & CSS
——[英] Ian Lloyd
【Example】
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- 1行告知浏览器其使用的HTML版本 2行提供浏览器可以引用的URL，指向W3C的XHTML 1.0 Strict规范-->
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Listsp - an introduction</title>
<metahttp-equiv="Content-Type"
content="text/html;charset=utf-8"/><!-- meta成为自关闭元素，也叫空内容元素，它没有内容，因而结束标签可以合并到起始标签里-->
</head>
<body>
<h1><em>Lists</em> -an introduction </h1> <!--h1:主标题 h2~h6:子标题--> <!-- <em>为强调元素 -->
<p>Here's a paragraph.Alovely,concise little paragraph.</p> <!-- p标签，用来创建一个文本段落 -->
<p>Here comes anotherone,followed by a subheading.</p>
<h2>A subheading here</h2><!-- 子标题 -->
<p>And now for a list ortwo:</p>
<ul> <!-- 无序列表 -->
<li>This is a bulletedlist</li> <!-- 表项要用<li>标签包裹 -->
<li>No orderapplied</li>
<li>Just a bunch ofpoints we want to make</li>
</ul>
<p>And here's an orderedlist:</p>
<ol> <!-- 有序列表 -->
<li>This is the firstitem</li>
<li>Followed by thisone</li>
<li>And one more forluck</li>
</ol>
<h1>特殊符号相应的实体表示法</h1>
<p>></p> <!-- >-->
<p><</p> <!-- <-->
<p>&</p> <!-- &-->
<p>£</p> <!-- ￡-->
<p>©</p> <!-- 版权符号 -->
<p>™</p> <!-- 注册商标符号 -->
</body>
</html>
【index.html】
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<!-- 1行告知浏览器其使用的HTML版本 2行提供浏览器可以引用的URL，指向W3C的XHTML 1.0 Strict规范-->
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bubble Under -The diving club for the south-west UK</title>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/> <!-- meta成为自关闭元素，也叫
空内容元素，它没有内容，因而结束标签可以合并到起始标签里-->
<styletype="text/css">
p {
font-weight:bold;
color:green;
}
</style>
<linkhref="style1.css" rel="stylesheet"type="text/css" />
<!--用link元素导入外部样式表 -->
<!-- link元素：仅仅是把一个文件“链接”到它元素存在的网页中，rel、type两部分是用来告诉浏览器链接的是哪种类型的文件，以及浏览器应该如何处理 -->
<!-- link元素：特殊的空元素，是一个自完成的元素，要在最后加上一个空格和斜杠符号 -->
</head>
<body>
<!--div的作用是将网页分割成不同的节，以增强结构性-->
<!-- div元素中可以包含任意个段落元素（就好像一个容器一样），也可以嵌套div元素；但段落元素中不可以使用div元素 -->
<divid="header"> <!-- 用div元素创建一个标题行区域，并为每个div加上一个名为id的属性，并赋予一个唯一的标识 -->
<divid="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<divid="tagline">
<pstyle="color:blue;font-weight:bold"><spanstyle="color:red;font-weight:normal">Diving club</span> forthe south-west UK - let's make a splash!</p> <!-- p元素：段落，会产生间距 -->
<!--内联样式(在p标签内设置的样式)，对整个paragraph有效 -->
</div>
</div> <!-- end of header div -->
<divid="navigation">
<ul>
<li><ahref="index.html">Home</a></li>
<li><ahref="about.html">About Us</a></li>
<li><ahref="events.html">Club Events</a></li>
<li><ahref="contact.html">Contact Us</a></li>
<li><ahref="gallery.html">Image Gallery</a></li>
</ul>
</div>
<divid="bodycontent"> <!-- 主体内容 -->
<h2>Welcome toour super-dooper Scuba site</h2>
<!--如下 img元素（是一个空元素）将在页面插入一张图像 -->
<p><imgsrc="../img/divers-circle.jpg" class="feature"width="200" height="162"
alt="Acircleof divers practice their skils" /></p> <!-- alt用来指定代替图像的备选文字，当出于某些原因而导致图像无法显示时将显示该文字 -->
<p>Glad youcould drop in and share some air with us!<br /> <!-- br元素（是一个空元素）：换行，不会产生间距（而 p元素会产生间距） -->
You've passed yourunderwater navigation skills and successfully found your way to the start pointor in this case,our home page.</p>
<p><strong><em>MaoZedong</em></strong> said: "<cite>Service forpeople</cite>"</p>
<!--如果引用的信息是源于别处的，可以添加 cite元素标识引用源的信息 -->
<!-- em元素：强调（emphasis），默认斜体（与strong联合就是：粗斜体），em的默认属性值可以通过外部样式修改-->
<!-- strong元素：表达更强烈的语气，重点强调，默认粗体 -->
</div><!-- end ofbodycontent div -->
</body>
</html>
【contact.html】
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1-strict.dtd">
<HTMLxmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Contact Us atBubble Under</TITLE>
<METAhttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
<linkhref="style1.css" rel="stylesheet"type="text/css" />
</HEAD>
<BODY>
<divid="header"> <!-- 标题 -->
<divid="sitebranding">
<h1>BubbleUnder.com</h1>
</div>
<divid="tagline">
<p>Divingclub for the south-west UK - let's make a splash!</p>
</div>
</div> <!-- end of header div -->
<divid="navigation">
<ul>
<li><ahref="index.html">Home</a></li>
<li><ahref="about.html">About Us</a></li>
<li><ahref="events.html">Club Events</a></li>
<li><ahref="contact.html">Contact Us</a></li>
<li><ahref="gallery.html">Image Gallery</a></li>
</ul>
</div>
<divid="bodycontent"> <!-- 主体内容 -->
<h2>ContactUs</h2>
<p>To let usknow about a forthcoming dive event, please use the form below.</p>
<formaction="" method="post" class="contact">
<fieldset>
<legend>Tellus About a Dive Event</legend>
<div>
<labelfor="contactname" class="fixedwidth">ContactName</label>
<inputtype="text" name="contactname" id="contactname"/>
</div>
<div>
<labelfor="telephone" class="fixedwidth">TelephoneNumber</label>
<inputtype="text" name="telephone" id="telephone" />
</div>
<div>
<labelfor="email" class="fixedwidth">EmailAddress</label>
最低0.47元/天 解锁文章
1639
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
