HTML 表單、樣式

時間 2021-01-30

標籤 javascript css html java python shell 數據庫編程瀏覽器 bash 欄目 HTML 简体版

原文原文鏈接

目錄：javascript

1.<form>css

2.<head>html

3.<embed>
java

1.formpython

　　建立表單，使用<form>標籤。表單的做用是向服務器傳輸數據，實現用戶交互。標籤中包含input、menus、textarea、fieldset、label等元素。
shell

1.1.表單基本實現
　　點擊submit按鈕時提交表單，就是把form中全部input的信息以method的方式發送給action。input中的信息形如「host=sunny」、「domain=51cto」。
數據庫

<form action="action.jsp" method="GET">
    Host name:<br>
    <input type="text" name="host" value="sunny"><br>
    Domain name:<br>
    <input type="text" name="domain" value="51cto"><br>
    <input type="submit" value="按鈕">
</form>
<p>表單內容提交給action.jsp處理。</p>

　　★action規定提交表單時，表單數據發往何處。編程

　　★type定義input（輸入框）的屬性瀏覽器

　　★name元素的名稱bash

　　★value元素的默認值（提交個action的值）

　　★method是提交的方法（GET|POST）

　　　　使用GET，提交信息在地址欄是可見的（形如「action.jsp?host=sunny&domain=51cto」）；使

　　用POST是不可見。

　　★form也能夠有name、target屬性。target默認是_self，也能夠是_blank。

　　代碼效果：默認值會直接顯示出來

　　提交表單，就是把form中全部input的信息以method的方式發送給action。

1.2.表單元素

　　元素input依據type的不一樣屬性，有多種形態。select、option……

1.2.1.文本行、密碼行

　　type指定元素的類型，name定義元素的名稱。

<input type="text" name="username">
<input type="password" name="userpass">

　　size指定顯示的寬度；maxlength指定接收的字符數

<input type=text name=xxx size=6 maxlength=5>

1.2.2.按鈕button

　　一個普通按鈕，按鈕上顯示「確認」。

<input type="button" value="確認">

　　確認按鈕，按鈕上顯示「提交查詢」。提交input的內容

<input type="submit">

　　重置按鈕，按鈕上顯示「重置」。清除form中的選擇

<input type="reset">

1.2.3.複選框和單選框

　　checkbox標籤是複選框，checked表示默認選定，<p>實現換行。複選框的名稱各個不一樣。

<input type=checkbox name=fruit1 checked>Banana<p>
<input type=checkbox name=fruit2>Apple<p>
<input type=checkbox name=fruit3 value=橘子>Orange<p>

　　某些時候，名稱一致會更佳。以下，shell表示必備技能爲默認選擇，而且不能取消，其餘兩項爲可選項目。

<input type="checkbox" name=lang value="shell" checked disabled>shell<p>
<input type="checkbox" name=lang value="python">python<p>
<input type="checkbox" name=lang value="c">C<p>

　　radio標籤是單選框，互斥內容name須要一致才能生效

<input type=radio name=fruit checked>Banana<p>
<input type=radio name=fruit>Apple<p>
<input type=radio name=fruit>Orange<p>

1.2.4.文本框textarea

　　warp表示軟回車、硬回車。默承認以自由拖動文本框大小。

<textarea wrap=soft name=comment rows=5 cols=25>
</textarea>
<textarea wrap=hard name=comment rows=5 cols=25>
</textarea>

　　默認是自動換行的。

1.2.5.列表框select

　　列表框由select元素定義，option表示其中列表元素。select表示默認元素。

<select name='fruits'>
    <option value='1' selected>Apple</option>
    <option value='2' >Banana</option>
    <option value='3' >Orange</option>
</select>

　　把默認顯示一行內容，改爲顯示三行。

<select name=fruits size=3>

　　select支持多選、分組……

1.2.6.環繞框fieldset

　　造成一個方框包圍住元素。

<form>
  <fieldset>
    <legend>登錄區</legend>
    用戶名：<input type="text" />
    密　碼：<input type="text" />
  </fieldset>
</form>

　　代碼效果：

1.2.7.hidden屬性

　　提交到action一些默認屬性

<input type="hidden" name="ie" value="utf-8">
<input type="hidden" name="fr" value="so.com">
<input type="hidden" name="src" value="home_so.com">

1.2.8.上傳文件file

　　input屬性爲file，能夠上傳文件

<form enctype="multipart/form-data">
    <input type="file">
</form>

2.<head>

　　<head>標籤用於定義文檔的頭部，是全部頭部元素的容器。文檔的頭部描述了文檔的各類屬性和信息。

2.1.文檔的標題<title>

　　頭部惟一必須的元素

<title>Readme</title>

技術外很重要的內容：

