您现在的位置:首页 >> 前端 >> 内容

HTML语言简单回顾

时间:2013/9/5 16:41:26 点击:

  核心提示:简单复习一下html语言。html的基本结构如下:[html] html head title/title /headbody/body /html html是由一系列标签组成的!标签HTML 标签是...
简单复习一下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 = https://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>  

        <p>  

            <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>  

        </p>  

    </body>  

</html>  

 

简单做个表单:

[html] 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  

<html xmlns="https://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>  

<p id="mainDiv">     

    <form action="https://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>  

    </p>  

</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();  

    } }  

 

Tags:HT TM ML L语 
作者:网络 来源:不详