當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2025/6/17 HTML 31 豆豆

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

HTML框架

什么是框架：將瀏覽器劃分成不同部分，每一部分加載不同的網(wǎng)頁(yè)，用以實(shí)現(xiàn)在同一瀏覽器窗口中加載多個(gè)頁(yè)面的效果。

<frameset> 劃分框架標(biāo)記。

語(yǔ)法格式：<frameset>...</frameset>

屬性：

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

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

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

border 設(shè)置邊框的大小，默認(rèn)值5px

3.<frame> 子窗口標(biāo)記，單標(biāo)記。該標(biāo)記必須放在<frameset>中使用，在<frameset>中設(shè)置幾個(gè)窗口，就必須對(duì)應(yīng)使用幾個(gè)<frame>框架。而且還必須使用src屬性指定一個(gè)網(wǎng)頁(yè)。

語(yǔ)法格式：<frame 屬性=“屬性值”> 。

屬性：

src 加載網(wǎng)頁(yè)文件的url地址。

name 框架名稱，是鏈接標(biāo)記的target所要參數(shù)。

noresize表示不能調(diào)整框架大小，沒有設(shè)置時(shí)就可以調(diào)整。

scrolling是否需要滾動(dòng)條

值：

auto根據(jù)需要自動(dòng)調(diào)整

yes 有?

no ?無(wú)

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

4.其他相關(guān)標(biāo)簽

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

注：元素中的文本通常呈現(xiàn)為斜體。大多數(shù)瀏覽器會(huì)在 address 元素前后添加折行

HTML表單設(shè)計(jì)

表單標(biāo)記：<form>定義表單的開始位置和結(jié)束位置，表單提交時(shí)的內(nèi)容就是form中的內(nèi)容</form>

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

常見屬性：

get：get方式提交時(shí)，會(huì)將表單的內(nèi)容附加在URL地址后面，所以限制了提交內(nèi)容的長(zhǎng)度，不超過(guò)8192個(gè)字符，且不具備保密性。

post：post提交時(shí)，將表單的數(shù)據(jù)一并包含在表單主體中，一起傳輸?shù)椒?wù)器中處理，沒有數(shù)據(jù)大小限制。

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

target:和超鏈接屬性類似，用來(lái)指定目標(biāo)窗口。

<input>文本域和密碼域，沒有結(jié)束標(biāo)記。

語(yǔ)法格式：<input type="" value="" size="" maxlength="規(guī)定輸入字段的最大長(zhǎng)度，以字符個(gè)數(shù)計(jì)">

- 當(dāng)type="text"時(shí)，<input>表示一個(gè)輸入文本域
- 當(dāng)type="password"時(shí)，<input>表示一個(gè)密碼輸入域。

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

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

? ? ? 3.按鈕的使用

提交按鈕；當(dāng)<input type="submit" >時(shí)；

重置按鈕；當(dāng)<input type="reset">時(shí)；

普通按鈕；當(dāng)<input type="button">時(shí)；

單選按鈕：當(dāng)<input type="radio">時(shí)；?

復(fù)選按鈕：當(dāng)<input type="checkbox" >時(shí)。

注：單選按鈕和復(fù)選按鈕都可以使用"checked"屬性來(lái)設(shè)置默認(rèn)項(xiàng)。另name屬性一致時(shí)，則為二選一。

如：

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

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

4.隱藏域：當(dāng)<input type="hidden">時(shí)；

? ? ? 5.多行文本域：

用法：使用<textarea>標(biāo)記可以實(shí)現(xiàn)一個(gè)能夠輸入多行文本區(qū)域。

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

?注：rows和cols屬性分別用來(lái)指定顯示行的行數(shù)和列數(shù)，單位是字符個(gè)數(shù)。

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

語(yǔ)法格式： ? <select name="" size="value" multiple="value">

? ?<option value="" selected="selected">選項(xiàng)1</option>

? ?<option value="" selected="selected">選項(xiàng)2</option>

? ?<option value="" selected="selected">選項(xiàng)3</option>

</select>

<html> <head><title>表單設(shè)計(jì)練習(xí)</title><meta charset="utf-8"> </head> <body><form>賬號(hào)：<input type="text" size="16"><br/><br/>密碼：<input type="password" size="16"><br/><br/>愛好：<input type="checkbox" name="tiyu">體育<input type="checkbox" name="yinyue">音樂(lè)<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>

? ? ?

轉(zhuǎn)載于:https://www.cnblogs.com/xsql/p/5973368.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。