从零开始学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表单,对照联系一遍所有表单标签