zoukankan html css js c++ java

【Html 之标签 02】

一、表单标签<from>

表单标签是最常用的标签，用于与服务器端的交互

1、表单组件input

<input>：输入标签：接受用户输入信息。

其中的type属性指定输入标签的类型。

|-- 文本框text 输入的文本信息直接显示在矿中

|-- 密码框password 输入的文本以远点或者星号的形式显示

|-- 单选框radio 如：性别选择

|-- 复选框checkbox 如：兴趣选择

|-- 隐藏字段 hidden 在页面上不显示，单在提交的时候随其他内容一起提交

|-- 提交按钮 submit用于提交表单中的内容

|-- 选择文件 file

|-- 图片 image

|-- 按钮 button -->可以设置弹窗alert

2、表单组件select&textarea

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
    <!--像服务端提交，表单中的组件必须有name和value属性
     用于给服务端获取数据方便
     -->
    <form>

        输入名称：<input type="text" name="user" value=""/><br/>
        输入密码：<input type="password" name="passwd"/><br/>
        性别：<input type="radio" name="sex" value="nan"/>男
             <input type="radio" name="sex" value="nv" checked="checked"/>女<br/> <!--默认选中女 -->
        兴趣爱好：<input type="checkbox"/>游泳
                <input type="checkbox"/>画画
                <input type="checkbox"/>跳舞<br/>

        选择文件：<input type="file" name="file"/><br/>
        一个图片：<input type="image" src="11.jpg" width="20" height="20" /><br/>

        <!--数据不需要客户端知道，但是可以将其提交服务端-->
        隐藏组件：<input type="hidden" name="myke" value="myvalue"/><br/>

        <!--alert弹窗 -->
        一个按钮：<input type="button" value="有个按钮" onclick="alert('有个阿牛')"/><br/>
        

        <select name="country">
            <option value="none">--选择国家--</option>
            <option value="usa">美国</option>
            <option value="zh" selected="selected">中国</option>
            <option value="en">英国</option>

        </select>

        <textarea name="text"></textarea>
        <br/>

        <input type="reset" value="清除数据"/> <input type="submit" value="提交数据"/><br/>
    </form>
</body>
</html>

页面展示

二、表单格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
    <form>
        <table border="1" bgcolor="#8fbc8f" cellpadding="10" cellspacing="0" width="600">
            <tr>
                <th colspan="2">注册表单</th>
            </tr>
            <tr>
                <td>用户名称：</td>
                <td><input type="text" name="user"/></td>
            </tr>
            <tr>
                <td>输入密码：</td>
                <td><input type="password" name="psw"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repsw"/></td>
            </tr>
            <tr>
                <td>选择性别：</td>
                <td>
                    <input type="radio" name="sex" value="nan"/>男
                    <input type="radio" name="sex" value="nv" checked="checked"/>女
                </td>
            </tr>
            <tr>
                <td>选择技术：</td>
                <td>
                    <input type="checkbox" name="tech" value="JAVA"/>JAVA
                    <input type="checkbox" name="tech" value="HTML"/>HTML
                    <input type="checkbox" name="tech" value="CSS"/>CSS
                </td>
            </tr>
            <tr>
                <td>选择国家：</td>
                <td>
                    <select name="country">
                        <option value="none">--选择国家--</option>
                        <option value="usa">美国</option>
                        <option value="zh" selected="selected">中国</option>
                        <option value="en">英国</option>
                    </select>
                </td>
            </tr>

            <tr>
                <th colspan="2">
                    <input type="reset" value="清除数据"/>
                    <input type="submit" value="提交数据"/>
                </th>

            </tr>
        </table>
    </form>

</body>
</html>

页面效果

三、HTML（GET和POST区别）

提交方式：GET
地址栏：http://10.8.0.89:9090/?user=2&psw=222&repsw=2222&sex=nv&tech=HTML&country=zh
10.8.0.89
GET /?user=3333&psw=&repsw=&sex=nv&country=zh HTTP/1.1
Host: 10.8.0.89:9090
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Referer: http://localhost:63342/JavaTest/com/HtmlDay01/reg.html?_ijt=so5rbcub00q4loummsk46po4i2
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

提交方式：POST
地址栏：http://10.8.0.89:9090/
10.8.0.89
POST / HTTP/1.1
Host: 10.8.0.89:9090
Connection: keep-alive
Content-Length: 35
Cache-Control: max-age=0
Upgrade-Insecure-Requests: 1
Origin: http://localhost:63342
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Referer: http://localhost:63342/JavaTest/com/HtmlDay01/reg.html?_ijt=so5rbcub00q4loummsk46po4i2
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8

user=&psw=&repsw=&sex=nv&country=zh

GET提交和POST提交的区别？
1、
get提交，提交的信息都显示在地址栏中
post提交，提交的信息不显示地址栏中

2、
get提交，对于敏感的数据信息不安全
post提交，对于敏感的信息安全

3、
get提交，对于大数据不行，因为地址栏存储体积有限
post提交，可以提交大体积数据

4、
get提交，将信息封装到了请求消息的请求行中
post提交，将信息封装到了请求体中

在服务端的一个区别。
如果出现将中文提交到Tomcat服务器，服务器默认会用iso8859-1进行解码会出现乱码，通过ios8895-1进行编码，在用指定的中文码表解码。即可。
这种方式对get提交和post提交都有效。

但是对于post提交方式提交的中文，还有另一种解决办法，就是直接使用服务端的一个对象request对象的setCharacterEncoding直接设置指定的中文码表就可以将中文
数据解析出来。
这个方法只对请求体中的数据进行解码。

