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>

     </
table>

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>

和并列：

<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

    <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

这个标签表示

在何处打开目标 URL。

表单标签：form

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

简单做个表单：

<!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服务端测试表单提交：

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

Host: 127.0.0.1:10001

User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101 Firefox/23.0

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8

Accept-Language: en-US,en;q=0.5

Accept-Encoding: gzip, deflate

Connection: keep-alive

Content-Type: application/x-www-form-urlencoded

Content-Length: 77

user=sssss&password=ss&confirmpwd=ss&sex=man&tec=java&tec=jsp&country=America

表单注册信息被封装在消息头中。

这里需要注意的是form表单的提交方式：post或者get，post更安全，不会把信息放到地址栏中！

转义符：

最常用的字符实体

显示结果	描述	实体名称	实体编号
	空格
<	小于号	<	<
>	大于号	>	>
&	和号	&	&
"	引号	"	"
'	撇号	' (IE不支持)	'

其他一些常用的字符实体

显示结果	描述	实体名称	实体编号
￠	分	¢	¢
£	镑	£	£
¥	日圆	¥	¥
§	节	§	§
©	版权	©	©
®	注册商标	®	®
×	乘号	×	×
÷	除号	÷	÷

秒客网

HTML语言简单回顾

对 HTML 元素的重新认识

转义符：

最常用的字符实体

其他一些常用的字符实体

相关文章