Html/CSS1_常用标签,表单

1.一些常用标签:

标签的操作思想:
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作,标签就相当于一个容器,对容器中的数据进行操作,就是在不断的改变容器的属性值

列表标签: 

<!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=utf-8" />
<title>无标题文档</title>
</head>

<body>
  <dl>&lt;<!--define list:定义列表,即列表标签-->     
     <dt>上层项目</dt> <!--define title-->   
     <dd>下层项目</dd> <!--define description--> 
     <dd>下层项目</dd>
     <dd>下层项目</dd>
  </dl>
  
  <!--ordered list-->
  <ol>
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
  </ol>
  <ol type="I"><!--控制列表项前的符号-->
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
  </ol>
   <ol type="I" start="3"><!--控制列表项前的符号-->
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
  </ol>
  
  <!--unordered list-->
  <ul type="circle"><!--控制列表项前的符号-->
     <li>列表项</li>
     <li>列表项</li>
     <li>列表项</li>
  </ul>


<!--标签嵌套-->  
  <ol>
    <li>游戏名称</li>
      <ol type="a">
       <li>魂斗罗</li>
       <li>超级玛丽</li>
      </ol>
 
    <li>游戏说明</li>
     <ol type="a">
       <li>魂斗罗经典游戏</li>
       <li>超级玛丽吃蘑菇</li>
     </ol>
    
  </ol>
</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=utf-8" />
<title>图片表格标签以及页面间跳转</title>
</head>

 <body>
 <a name="top">TOP</a>
   
   <img src="../../Java_Picture/day09_异常/finallyRCB.JPG"  alt="运行结果" height="200" border="10" usemap="#Map",width="200"/>

  <!--table 无边框-->
  <table>
    <tr>
       <td>单元格一</td>
       <td>单元格二</td>
    </tr>
    <tr>
      <td>单元格三</td>
      <td>单元格四</td>
    </tr>
  </table>
  
   <br />
   <br />
   
   <!--表格和单元格均有边框-->
  <table border="1" bordercolor="#FF0000" width="50%">
    <tr>
       <td>单元格一</td>
       <td>单元格二</td>
    </tr>
    <tr>
      <td>单元格三</td>
      <td>单元格四</td>
    </tr>
  </table>
  
   
   <br />
   <br />
   
   <table border="1" bordercolor="#FF0000" cellspacing="0" cellpadding="10">
    <caption>表格标题</caption>
    <tr>
       <th>表头</th> <!--居中加粗-->
       <td>单元格一</td>
       <td>单元格二</td>
    </tr>
    <tr>
      <td>单元格三</td>
      <td>单元格四</td>
      <td>单元格五</td>
    </tr>
  </table>
  <!--
    tr---table row
    td---table data cell(单元格)
    th---table head
    cellspacing="0" ---单元格之间的距离为0px
    cellpadding="10"---内容与边框的距离为10px(上下左右均为10px)
   -->
   
   <br />
   <br />
   
   <!--单元格合并-->
   <table border="1" bordercolor="#FF0000" cellspacing="0">
    <tr>
       <td rowspan="2">单元格一</td>   
       <td>单元格二</td>
    </tr>
    <tr>
      <td>单元格三</td>
    </tr>
  </table>
  
  <br/>
  
    <table border="1" bordercolor="#FF0000" cellspacing="0">
    <tr>
       <td colspan="2">单元格一</td>
    </tr>
    <tr>
      <td>单元格二</td>
      <td>单元格三</td>
    </tr>
  </table>
  <!--
  cospan--column span(跨列)
  rowspan--跨行
  -->
  
   <br />
   <br />
  
  <!--tbody 控制表格分行下载提高下载速度,分行下载可先显示部分内容,减少用户等待时间-->
    <table border="1" bordercolor="#FF0000" cellspacing="0">
    <tbody>
    <tr>
       <td rowspan="2">单元格一</td>   
       <td>单元格二</td>
    </tr>
    </tbody>
    
    <tbody>
    <tr>
      <td>单元格三</td>
    </tr>
    </tbody>
  </table>
 
 <a href="#top">回到顶部</a><!--必须加#不然当成文件解析-->
 </body>
