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

HTML

HTML 自学笔记（HTML框架+表单设计）

發布時間：2025/6/17 HTML 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 HTML 自学笔记（HTML框架+表单设计）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

HTML框架

什么是框架：將瀏覽器劃分成不同部分，每一部分加載不同的網頁，用以實現在同一瀏覽器窗口中加載多個頁面的效果。

<frameset> 劃分框架標記。

語法格式：<frameset>...</frameset>

屬性：

cols 使用“像素值”和“%”分割左右窗口，“*”表示剩余部分。若使用“*，*，*”則表示框架平均分成3個。若使用“*，*”則表示框架平均分成2個。

rows?使用“像素值”和“%”分割上下窗口，“*”表示剩余部分。

framborder 指定是否顯示邊框。<framborder="0">不顯示；<framborder="1">顯示。

border 設置邊框的大小，默認值5px

3.<frame> 子窗口標記，單標記。該標記必須放在<frameset>中使用，在<frameset>中設置幾個窗口，就必須對應使用幾個<frame>框架。而且還必須使用src屬性指定一個網頁。

語法格式：<frame 屬性=“屬性值”> 。

屬性：

src 加載網頁文件的url地址。

name 框架名稱，是鏈接標記的target所要參數。

noresize表示不能調整框架大小，沒有設置時就可以調整。

scrolling是否需要滾動條

值：

auto根據需要自動調整

yes 有?

no ?無

5.<frameborder>是否需要邊框?<frameborder=“1”>顯示邊框；<frameborder=“0”>不顯示邊框。

4.其他相關標簽

- - <code>表示計算機源代碼或其他機器可以閱讀的文本內容</code>也會將文本顯示為等寬字樣。
  - <pre>定義預格式文本，被包圍在pre元素中的文本通常會保留空格和換行符。而文本也會呈現等寬字樣。
  - <tt>呈現等寬文本效果
  - <address>標簽定義文檔或文章的作者聯系信息。
    - 若<address>元素位于<body>元素內，則表示文檔聯系信息
    - 若<address>元素位于<article>元素內，則表示文章的聯系信息

注：元素中的文本通常呈現為斜體。大多數瀏覽器會在 address 元素前后添加折行

HTML表單設計

表單標記：<form>定義表單的開始位置和結束位置，表單提交時的內容就是form中的內容</form>

語法格式：<form action="服務器端地址（接受表單內容的地址）" name="表單名稱" method="post/get(傳輸方式)">...</from>

常見屬性：

get：get方式提交時，會將表單的內容附加在URL地址后面，所以限制了提交內容的長度，不超過8192個字符，且不具備保密性。

post：post提交時，將表單的數據一并包含在表單主體中，一起傳輸到服務器中處理，沒有數據大小限制。

action：表單數據的處理程序的URL地址，如果為空，則使用當前文檔的url地址，如果表單中不需要使用action屬性也要指定其屬性為“0”

target:和超鏈接屬性類似，用來指定目標窗口。

<input>文本域和密碼域，沒有結束標記。

語法格式：<input type="" value="" size="" maxlength="規定輸入字段的最大長度，以字符個數計">

- 當type="text"時，<input>表示一個輸入文本域
- 當type="password"時，<input>表示一個密碼輸入域。

? ? ? ? ? ? ? ?2.常見屬性：

- - name 定義控件名稱
  - value 初始化值，打開瀏覽器時，文本框中的內容
  - size ? 設置控件的長度
  - maxlength 輸入框中最大允許輸入的字符

? ? ? 3.按鈕的使用

提交按鈕；當<input type="submit" >時；

重置按鈕；當<input type="reset">時；

普通按鈕；當<input type="button">時；

單選按鈕：當<input type="radio">時；?

復選按鈕：當<input type="checkbox" >時。

注：單選按鈕和復選按鈕都可以使用"checked"屬性來設置默認項。另name屬性一致時，則為二選一。

如：

? ? ? 性別：<input type="radio" name="sex">男

? ? ? 性別：<input type="radio" name="sex">女

4.隱藏域：當<input type="hidden">時；

? ? ? 5.多行文本域：

用法：使用<textarea>標記可以實現一個能夠輸入多行文本區域。

格式：<textarea name="name" rows="value" cols="value" ?value="value">...<textarea>

?注：rows和cols屬性分別用來指定顯示行的行數和列數，單位是字符個數。

? ? ? 6.菜單下拉列表域<select>

語法格式： ? <select name="" size="value" multiple="value">

? ?<option value="" selected="selected">選項1</option>

? ?<option value="" selected="selected">選項2</option>

? ?<option value="" selected="selected">選項3</option>

</select>

<html> <head><title>網頁的框架</title><meta charset="utf-8"> </head><frameset rows="90,*,90" frameborder="1" border="1" noresize="noresize"><frame name="top" src="top.html"/><frameset cols="20%,80%"><frame name="left" src="left.html"/><frame name="right" src="right.html" scrolling="no"/></frameset><frame name="bottom" src="bottom.html"/></frameset> </html>

<html> <head><title>表單設計練習</title><meta charset="utf-8"> </head> <body><form>賬號：<input type="text" size="16"><br/><br/>密碼：<input type="password" size="16"><br/><br/>愛好：<input type="checkbox" name="tiyu">體育<input type="checkbox" name="yinyue">音樂<input type="checkbox" name="yingshi">影視<input type="checkbox" name="yuedu">閱讀<br/><br/>性別：<input type="radio" name="sex">男<input type="radio" name="sex">女<br/><br/>自我介紹；<br/><br/><textarea name="name" rows="10" cols="30" > 這里是自我介紹</textarea><br/><br/>地址：<select name="dizhi"><option value="shanxi" selected="selected">陜西</option><option value="sichuan" selected="selected">四川</option><option value="gansu" selected="selected">甘肅</option><option value="henan" selected="selected">河南</option></select><br/><br/><input type="submit" value="提交"><input type="reset" value="重置"><input type="button" value="按鈕"></form> </body> </html>

? ? ?

轉載于:https://www.cnblogs.com/xsql/p/5973368.html

總結

以上是生活随笔為你收集整理的HTML 自学笔记（HTML框架+表单设计）的全部內容，希望文章能夠幫你解決所遇到的問題。

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