HTML其他元素

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>
最后編輯于
?著作權(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ù)。

友情鏈接更多精彩內(nèi)容