HTMLCSSJS

JavaHTMLCSSJSDay01Top1.创建HTML文档2.文本标记3.图像和链接4.列表5.表格6.基础表单7.复杂表单8.iframe元素1创建HTML文档1.1问题创建一个标准结构的HTML文档。1.2方案使用HTML编写网页文档时，首先需要在文档的开始添加版本声明。目前有三种版本声明：过渡型、严格型和框架型。目前，为了保证兼容性，大多数页面都是使用过渡型，其版本声明为：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN除了版本信息，剩下的就是整个页面的内容。HTML文档的整个页面需要包含在开始标记html和结束标记/html之间。在html元素中，包含两个主要的部分，文件头部分（head元素）和主体部分（body元素）。代码如下所示：1.htmlxmlns=实现首先创建一个纯文本文件，并修改名称为01_doc.html；然后在此文件中，添加HTML代码，以创建一个标准结构的HTML文档。系统代码实现如下：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=隐藏1.4扩展使用head元素，为创建的HTML文档添加文档标题，并设置文档的编码格式以及页面的刷新频率。代码如下：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=第一个HTML文档/title5.metahttp-equiv=content-typecontent=text/html;charset=utf-8/6.metahttp-equiv=refreshcontent=10/7./head8.body9./body10./html隐藏2文本标记2.1问题修改上节中所创建的01_doc.html文档，为页面添加文本标记，实现如图－1所示的页面效果：图－１2.2方案图－1所示的页面中，文本“Java语言基础Day03”为一级标题，使用h1元素创建。其中，特殊字符需要使用转义符，而红色文本需要使用span元素标识出来，并添加样式。代码如下：1.h1align=center2.Java 语言基础spanstyle=color:Red;<Day03>/span3./h1文本“1个人所得税计算器”为二级标题，使用h2元素创建；文本“1.1问题”、“1.2方案”和“1.3实现”为三级标题，使用h3元素创建。代码如下：1.h31.1 问题/h32.h31.2 方案/h33.h31.3 实现/h3其他文本使用段落元素p创建，空白行使用换行元素br创建。2.3实现图－1所示的01_doc.html的文件的代码如下所示：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=第一个HTML文档/title5.metahttp-equiv=content-typecontent=text/html;charset=utf-8/6.metahttp-equiv=refreshcontent=10/7./head8.body9.h1align=centerJava 语言基础spanstyle=color:Red;<Day03>/span/h110.h21 个人所得税计算器/h211.h31.1 问题/h312.p计算个人所得税的缴纳情况。用户从控制台输入税前工资的金额，系统根据用户输入的工资金额计算应缴纳的税额。/p13.h31.2 方案/h314.p使用if语句来完成该程序。/p15.h31.3 实现/h316.p使用记事本建立一个名称为 IncomeTax.java 的文本文件。定义一个类，代码如下：/p17.p18.public class IncomeTaxbr/19.{br/br/br/br/20.}21./p22./body23./html隐藏2.4扩展3图像和链接3.1问题继续修改上节中所创建的01_doc.html文档，为图－1所示的页面中的“1.1问题”部分添加图像，页面效果如图－2所示。图－2然后，为图－1所示的页面中的“1.2方案”部分添加图像，页面效果如图－3所示。图－3并为图－2和图－3上的图像添加链接，单击该图像后，将在新的浏览器窗口（或者页签）中打开TTS的页面（地址为）。另外，页面底部需要添加链接“ToTop”，单击该链接后，将定位到当前页面的顶端。3.2方案使用元素img为页面添加图像，使用a元素为图像添加链接。为了在新窗口或者新的页签上打开页面，需要设置a元素的target属性的值为_blank。代码如下：1.ahref==_blank2.imgsrc=calculater.jpgheight=150/3./a使用p元素设置图像下方的文本标题，并使用div元素作为图像和图像标题的父元素，以设置居中显示。代码如下所示：1.divalign=center2.ahref==_blank3.imgsrc=calculater.jpgheight=150/4./a5.br/6.p图-1/p7./div使用a元素为页面定义链接，以实现当前页面的链接定位。代码如下所示：1.ahref=#ToTop/a3.3实现修改后的01_doc.html的文件的代码如下所示：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=第一个HTML文档/title5.metahttp-equiv=content-typecontent=text/html;charset=utf-8/6.metahttp-equiv=refreshcontent=10/7./head8.body9.h1align=centerJava 语言基础spanstyle=color:Red;<Day03>/span/h110.h21 个人所得税计算器/h211.h31.1 问题/h312.p计算个人所得税的缴纳情况。用户从控制台输入税前工资的金额，系统根据用户输入的工资金额计算应缴纳的税额。运行界面如图－1所示：/p13.divalign=center14.ahref==_blankimgsrc=calculater.jpgheight=150//abr/15.p图－1/p16./div17.h31.2 方案/h318.p使用if语句来完成该程序。程序结构如图－2所示：/p19.divalign=center20.ahref==_blankimgsrc=if.jpgheight=350//abr/21.p图－2/p22./div23.h31.3 实现/h324.p使用记事本建立一个名称为 IncomeTax.java 的文本文件。定义一个类，代码如下：/p25.p26.public class IncomeTaxbr/27.{br/br/br/br/28.}29./p30.ahref=#ToTop/a31./body32./html隐藏3.4扩展4列表4.1问题继续修改上节中所创建的01_doc.html文档，为页面添加导航用的目录，页面效果如图－4所示。图－4由图－4可以看出，页面上添加了当前文档的目录，单击图－4中的链接，将分别定位到文档中相应的位置。其中，仅“1.个人所得税计算器”目录下的链接可用，其他链接仅为示意。比如，单击“1.个人所得税计算器”目录下的“方案”链接，则定位到文档中相应的位置，页面效果如图－5所示。图－54.2方案为实现当前页面上的跳转，需要在相应位置使用a元素创建锚点。因此，修改原有h3元素中的代码，添加a元素以设置锚点。代码如下所示：1.h3aname=question/a1.1 问题/h32.h3aname=project/a1.2 方案/h33.h3aname=code/a1.3 实现/h3然后，使用嵌套的列表元素创建目录，并创建链接文本。代码如下所示：1.ol2.li3.个人所得税计算器4.ul5.liahref=#question问题/a/li6.liahref=#project方案/a/li7.liahref=#code实现/a/li8./ul9./li10.li11.命令解析器12.ul13.li问题/li14.li方案/li15.li实现/li16./ul17./li18./ol4.3实现修改后的01_doc.html的文件的代码如下所示：1.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN=第一个HTML文档/title5.metahttp-equiv=content-typeconten