</html>

table_img

超链接标签:

<!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=utf-8" />
<title>超链接演示</title>
</head>

<body>
<a href="http://www.google.com.hk">谷歌</a> <br/> 
<!--http 告诉浏览器启动的协议引擎解析,如果不写,会被当作文件解析-->

<a href="mailto:123@qq.com?subject=你好&cc=abcd@qq.com">联系我们</a><br/> 
<!--mailto协议,会打开本地的outlook,主题:你好,抄送邮箱地址-->

<a href="thunder://abc.dkfjf">迅雷</a><br/> 
<!--迅雷的协议,如果本地注册过,会打开迅雷(或其它其它下载软件)-->

<a href="http://www.baidu.com" target="_blank" tile="百度网站">百度</a><br/> 
<!--在一个新的窗口显示,title当光标移上去显示的文字,可以用来显示长文本-->

<a href="http://www.xxxx.com"><img src="images/DownLoad.JPG"  border="0"/></a>
<!--坑爹的下载-->
</body>
</html>

3.表单标签(form):

<!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=utf-8" />
<title>表单练习</title>
</head>

<body>
<a href="http://192.168.1.101:11993?user=123&pwd=1234">提交表单中的数据</a><!--get提交-->
<fieldset>
 <legend>注册区域</legend>
 <form action="http://192.168.1.101:11993" method="get"><!--只有在需要与服务端交互才需要使用form标签,根据需要.-->
  <table border="1" cellspacing="0" width="50%" height="60%" cellpadding="10" bordercolor="#0000FF">
    <tbody>
    <tr>
      <td colspan="2" align="center">信息注册页面</td>
    </tr>
    </tbody> 
    
 
    <label accesskey="u" for="userid">
    <tr>
      <td>用户名:</td>
      <td><input type="text" name="user" id="userid"/></td>
    </tr>
    </label>

    
    <tbody>
    <tr>
      <td>密码:</td>
      <td><input type="password" name="pwd"/></td>
    </tr>
    </tbody>
   
    <tbody>
    <tr>
      <td>确定密码:</td>
      <td><input type="password" name="confirmpwd" /></td>
    </tr>
    </tbody>
    
    <tbody>
     <tr>
      <td>性别:</td>
      <td>
       <input type="radio" name="sex" value="nan"/>男&nbsp;
       <input type="radio" name="sex" value="nv"/>女
      </td>
    </tr>
   </tbody>
    
     <tbody> 
     <tr>
      <td>技术:</td>
      <td>
       <input type="checkbox" name="language1" value="java"/>java&nbsp;
       <input type="checkbox" name="language2" value="jsp"/>Jsp&nbsp;
       <input type="checkbox" name="language3" value="servlet"/>Servlet
      </td>
    </tr>
    </tbody>
    
    <tbody>  
     <tr>
      <td>国家:</td>
      <td>
        <select name="country">
          <option value="none">--选择国家--</option>
          <option value="CN">中国</option>
          <option value="USA">美国</option>
          <option value="JPN">日本</option>
        </select>
       </td>
    </tr>
   </tbody>
    
   <tbody> 
    <tr align="center">
      <td colspan="2">
       <input type="submit" value="提交数据"/>
       <input type="reset" value="清除数据"/>
      </td>
    </tr>
   </tbody>
  </table>
 </form>
</fieldset>
</body>
</html>

简单的服务端:

package socket;
import java.net.*;
import java.io.*;
class ServerSocketDemo {
    public static void main(String[] args)throws Exception{
        
        ServerSocket ss=new ServerSocket(11993);
          while(true){
            Socket s=ss.accept();
            
            OutputStream os=s.getOutputStream();
            InputStream is=s.getInputStream();
            os.write("<font size=5 color=red> 注册成功 </font>".getBytes());
            byte[] buf=new byte[1024];
            int length=is.read(buf);
            System.out.println(new String(buf,0,length));
         
            String ip=InetAddress.getLocalHost().getHostAddress();
            System.out.println(ip);
       
            s.close();
          }
      
      }
}

