1. 首先展示三段代码
(1)
<p>this is a paragraph</p>
(2)
<body>
<p>this is a paragraph</p>
</body>
(3)
<html>
<body>
<p>this is a paragraph </p>
</body>
</html>
以上这三段代码的输出是完全相同的，都是this is a paragraph。区别在哪呢？首先，第一段代码只描述了html文档中一个段落，以及这个段落的内容，第二段代码<body>元素定义了html文档中的主体，当然也包括这个主体中的内容，第三段就是这个html文档的全部内容了。
2.<hr/>用来创建水平线，即可以分割内容。代码及结果如图：
3.html的注释语句：
<!--要注释的语句-->
4.html提示，如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
5. HTML 输出 - 有用的提示
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
6.当你想保留预格式（即草稿），代码操作如下：
7.想要显示的文字从右向左输出的话，
<bdo dir =”rtl”>
Here is some hebrew text
</bdo>
当然，你的浏览器要支持bi-directional override (bdo)，
不是单词的从左往右，按字母顺序从左往右。
8.长引用
<blockquote>
这是长引用，啦啦啦啦啦啦啦啦啦啦啦啦啦（）
</blockqupte>
长引用会插入显示和外边距，
<q>短引用</q>
输出：“短引用”
9.链接
<a href="http://ww.hao123.com" >hao 123</a>
这就是实现了一个简单的链接
运行结果会显示hao123，当你点击hao123时就可以链接到这个网站了。
（2）当然，也可以通过图像来进行链接
实现代码如下：
<html>
<body>
<a href ="http://www.hao123.com">
<img border="0" src="123.jpg" />
</a>
</p>
</body>
</html>
链接中还可以设置target属性，
<a href ="http://www.hao123.com" target=”_blank”>hao12
3</a>
如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开
10.图片插入
（动态图与静态图完全相同）
<html>
<body>
<p>
一幅静态图
<img src ="/i/eg_mouse.jpg" width="128"height="158"/>
</p>
<p>
动态图
<img src ="/i/eg_cute.gif" width="150"height="152">
</p>
</body>
</html>
11.html中的表格制作
<html>
<body>
<p> 每个表格由table标签开始</p>
<p> 每个表格行由tr 标签开始。</p>
<p>每个表格数据由td 标签开始。</p>
<h4>一列</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4> 一行三列</h4>
<table border ="2">
<tr>
<td>22<td>100<td>100
</tr>
</table>
<h4>两行三列</h4>
<table border="5">
<tr>
<td>5220<td>522<td>622
</tr>
<tr>
<td>5220<td>522<td>622（5220为表格内的数据）
</tr>
</body>
</html>
12.
，姓名性别输入的时候都会显示出来，下来再说一种登录的方式，密码的输入默认是圆点
<html>
<body>
<form >
用户：
<input type=”text” name=”users”>
<br/>
密码：
<input type=”password” name=”paaword”>
</form >
</body>
</html>
13.
Html中的单选按钮
<html>
<body>
<form>
男性：
<input type="radio"checked="checked" name="Sex" value="male" /> （注意：checked=“checked”表示该属性为默认属性）
<br />
女性：
<input type="radio" name="Sex"value="female" />
</form>
</body>
</html>
14.简单的下拉列表：
<html>
<body>
<form>
<select>
<option name="apple">apple</option>
<option name="orange">orange</option>
<option name="watermelon"selected="selected">watermelon</option>
<option name="lemon" selected="selected">lemon</option>
</select>
</form>
</body>
</html>
图为运行的结果。如果不写selected="selected"的话，默认列表中出现的应该是第一个，在本例中即为apple，如果在某个元素属性里加selected="selected"，则列表默认出现该元素，如有多个，以最后一个为准。
15.
<textarearows="10" cols="30">
the cat was playing in the garden。
简单文本框的实现。
2440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