　　含有文檔引用排序的標題一般不是什麼好標題。舉個例子，像「第十六章」或「第五部分」這樣的標題，對讀者理解其內容方面毫無用處。描述性更強的標題，像「第十六章：HTML 標題」，或者「第五部分：如何使用標題」，這樣的標題不只表達了它在一個大型文檔集中的位置，還說明了文檔的具體內容，吸引讀者更有興趣讀下去。

　　人們經常會花費大量時間去建立 Web 文檔，但卻常常只是由於一個不吸引人或無心義的標題，而把這些努力全都浪費掉了。當自動爲用戶蒐集連接的特殊軟件在 Web 上愈來愈流行時，只有網頁的標題纔會做爲與頁面相關的描述性詞語，被插入到龐大的連接數據庫中。所以，咱們怎麼強調這一點都不過度：請爲本身的每一個文檔都認真地選擇一個描述性的、實用的並與上下文獨立的標題。

2.2.文檔的樣式<style>

　　<style>標籤用於爲HTML文檔定義樣式信息。在<style>中，能夠規定在瀏覽器中如何呈現該文檔。其中type屬性是必須的。

<style type="text/css">

　　2.2.1.html中的樣式：

<head>
    <style type="text/css">
        .red {color: red; font-size: 20px}
        .font24 {color: blue; font-size: 24px}
        .font49 {color: blue; font-size: 49px}
    </style>
</head>

<body>
    <span class="font24">I</span>
    <span class="red">love</span>
    <span class="font49">you.</span>
</body>

　　2.2.2.在<a>標籤中去掉下劃線：

<a href="http://sunnybay.blog.51cto.com/2249903/1655207" style="text-decoration:none">blog</a>

　　2.2.3.定義一個指向外部的樣式文件：

<link rel="stylesheet" type="text/css" href="/css/left.css" >

2.3.文檔的樣式<meta>

　　<meta>用來提供關於頁面的元信息，格式以鍵值對的形式表現。<meta>標籤沒有結束標籤，必須的屬性是content。content屬性提供了鍵值對的值，該值能夠是任何有效的字符串。content屬性始終要和name屬性或http-equiv屬性一塊兒使用。

　　例如，keywords爲文檔定義了一組關鍵字，提供給搜索引擎的索引：

<meta name="keywords" content="服務器,action,target,標籤,密碼">

　　地址重定向，3秒後跳轉，舉例：

<meta http-equiv="Refresh" content="3;url=http://sunnybay.blog.51cto.com/2249903/1655207" />

　　文檔版本，舉例：

<meta name="findTom" content="2.6">

2.4.文檔的外鏈<link>

　　定義文檔與外部資源的關係，最多見（也沒見過其餘用途）的用途是連接「樣式表」。在HTML中<link>標籤沒有結束標籤。舉例：

<link rel="stylesheet" type="text/css" href="/css/option.css" >

2.5.文檔的默認路徑<base>

　　<base>標籤爲頁面上的全部連接規定默認地址或默認目標。影響：<a>、<img>、<link>、<form>。<href>屬性是必選屬性，<target>是可選的屬性；分別規定頁面中全部相對連接的基準URL，在何處打開頁面中全部的連接。舉例：

<base href="http://sunnybay.blog.51cto.com/2249903/d-8" />
<base target="_self" />

2.6.定義客戶端腳本<script>

　　<script>元素既能夠包含腳本語句，也能夠經過src屬性指向外部腳本文件。必選屬性<type>，指示腳本的MIME類型。

2.6.1.將腳本插入HTML
　　使用在<body>

<body>
    <script type="text/javascript">
        document.write("<h1>Hello World!</h1>")
    </script> 
</body>

2.6.2.處理不支持腳本的瀏覽器
　　當現實不支持時，顯示<noscript>中的代碼。

<script type="text/javascript">
    document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>

3.<embed>

　　<embed>標籤用於定義嵌入HTML的內容，支持HTML中的事件屬性。有針對「Window事件」、「form事件」、「keyboard事件」、「mouse事件」、「media事件」，更多關於時間編程的知識，須要瞭解JavaScript。

　　<embed>標籤的屬性有：height、src、type、width。分別用於定義嵌入對象的：高度、時間源的URL、嵌入內容的類型、嵌入內容的高度。

　　插入MP三、mkv格式（谷歌瀏覽器能夠在本地正常打開）

<embed src="man.mp3" />
<embed src="man.mkv" />

　　該視頻、音頻功能要很好地用起來，須要搭建「流媒體服務器」。

1. HTML表單與Css樣式
2. 【譯】HTML表單樣式
3. html css 樣式表
4. 【譯】HTML表單高級樣式
5. HTML中表格和表單的簡單構造和樣式
6. 表單樣式
7. bootstrap表單樣式
8. 表單+css樣式+
9. form表單樣式
10. 『HTML&CSS』樣式表（Style Sheet）
更多相關文章...
• Web 品質 - 樣式表 - 網站品質教程
• ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
• 委託模式
• TiDB 在摩拜單車在線數據業務的應用和實踐

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。