从零开始学06 — 做一个更复杂的网页
现在我们通过练习一个复杂的网页，综合运用一下网页的各种知识，仍然强烈建议大家用记事本敲一遍下面100行HTML代码（为了方便讲解标记了行号），对于其中不懂的部分先不要在意。尽管代码上的排版对浏览器来说不重要，但还是要有缩进和换行，好习惯什么时候都重要：
index.html
001.<html>
002. <head>
003. <title>做一个更复杂的网页</title>
004. <style type="text/css">
005. body{font-family: "Microsoft YaHei";}
006. .subject{color:blue;}
007. .tab tr td{border:1px solid #000; padding:5px;}
008. .tab{border:1px solid #000;}
009. .row{margin-top:50px;}
010. .class1{color:green;}
011. #example1{color:red;}
012. </style>
013. </head>
014. <body>
015. <h1 class="subject">做一个更复杂的网页</h1>
016. <p>
017. <span>我们通过操作一个复杂的页面，来学习一下这些知识：</span>
018. <ul>
019. <li>通用的id和class属性</li>
020. <li style="color:#00aaff">什么是CSS</li>
021. <li>什么是JS</li>
022. <li>练习一下超链接</li>
023. <li><DIV>标签</li>
024. <li>表格标签</li>
025. <li>表单标签</li>
026. <li>HTML转义</li>
027. </ul>
028. </p>
029. <div class="row"><h3>通用的id和class属性 用DIV来组织内容 用CSS来定义颜色</h3></div>
030. <div>
031. <div id="example1">我有一个id</div>
032. <div class="class1">我有一个class</div>
033. </div>
034. <div class="row"><h3>JS按钮点击</h3></div>
035. <div>
036. <span id="info">我没有变！</span>
037. <input type="button" id="btn" value="点我试试！" />
038. </div>
039. <div class="row"><h3>表格里的超链接</h3></div>
040. <table class="tab">
041. <tr>
042. <td>第一行第一列</td>
043. <td><a href="http://www.w3school.com.cn/html/index.asp">HTML 教程</a></td>
044. <td>第一行第三列</td>
045. </tr>
046. <tr>
047. <td><a href="http://www.d7w.net">设计兵团</a></td>
048. <td><img src="http://www.d7w.net/new_index/images/logo.png" /></td>
049. <td>第二行第三列</td>
050. </tr>
051. <tr>
052. <td>第三行第一列</td>
053. <td>第三行第二列</td>
054. <td><a href="http://www.baidu.com">百度</a></td>
055. </tr>
056. </table>
057. <div class="row"><h3>表单标签联系</h3></div>
058. <form method="post" action="#">
059. <label>您的姓名：</label>
060. <input type="text" name="fullname" id="fullname" placeholder="例如：张三" />
061. <label>您的密码：</label>
062. <input type="password" name="password" id="password" value="123456" />
063. <input type="submit" value="提交" />
064. </form>
065. <div class="row"><h3>HTML转义</h3></div>
066. <table class="tab">
067. <tr>
068. <td>字符</td>
069. <td>转义</td>
070. </tr>
071. <tr>
072. <td>"</td>
073. <td>&quot;</td>
074. </tr>
075. <tr>
076. <td>&</td>
077. <td>&amp;</td>
078. </tr>
079. <tr>
080. <td><</td>
081. <td>&lt;</td>
082. </tr>
083. <tr>
084. <td>></td>
085. <td>&gt;</td>
086. </tr>
087. <tr>
088. <td>空格</td>
089. <td>&nbsp;</td>
090. </tr>
091. </table>
092. <script type="text/javascript">
093. btn = document.getElementById("btn");
094. info = document.getElementById("info");
095. btn.onclick = function(){
096. info.innerHTML="我已经改变了";
097. }
098. </script>
099. </body>
100.</html>浏览器效果如下：
这100行代码综合运用了一个网页涉及到的各类知识，下面我们来详细看一遍：
一、头部出现<style>标签，属性为type="text/css"，这标记着即将定义本页面的CSS样式。什么事CSS样式？我们看到的网页，是内容精心设计排版的结果，这要求能够精确控制网页元素的各种属性：宽度、高度、距离、颜色等等，这些仅仅依靠HTML是不够的，所以引用了CSS来控制，我们可以查看<style>标签内的定义：
body{font-family: "Microsoft YaHei";} 定义页面body内的字体全部为微软雅黑；
.subject{color:blue;}定义了subject类样式字体为蓝色，什么是类样式？我们可以用标签属性class来定义一个类，然后为这个类定义CSS，那么这个标签就具备了相应的CSS样式，可以看下015行有这样一个属性定义：class="subject"，subject你可以自由命名，这时我们在样式表里用“.”+subject的方式来定义具体样式，那么页面上呈现的就是蓝色的<H1>标题了，由此可知，样式的定义格式是，每个样式属性用“;”间隔：
.类名{样式属性1：值1;样式属性2：值2;样式属性3：值3; ... }
同理，.tab tr td{...}定义了tab类内包含的td元素边框和内间距；
.tab定义了066行<table>标签边框；
.row定义了所有使用了该样式的<div>的上边距为50px（50像素）；
.class1定义了032行的文本颜色为绿色；
上面涉及到了<div>标签，该标签可以简单理解为块，可以理解为一个装内容的盒子，默认在网页中前后各有一个换行。现代网页技术使用<div>组织内容已经是非常普遍的了。
接下来我们看下011行：与上面的内容不同，该内容使用#example1定义了031行文本颜色为红色；031行的定义并不是通过class属性！而是id,即id="example1"，同样example1你也可以自由定义，关于id你当前要记住的非常重要的一点:一个页面内严格禁止重复定义。由此可知：我们在<style>内定义样式可以通过设置class或id来实现。
二、接下来我们看到几个新标签：<p>、<span>、<ul>和<li>。
<p>表示段落；<span>是行内元素,也可以理解为简版的<div>,即前后无换行；<ul>和<li>的组合使用形成了无序列表。
注意020行，有个属性定义style="color:#00aaff"，它使得该文字内容呈现青色（RGB颜色值，可以先行百度一下）。也就是说我们可以在任意标签上用属性和属性值来定义CSS样式。
三、现在我们可以点击“点我试试！”按钮，来体验一下JS交互效果。你会发现文字“我没有变！”在点击后变成“我已经改变了”。按钮的定义在037行，在上面第036行你也看到了改变文字的<span>标签。这两行定义了两个id:info和btn。能让你的点击起作用的代码在第092~098行，我们看到出现的<script>标签，属性为type="text/javascript"，这就是JS代码了。
什么是JS？JS即javascript。是一种脚本语言，这个可以说是准程序语言了，这么说吧，你精通HTML不能叫自己程序员，但你掌握了JS可以说是JS程序员了。
而这里，则是最简单的一个演示，我们先大致了解下：id是JS中的身份标识，在JS代码中代表了是哪个网页元素，document.getElementById("id名")用来获取指定id的网页元素，所以
btn = document.getElementById("btn");
info = document.getElementById("info");
分别得到id为btn的按钮和id为info的<span>，接下来btn.onclick表示按钮被点击，{}里面说明发生了什么事：info.innerHTML="我已经改变了"即<span>的文字内容改成“我已经改变了”。onclick我们称为JS事件，是一个动作，你可以联想一下网页上会遇到很多交互效果，都有哪些动作来支持。JS我们就先简单了解这些，希望你能仿照上面提到的效果多尝试，多体会。
四、表格和表单。表格是几个标签的组合运用：<table>、<tr>和<td>。<table>代表整个表格区域，<tr>代表一行，嵌套的<td>代表每个单元格。具体可以看看040行~056行，留意一下里面的链接哦，有彩蛋！HTML教程点进去是相当全面的学习资料。
表单看下058行~064行，这里只演示了文本框和密码框，以及一个提交按钮。表单是有一个区域的，即<form>标签，属性method说明了表单提交方式为post，属性action代表接收数据的服务器地址，需要了解的是，HTML是你浏览器解释执行的结果，你的数据需要从你本地通过浏览器发送到服务器进行处理，表单提供了这样的机制。思考一下，一个表单域提交一次是不是只负责自己包含的表单标签？
表单这里重复使用<input>标签，注意<input>是一个单标签，呈现的表单不同是因为其属性type的值的不同，"text"代表普通文本框；"password"代表密码框，输入的字符将被隐藏显示；"submit"是提交按钮，点击提交会将所在表单域的表单提交到<form>标签action属性指定的地址。
<input>标签的name属性用来命名当前表单的，方便服务器接收，value可以理解为默认值。
<label>标签是标注，一般配合表单使用。
五、到此我们将整个网页都看过一遍，最后补充一下什么是HTML转义，简单来说，就是我们的标签还有相关字符已经被HTML占用了，比如“<”和“>”，那么我们就要在网页上显示尖括号怎么办，这时就用到了转义字符，参见下第023行，我们这个示例网页的最下方也展示了常用的转义字符：
小练习：
1.改变row定义的多个上边距，看看页面效果，体会一下这样做的好处
2.尝试做不少于三个按钮，点击不同按钮改变不同位置的文字
3.百度百科搜一下HTML表单，对照联系一遍所有表单标签
