Html/CSS1_經常使用標籤,表單

時間  2019-11-14
標籤 html css1 css 經常 使用 標籤 表單 欄目 HTML 简体版
原文   原文鏈接

 

1.一些經常使用標籤:css

標籤的操做思想:
爲了操做數據,都須要對數據進行不一樣標籤的封裝,經過標籤中的屬性對封裝的數據進行操做,標籤就至關於一個容器,對容器中的數據進行操做,就是在不斷的改變容器的屬性值 html

列表標籤: java

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

超連接標籤:tomcat

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

簡單的服務端:app

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

以上屬性解析:socket

<!--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邊框沒有顏色.jsp

簡單服務端:ide

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的配置文件經常使用做對複雜信息進行描述

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程