基础语法
HTML Basic Document
<html>
<head>
<title>Document name goes here</title>
</head>
<body>
Visible text goes here
</body>
</html>
Text Elements
<p>This is a paragraph</p>
<br> (line break)
<hr> (horizontal rule水平线)
<pre>This text is preformatted</pre>
Logical Styles
<em>This text is emphasized</em> <!--着重文字-->
<strong>This text is strong</strong> <!--加重语气-->
<code>This is some computer code</code>
Physical Styles
<b>This text is bold</b> <!--加粗-->
<i>This text is italic</i> <!--斜体-->
Links, Anchors, and Image Elements
<a href="http://www.example.com/">This is a Link</a>
<a href="http://www.example.com/"><img src="URL"
alt="Alternate Text"></a>
<a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Useful Tips Section</a>
<a href="#tips">Jump to the Useful Tips Section</a>
Unordered list
<ul>
<li>First item</li>
<li>Next item</li>
</ul>
Ordered list
<ol>
<li>First item</li>
<li>Next item</li>
</ol>
Definition list(定义)
<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>
Tables
<table border="1">
<tr>
<th>someheader</th>
<th>someheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>
Frames框架
<frameset cols="25%,75%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
Iframe:网页中显示网页
<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
script：定义客户端脚本，如：JavaScript
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。
只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容：
<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Your browser does not support JavaScript!</noscript>
Forms（表单）
<form action="http://www.example.com/test.asp" method="post/get">
<input type="text" name="lastname" value="Nixon" size="30" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit">
<input type="reset">
<input type="hidden">
<select>
<option>Apples
<option selected>Bananas
<option>Cherries
</select>
<textarea name="Comment" rows="60"
cols="20"></textarea>
</form>
Entities
< is the same as <
> is the same as >
© is the same as ©
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分（cent） | ¢ | ¢ |
| £ | 镑（pound） | £ | £ |
| ¥ | 元（yen） | ¥ | ¥ |
| € | 欧元（euro） | € | € |
| § | 小节 | § | § |
| © | 版权（copyright） | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
Other Elements
<!-- This is a comment -->
<blockquote>
Text quoted from some source.
</blockquote>
<address>
Address 1<br>
Address 2<br>
City<br>
</address>
image
 <!--一般形式-->
 <!--控制长宽-->
<!--无法载入图像时，替换文本属性显示图像失去的信息-->
<!--控制图像位置-->
可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
补充：HTML样式
通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中（CSS 文件）进行定义。
本次只讲解style属性，具体形式：
<p style="attribute:value"></ p>
或者
<h1 style="attribute1:value1;attribute2:value2;"></ h1>
- 背景颜色：background-color
<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
- 字体、颜色、尺寸：font-family、color 以及 font-size
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<!--中文字体可选：华文行楷/华文新魏/隶书/方正舒体>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
- 对齐方式：text-align
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
- 背景图片：background
<body background="./Pictures/background_paper_1.gif">
<p style="text-align: center;">背景图片</p>
</body>
如何使用样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
- 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
- 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部
分通过 <style> 标签定义内部样式表。
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
- 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
