用户:Vin0528
欢迎来到 HTML 的世界！此页面充满了许多关于 HTML 编辑的教学 (包含少数 JavaScript、CSS)，不会做网页的网友可以看过来，从入门学起，到比较深入，都可以学习到！
若要发表问题，请按这里。
English version click here.
入门
[编辑]如何新增 HTML 档案?
[编辑]新增 *.txt 档案，主档名可自取，副档名应为.htm , .html ...。
如何编辑 ?
[编辑]此文主要是使用纯文字编辑，各位网友也可以试试 Microsoft FrontPage、Adobe Dreamweaver，两者皆是直接编辑的方式。
那到底要如何编辑 ? 答案揭晓！
第一课
[编辑]建立网页
[编辑]要先新增 HTML 档案，再进行编辑，于是新增了 "index.html" 档案。现在请使用纯文字编辑器开启它。
接着输入以下文字：
<html<head> <title>(自訂標題)</title> </head> <body> Hello, world. </body></html>
"自订标题" 的意思是自己为网页取一个名称。"title"顾名思义就是要定义标题。
呈现结果为：
Hello, world.
第一个课程上完了。很快吧！
第二课
[编辑]条列项目
[编辑]注: 以下若没特别注解，该程式码一律放置于<body>与</body>之间。
输入以下程式码：
<menu> <!-- 建立條列式項目。 --> <li> List one <li> List two <li> List three </menu>
List one 等等的定义了项目名称。呈现结果：
上完了条列项目，还有一节要上。
表格
[编辑]这次比较复杂，要专心看！
输入以下程式码：
<table border="1"> <!-- 建立表格。 --> <tr><td colspan="3">網頁技術</td></tr> <!-- 定意一行表格，並跨 3 欄。 --> <tr><td>HTML</td><td>JavaScript</td>><td>CSS</td></tr> <!-- 這是表格的第二行。 --> </table>
呈现的表格如下：
| 网页技术 | ||
| HTML | JavaScript | CSS |
这节课又上完了。超快速！
第三课
[编辑]表单
[编辑]这次要介绍 HTML 中的表单。呈现结果：
输入以下程式码：
<input type="text">
即可显示文字框。
<标签名 属性名="属性">，以下列一个表格。
| text |
|
一般文字框。 |
| password |
|
密码文字框，使用 ● 隐藏。 |
|
|
电子邮件输入框，仅 HTML5 支持。 不支援者显示一般文字框。 | |
Perl 编程语言
[编辑]Perl 是一种处理表单的程式。新增 "cgi-1.pl" 后，写出下列程式码：
| 01 | #!/usr/local/bin/perl |
| 02 | print "Context-type: text/html\n\n" |
| 03 | # Get that user submitted info. |
| 04 | $ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/; |
| 05 | if ($ENV{'REQUEST_METHOD'} eq "POST") |
| 06 | {read(STDIN, $buffer, $ENV{'CONTENT_LENGTH'});} |
| 07 | else |
| 08 | { $buffer = $ENV{'QUERY_STRING'};} |
| 09 | # Give the page values. |
| 10 | @darray = split(/&/, $buffer); |
| 11 | foreach $arg(@darray) |
| 12 | { |
| 13 | ($name; $value) = split(/=/, $arg); |
| 14 | $value =~ tr/+//; |
| 15 | $value =~ s/%([a-fA-F0-9][a-fA-F0-9])/pack("C", hex($1))/eg; |
| 16 | $argument{$field_name} = $field_value; |
| 17 | } |
| 18 | # Show the respond HTML file. |
| 19 | print "<html><head>"; |
| 20 | print "<title>问卷调查</title></head>"; |
| 21 | print "<body>"; |
| 22 | print "<h1>問卷調查</h1><hr>"; |
| 23 | print "姓名：$argument{'name'}"; |
| 24 | print "</body></html>"; |