HTML语言简单回顾 - html/css语言栏目：html.css - 自学

2024/11/04 · admin

简单复习一下html语言。 html的基本结构如下： [html] <html> <head> <title></title> </head> <body> </body> </html> html是由一系列标签组成的！标签 HTML 标签是用来标记 HTML 元素的。 HTML 标签被 < 和 > 符号包围。这些包围的符号叫作尖括号。 HTML 标签是成对出现的。例如 <b> 和 </b>。位于起始标签和终止标签之间的文本是元素的内容。 HTML 标签对大小写不敏感，<b> 和 <B> 的作用的相同的。规范：标签必须要封闭！对 HTML 元素的重新认识每个 HTML 元素都有一个元素名（比如 body、h1、p、br）开始标签是被括号包围的元素名结束标签是被括号包围的斜杠和元素名元素内容位于开始标签和结束标签之间某些 HTML 元素没有内容某些 HTML 元素没有结束标签 p,br,b,i,u,hr，h1~h6等简单标签就不解释了，主要记忆以下特殊的标签： marquee标签：控制文字等内容移动 [html] <marquee direction="left">会飞的文字</marquee> sub下标，sup上标： [html] <p>m<sub>2</sub></p> <p>m<sup>2</sup></p> label标签：向控件定义标注（标记）。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。譬如： [html] <label for="SSN">Social Security Number:</label> <input type="text" name="SocSecNum" id="SSN" /> <label>Date of Birth: <input type="text" name="DofB" /></label> 当用户点击了Social Security Number这些字之后，光标自动切换到输入框内,而不必点击输入框. 有两种使用方式，一种是通过id控制，即你要控制的控件和label 的for属性值必须相同，另一种方式是将要控制的控件和文字包含到标签内. 列表：分为有序列表和无序列表：无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。 [html] <ul> <li>Coffee</li> <li>Milk</li> </ul> 同样，有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 [html] <ol> <li>Coffee</li> <li>Milk</li> </ol> 表格：table 基本格式如下 <table border = "1" width = "200px" cellspacing = "0" cellpadding = "2"> <caption>表格标题</caption> <tr> <th>aa</th> <th>bb</th> </tr> <tr> <td>a1</td> <td>a2</td> </tr> </table> table标签表示一个表格，tr表示表格的边框，td标签表示每个单元格,th下的单元格内容会居中并加粗显示。 table有一系列的属性:align,cellpadding,cellspacing,border,width,height,bgcolor等.... 合并行： [html] <table border = "1" width = "200px" cellspacing = "0" cellpadding = "2"> <caption>表格标题</caption> <tr> <th colspan = "2">aa</th> </tr> <tr> <td>a1</td> <td>a2</td> </tr> </table> 和并列： [html] <table border = "1" width = "200px" cellspacing = "0" cellpadding = "2"> <caption>表格标题</caption> <tr> <th rowspan = "2">aa</th> <th>bb</th> </tr> <tr> <td>a2</td> </tr> </table> tbody标签：使用 <tbody> 标签，可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。相应地还有tfoot标签. 图像标签:img [html] <img src="boat.gif" alt="Big Boat" > src代表图片地址，可以用相对地址也可以用绝对地址，alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当鼠标放到图片上时会显示该文字. 超链接：a 用法1：转到某个页面，或者邮箱等服务 <a href = http://www.baidu.com targrt = "_blank">百度</a> 用法2：锚,定位 [html] <a name = "top">顶部</a> ..... <a href = "#top">回到顶部</a> target属性有以下值： _blank _parent _self _top 这个标签表示在何处打开目标 URL。表单标签：form [html] <html> <head> <title>标题</title> <style type = "text/css"> body{ margin:0; padding:0; } form{ margin : 10px; padding : 10px; border : 1px solid blue; width : 400px; } p #myTextarea{ border : 1px solid blue; display : block; } p span{ font-family : "黑体"; font-size : 20px; } </style> </head> <body> <div> <form> <p>文本框:<input type = "text" name = "user" /></p> <p>密码：<input type = "password" name = "password"/></p> <p>单选框:  男<input type = "radio" name = "sex" value = "man"/> 女<input type = "radio" name = "sex" value = "woman"/> </p> <p>多选框： <input type = "checkbox" name = "option" value = "1"/>选项1 <input type = "checkbox" name = "option" value = "2"/>选项2 <input type = "checkbox" name = "option" value = "3"/>选项3 <input type = "checkbox" name = "option" value = "4"/>选项4 </p> <p> 文件上传: <input type = "file" /> </p> <p> <input type = "button" value = "按钮"/> </p> <p> 提交<input type = "submit" /> 重置<input type = "reset" /> </p> <p> <span>这是自定义按钮:</span><input type = "image" src = "start.png"/> </p> <p> <span>下拉菜单：</span> <select name = "country"> <option value = "none">---选择国家---</option> <option value = "Englend">英国</option> <option value = "America">美国</option> <option value = "China">中国</option> </select> </p> <p> <span>文本域:</span> <textarea rows="3" cols="30" id = "myTextarea"></textarea> </p> </form> </div> </body> </html> 简单做个表单： [html] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> body,input,mainDiv{ margin : 0; padding:0; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold; } body{ margin:auto 250px;} .style{ border:2px solid black; }610071131208209 </style> </head> <body> <div id="mainDiv"> <form action="http://127.0.0.1:10001" method="post"> <table border="1" cellspacing="0" bordercolor="#3300FF" width="700" height="400" cellpadding="2px"> <tr> <th colspan="2" >信息注册页面</th> </tr> <tr> <td>用户名</td> <td> <input type="text" name="user" class="style" /> </td> </tr> <tr> <td>密码</td> <td> <input type="password" name = "password" class="style" /> </td> </tr> <tr> <td>确定密码</td> <td> <input type="password" name = "confirmpwd" class="style" /> </td> </tr> <tr> <td>性别</td> <td> <input type="radio" name="sex" value="man" />男 <input type="radio" name="sex" value="woman"/>女 </td> </tr> <tr> <td>技术</td> <td> <input type="checkbox" name="tec" value="java"/>java <input type="checkbox" name="tec" value=" jsp"/>jsp <input type="checkbox" name="tec" value="servlet"/>servlet </td> </tr> <tr> <td>国家</td> <td> <select name="country"> <option value="none">---选择国家---</option> <option value="China">中国</option> <option value="America">美国</option> <option value="Japan">日本</option> </select> </td> </tr> <tr > <td colspan="2" align="center"> <input type="submit" value="提交数据" /> <input type="reset" value="清除数据" /> </td> </tr> </table> </form> </div> </body> </ html> 写一个java服务端测试表单提交： [java] view plaincopy import java.io.BufferedInputStream; import java.io.IOException; import java.io.PrintWriter; import java.net.ServerSocket; import java.net.Socket; public class Server { public static void main(String[] args) throws IOException { ServerSocket ss = new ServerSocket(10001); Socket s = ss.accept(); PrintWriter pw = new PrintWriter(s.getOutputStream(), true ); pw.println( "<font color = red size = 20px>注册</font>" ); //往服务端发数据 BufferedInputStream bufi = new BufferedInputStream(s.getInputStream()); //接收数据 byte [] buff = new byte [1024]; int len = bufi.read(buff); System. out .println( new String(buff,0,len)); s.close(); ss.close(); } }

HTML语言简单回顾 - html/css语言栏目：html.css - 自学

相关文章

最新评论

最近发表

网站分类

文章归档