Java-Web-入门学习笔记-HTML-CSS篇

概述：HTML是组织展示内容的标记语言，JavaScript是客户端的脚本语言，CSS是美化页面的样式表，这三种技术结合在一起构成了Web开发最基础的知识，所有的Web应用开发都是在这个基础之上进行的。首先对这三种技术的大体情况了解，可迅速对Web开发的基础知识有一个宏观的清楚的认识。HTML（HyperTextMarkupLanguage）即超文本标记语言，用来描述Web文档数据。用户可以通过URL链接来访问这种Web文档，从而达到信息展示、信息共享的目的。HTML是一种标记语言，每一种HTML标签都是有一定表现含义的。HTML常用标签：<table>在HTML的布局标签中，<table>标签是使用频率最高的一个。它可以把一组信息用表格的形式表示出来，DIV在以往的Web页面开发中，表格是首选的布局元素。<a>在浏览一个网站的时候，我们经常会遇到一些链接，单击这些链接就会导航的其他的页面。<img>在目前的网站开发中，对图片的依赖是其他元素所不能替代的，一个漂亮的网页往往是由一系列图片组合而成。HTML表单标签：即用来收集用户输入的标签。<form></form>是表单标签，只有在这个标签中的用户输入才会被提交给服务器。其他：Flash标签中可以加入Flash动画，文本标签可以用各种方式组织文本内容的显示JavaScript脚本可嵌套在HTML代码中，响应事件，增加静态的HTML网页的交互性，实现浏览器与用户的互动。Window对象，所有JS对象中最顶层的对象，整个HTML文档是在一个浏览器的一个窗口，及window对象中显示。Document对象，利用其可访问页面上任何的元素。通过控制这些元素，可完成与用户的互动。Location对象，在HTML标签中可用<a></a>超链接标签来控制网页中的跳转，在JS中如果要实现类似的网页跳转功能，只能选择location对象，使用时，在JS代码中添加一下代码即可：window.location.href=“”；CSS（CascadingStyleSheets）即层叠样式表CSS是一种美化网页的技术。通过使用CSS，可以方便、灵活地设置网页中不同元素的外观属性，通过这些设置可以使网页在外观上达到一个更高的级别.CSS美化网页就是通过设置页面元素的属性来实现的CSS绝对定位示例在HTML中布局一般情况下需要使用表格，如果要定位只有通过表格的嵌套来实现，这种方法的确可以在一定程度上解决问题，但是却不能随意定位页面元素，而且对某个元素位置的改变有可能影响到整个页面的布局JavaScript+DIV+CSS实现下拉菜单其原理就是在用JavaScript控制不同DIV的显示和隐藏，其中所有的DIV都是用CSS定位方法提前定义好位置和表现形式，下拉的效果只是当鼠标经过的时候触发一个事件JavaScript+CSS实现表格变色当鼠标移到某一行的时候，这行的背景颜色发生变化，这样当前行就会比较突出，不容易出错。JSP（JavaServerPage）技术基础知识JSP（JavaServerPage）是SUN公司开发的一种服务器端的脚本语言。本质是：把Java代码嵌套到HTML中，然后经过JSP容器的编译执行，可以根据这些动态代码的运行结果生成对应的HTML代码，从而可以在客户端的浏览器中正常显示。跨平台，即支持多个操作系统平台，一个用JSP开发的Web应用系统，不用做什么改动就可以在不同的操作系统中运行。运行原理：如果JSP页面是第一次被请求运行，服务器的JSP编译器会生成JSP页面对应的Java代码，并且编译成类文件。当服务器再次收到对这个JSP页面请求的时候，会判断这个JSP页面是否被修改过，如果被修改过就会重新生成Java代码并且重新编译，而且服务器中的垃圾回收方法会把没用的类文件删除。如果没有被修改，服务器就会直接调用以前已经编译过的类文件。环境搭建：要运行JSP程序，必需为其提供一个JSP容器，也就是需要一个Web服务器。支持JSP的服务器非常多，Tomcat、Resin、Weblogic、WebSphere等，Weblogic和WebSphere都是功能非常强大的重量级服务器，而且价格昂贵，对计算机的硬件配置要求也比较高，所以在一般情况下，如果只用到JSP的技术，是没有必要选择这两个服务器的。语法：JSP的结构、变量声名、表达式、动作、指令等JSP的特有语法程序结构：一部分是静态的HTML代码；另一部分是动态的Java代码和JSP自身的标签和指令；当JSP页面第一次被请求的时候，服务器的JSP编译器会把JSP页面编译成对应的Java代码，根据动态Java代码执行的结果，生成对应的纯HTML的字符串返回给浏览器，这样就可以把动态程序的结果展示给用户Jsp的七个动作指令Web程序涉及中经常需要用到JSP的动作指令，例如在使用JavaBean的时候就离不开userBean的指令，JSP的强大功能和它丰富的动作指令标签是分不开的的forward动作指令页面转向可以用来控制网页的重定向。即从当前页面跳转到另一个页面。forward动作的使用方法非常简单，具体使用格式如下。<jsp:forwardpage=""></jsp:forward>param动作指令，用于传递参数，不能单独使用，param指令可以与以下指令结合使用，jsp：includejsp：forwardjsp：pluginparam动作指令的具体使用方法，forward动作指令中可以用程序控制页面的跳转，如果需要在跳转的时候同时传递参数，这时候就需要用到param动作指令。Include动作指令动态引入一个JSP页面include动作指令可以在JSP页面中动态包含一个文件，这与include指令不同，前者可以动态包含一个文件，文件的内容可以是静态的文件也可以是动态的脚本，而且当包含的动态文件被修改的时候JSP引擎可以动态对其进行编译更新。而include指令仅仅是把一个文件简单的包含在一个JSP页面中，从而组合成一个文件，仅仅是简答的组合的作用。其功能没有include动作指令强大。例<jsp:includepage="path"flush="true"/>or<jsp:includepage="path"flush="true"><jsp:paramname="paramName"value="paramValue"/></jsp:include>注：1、page="path"为相对路径，或者代表相对路径的表达式。2、flush="true"必须使用flush为true，它默认值是false。3、<jsp:param>子句能让你传递一个或多个参数给动态文件，也可在一个页面中使用多个<jsp:param>来传递多个参数给动态文件。plugin用于下载JavaBean或者Applet到客户端执行<jsp:plugin>元素用于在浏览器中播放或显示一个对象（典型的就是applet和bean),而这种显示需要在浏览器的java插件。当jsp文件被编译，送往浏览器时，<jsp:plugin>元素将会根据浏览器的版本替换成<object>或者<embed>元素useBean创建一个Javabean实例useBean动作指令可以在JSP中引用JavaBean，这个动作指令在实际开发过程中经常会用到，useBean的使用格式如下。<jsp:useBeanid=""class=""scope=""></jsp:useBean>其中id为所用到的JavaBean的实例对象名称，class是JavaBean对应类的包路径，包括包名和类名。scope是这个JavaBean的有效范围，共有page、request、session、application四个值可以选择。setProperty

