------------- 《HTML&CSS设计与构建网站》 -----------------
1. 页面结构
网页访问机制
- User通过Internet服务提供商（ISP），通过域名访问网站。
- 计算机连接到DNS的服务网络
- DNS服务器返回相应网页的托管Web服务器的IP
基本概念
- HTML页面是文本文档。
- 标签通常成对使用。
- 起始标签可以附带特性。
结构代码
<html>
<head>
<title>This is the Title of the Page</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p lang="en-us">Anything within the body of a web page is displayed in the main browser window.</p>
<p lang="es">Es espanol.</p>
</body>
</html>
2. 文本
语义化标记：不影响网页结构，但是为页面添加额外信息，使描述更加准确
标签
- 标题 <h1> </h1> ,<h2></h2>....<h6></h6>
- 段落 <p>
- 粗体 <b>
- 强调 <strong><em>
- 斜体 <i>
- 引用 <blockquote>
- 缩写 <abbr>
- 引文 <cite>
- 定义<dfn>
- 设计者详细信息 <address>
- 内容的修改<ins> <del><s>
- 上下标 《sup》《sub》
- 换行符 《br/》
- 水平线 《hr/》
example
<html>
<head>
<title>Text</title>
</head>
<body>
<h1>The Story in the Book</h1>
<h2>Chapter 1</h2>
<p>Molly had been staring out of her window for about an hour now. On her desk, lying between the copies of <i>Nature</i>, <i>New Scientist</i>, and all the other scientific journals her work had appeared in, was a well thumbed copy of <cite>On The Road</cite>. It had been Molly's favourite book since college, and the longer she spent in these four walls the more she felt she needed to be free.</p>
<p>She had spent the last ten years in this room, sitting under a poster with an Oscar Wilde quote proclaiming that <q>Work is the refuge of people who have nothing better to do</q>. Although many considered her pioneering work, unraveling the secrets of the llama <abbr title="Deoxyribonucleic acid">DNA</abbr>, to be an outstanding achievement, Molly <em>did</em> think she had something better to do.</p>
</body>
</html>
3. 列表
列表注意有序列表，无序列表和定义列表的使用。
<html>
<head>
<title>Lists</title>
</head>
<body>
<h1>Scrambled Eggs</h1>
<p>Eggs are one of my favorite foods. Here is a recipe for deliciously rich scrambled eggs.</p>
<h2>Ingredients</h2>
<ul>
<li>2 eggs</li>
<li>1tbs butter</li>
<li>2tbs cream</li>
</ul>
<h2>Method</h2>
<ol>
<li>Melt butter in a frying pan over a medium heat</li>
<li>Gently mix the eggs and cream in a bowl</li>
<li>Once butter has melted add cream and eggs</li>
<li>Using a spatula fold the eggs from the edge of the pan to the center every 20 seconds (as if you are making an omelette)</li>
<li>When the eggs are still moist remove from the heat (it will continue to cook on the plate until served)</li>
</ol>
</body>
</html>
4. 表格
注意
- rowspan,colspan特性用于跨行或者跨列的表示
- 长表格可以利用<thead><tbody><tfoot>
example
<html>
<head>
<title>Tables</title>
</head>
<body>
<table>
<thead>
<tr>
<th></th>
<th scope="col">Home starter hosting</th>
<th scope="col">Premium business hosting</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Disk space</th>
<td>250mb</td>
<td>1gb</td>
</tr>
<tr>
<th scope="row">Bandwidth</th>
<td>5gb per month</td>
<td>50gb per month</td>
</tr>
<tr>
<th scope="row">Email accounts</th>
<td>3</td>
<td>10</td>
</tr>
<tr>
<th scope="row">Server</th>
<td>Shared</td>
<td>VPS</td>
</tr>
<tr>
<th scope="row">Support</th>
<td>Email</td>
<td>Telephone and email</td>
</tr>
<tr>
<th scope="row">Setup</th>
<td>Free</td>
<td>Free</td>
</tr>
<tr>
<th scope="row">FTP accounts</th>
<td>1</td>
<td>5</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td colspan="2">Sign up now and save 10%!</td>
</tr>
</tfoot>
</table>
</body>
</html>
5. 链接
用法
- 页面跳转 <a href=""...
- 在新页面打开的跳转 <a href="" target="_blank"...
- 链接到当前页面的特定位置 <a href="#top"...
- 邮件 <a href="mailto:"...
example
<html>
<head>
<title>Links</title>
</head>
<body>
<h1 id="top">Film Folk</h1>
<h2>Festival Diary</h2>
<p>Here are some of the film festivals we will be attending this year.<br />Please <a href="mailto:filmfolk@example.org">contact us</a> if you would like more information.</p>
<h3>January</h3>
<p><a href="http://www.sundance.org">Sundance Film Festival</a><br />Park City, Utah, USA<br />20 - 30 January 2011</p>
<h3>February</h3>
<p><a href="http://www.tropfest.com">Tropfest</a><br />Sydney, Australia<br />20 February 2011</p>
<h3>March</h3>
<p><a href="http://sxsw.com">South by Southwest</a><br />Austin, Texas, USA<br />11 - 20 March 2011</p>
<h3>April</h3>
<p><a href="http://www.londonindependent.org">London Independent Film Festival</a><br />London, UK<br />15 - 24 April 2011</p>
<h3>May</h3>
<p><a href="http://www.festival-cannes.com">Cannes International Film Festival</a><br />Cannes, France<br />11 - 22 May 2011</p>
<h3>June</h3>
<p><a href="http://www.sff.org.au">Sydney Film Festival</a><br />Sydney, Australia<br />8 - 19 June 2011</p>
<h3>July</h3>
<p><a href="http://www.miff.com.au">Melbourne International Film Festival</a><br />Melbourne, Victoria, Australia<br />22 July - 7 August 2011</p>
<h3>August</h3>
<p><a href="http://www.nzff.co.nz">New Zealand International Film Festival</a><br />Dunedin, New Zealand<br />4 - 25 August 2011</p>
<h3>September</h3>
<p><a href="http://www.labiennale.org/en/cinema">Venice Film Festival</a><br />Venice, Italy<br />31 August - 10 September 2011</p>
<h3>October</h3>
<p><a href="http://www.bfi.org.uk/lff/">London Film Festival</a><br />London, UK<br />12 - 27 October 2011</p>
<h3>November</h3>
<p><a href="http://www.idfa.nl/industry.aspx">International Documentary Film Festival Amsterdam (IDFA)</a><br />Amsterdam, Netherlands<br />16 - 27 November 2011</p>
<h3>December</h3>
<p><a href="http://whistlerfilmfestival.com">Whistler Film Festival</a><br />Whistler, BC, Canada<br />30 November - 4 December 2011</p>
<p><a href="about.html">About Film Folk</a></p>
<p><a href="#top">Top of page</a></p>
</body>
</html>
6. 图片
- img：包含src和alt属性，可以指定宽度和高度。
- figure：结合figcaption，可以引入相关的图片说明，增加代码的可读性。
- 图片映射
7. 表单
- <form action="" method=""></form>
- action为一个url，用来接收表单提交时的信息
- method为post或者get（get通常用于搜索的情况）
-<input... /> - type属性：表单控件的类型
- text：单行文本框。可以设置最大长度。
- password：与text类似，但是字符会被隐藏。
- textarea：多行文本框，可以用cols和rows来设置文本框的尺寸。与其他input元素不同，textarea不是空元素。
- radio：单选，必须包含name，value属性，可以添加checked属性。并且一旦选中之后，不能取消选中，只能选择其他选项。
- checkbox：多选，其他基本同radio。
- select：包含2个或以上的<option>,option内包含value。/select可以通过multiple属性来将单选变成多选，并且通过size来增加显示的数量，但对浏览器的支持有限制。
- file：上传文件。此时method必须时post。
- submit：用于提交表单。value属性用于控制显示的文字。
- image：可以用图片作为提交按钮，最好结合button使用
- email，time，url：提供特殊显示或输入格式验证。
- search：搜索框，部分浏览器支持特殊显示，并且可以通过placeholder来增加默认显示文字。
- hidden：可以用于传递不被用户所见的参数。
- required：表单验证通常需要通过js来实现，不过在空间中添加required可以一定程度时完成空选提示。
- label：label可以将文本和表单输入框都包含进去，也可以与表单控件分开来，通过for属性来关联所在的控件。
- fieldset+legend：fieldset通常默认样式是有border的，而legend则是名字，可能使得整个表单更加清晰。
8. Flash，视频，音频
9. 其他
-
DOCTYPE
由于HTML存在多个版本，每个网页在开头用DOCTYPE声明来告诉浏览器使用的版本，同时可以帮助浏览器正确的渲染页面。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> -
HTML中的注释
<!--this is comment--> -
页面信息meta
<meta>通常包含在<head>内部，对用户不可见，用于携带信息。最常用的特性是name和content。description，keywords，robots用于控制搜索引擎相关的搜索设置，而pragma用于防治浏览器对页面进行缓存。expire可以指定页面的国企时间，必须按照指定格式。<head> <title>Information About Your Pages</title> <meta name="description" content="An Essay on Installation Art" /> <meta name="keywords" content="installation, art, opinion" /> <meta name="robots" content="nofollow" /> <meta http-equiv="author" content="Jon Duckett" /> <meta http-equiv="pragma" content="no-cache" /> <meta http-equiv="expires" content="Fri, 04 Apr 2014 23:59:59 GMT" /> </head> -
iframe内联框架
在页面中内嵌另一个网页，最常用的是内嵌地图。<iframe src="http://maps.google.co.uk/maps?q=moma+new+york&output=embed" width="450" height="350" frameborder="0" scrolling="no"> </iframe> -
div，id，span
div常用语将块级元素聚合，而span可以将内联元素聚合。块级元素和内联元素的区别
网友评论