以上属性解析:

<!--radio要想实现单选效果,必须把两个按钮封装到一个组里(name相同)--> 
 <!--之所以为按钮设置name,value是因为要将数据发送给服务端,服务端只有知道了该name的值才可以对提交的数据进行分别获取-->
 <!--hidden 隐藏,不希望用户看到,提交的数据通过某种方式运算得到-->
 <!--image 点击该图片提交数据-->

<!--示例点击image提交
user=abc&
pwd=123&
sex=nan&
language1=J&
language2=cplus&
upload=&
id=12345&
country=CN&
textarea=ccc&
x=44&y=16

解析:
 name=value(键值对)
 用户名:abc
 密码:123
 性别:男
 技术:java C++
 upload:空
 id:12345
 文本区:ccc
 (44,16)---(x,y)是你点图片时，鼠标相对于图片左上角的坐标

注意:如果user和password设置value,在页面中更改,会以更改后值提交
    也就是说提交文本框最终内容
-->

form

IE7下的页面效果,IE10边框没有颜色.

简单服务端:

package socket;
import java.net.*;
import java.io.*;
class ServerSocketDemo {
    public static void main(String[] args)throws Exception{
        
        ServerSocket ss=new ServerSocket(11993);
        
          while(true){
            Socket s=ss.accept();
            
            OutputStream os=s.getOutputStream();
            InputStream is=s.getInputStream();
            os.write("<font size=5 color=red> 注册成功 </font>".getBytes());
            byte[] buf=new byte[1024];
            int length=is.read(buf);
            System.out.println(new String(buf,0,length));
         
            String ip=InetAddress.getLocalHost().getHostAddress();
            System.out.println(ip);
       
            s.close();
          }
      
      }
}

点击提交数据按钮:

regSuccess

服务端的收到的信息:

get提交:

GET /?
user=&pwd=&confirmpwd=&country=none 
 HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: zh-CN
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Accept-Encoding: gzip, deflate
Host: 192.168.1.101:11993
DNT: 1
Connection: Keep-Alive


192.168.1.101
GET /favicon.ico HTTP/1.1   //favicon请求的是地址栏前的图标.
Accept: */*
UA-CPU: AMD64
Accept-Encoding: gzip, deflate
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Win64; x64; Trident/6.0)
Host: 192.168.1.101:11993
DNT: 1
Connection: Keep-Alive


192.168.1.101

post提交:

POST / HTTP/1.1
Accept: text/html, application/xhtml+xml, */*
Accept-Language: zh-CN
Content-Type: application/x-www-form-urlencoded
User-Agent: Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0)
Accept-Encoding: gzip, deflate
Host: 192.168.1.101:11993
Content-Length: 35
DNT: 1
Connection: Keep-Alive
Cache-Control: no-cache

user=&pwd=&confirmpwd=&country=none
192.168.1.101

get与post对比:
get与post
1.get:会将提交的数据显示在地址栏,对于敏感信息不安全
   post:不会将数据显示在地址栏上,对于敏感信息安全
 
2.get:提交的数据的体积受地址栏的限制(长度有限) 
   post:可以提交大体积数据
 
3.get:会将提交信息封装在请求行,也就是http消息头之前
   post:会将提交信息封装在数据体中,也就是http消息头之后
   的空行后
4.get还可以通过<a href="服务端地址端口?数据">提交</a>或在地址栏上输入回车

对于服务端而言：
    表单提交尽量用post,因为涉及编码问题,因为tomcat默认的解码使用的charset为ISO8859-1(1byte,0~255,不识别中文),对于post提交的中文,在服务端可以直接使用setChararcterEncoding("gbk")就可以解决

    对于get提交的中文,在服务端只能通过ISO8859-1再编码一次,得出原有的字节序列,在使用指定的charset如GBK解码