设置JavaBean实例的属性值一般情况下是和JavaBean配合使用的，用来给JavaBean的实例对象进行赋值操作，setProperty的基本方法有以下两种。<jsp:setPropertyname="JavaBean的实例名称”property="属性名"value="属性值"/>上面这种方法是setProperty动作指令最基本的用法，用来给JavaBean实例对象的某一个属性赋值。<jsp:setPropertyname="JavaBean的实例名称”property="*"/>上面这种JavaBean的赋值方法也是经常用到的getProperty

获取JavaBean实例的属性值一般情况下也是和JavaBean配合使用的，用来取出JavaBean实例对象的属性值。这个动作指令的基本使用方法如下。<jsp:getPropertyname="JavaBean的实例名称”property="属性名"value="属性值"/>JSP指令page指令可以用来定义JSP也面的全局属性。例如编码、错误页面等。include指令可以在当前的JSP页面中包含一个文件，从而和当前页面组成一个整体的文件。这中包含仅仅是静态包含。JSP内置对象比较常用的JSP内置对象有reqest、response、session、out、application等Reqest对象代表这从用户发送过来的请求，从这个对象中间可以取出客户端用户提交的数据或者是参数。这个对象只有接受用户请求的页面才可以访问。使用场合在Web应用中，用户的需求就抽象成一个request对象，这个对象中间包括用户所有的请求数据，例如通过表单提交的表单数据，或者是通过URL等方式传递的参数，这些就是用户的需求。request正是用来收集类似这些用户的输入数据和参数。同时，request对象中还包括一些服务器的信息，例如端口、真实路径、访问协议等信息，通过request对象可以取得服务器的这些参数。对象的方法有很多，实例：使用request对象取得表单数据。session对象维护着客户端用户和服务器端的状态，从这个对象中间可以取出用户和服务器交互的过程中的数据和信息。这个对象在用户关闭浏览器离开Web应用之前一直有效。使用场合session对象中保存的内容是用户与服务器整个交互过程中的信息，如果是想在整个交互的过程中都可以访问到的信息，就可以选择存放在session对象中。例如在用户登录的过程中，可以在session中记录用户的登录状态，这样用户就不必在每个页面都重新登录，只要用户没有离开当前的Web应用系统，就可以一直保存登录的状态out对象在Web应用开发过程中使用最多的一个对象，其功能就是动态的向JSP页面输出字符流，从而把动态的内容转化成HTML形式来展示。这个对象在任何JSP页面中都可以任意访问使用场合：out对象的功能就是向JSP页面输出数据信息。所以当有动态信息要展示给用户的时候就要用到out对象。在前面的很多示例中已经多次用到这个对象，读者从中可以很清楚的看到，out对象就是用来输入动态内容信息的。out对象最常用的方法。1．clear（）这个方法可以清除缓冲区的数据，但是仅仅是清除，并不向用户输出。2．clearBuffer（）这个方法可以清除缓冲区的数据，同时把这些数据向用户输出。Application对象保存着整个Web应用运行期间的全局数据和信息，从Web应用开始运行开始，这个对象就会被创建，在整个Web应用运行期间可以在任何JSP页面中访问这个对象。使用场合：application中保存的信息可以在整个应用的任何地方访问，这个session对象类似，但和session对象还是有所区别的。只要Web应用还在正常运行，application对象就可以访问，而session对象在用户离开系统就被注销。application对象的最常用的主要方法。1．getAttribute（Stringname）2．getServerInfo（）3．removeAttribute（Stringname）4．setAttribute（Stringname，Objecto）如。要实现一个简单的计数器，这个计数器就是利用application对象来储存计数器的值，用来统计服务器开始运行以来的访问量中文乱码问题：Java中才用的默认编码方式是Unicode，而中文的编码方式一般情况是GB2312,因为编码格式的不同，导致在中文不能正常显示。在不同的JDK版本和不同的应用服务器中的处理方法是不同的。但是其本质上都是一样的，把中文字符转化成合适的编码方式，或者是把在显示中文的环境中声名采用GB2312的编码。统一编码方案之后自然可以正常显示。JSP页面中，中文显示乱码有两种情况：一种是HTML中的中文乱码，另一中是在JSP中动态输出的中文乱码。URL传递参数中文乱码在一般情况下，可以用类似http://localhost:8080/chapt4/URLCharset.jsp?param='中文'这种形式来传递参数，而且HTML在处理表单的时候，当表单的method采用get方法的时候，传递参数的形式与URL传递参数的形式基本一样。表单提交中文乱码对于表单中提交的数据，可以使用request.getParameter("")的方法获取。但是当表单中如果出现中文数据的时候就会出现乱码数据库操作中文乱码在建立数据库的时候，应该选择支持中文的编码格式，最好能和JSP页面的编码格式保持一致，这样就可以尽可能减少数据库操作的中文乱码问题。同时在JDBC连接数据库的时候可以使用类似下面这种形式的URLjdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs;useUnicode=true;characterEncoding=gb2312其他开发技巧自定义错误页面在JSP中，如果出现代码的错误，就会直接在页面上打印类似在MyEclipse中快速部署项目使用前面推荐的MyEclipse这个集成开发工具来部署项目。MyEclipse的安装在前面第二章中已经详细介绍，在这里直接开始介绍如何发布Web应用项目。要想发布部署一个项目，首要任务就是把MyEclipse和服务器Tomcat联系起来，在MyEclipse中，对JSP页面进行调试也是非常方便的，如果需要调试JSP页面，只需要在JSP页面源代码的左侧双击鼠标左键，学习使用日志Log4j在JSPWeb开发中，有很多方便的日志工具可供选择，利用这些日志工具可以很方便的对系统中的错误信息进行管理，在这里我们选择使用Log4j，Log4j是目前JSP开发中使用最多的日志工具。Log4j按照严重程度给日志风味5个等级：DEBUG（调试）、INFO（提示）、WARN（警告）、ERROR（错误）、FATAL（严重错误）HTML学习一个简单代码含有基本HTML标签:代码:<html><head><title>江雪</title></head><bodybgcolor=”blue”><!--我是注释，以上blue，将页面背景设为蓝色，--><center><b>江雪</b></center><br><center>千山鸟飞绝,</center><br><p><center>万径人踪灭.</center><br></p><center>孤舟蓑笠翁,</center><br><center>独钓寒江雪.</center><h1>一号标题</h1><h2>二号标题</h2><p>11 11 11 11 11 11</p><!—我是注释，在Html中的空格规则为:多个空格,制表符,回车将转换为单一的空格。，上图的输出为1111111111111<pre>11 11 11 11 11 11</pre>预格式<h4>在Html中使用字符实体</h4><center>2+5>6</center><br><center>2+5<7</center><br><!--注释文本以上输出结果为2+5>62+5<7--></body></html>基本标签在浏览器中<head>和</head>标签之间文本的是头信息。<title></title>： 文档标题标签<body></body> 主体标签，要显示到浏览器中的主体文本<!--注释文本--><b></b>： 使用黑体<i></i>： 使用斜体<u></u>： 使用下划线y=x³： <ahref=””target=”_blank”>在新窗口中打开链接</a><center></center>： 文本居中.<br>： 折行显示,它没有对应的</br>标签是独立的标签<p></p>： 段落标签，每一段的段前和段后都会空一行<h1></h1>…<h6></h6>标题标签:从h1到h6字号渐小,每个标签后自动空一行.<table>标签： 定义HTML表格,空格规则： 在Html中:多个空格,制表符,回车将转换为单一的空格；特殊字符： 比如小于号“<”定义为一个HTML标签的开始。假如我们想要浏览器显示这些字符的话，必须在HTML代码中插入字符实体。一个字符实体拥有三个部分：一个and符号（&），一个实体名或者一个实体号，最后是一个分号（;）想要在HTML文档中显示一个小于号，我们必须这样写：<其他常用字符实体：如何使用不可拆分空格: 不可拆分空格:我们在前面已经讲述了空格会被浏览器合并,你输入了10个空格只会显示一个空格,如果我们真的需要使用10个空格,我们可以使用不可拆分空格.浏览器不会在不可拆分空格处折行,也不会和并空格的个数,如果我们想行单词间插入多个空格,或希望单词显示在同一行时可使用不可拆分空格.代码:<html><head><title>不可拆分空格</title></head><body>这里的空格是可以折行的Helloworld<br>这里的空格是不可以折行的Hello   world</body></html>标签可以有自己的属性：<body>标签属性<body>标签，定义了HTML页面的主体元素；bgcolor 属性： 背景颜色 <bodybgcolor="blue">background属性： 背景图 <bodybackground=”background.JPG”>text属性： 文字颜色例 <bodybackground="bufferfly.gif"text="#008080"bgcolor="blue"><table>标签属性使用它的一个附加属性border(边界)，你可以向浏览器说明这个表格是没有边框的，我们可以写下如下的代码：<tableborder="0">改变链接颜色Link设置未被访问的超文本链接的颜色,IE默认蓝色.使用<bodylink=”green”>，使未访问的链接为绿色.Vlink设置已访问过的链接颜色,IE默认紫色.使用<bodyvlink=”#800000”>将已访问过的链接颜色设为褐红色.Alink激活链接时的颜色,当光标移动到链接上单击的瞬间显示的颜色,IE默认的颜色为红色.如<bodyalink=”#FF00FF”>单击链接的瞬间为品红色Font标签<font></font>标签可定制文字的大小,颜色,字体等color:控制文字的颜色,使用颜色代码或RGB码.如<fontcolor=”blue”>生活的理想,就是理想的生活!</font>size:控制文字的大小,html设定了1-7共七种字号,1号最小,7号最大(比H1还要大),如要显示比默认字体小一号可以设定size=”-1”,比默认字体大一号可以设定size=”+1”,我们也可以使用<big>比默认字体大一号</big>或<small>比默认字体小一号</small>这两个标签是嵌套在<font></font>标签中的子标签.face:控制文本的字体,设置文字的字体,如<fontface=”Arial”>设置文字的字体</font>,使用它的缺点是,你不能保证你的浏览器支持你指定的字体.例：<fontcolor="blue"size="-1"face="Arial">既然选择了  远方,便只顾风雨兼程!(比默认小一号Arial)English</font><br><fontcolor="blue"size="3"face="Modern">既然选择了远方,便只顾风雨兼程!(3号Modern)English</font><br>DOCTYPE的使用Doctype并不是heml的标签，它是SGML的一个实体，优先于Html标签,说明Html的版本,文档类型定义信息,它一般用于Html的最开始处,在网页中也可以不包含DOCTYPE信息，使用如下：<!DOCTYPEHTMLPUBLIC“-//W3C//DTDHTML4.0//EN”><HTML><HEAD></HEAD><BODY></BODY></HTML><head>元素<head>部分,应该包含文档的标题(<title></title>),索引关键字,语言等信息.<head></head>标签是可选的,在Html中可以不包含该标签,<title></title>标签，不能嵌套其他标签，<title>北软教育®门户网站</title>,®实体号；<meta>标签说明文档的自身信息例：<!DOCTYPEHTMLPUBLIC“-//D3C//DTDHTML4.0//EN”>文档类型,版本信息<HTML><HEAD><TITLE>使用meta标签</TITLE><metacharset="UTF-8"> 代表世界通用的语言编码<METANAME=”Author”CONTENT=”文档的作者信息”>文档的作者信息<METAHTTP-EQUIV=”Expires”CONTENT=”Fri,31Dec200523:59:59GMT”>--Http信息头,传递给服务器的文档附加信息,本行描述网页的过期时间<METANAME=”Description”CONTENT=”Thisdoc….”>文档内容描述<METANAME=”Keyword”CONTENT=”music,ice”>检索关键字<METANAME=”Copyright”CONTENT=”©2005bylxz003”>版权信息<METAHTTP-EQUIV=”Content-Language”CONTENT=”en”>Http信息头,描述文档的语言信息.<METAHTTP-EQUIV=”REFRESH”CONTENT=”20”>-Http每20秒刷新一次网页<metahttp-equiv="content-type"content="text/html;charset=gb2312">--指定字符集，网站是采用的编码是简体中文</HEAD><BODY></BODY></HTML><script>标签脚本标签说明使用的脚本语言如:JavaScript,VBScript等<p></p>段落标签在段落标签中也可以使用align控制对齐,和上面的标题标签类似:<palign=”left”>左对齐,浏览器默认<palign=”right”>右对齐<palign=”center”>居中<palign=”justify”>两端对齐不要使用<p>来产生<form></form>表单标签<table></table>表格标签<hr>水平线标签<hr>产生水平线,没有结束标签,也可以设置对齐方式和尺寸.align=”left”左对齐align=”right”右对齐align=”center”居中noshade实心无阴影的水平线size=”数值”线的长度(像素)width=”数值”线的宽度(像素)width=”百分比”宽度(屏幕的百分比)<html><head><title>使用水平线</title></head><body><hrnoshade>既然选择了远方,便只顾风雨兼程!<hrsize="5">既然选择了远方,便只顾风雨兼程!<hrsize="5"noshadewidth="200"align="left">既然选择了远方,便只顾风雨兼程!<hrsize="5"noshadewidth="200"align="right"><hrsize="5"noshadewidth="80%"align="center"></body></html><div>分段标签<div>标签可以实现对一段文本进行分段,整体控制它们的对齐方式.div标签还有很多复杂的行为.<div>标签也具有对齐属性,包括:align=”left”align=“right”align=”center”<pre></pre>预格式化标签使用预格式化标签可以把预格式的文本包含的页面中,使用预格式化标签可以保持文本中的空白,使用预格式化时尽量使用空格,不使用tab键.代码:<html><head><title>使用预格式化文本</title></head><body><pre>\\\|///\\--//(@@)┏━━━━━━━━oOOo-(_)-oOOo━━━━━━━━┓┃,~'~'~._┃┃LLzhuIloveU(((\\~_~'~.┃┃(MISSINGU))a,~_~,,,~'~┃┃\_/,-~,,~''┃┃2016430\)--.┃┃我的网站：\/┃┃ )&,._',┃┃\)--.┃┃Oooo'.__'.┃┗━━━━━━━━oooO━()━━━━━━━━┛())/\((_/\_)</pre></body></html>列表标签列表标签分为:无序列表:用黑点分隔,可以是闭环,开环,方框等多种风格,使用<ul></ul>标签.有序列表:按编号排序,比如数字,罗马字母,或英文大小写字母,使用<ol></ol>标签.定义列表:包含术语和定义,使用<dl></dl>标签,嵌套术语标签<dt>,定义标签<dd>.使用无序列表使用格式:<ul><li></li><li></li></ul><ul>是无序列表标签,<li>嵌套其中表示列表项标签.它们具有相同的type属性:type=”circle”空心的圆点type=”disc”实心的圆点type=”square”实心方框列表的默认值为实心圆点.列表的重要的特定是可以嵌套的例如：<h5>定制样式</h5><ultype="square"><li>个人PC机</li><li>笔记本</li><litype="circle">小型服务器</li><litype="disc">掌上电脑</li></ul><h5>无序列表的嵌套</h5><ul><li>人体</li><ul><li>头</li><li>手</li><ul><li>手指</li><li>手掌</li></ul><li>腿</li></ul><litype="square">季节</li><ul><litype="circle">春</li><litype="disc">夏</li><li>秋</li><li>冬</li></ul>37</ul>使用有序列表<ol>标签表示有序列表，type属性为有序的数字或字母,也可以对有序列表进行嵌套.type=”1”使用数字,缺省的情况type=”a”使用小写字母type=”A”使用大写字母type=”i”使用小写罗马字母type=”I”使用大写罗马字母type=”X”开始的编号value=””可以改变当前值<ol><li>鼠标</li><li>键盘</li><livalue="10">主机</li><li>显示器</li></ol><h5>使用字母</h5><oltype="a"><li>个人PC机</li><li>笔记本</li><li>小型服务器</li><li>掌上电脑</li></ol>使用链接<ahref="indx.htm">显示超链接的文字</a>Href指向超链接URL;Title属性加标题<ahref=""title="中国最大的博客网站">博客中国</a><br>target属性指定窗口打开链接<ahref=””target=”_blank”>在新窗口中打开链接</a>为链接指定快捷键使用accesskey属性可以使用alt+快捷键,定位到指定的链接,例子:<ahref=”“accesskey=”s”>深圳热线</a>返回顶部<aname="top">返回顶部时，返回的位置</a><ahref="#top">返回顶部</a>有声有色使用图片使用<img>标签可以在你的网页中包含图片图片对齐方式对齐方式上区分图像有两种方式:行间图像:在文本行中的图片,如果图片很大,文本行会很高,而且有一大片空白.浮动图像:文本在图像边会换行,图像很大时,文字会围绕图片进行自动换行行间图片的对齐方式:align=”top”图像和文本的顶部对齐.align=”middle”图像和文本的中部对齐.align=”bottom”,缺省值,图像和文本的底部对齐.浮动图像的对齐方式:align=”left”图片在文本的左边align=”right”图片在文本的右边使用<brclear=”left”>可以在图片的右侧产生空白.<brclear=”right”>可以在图片的左侧产生空白.<brclear=”right”>可以在图片的两侧产生空白.width,height属性设置图片尺寸<imgsrc=”cat.jpg”width=”600”height=”800”>border属性为图片增加边框,border=”0”是没有边框,系统默认是没有边框的.上面设置图片的尺寸是图片的实际尺寸，设定图片的边框为1可以使用border=”1”.hspace,vspace属性调整图片的位置hspace:在图片的左侧和右侧添加空白,使用的是像素值.vspace:在图片的上下方向上添加空白,使用的是像素值.<imgsrc="girl.jpg"hspace="200"vspace="50">使用图像作为链接<ahref=""target="_blank"title="百度搜索"><imgsrc="background.JPG"alt="baidu搜索"align="right"width="80"height="100"border="1"/></a>alt当图片无法显示时显示的提示文本。<object>标签嵌入多媒体对象data属性设定多媒体源,width,leight设定显示长高像素值,align设定对齐方式支持left(左对齐),right(有对齐),center(居中),hspace,vspace指定多媒体显示画面的四周的空白间距,可以嵌套图片信息,<imgsrc="tu.png"alt="播放晴天"/>当多媒体不能被识别时,显示图片信息的内容.<h4>媒体不能被识别时,显示图片<h4><objectdata="刘瑞琦-晴天.mp3"width="200"height="200"align="left"hspace="10"vspace="20"title="晴天"><imgsrc="tu.png"alt="播放晴天"/><paramname="autoplay"value="false"></object> param