综上所述：表单提交，建议使用post

----------> 服务端类RegServer<-----------

package com.HtmlServer;

import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.ServerSocket;
import java.net.Socket;

/**
 * @Author wufq
 * @Date 2020/9/22 17:05
 */
public class RegServer {
    public static void main(String[] args){
        try {
            ServerSocket ss = new ServerSocket(9090);
            Socket s = ss.accept();
            System.out.println(s.getInetAddress().getHostAddress());

            InputStream in =s.getInputStream();
            byte[] buf = new byte[1024];
            int len = in.read(buf);
            System.out.println(new String(buf,0,len));

            PrintWriter out = new PrintWriter(s.getOutputStream(),true);
            out.println("<font color='green' size='7'>注册成功</font>");
            s.close();
            ss.close();

        } catch (IOException e) {
            e.printStackTrace();
        }
    }
}

-------->客户端reg.html 客户端发送请求到服务端<--------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单格式化</title>
</head>
<body>
    <!--action提交表单到指定位置，可以是网页也可以是自己指定的服务端  -->

    <!--form action="http://www.baidu.com" method="get"-->
    <form action="http://10.8.0.89:9090" method="post" >

        <table border="1" bgcolor="#8fbc8f" cellpadding="10" cellspacing="0" width="600">
            <tr>
                <th colspan="2">注册表单</th>
            </tr>
            <tr>
                <td>用户名称：</td>
                <td><input type="text" name="user"/></td>
            </tr>
            <tr>
                <td>输入密码：</td>
                <td><input type="password" name="psw"/></td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td><input type="password" name="repsw"/></td>
            </tr>
            <tr>
                <td>选择性别：</td>
                <td>
                    <input type="radio" name="sex" value="nan"/>男
                    <input type="radio" name="sex" value="nv" checked="checked"/>女
                </td>
            </tr>
            <tr>
                <td>选择技术：</td>
                <td>
                    <input type="checkbox" name="tech" value="JAVA"/>JAVA
                    <input type="checkbox" name="tech" value="HTML"/>HTML
                    <input type="checkbox" name="tech" value="CSS"/>CSS
                </td>
            </tr>
            <tr>
                <td>选择国家：</td>
                <td>
                    <select name="country">
                        <option value="none">--选择国家--</option>
                        <option value="usa">美国</option>
                        <option value="zh" selected="selected">中国</option>
                        <option value="en">英国</option>
                    </select>
                </td>
            </tr>

            <tr>
                <th colspan="2">
                    <input type="reset" value="清除数据"/>
                    <input type="submit" value="提交数据"/>
                </th>

            </tr>
        </table>
    </form>

</body>
</html>

客户端发送到服务端关键在action提交表单的地址

和服务端交易的三种方式：

1、地址栏输入URL地址

2、超链接 get

3、表单 get和post

四、服务端和客户端的校验

|-- 如果在客户端进行增强型校验（只要有一个组件内容是错误，是无法继续提交的。只要全对才可以提交）

问？-->服务端接受数据后，还需要校验吗？

需要，为了安全性，防止暴力访问

|-- 如果服务端做了增强型的校验，客户端还需要校验吗？

需要，因为要提高用户的上网体验效果，减轻服务器端的压力。

五、头标签

头标签都放在<head></head>头部分之间。包含；title base meta link

|-- <title>：指定浏览器的标题栏显示的内容

|-- <base>:

　　href属性：指定网页中所有的超链接的目录。可以是本地目录，也可以是网络目录。注意值得结尾处一定要用/表示目录。只作用于相对路径的超链接文件

　　target属性：指定打开超链接的方式。如：_blank表示所有的超链接都用新窗口打开显示

|-- <meta>:

　　name属性：网页的描述信息。当取keywords时，content属性的内容就作为搜索引擎的关键字进行搜索。

　　http-equiv属性：模拟HTTP协议的响应消息头

　　<meta http-equiv="refresh" content="3";url="http://www.baidu.com"/> 表示打开此页面3秒后自动转到百度页面。

|-- <link>:

　　rel 属性：描述目标文档与当前文档的关系

　　type 属性：文档类型

　　media：指定目标文档在那种设备上起作用

　　例：<link rel="stylesheel" type="text/css" media="screen,print" href="a.css"/>

六、其他

|-- <marquee> 让内容动起来

　　direction属性：left right down up

　　behavior属性：scroll alternate slide

|-- <pre>：可以将文本内容按在代码区的样子显示在页面上

七、div标签

标签分为两大类。

1、块级标签（元素）：标签结束后都有换行。div p dl table title ol ul

2、行内标签（元素）：标签结束后没有换行。font span img input select a

<div> </div>没有实际含义，只为封装数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>这是一个div区域1</div>
    <div>这是一个div区域2</div>
    <span>span区域1</span>
    <span>span区域2</span>
    <p>这是一个段落1</p>
    <p>这是一个段落2</p>

</body>
</html>

查看全文

相关阅读:
moss文档库操作的几个类
 Infopath web浏览中的多项选择功能
 国际软件项目经理的七大素质转
 InfoPath中的Rich Text Box中如何加“回车”
设计模式——策略模式
 设计模式——状态模式
 设计模式——备忘模式
 设计模式——中介者模式
 关与BaseDataList类型绑定ArrayList
设计模式——命令模式

原文地址：https://www.cnblogs.com/frankruby/p/13712623.html