1、圖像和鏈接
1、URL
地址
1、分類
1、絕對(duì)路徑
1、引用互聯(lián)網(wǎng)資源
協(xié)議名
主機(jī)名(IP地址,域名)
目錄路徑
文件名
2、本機(jī)文件
從文件所在的最高目錄處(盤符)開始
2、相對(duì)路徑
通過(guò) 文件間的位置關(guān)系 找到資源文件
1、同目錄,直接用
2、子目錄,先進(jìn)入
3、父目錄,先返回(../)
3、根相對(duì)路徑
永遠(yuǎn)都是從WEB站點(diǎn)所在的根目錄處開始查找
語(yǔ)法:/
2、圖像
1、語(yǔ)法
<img>
<img/>
2、屬性
1、src
指定要顯示的圖像的URL
2、width
3、height
注意:等比縮放
3、鏈接
1、語(yǔ)法
<a>內(nèi)容</a>
2、屬性
1、href
鏈接文件URL
2、target
目標(biāo),打開新網(wǎng)頁(yè)的方式
取值:
1、_self
默認(rèn)值
2、_blank
新標(biāo)簽頁(yè)打開
3、鏈接4種表現(xiàn)形式
1、目標(biāo)文檔為下載資源
<a href="xxx.rar/zip">xxx</a>
2、電子郵件鏈接
<a href="mailto:xxx@xxx.com">xxxx</a>
3、返回頁(yè)面頂部空鏈接
<a href="#">xxx</a>
4、鏈接到JS
<a href="javascript:js代碼">xxx</a>
4、錨點(diǎn)
1、定義錨點(diǎn)
1、通過(guò)任何標(biāo)記的 id 屬性
2、通過(guò)a標(biāo)記的 name 屬性
2、鏈接到錨點(diǎn)
<a href="#錨點(diǎn)名稱"></a>
<a href="頁(yè)面URL#錨點(diǎn)名稱"></a>
2、表格
1、作用
將數(shù)據(jù) 按照 從左到右,從上到下的順序進(jìn)行顯示
2、語(yǔ)法
1、標(biāo)記
1、創(chuàng)建表格
<table></table>
2、創(chuàng)建表行
<tr></tr> -- table row
3、創(chuàng)建列(單元格)
<td></td> -- table data
2、屬性
1、table
width,height,align,border,cellspacing,cellpadding,bgcolor
2、tr
align,valign,bgcolor
3、td
align,valign,bgcolor,width,height,colspan,rowspan
3、表格其他標(biāo)記
1、標(biāo)題
<caption></caption>
2、行標(biāo)題或列標(biāo)題
<th></th>
4、表格復(fù)雜應(yīng)用
1、行分組
表頭:<thead></thead>
表主體:<tbody></tbody>
表尾:<tfoot></tfoot>
2、不規(guī)則表格
通過(guò) td 的 colspan和rowspan 屬性來(lái)設(shè)置
colspan:跨列,從指定單元格位置處開始,水平向右 合并 幾列,被合并掉的單元格一定要?jiǎng)h除
rowspan:跨行,從指定單元格位置處開始,縱向向下 合并 幾個(gè)單元格,被合并掉的單元格一定要?jiǎng)h除
3、表格嵌套
一個(gè)表格中又出現(xiàn)一個(gè)表格
表格中的所有內(nèi)容,只能出現(xiàn)在td中
***********************************
1、列表
1、什么是列表
按照一定的結(jié)構(gòu)化方式顯示數(shù)據(jù),默認(rèn)情況,是按照從上到下的方式來(lái)顯示數(shù)據(jù)
2、列表的組成
主要由 列表類型 和 列表項(xiàng) 來(lái)組成
3、語(yǔ)法
1、有序列表
標(biāo)記:<ol></ol> -- Order List
列表項(xiàng):<li></li>
<ol>
<li>內(nèi)容</li>
<li>內(nèi)容</li>
... ...
</ol>
屬性:
1、type
作用:列表項(xiàng)前的標(biāo)識(shí)
取值:
1、1 數(shù)字,默認(rèn)值
2、a 小寫字母
3、A 大寫字母
4、i 小寫羅馬數(shù)字
5、I 大寫羅馬數(shù)字
2、start
指定 列表項(xiàng) 從第幾個(gè)字符開始顯示
2、無(wú)序列表
標(biāo)記:<ul></ul> -- Unorder List
列表項(xiàng):<li></li>
屬性:
1、type
1、disc,實(shí)心圓(默認(rèn)值)
2、circle,空心圓
3、square,實(shí)心方塊
4、none,沒有
3、列表的嵌套
通過(guò)列表嵌套,可以實(shí)現(xiàn)多層列表
被嵌套的內(nèi)容,必須放在li中
4、定義列表
1、作用
定義列表用于給出一類事物的定義情形
掩耳盜鈴
xxxxxxxxxxxx
2、語(yǔ)法
<dl></dl>:定義一個(gè)定義列表
<dt></dt>:定義列表中要解釋的名詞或術(shù)語(yǔ)
<dd></dd>:定義列表中對(duì)名詞或術(shù)語(yǔ)的解釋
3、使用場(chǎng)合
圖文混排 時(shí)
2、結(jié)構(gòu)標(biāo)記
1、作用
用于表示頁(yè)面中的布局,目的是為了提升標(biāo)記的語(yǔ)義化
2、結(jié)構(gòu)標(biāo)記
1、<header>元素
1、語(yǔ)法
<header></header>
2、作用
定義文檔的頁(yè)眉
用于取代:<div id="header"></div>
2、<nav>元素
1、語(yǔ)法
<nav></nav>
2、作用
用于表示頁(yè)面中的導(dǎo)航部分
3、<section>元素
1、語(yǔ)法
<section></section>
2、作用
用于表示 頁(yè)面中的 主體部分
4、<article>元素
1、語(yǔ)法
<article></article>
2、作用
用于表示獨(dú)立于文檔的其他部分的內(nèi)容
比如:論壇中的帖子,新聞?lì)惥W(wǎng)站中的具體一條新聞,博客或微博的條目,音視頻等... ...
5、<footer>元素
1、語(yǔ)法
<footer></footer>
2、作用
用于表示 網(wǎng)頁(yè) 底部信息
6、<aside>元素
1、語(yǔ)法
<aside></aside>
2、作用
表示網(wǎng)頁(yè) 內(nèi)容 中的邊欄信息
3、表單(重難點(diǎn))
1、表單作用
用于顯示、收集用戶信息,并將信息提交給服務(wù)器
表單組成:
1、表單元素-負(fù)責(zé)將用戶數(shù)據(jù)提交給服務(wù)器
2、表單控件-負(fù)責(zé)接收用戶的數(shù)據(jù)(與用戶進(jìn)行數(shù)據(jù)交互)
2、表單元素
1、標(biāo)記
<form></form>
2、屬性
1、action
定義表單被提交時(shí)的動(dòng)作,主要就是 服務(wù)器上處理 數(shù)據(jù)的應(yīng)用程序URL
默認(rèn) 是提交給本頁(yè)
2、method
指定表單數(shù)據(jù)提交的方式
取值:
1、get(默認(rèn)值)
向服務(wù)器端要數(shù)據(jù)時(shí)使用
特點(diǎn):
1、顯示提交:用戶數(shù)據(jù)是可以顯示在地址欄上的
2、提交數(shù)據(jù)長(zhǎng)度限制:2KB
2、post
向服務(wù)器傳遞數(shù)據(jù)時(shí)使用
特點(diǎn):
1、隱式提交:所提交的數(shù)據(jù)是看不見的-安全性較高
2、無(wú)數(shù)據(jù)大小限制
3、enctype(非重點(diǎn))
表單數(shù)據(jù)進(jìn)行編碼的方式
取值:
1、application/x-www-form-urlencoded(默認(rèn)值)
2、multipart/form-data
使用場(chǎng)合:上傳文件時(shí)使用
3、text/plain
3、表單控件
1、作用
提供多種類型的表單控件,并且具備可視化的外觀,可以接收用戶的數(shù)據(jù)
2、表單控件分類
input組元素,textarea,選項(xiàng)框(select和option),其他元素
1、input 元素
1、語(yǔ)法
<input>或<input/>
屬性:
1、type
根據(jù)type值,創(chuàng)建各種類型的輸入字段,如文本框,密碼框,單選按鈕復(fù)選框等... ...
2、value
值,要提交給服務(wù)器的值
3、name
控件的名稱,服務(wù)器端使用,沒有名字,無(wú)法提交
4、disabled
禁用控件,該屬性無(wú)值,只要出現(xiàn)在控件中就表示禁用
<input disabled>
2、分類
1、文本框與密碼框
文本框:type="text"
密碼框:type="password
屬性:
1、maxlength
限制輸入的字符數(shù)
2、readonly
只讀
3、name
以控件的縮寫+功能名稱組成
文本框和密碼框的縮寫:txt
ex:
用戶名稱:txtUsername
用戶昵稱:txtNickname
4、value
2、單選按鈕 和 復(fù)選框
單選按鈕:type="radio"
復(fù)選框:type="checkbox"
屬性:
1、name
名稱以及分組,一組單選按鈕或復(fù)選框的話,名稱必須一致
單選按鈕:rdo
復(fù)選框:chk
2、value
值
3、checked
設(shè)置默認(rèn)被選中
3、按鈕
提交按鈕:type="submit"
負(fù)責(zé)提交數(shù)據(jù)到服務(wù)器
重置按鈕:type="reset"
將表單元素恢復(fù)到默認(rèn)值
普通按鈕:type="button"
執(zhí)行客戶端腳本(JS)
屬性:
1、name
縮寫:btn
2、value
按鈕上的顯示文本
4、隱藏域和文件選擇框
1、隱藏域
不想給用戶看,但是要提交給服務(wù)器的數(shù)據(jù)
<input type="hidden">
屬性:
1、name 名稱,縮寫 txt
2、value 值
2、文件選擇框
提交(上傳)文件時(shí)使用
<input type="file">
屬性:
1、name
縮寫 :txt
注意:
1、保證 form 的 method 屬性 必須為 post
2、保證 form 的 enctype 屬性 必須為 multipart/form-data
2、textarea 元素
多行文本框
1、語(yǔ)法
<textarea>文本</textarea>
2、屬性
1、name
控件的名稱,縮寫 txt
2、readonly
只讀
3、cols
指定文本域的列數(shù)
變相設(shè)置寬度(字符數(shù))
4、rows
指定文本域的行數(shù)
變相設(shè)置高度
3、選項(xiàng)框
兩種:
1、下拉選項(xiàng)框
2、滾動(dòng)列表
語(yǔ)法
1、<select></select>
功能:創(chuàng)建選項(xiàng)框(滾動(dòng)列表)
屬性:
1、name
縮寫:sel
2、size
默認(rèn)顯示的選項(xiàng)數(shù)量,如果取值大于1的話,則為滾動(dòng)列表
3、multiple
設(shè)置多選
2、<option></option>
選項(xiàng)框中的選項(xiàng)
屬性:
1、value
值
2、selected
預(yù)選中
4、其他元素
1、label 元素
1、作用
關(guān)聯(lián) 文本 與表單控件。
2、語(yǔ)法
<label>文本</label>
屬性:
for :表示與該元素相關(guān)聯(lián)的表單控件的ID值
2、fieldset 元素
1、作用
為控件分組
2、語(yǔ)法
1、<fieldset></fieldset>
為控件分組
2、<legend></legend>
為分組指定標(biāo)題
3、button 元素
語(yǔ)法:
<button>內(nèi)容</button>
注意:
<button>元素放在<form>中,就是提交按鈕,放在<form>之外,就是普通按鈕(IE除外)
4、其他標(biāo)記
1、浮動(dòng)框架
1、作用
可以在一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)頁(yè)面文檔
2、語(yǔ)法
<iframe>內(nèi)容</iframe>
注意:
1、必須是成對(duì)標(biāo)記
2、當(dāng)瀏覽器不支持<iframe>元素時(shí),將顯示"內(nèi)容"作為該處的 內(nèi)容
屬性
1、src
浮動(dòng)框架中的網(wǎng)頁(yè)URL
2、width
3、height
4、frameborder
浮動(dòng)框架的邊框,設(shè)置為0,則取消邊框
2、摘要與細(xì)節(jié)
1、作用
允許將頁(yè)面某部分內(nèi)容進(jìn)行展開或收縮
2、語(yǔ)法
<details>
<summary>標(biāo)題</summary>
</details>
3、度量元素
1、作用
用于顯示靜態(tài)比例的信息
2、語(yǔ)法
<meter>文本</meter>
屬性:
1、min
度量范圍的最小值,默認(rèn)為0
2、max
度量范圍的最大值,默認(rèn)為1
3、value
當(dāng)前顯示的度量值,默認(rèn)為0
4、時(shí)間元素
1、作用
用于關(guān)聯(lián)時(shí)間的不同表現(xiàn)形式
2、語(yǔ)法
<time>時(shí)間文本</time>
屬性:
datetime:關(guān)聯(lián)的日期時(shí)間,可以只關(guān)聯(lián)日期,也可以只關(guān)聯(lián)時(shí)間。如果同時(shí)關(guān)聯(lián)日期與時(shí)間的話,日期與時(shí)間之間用"T"來(lái)分割
5、高亮文本顯示
1、作用
將頁(yè)面中的某部分文本,以特殊的背景顏色顯示出來(lái)
2、語(yǔ)法
<mark>高亮文本顯示</mark>
HTML其他元素
最后編輯于 :
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。