首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

HTML语言容易回顾

2013-09-07 
HTML语言简单回顾简单复习一下html语言。html的基本结构如下:htmlheadtitle/title/headbody/b

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标签:控制文字等内容移动
<marquee direction="left">会飞的文字</marquee>

sub下标,sup上标:
    <p>m<sub>2</sub></p>    <p>m<sup>2</sup></p>

label标签:

向控件定义标注(标记)。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。譬如:

<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>。
<ul><li>Coffee</li><li>Milk</li></ul>

同样,有序列表也是一列项目,列表项目使用数字进行标记。

有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

<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>
     </tableHTML语言容易回顾 table标签表示一个表格,tr表示表格的边框,td标签表示每个单元格,th下的单元格内容会居中并加粗显示。table有一系列的属性:align,cellpadding,cellspacing,border,width,height,bgcolor等....合并行:
<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>

HTML语言容易回顾 tbody标签:使用 <tbody> 标签,可以将表格分为一个单独的部分。<tbody> 标签可将表格中的一行或几行合成一组。相应地还有tfoot标签.图像标签:img
    <img src="boat.gif" alt="Big Boat" >

src代表图片地址,可以用相对地址也可以用绝对地址,alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。当鼠标放到图片上时会显示该文字.超链接:a用法1:转到某个页面,或者邮箱等服务<a href = http://www.baidu.com targrt = "_blank">百度</a>用法2:锚,定位
<a name = "top">顶部</a>.....<a href = "#top">回到顶部</a>

target属性有以下值:_blank _parent _self _top<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>单选框: <!--注意name必须保持一致,放在同一个组中--> 男<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>

HTML语言容易回顾 写一个java服务端测试表单提交:
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();    } }

这时候点提交数据,会导向http://127.0.0.1:10001页面,并打印出“注册字样”,java控制台输出如下信息:POST / HTTP/1.1Host: 127.0.0.1:10001User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8Accept-Language: en-US,en;q=0.5Accept-Encoding: gzip, deflateConnection: keep-aliveContent-Type: application/x-www-form-urlencodedContent-Length: 77user=sssss&password=ss&confirmpwd=ss&sex=man&tec=java&tec=jsp&country=America表单注册信息被封装在消息头中。这里需要注意的是form表单的提交方式:post或者get,post更安全,不会把信息放到地址栏中!转义符:最常用的字符实体显示结果描述实体名称实体编号 空格&nbsp;&#160;<小于号&lt;&#60;>大于号&gt;&#62;&和号&amp;&#38;"引号&quot;&#34;'撇号 &apos; (IE不支持)&#39;其他一些常用的字符实体显示结果描述实体名称实体编号¢分&cent;&#162;£镑&pound;&#163;¥日圆&yen;&#165;§节&sect;&#167;?版权&copy;&#169;?注册商标&reg;&#174;×乘号&times;&#215;÷除号&divide;&#247;

 

热点排行