當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单

發布時間：2025/3/21 HTML 24 豆豆

生活随笔收集整理的這篇文章主要介紹了 2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

2017-2-15從0開始前端學習筆記-圖片-表格-表單

標簽

圖片
圖片<img src="#" alt="文本說明不能加載圖片時顯示" title="附加信息鼠標停留時顯示" />
img元素是內聯元素內聯元素在塊級元素中不會另起一行顯示

align特性 align="left/right" left 文字在圖片左側顯示 right文字在圖片右側顯示
align="top/middle/bottom" 文字的第一行與圖片的上/中/下對齊

HTML5中使用figure元素將圖片和圖片說明關聯起來

表格

基本的表格結構
<table></table>用來創建表格表格內容逐行編寫
<tr></tr>表格的每行以tr開始
<td></td>每個單元格為td
<th></th>th表示每行或列的標題具有scope特性 scope="row/col" 表示行/列標題
<th scope="row/col"></th>
跨列/跨行
td的特性rowspan/colspan <td rowsapn="2">跨行</td> <td colspan="4">跨列</td>
長表格
.<thead>標題</thead>表格的標題在thead元素中
.<tbody>主體</tbody>表格的主體在tboody元素中
.<tfoot>腳注</tfoot>表格的腳注放在tfoot元素中
表格的樣式用css實現舊代碼中可能會在表格元素中添加特性

表單

表單結構
表單控件在form元素中<form action="#服務器上的一個URL" method="post/get">表單</form>
使用get方法時，表單中的值被附加在action特性所指定的url末尾適用于短表單例如搜索框或者只從服務器檢索數據的情形
使用post方法時表單中的值被放在http頭信息中進行發送。一般適用一下：允許用戶上傳文件非常長包含敏感信息修改數據庫中信息
單行文本框/密碼框

文本域（多行文本）
textarea<textarea name="content" cols="20" rows="4">預設消息<textarea>cols特性指定文本域的寬度 rows特性指定占據的行數
單選按鈕/復選框
<input type="radio" name="" value="" checked="checked"/>value值為選中時向服務器提交的值 checked值為checked時，加載網頁默認選項
<input type="checkbox" name="" value="" checked="checked"/>
下拉列表框/多選框
<select name=""></select>創建下拉列表框name特性指這個表單控件的名稱，此名稱與用戶選擇的值一并發到服務器

<select name=" " ><option value=" " select="select">select為默認選項</option><option value=" ">value特性指定選項的值</option> </select>

<select name="" size="3" multiple="multiple">size指定下拉框顯示的個數 multiple特性指定用戶可以選擇多個選項</select>

文件上傳域/提交按鈕/圖像按鈕
<input type="file" name=" " />
<input type="submit" name="" value=""/> name特性可以使用但不是必須得 value特性為按鈕顯示的文本
<input type="image" src="#" alt="" width="" height=""/>圖像按鈕，使用圖像作為提交按鈕
按鈕和隱藏控件
button元素 <button ></button>可嵌套img元素
<input type="hidden" name=" " value=" "/>
標簽表單控件/組合表單元素
可以使用兩種方法使用label元素
1.將文本說明和表單輸入框全部包圍起來<label>個人介紹：<input type="text" name="" placeholder="占位符預輸入"/></label>
2.與表單控件分開用for特性關聯 <label for="male">male<label> <input id="male" type="radio" value="m" name=" "/>
組合表單元素
fieldest元素可將相關表單控件放在<fieldset></fieldset>中分成一組
legend元素跟在fieldest后包含一個標題 <fieldset><legend>標題</legend></fieldset>
html5控件
表單驗證<label><input type="password" name="" required="required"/></label>
日期控件<input type="date" name=""/>
電子郵件（email）、URL（url）、搜索輸入控件（search） placeholder特性在輸入前顯示的內容
<input type="search" name="" palceholder="請輸入關鍵詞"/>
實例

<html><head><title>Forms</title></head><body><form action="http://www.example.com/review.php" method="get"><fieldset><legend>Your Details:</legend><label>Name: <input type="text" name="name" size="30" maxlength="100"></label><br /><label>Email: <input type="email" name="email" size="30" maxlength="100"></label><br /></fieldset><br /><fieldset><legend>Your Review:</legend><p><label for="hear-about">How did you hear about us?</label><select name="referrer" id="hear-about"><option value="google">Google</option><option value="friend">Friend</option><option value="advert">Advert</option><option value="other">Other</option></select></p><p>Would you visit again?<br /><label><input type="radio" name="rating" value="yes" /> Yes</label><label><input type="radio" name="rating" value="no" /> No</label><label><input type="radio" name="rating" value="maybe" /> Maybe</label></p><p><label for="comments">Comments:</label><br /><textarea rows="4" cols="40" id="comments"></textarea></p><label><input type="checkbox" name="subscribe" checked="checked" /> Sign me up for email updates</label><br /><input type="submit" value="Submit review" /></fieldset></form></body> </html>

轉載于:https://www.cnblogs.com/wangxiaofeng5277/p/6406201.html

總結

以上是生活随笔為你收集整理的2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux下 ln 命令详解
下一篇：交互神器 Facebook Origam