标签--定义为object标签提供嵌入内容的运行时参数的name与value对使用embed嵌入多媒体:使用embed标签,src属性指定多媒体源,autastart设定是否自动播放,如设置成背景音乐可设置autostart=”true”,loop属性设定是否循环播放,volume设定播放的音量,width,height设定媒体的显示大小,入设置成背景音乐可以设置两者都为0<embedsrc="刘瑞琦-晴天.mp3"autostart="false"loop="true"vollume="10"width="300"height="30">Table表格表格的一般标签和属性<table>: 创建表格<caption>: 表的标题(可选的),表格内容的描述信息<th></th>: 表头(可选的)会用黑体显示<tr></tr>: 表的行,包括表头和表的数据行<td></td>: 表的列表格属性综合例子：<h4>表格占屏幕的90%,cellpadding单元格文字和边框的距离；<br>tdbackground="tu.png"单元格带背景的表格；<br>trtdalignvalign单元格行列的水平和垂直对齐方式；<br>bgcolor设定表格的背景色；<br>nowrap单元格内禁止折行；<br></h4><tableborderwidth="90%"cellpadding="10"> <!--这里是表的标题信息,表的标题信息是可选的--> <caption>全国各大城市8月8日气温</caption> <!--表的第一行,表头也是可选的--> <trbgcolor="green"> <th>城市</th> <th>最高气温</th> <th>最低气温</th> </tr> <tralign="center"valign="middle"> <!--嵌套表格--> <td> <tableborderwidth="30%"bgcolor="blue"> <tr> <td>深圳</td> <td>35</td> <td>29</td> </tr> </table> </td> <tdbackground="tu.png">36</td> <td>28</td> </tr> <tralign="left"valign="bottom"> <tdalign="right"valign="middle">北京</td> <tdalign="left"valign="baseline"bgcolor="red">32基线齐</td> <tdnowrap>29.67777788888888888888888</td> </tr> </table>表格边框border属性可以为表格增加边框<tableborder>(默认宽度为1)或设定边框的值<tableborder=”10”>,使用border=”0”相当于没有边框.。表格和数据的对齐方式表格的对齐方式：align=”left”左对齐align=”right”右对齐align=”center”居中数据的对齐方式：对于<tr><td><th>标签： 使用align设定文本的水平对齐方式，同上；valign设定文本垂直方向上的对齐方式valign=”top”顶端对齐valign=”middle”垂直居中valign=”bottom”底部对齐valign=“baseline”基线对齐当单元格内的对齐方式和表格行的对齐方式有冲突时,单元格内的对齐方式优先表格和单元格的宽度和高度使用像素值width=”80”，高度,height=”150”；在<td><th>中使用width和height属性可以设置单元格的宽度和高度。设置表格背景色在<table><tr><td><th>中可以使用bgcolor设置表格或单元格的背景颜色<tablebgcolor=”red”>,<trbgcolor=”#00FF00”>合并单元格在<td>和<th>中使用colspan可以合并列,使用rowspan可以合并行.<tdcolspan=”2”rowspan=”2”>合并2列,2行表格的嵌套表格和单元格加入背景在<table>中使用background属性可以设置表格的背景图片,在<td>或<th>中使用background属性也可以为单元格设置背景图片.<form>表单标签用来定义处理表单数据程序的URL地址等信息。登录页面中，用户名文本框和密码文本框都是HTML中的表单元素。综合例子：<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>我的表单标签的使用</title></head><body> <h3>用户调查</h3> <formaction="6762@"method="post"name="usrform"> <tablewidth="90%"> <tr> <tdwidth="20%">用户名:</td> <td><inputtype="text"name="username"value=""size="30" maxlength="30"></td> </tr> <tr> <tdwidth="20%">密码:</td> <td><inputtype="password"name="userpassword"size="30" maxlength="30"></td> </tr> <tr> <tdwidth="20%">性别:</td> <td><inputtype="radio"name="sex"value="0"checked>男  <inputtype="radio"name="sex"value="1">女</td> </tr> <tr>     <tdwidth="20%">爱好:</td> <td><inputtype="checkbox"name="instresting"value="readBook">读书 <inputtype="checkbox"name="instresting"value="web">上网  <inputtype="checkbox"name="instresting"value="music">听音乐 </td> </tr> <tr> <tdwidth="20%">靓照:</td> <td><inputtype="file"name="photo"size="30"></td> </tr> <tr> <tdwidth="20%"></td> <td></td> </tr> <tr>    <br>   <tdwidth="20%">通过什么渠道认识我们:</td> <td> <inputtype="checkbox"name="wherecome"value="lznews">兰州商报 <inputtype="checkbox"name="wherecome"value="web">网络  <inputtype="checkbox"name="wherecome"value="TV">电视  <inputtype="checkbox"name="wherecome"value="sheet">宣传单 <inputtype="checkbox"name="wherecome"value="friend">朋友介绍 <inputtype="checkbox"name="wherecome"value="other">其他   </td> </tr> <tr> <tdwidth="20%">目前薪资:</td> <td> <selectname="salary"> <optionvalue="0">学生</option> <optionvalue="1"selected>1000以下</option> <optionvalue="2">1000-2000</option> <optionvalue="3">2000-5000</option> <optionvalue="4">5000以上</option> </select> </td> </tr> <tr> <tdwidth="20%">你学过那些课程:</td> <td> <selectname="class"size="4"multiple="multiple"> <optionvalue="0"selected>J2se</option> <optionvalue="1">Html</option> <optionvalue="2"selected>Javascript</option> <optionvalue="3"selected>可多选</option> <optionvalue="4"disabled>Oracle</option> <optionvalue="5">DB2</option> <optionvalue="6">Struts</option> <optionvalue="7">Jsp&Servlet</option> </select> </td> </tr> <tr> <tdwidth="20%">你对中心的建议:</td> <td> <textareaname="yourword"rows="5"cols="40">我们希望:</textarea> </td> </tr> <tr> <tdcolspan="2"> <inputtype="submit"name="register"value="我填好了,提交"> <inputtype="button"name="checkuser"value="检测我的用户名"> <inputtype="reset"value="重填"title="重填"> <inputtype="image"src="tu.png"width="80"height="30" name="goback"title="返回上页"alt="返回上页"> </td> </tr> </table> <inputtype="hidden"name="option"value="register"> <inputtype="hidden"name="checkNumber"value="0121"> </form></body></html><Form>标签语法结构：<formaction="URL"method="get"|"post"name="name"onSubmit=""target=""></form>Action属性：指定处理表单数据程序的URl地址，Method属性：数据传到服务器的方式，将输入的数据追加在action指定的地址后，并传给服务器。Name属性：指定表单的名称，自定义，。onSubmit属性：指定用户单击提交按钮时触发的事件。Target属性：指定输入数据结结果显示在哪个窗口。_blank,新窗口打开目标文件；_self，同窗口打开默认；_parent，在上级窗口打开，常于框架页中使用；_top，在整个窗口中打开，忽略任何框架。<input>表单插入标签<inputtype="text"|"image"disabled="disabled"checked="checked"width="digit"height="digit"maxlength="digit"readonly=""size="digit"src="url"usemap="uri"alt=""name="checkbox"value="">Type属性：决定输入类型；<formaction="mailto:lxz003@126.com"method="post"> 请输入你的学号: <inputtype="text"value=""size="10"name="studentID"><br> <inputtype="submit"value="发送"><inputtype="reset"value="重填"><inputtype=”password”name=””maxlength=””></form><select>下拉列表框标签：<select>标签属性：name，size所显示条目的个数，disabled为不可选，添加multiple属性可多选，不添加时为单选；下拉框中至少嵌套一个<option>选项标签，其value属性表示条目序号,disabled为不可选，selected表示默认被选,使用tabindex改变列表的顺序.使用格式:<selectname=”薪资要求”size=”2”multiple><optionvalue=”0”>2k-4k</option><optionvalue=“1”selected>4k-8</option><optionvalue=“2”>8k以上</option></select>多行文本框<textarea>多行文本框,允许用户输入多行文本,input的text类型只能输入一行文本.使用rows指定多行文本框显示的行数,cols指定多行文本框显示的列数,当输入的字符超出指定的行数和列数时会出现滚动条.<textarearows=”10”cols=”50”name=””>默认文本</textarea>使用框架划分窗口利用框架分割窗口框架的嵌套修改框架的显示属性在框架中使用链接使用预定义的框架名浏览器不支持框架的处理frameset文档和用法frameset文档和普通的html文档稍有不同,普通的html文档包含<head>和<body>元素,而frameset文档包含<head><frameset>元素.我们可以建立一个简单的框架页面<html><head><title>最简单的框架</title><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title></head> <framesetcols="50%,50%"> <framesrc="first.html"> <framesrc="second.html"> <noframes> <body> 你的浏览器不支持框架!<br> <ahref="first.html">文档1</a><br> <ahref="second.html">文档2</a> </body> </noframes> </frameset></html><frameset>包含一个或多个<frame>标签,frameset使用rows和cols来水平和竖直分割页面<frame>标签<frame>标签使用src属性指定在此框架中要显示的文档.如果浏览器不支持框架会显示<noframes>标签中的内容Cols属性垂直分割窗口<frameset>标签中的cols属性可以垂直分割窗口,定义两个或多个垂直框架的尺寸,各框架的尺寸值用”,”分隔.cols的缺省值是100%,若没有指定任何值,就会只有一个框架占据整个水平窗口。<framesetcols=”25%,75%”><framesetcols=”1*,3*”><framesetcols=”100,25%,1*,3*”>第一个占用100个像素,第二个占用整个的25%,第三个占剩下的1/4,第四个占剩下的3/4.rows属性水平分割窗口rows的用法和cols类似同时使用cols和rows在<frameset>中指定cols和rows会把页面划分成网格状.比如<framesetcols=”200,*”rows=”25%,25%,50%”>将把窗口划分成2X3=6的网格.frameset的嵌套边框显示及颜色在frameset和frame中使用bordercolor属性可以设定边框的颜色,缺省的颜色是灰色.border是否显示框架与相邻的框架之间的边框是否显示,默认值为1,显示,设为0<framesetbordercolor="#FF0000"border="8">,<framebordercolor="#00FF00">代码<!--//bordercolor边框颜色；cols垂直，rows水平--> <framesetbordercolor="#FF0000"border="8"cols="200,*"rows="25%,25%,50%">marginheight,marginwidth设置页面在框架中的位置在<frame>标签中使用marginheight,和marginwidth属性可以设定显示的页面距离框架的上下距离和左右距离.<framesrc=”first.html”marginheight=”100”marginwidth=”200”>控制滚动条,取消框架尺寸大小调整在<frame>中使用noresize属性可以禁止调整框架尺寸大小.<framesrc="first.html"noresize>scrolling="yes"总是出现滚动条scrolling="no"不要出现滚动条scrolling="auto"根据需要出现滚动条,默认值name属性使用name属性来命名框架,在其它框架中的链接可以使用这个名字来指向这个框架.代码:<html><head><title>使用name属性</title></head><framesetbordercolor="#FF0000"border="8"cols="25%,*"> <framesrc="framename_property.html"border="2"> <framesrc="lifeand.html"name="main"border="2"></frameset></frameset></html>使用<base>标签设定缺省的目标框架在文档的<head>标签中嵌套<basetarget=”框架名”>,使页面中的链接都指定到目标框架中,不用再为他们指定目标框架。frame_base_label.html<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>导航条</title><basetarget="main"></head><body><b>表格</b><br><ul><li><ahref="form.html">调研表单</a></li><li><ahref="form_table.html">表格介绍</a></li></ul></body></html>framenameandframework.html<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content="EditPlus®"><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title></head><framesetbordercolor="#FF0000"border="8"cols="25%,*"> <!-- <framesrc="framename_property.html"border="2"> --> <framesrc="frame_base_label.html"border="2"> <framesrc="lifeand.html"name="main"border="2"></frameset></html>frame_base_label.html在html中预定义了四个目标框架名,_blank:_blank:当target=”_blank”时,浏览器会新开窗口显示链接指定的信息._parent:在父框架中显示,如果没有父框架会在当前框架中显示信息_self:在当前框架中显示,它是配合<basetarget=”框架名”>使用,比如我们在<head>部分定义了<basetarget=”main”>,我们想让其中某个链接在当前窗口而不是main框架中打开,我们可以使用:<ahref=”first.html”target=”_self”>currenwindows</a>代码:_top:去掉所有框架,全屏显示文档内容,如果要回到以前的框架结构需要安浏览器的后退按钮HTML5新增内容新增的元素<section>元素表示页面中的一个区域，如章节、页眉等，可与h1h2.，等元素结合使用，表示文档结构例<section> <h2>section标签的使用</h2> <p>完成百分比：10%</p><inputtype=”button”value=”请单击”/></section>这段代码相当于HTML4中使用<div>标签在页面中定义一个区域<acticle>元素页面中的一块与上下文不相干的独立内容，如博客中的一篇文章，一段用户评论等，，<header>元素页面中一个内容区域或整个页面的标题；<footer>元素页面中一个内容区域块的脚注；<sdide>元素当前页面中文章的附属信息不符，如引用、侧边栏、广告、导航条等新增的input元素类型email ：将input元素的类型设为email，文本框中必须输入email地址；url ：必须输入URL地址；number：必须输入数值的文本框；range ：表示输入一定范围内数字值的文本框。CSS样式表CSS，层叠样式表（CascadingStylesheets，主旨就是将格式和结构分离,利用样式表，我可以将站点上所有的网页都指向单一的一个CSS文件，我只要修改CSS文件中某一行，那么整个站点都会随之发生变动。包括三个部分：选择器，属性，属性值。层叠样式表的核心是规则。最简单的规则就象这样:H4{color:green}它告诉浏览器将所有<H4></H4>包围的文字以绿色显示,每一条规则包含一个选择及说明。在上述例子中，H4就是选择，它是一个附带样式功能的HTML标签。说明用于定义实际的样式，包括两部分：属性（本例中即color）和参数（green）。样式的引用在行中，通过在标签中加style=""添加样式，如<th><pstyle="color:#F00;font-size:18px;">行内样式11</th>在页面中使用<style></style>标签，将css样式包含在页面链式引用，是通过<link>标签来引用，<LINKrel=stylesheetHREF="mystyles.css"TYPE="text/css">CSS选择器常用的有标记选择器、类别选择器、id选择器。标记选择器HTML中有很多标记（标签）组成，CSS标记选择器声明也没中，哪些标记采样哪些CSS的样式，如a选择器，就声明所有<a>标记的样式风格。<style> a{ font-size:9px; color:#F93;}</style>类别选择器若页面中有3个<h2>标记，想要每个显示效果不一样，需引入类别选择器；类别选择器的名字自己定义，并以“.”号开头，定义的属性和属性值要遵循css规则。<HEAD><TITLE>我的样式表</TITLE></HEAD><style> .one{ font-family:宋体; font-size:24px; color:red;}.two{ font-family:宋体; font-size:16px; color:green;}.three{ font-family:宋体; font-size:12px; color:blue;}</style><body> <h2class="one">应用了选择器one</h2>//定义样式后会自动加载样式 <p>正文内容1</p> <h2class="two">应用了选择器two</h2> <p>正文内容2</p> <h2class="three">应用了选择器three</h2> <p>正文内容3</p></body>分类引用如果你想让主体文字的1段用绿色显示，第2段用紫色显示，而第3段用灰色显示,这种情况下分类将发挥作用。你可以将段落P分成3种不同的类别，每一类应用不同的样式表说明。这些规则将以以下方式显示：P.first{color:green}P.second{color:purple}P.third{color:gray}你的HTML代码可以这样使用样式表：<PCLASS=first>第一段</P><PCLASS=second>第二段</P><PCLASS=third>第三段</P>你还可以生成不加任何HTML标签的分类:.first{color:green}这种方式更加灵活，因为现在我们可以将CLASS=first用于任何HTML标签，而设定的文字将以绿色显示。id选择器通过html页面中的id属性来选择增添样式，每个页面中不能包含两个相同的id标记，因此定义的id选择器只能被使用一次，命名以“#”号开始，后加html标记中的id属性值。<style>#first{ font-size:12px}#second{ font-size:18px}#three{ font-size:22px}</style><body> <pid="first">ID选择器</p> <pid="second">ID选择器</p> <pid="three">ID选择器</p></body>包含样式行内样式在行中，通过在标签中加style=""添加样式，较直接，不灵活<tablewidth="200"border="2"bgcolor="blue"align="center"><tr><th><pstyle="color:#F00;font-size:18px;">行内样式11</th><thstyle="color:#F98;font-size:12px;">行内样式12</th><thstyle="color:#F90;font-size:12px;">行内样式13</th></tr><tr><td><pstyle="color:#083;font-size:32px;">行内样式23</td><td><pstyle="color:#000;font-size:18px;">行内样式24</td></tr></table>内嵌式在页面中使用<style></style>标签，将css样式包含在页面，比行内易于维护。如12.1.2类别选择器代码。链接式最常见的引用样式表的方法，方法类似链接，是通过<link>标签引用。<LINKrel=stylesheetHREF="mystyles.css"TYPE="text/css">rel：定义外部文档和调用文档间的关系；herf：css文档的绝对或者相对路径；type：指出外部文件的MIME类型，“MultipurposeInternetMailExtensions”,“多用途互联网邮件扩展”前广泛应用的一种电子邮件技术规范若链接式样式表和内嵌样式表中都设定了规则。在两者冲突的情况下，内嵌的规则优先。将以下内容写入mystyle.css文件中；H4{color:green;font-size:30px;font-family:impact}P{text-indent:1cm;background:yellow;font-family:courier}在html文件中，可在头元素<head>中通过<link>标签引入样式表，代码：<head><title>建立第一张样式表</title><LINKREL=stylesheetHREF="mystyles.css"TYPE="text/css"></head>