服务端和客户端都需要做校验:
客户端:为了提高用户体验(尼玛注册完了提交后,等半天服务端才给个反馈信息还是:"对不起,请重新注册"->走人)
服务端:为了提高安全性(我任意写个超链接岂不是想提交给谁就提交给谁?(新浪,百度任我挑))

4.其它一些标签:

<!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=utf-8" />
<title>pre</title>
</head>

<body>
  <!--pre保留html代码的原样格式-->
  <pre>
      public static void main(String[] args){
      System.out.println("Hello");
    }
  </pre>
  
  <!--段落标签段落之间有空行注意与br区分(br行与行之间没有空行)-->
  <p>
    电视剧疯狂的是否健康的减肥的风景
  </p>
  <p>
    水电开发舰队司令开发建设大家都快放假了快速的减肥了撒大家
  </p>
  
  <!--一些标签-->
  <b>加粗</b> <br/>
  <strong>strong加粗</strong><br/>
  <i>倾斜</i><br/>
  <u>下划线</u><br/>
  下标:H<sub>2</sub>O
  上标:a<sup>2</sup><br/>
 
 
  <!--marquee(字幕):从上向down飞,到底停止-->
  <marquee behavior="slide" direction="down">
   飞起来
  </marquee>
 
</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=utf-8" />
<title>头标签</title>
<base href="Test/1_初学乍练.html"  target="_blank"/>
<!--当我们需要改动某个页面常常把其备份,改动备份然后修改base的href指向它即可,那么原网页body代码可以不用动-->

<meta name="keywords" content="凤姐,LOLI" />
<!--name属性:网页的描述信息,当取keywords时,contents属性的内容就作为搜索引擎的关键字进行搜索-->

<meta http-equiv="refresh" content="2;url=http://www.baidu.com" />
<!--模拟Http协议的响应消息头:3秒后自动跳转百度,如果不写url 本页面刷新-->

<link rel="stylesheet"  type="text/css" href="1.css" media="print,screen" />
<!--
rel:描述目标文档(1.html)与当前文档(当前html文件)的关系
type:目标文档类型
media:目标文档在那种设备上起作用(当前页面和打印机)
-->
</head>

<body>
 
 <a href="1_初学乍练.html">Test</a><!--当前目录下没有该文件-->
</body>
</html>

5.Html,XHTML,XML

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

DOCTYPE:文档类型 html 与 下面的html标签一致
PUBLIC:国际规范定义的关键字 (通用性比较高)
      //W3C//DTD XHTML 1.0 Transitional//EN 以这个版本指定
xhtml1-transitional.dtd:
        在DreamWeaver安装目录下有该文件,对标记型文档进行约束的文件
        里面定义了需要遵从的一系列规范     
        例如:任何标签都有闭合标签
http://www.w3.org/TR/xhtml1/DTD/:
      xhtml1-transitional.dtd所属的名称空间(类名Java包名)
       可以防止重名,相同的标签可能代表不同的含义(需要指名命名空间)等,
       之所以用该网址:唯一


XHTML,XML
XHTML:
可扩展超文本置标语言（eXtensible HyperText Markup Language，XHTML），是一种置标语言，表现方式与超文本置标语言（HTML）类似，不过语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言（SGML）的应用，是一种非常灵活的置标语言，而XHTML则基于可扩展置标语（XML），XML是SGML的一个子集。

XML与HTML对比:
可扩展标记语言 (Extensible Markup Language, XML)

1.XML与HTML的设计区别是：XML 被设计为传输和存储数据，其焦点是数据的内容。而HTML 被设计用来显示数据，其焦点是数据的外观。HTML 旨在显示信息，而 XML 旨在传输信息。

2.XML和HTML语法区别：HTML的标记不是所有的都需要成对出现，XML则要求所有的标记必须成对出现；HTML标记不区分大小写，XML则 大小敏感,即区分大小写。

3.Html的标签名时固定的,XML标签名是可以自定义的
.ini的配置文件对简单信息描述(键值对)
.xml的配置文件常用作对复杂信息进行描述

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/yiqiu2324/p/3261834.html