Web程序設(shè)計(jì)課件：HTML_第1頁(yè)
Web程序設(shè)計(jì)課件：HTML_第2頁(yè)
Web程序設(shè)計(jì)課件：HTML_第3頁(yè)
Web程序設(shè)計(jì)課件：HTML_第4頁(yè)
Web程序設(shè)計(jì)課件：HTML_第5頁(yè)
已閱讀5頁(yè)，還剩51頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

HTML2025/5/211主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》21HTML簡(jiǎn)介2基本語(yǔ)法3常用標(biāo)簽4HTML5新特性本章課程目標(biāo)知識(shí)目標(biāo)掌握HTML語(yǔ)言的基本語(yǔ)法、常用標(biāo)記以及使用方法；能力要求：能夠認(rèn)識(shí)到解決問(wèn)題有多種解決方案，并運(yùn)用文獻(xiàn)資料檢索研究尋找可替代的方案，具備多方案比較選擇能力；能夠理解并掌握Web程序設(shè)計(jì)中的基礎(chǔ)知識(shí)與工作原理，將知識(shí)與原理應(yīng)用于開(kāi)發(fā)過(guò)程中的問(wèn)題分析；2025/5/21《Web程序設(shè)計(jì)》32.1HTML簡(jiǎn)介HTML是超文本標(biāo)記語(yǔ)言(HyperTextMarkupLanguage)，是一種描述性的標(biāo)記語(yǔ)言，定義了一組用于描述頁(yè)面結(jié)構(gòu)和風(fēng)格的標(biāo)簽。HTML文件是標(biāo)準(zhǔn)的ASCII文件，是一種純文本格式的文件，能獨(dú)立于各種操作系統(tǒng)平臺(tái)。超文本是將各種不同空間的信息組織在一起的網(wǎng)狀文本，包含文本、圖片、音頻、視頻、鏈接等形式。2025/5/21《Web程序設(shè)計(jì)》4HTML示例2025/5/21《Web程序設(shè)計(jì)》5源代碼HTML發(fā)展HTML發(fā)展歷史上經(jīng)歷了以下幾個(gè)重要階段：①HTML1.0：在1993年6月作為互聯(lián)網(wǎng)工程工作小組(IETF)工作草案發(fā)布。②HTML2.0：1995年11月作為RFC1866發(fā)布，于2000年6月發(fā)布之后被宣布已經(jīng)過(guò)時(shí)。③HTML3.2：1997年1月14日，W3C推薦標(biāo)準(zhǔn)。④HTML4.0：1997年12月18日，W3C推薦標(biāo)準(zhǔn)。⑤HTML4.01(微小改進(jìn))：1999年12月24日，W3C推薦標(biāo)準(zhǔn)。⑥HTML5：HTML5是公認(rèn)的下一代Web語(yǔ)言，極大地提升了Web在富媒體、富內(nèi)容和富應(yīng)用等方面的能力。2025/5/21《Web程序設(shè)計(jì)》6主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》71HTML簡(jiǎn)介2基本語(yǔ)法3常用標(biāo)簽4HTML5新特性HTML頁(yè)面組成(1)頁(yè)面頭部<head>通常用于頁(yè)面的一些基本語(yǔ)言的描述，如網(wǎng)頁(yè)的標(biāo)題和關(guān)鍵字。常見(jiàn)的元素有title、base、link、meta等<title>--定義網(wǎng)頁(yè)的標(biāo)題<base>--定義網(wǎng)頁(yè)的基準(zhǔn)路徑<link>--用于創(chuàng)建連接到CSS樣式表<meta>--提供相關(guān)頁(yè)面的元信息(2)頁(yè)面主體內(nèi)容<body><body>標(biāo)簽元素定義了網(wǎng)頁(yè)的主體內(nèi)容區(qū)域，這個(gè)區(qū)域內(nèi)的元素都將會(huì)被顯示在瀏覽器頁(yè)面中。2025/5/21《Web程序設(shè)計(jì)》8HTML標(biāo)簽HTML語(yǔ)言中使用的元素，通常被稱(chēng)為HTML標(biāo)簽(HTMLtag)。HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，比如<html>、<body>等。這些HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，比如<b>和</b>。2025/5/21《Web程序設(shè)計(jì)》9<body><p>這是一段文本</p><div>這是一行<b>字符串</b>內(nèi)容</div></body>HTML標(biāo)簽另外，HTML語(yǔ)言中也有一些標(biāo)簽，開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽中不允許放置內(nèi)容，因此可以簡(jiǎn)寫(xiě)成一個(gè)自結(jié)束標(biāo)簽，即<tagname/>的形式，tagname表示某個(gè)標(biāo)簽。例如，<br>表示換行，使用時(shí)一般不會(huì)使用<br></br>，而是寫(xiě)成<br/>。2025/5/21《Web程序設(shè)計(jì)》10<body><p>這是一段文本</p><br/><div>這是一行<b>字符串</b>內(nèi)容</div></body>HTML注意事項(xiàng)HTML標(biāo)簽對(duì)大小寫(xiě)不敏感：<P>等同于<p>，但W3C建議使用小寫(xiě)標(biāo)簽；HTML標(biāo)簽成對(duì)出現(xiàn)時(shí)，如果標(biāo)簽中有大段內(nèi)容時(shí)，建議將起始和標(biāo)簽對(duì)齊；

標(biāo)簽嵌套時(shí)，嵌套的標(biāo)簽內(nèi)容應(yīng)縮進(jìn)4個(gè)字符；HTML結(jié)束標(biāo)簽建議與開(kāi)始標(biāo)簽成對(duì)出現(xiàn)，雖然有時(shí)省略瀏覽器會(huì)自動(dòng)解析，但有些場(chǎng)景下會(huì)顯示錯(cuò)誤，內(nèi)容為空的標(biāo)簽建議使用自結(jié)束標(biāo)簽。2025/5/21《Web程序設(shè)計(jì)》11代碼規(guī)范項(xiàng)目根本統(tǒng)一規(guī)范對(duì)齊縮進(jìn)成對(duì)出現(xiàn)增加注釋阿里前端開(kāi)發(fā)規(guī)范

京東凹凸實(shí)驗(yàn)室前端代碼規(guī)范

標(biāo)簽屬性每個(gè)HTML標(biāo)簽可以具有一個(gè)或多個(gè)屬性，這些屬性可以對(duì)標(biāo)簽進(jìn)行進(jìn)一步的設(shè)置或定義，為標(biāo)簽元素提供更豐富的功能和顯示效果。屬性總是以名稱(chēng)/值對(duì)的形式出現(xiàn)，例如：name="value"。屬性名稱(chēng)定義了該標(biāo)簽可擁有的屬性，屬性值是該屬性的具體取值。2025/5/21《Web程序設(shè)計(jì)》12<div><ahref=“”title=”南昌航空大學(xué)”>主頁(yè)</a></div>HTML標(biāo)簽屬性注意事項(xiàng)屬性與值大小寫(xiě)不敏感：HTML標(biāo)簽的屬性和屬性值對(duì)大小寫(xiě)不敏感，但是W3C在標(biāo)準(zhǔn)中推薦小寫(xiě)的屬性/屬性值；

屬性值應(yīng)使用雙引號(hào)：HTML標(biāo)簽的屬性值應(yīng)該始終被包括在引號(hào)內(nèi)，可以使用雙引號(hào)或單引號(hào)，建議使用雙引號(hào)，如果屬性值中已使用雙引號(hào)，則可以使用單引號(hào)。HTML元素的公共屬性：HTML標(biāo)簽的屬性一般與標(biāo)簽相關(guān)，大多數(shù)屬性是標(biāo)簽元素特有的，也有一些公共屬性2025/5/21《Web程序設(shè)計(jì)》13屬性描述id用于定義標(biāo)簽元素的IDclass用于定義元素的樣式類(lèi)名稱(chēng)style用于定義元素的行內(nèi)樣式屬性title定義元素的標(biāo)題提示信息常用標(biāo)簽文本及格式化超鏈接列表表格表單框架多媒體2025/5/21《Web程序設(shè)計(jì)》14常用標(biāo)簽--文本及格式化文本格式化類(lèi)的標(biāo)簽元素主要是用于HTML文本的格式化，包括文本格式、字體、顏色等樣式的設(shè)置。2025/5/21《Web程序設(shè)計(jì)》15標(biāo)簽描述<p>定義一個(gè)文本段落，每個(gè)段落從新的一行開(kāi)始<b>定義粗體文本<em>定義著重文字<i>定義斜體字<small>定義小號(hào)字<strong>定義加重語(yǔ)氣<sub>定義下標(biāo)字<sup>定義上標(biāo)字<pre>定義預(yù)格式文本示例2025/5/21《Web程序設(shè)計(jì)》16<body><div><p>這是一個(gè)普通的文本-<b>這是一個(gè)加粗文本</b>。</p><p>這是一段<em>強(qiáng)調(diào)</em>文本。</p><p>這段文本包含<i>斜體</i>字體。</p><p><small>這是一段小字體</small></p><p>這是一段<strong>加粗文本</strong>。</p><p>這個(gè)文本包含<sup>上標(biāo)</sup>、<sub>下標(biāo)</sub>文本。</p><p>這段文本包含<ins>插入</ins>、<del>刪除</del>標(biāo)記。</p></div></body>超鏈接超鏈接(Link)，也稱(chēng)為超文本鏈接(HypertextLink)，是HTML頁(yè)面的重要特征之一，用戶只要單擊網(wǎng)頁(yè)中的超鏈接就可以自動(dòng)跳轉(zhuǎn)到超鏈接的目標(biāo)對(duì)象，可以實(shí)現(xiàn)網(wǎng)頁(yè)資源間的便捷快速訪問(wèn)。超鏈接的載體可以是文本，也可以是圖片。2025/5/21《Web程序設(shè)計(jì)》17<ahref="url">鏈接文本</a><ahref=“”>百度頁(yè)面</a><ahref=“/login.jsp”><imagesrc=‘…’></a>鏈接常用屬性href：指明單擊超鏈接后所訪問(wèn)的資源target屬性：用來(lái)定義超鏈接打開(kāi)時(shí)所在的窗口_blank：新開(kāi)啟一個(gè)網(wǎng)頁(yè)窗口打開(kāi)鏈接；_self：在當(dāng)前頁(yè)面窗口打開(kāi)鏈接；_top：在網(wǎng)頁(yè)框架的最頂層架構(gòu)中打開(kāi)鏈接；_parent：在當(dāng)前窗口的父框架中打開(kāi)鏈接；

自定義名稱(chēng)：如果該名稱(chēng)的窗口不存在，則新建一個(gè)窗口打開(kāi)鏈接，id屬性：用于創(chuàng)建網(wǎng)頁(yè)的內(nèi)部錨點(diǎn)，類(lèi)似于網(wǎng)頁(yè)的書(shū)簽2025/5/21《Web程序設(shè)計(jì)》18內(nèi)部錨點(diǎn)通過(guò)該錨點(diǎn)，可在網(wǎng)頁(yè)內(nèi)部進(jìn)行跳轉(zhuǎn)。這種特性通常用于網(wǎng)頁(yè)自身的小標(biāo)題導(dǎo)航。由兩部分組成：（1）定義內(nèi)部錨點(diǎn)（2）定義訪問(wèn)方式，通過(guò)“#”加上錨點(diǎn)ID訪問(wèn)2025/5/21《Web程序設(shè)計(jì)》19<aid=”錨點(diǎn)ID”>錨點(diǎn)名稱(chēng)</a><ahref=”index.html#top1”>主頁(yè)的錨點(diǎn)1</a><body><h2>超鏈接HTML內(nèi)部錨點(diǎn)示例</h2><ahref="new_file.html#para1">第一段</a><ahref="new_file.html#para2">第二段</a><ahref="new_file.html#para3">第三段</a><br/><p><aid="para1">第一段文本：</a>這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。這是第一段示例文本。</p><p><aid="para2">第二段文本：</a>這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。這是第二段示例文本。</p><p><aid="para3">第三段文本：</a>這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。這是第三段示例文本。</p></body>當(dāng)前文件為new_file.html常用標(biāo)簽--列表列表(List)，通常用于網(wǎng)頁(yè)中展現(xiàn)同級(jí)別或有子類(lèi)別的多個(gè)內(nèi)容項(xiàng)。HTML中列表可分為：無(wú)序列表有序列表自定義列表2025/5/21《Web程序設(shè)計(jì)》20無(wú)序列表無(wú)序列表是一個(gè)內(nèi)容項(xiàng)的列表，每個(gè)內(nèi)容項(xiàng)前使用粗體圓點(diǎn)(默認(rèn)為小黑圓圈)進(jìn)行標(biāo)記。無(wú)序列表使用<ul>標(biāo)簽進(jìn)行定義，其中的內(nèi)容項(xiàng)使用<li>定義。2025/5/21《Web程序設(shè)計(jì)》21<p><h4>課程清單：</h4><ul><li>程序設(shè)計(jì)基礎(chǔ)</li><li>面向?qū)ο蟪绦蛟O(shè)計(jì)</li><li>數(shù)據(jù)結(jié)構(gòu)</li></ul></p>有序列表有序列表與無(wú)序列表類(lèi)似，不同之處在于有序列表的內(nèi)容項(xiàng)是有序號(hào)的，一般采用數(shù)字序號(hào)標(biāo)記。有序列表使用<ol>標(biāo)簽定義，內(nèi)容項(xiàng)也是使用<li>定義。2025/5/21《Web程序設(shè)計(jì)》22<p><h4>課程清單：</h4><ol><li>程序設(shè)計(jì)基礎(chǔ)</li><li>面向?qū)ο蟪绦蛟O(shè)計(jì)</li><li>數(shù)據(jù)結(jié)構(gòu)</li></ol></p>自定義列表自定義列表不僅僅是多個(gè)列表項(xiàng)，可以定義每個(gè)項(xiàng)目的標(biāo)題及其描述的組合。自定義列表項(xiàng)使用<dl>標(biāo)簽定義，其中的標(biāo)題使用<dt>標(biāo)簽定義，內(nèi)容項(xiàng)使用<dd>標(biāo)簽定義。2025/5/21《Web程序設(shè)計(jì)》23<p><h4>課程清單：</h4><dl><dt>學(xué)科基礎(chǔ)課</dt><dd>包括高等數(shù)學(xué)、程序設(shè)計(jì)基礎(chǔ)、計(jì)算機(jī)系統(tǒng)基礎(chǔ)等</dd><dt>學(xué)科平臺(tái)課</dt><dd>包括面向?qū)ο蟪绦蛟O(shè)計(jì)、軟件工程、數(shù)據(jù)庫(kù)原理等</dd><dt>專(zhuān)業(yè)核心課</dt><dd>包括軟件建模、軟件構(gòu)造、軟件測(cè)試等</dd></dl></p>綜合運(yùn)用幾種列表可綜合運(yùn)用2025/5/21《Web程序設(shè)計(jì)》24<p><h4>課程清單：</h4><dl><dt>學(xué)科基礎(chǔ)課</dt><dd><ul><li>高等數(shù)學(xué)</li><li>程序設(shè)計(jì)基礎(chǔ)</li><li>計(jì)算機(jī)系統(tǒng)基礎(chǔ)</li></ul></dd><dt>學(xué)科平臺(tái)課</dt><dd><ol><li>面向?qū)ο蟪绦蛟O(shè)計(jì)</li><li>軟件工程</li><li>數(shù)據(jù)庫(kù)原理</li></ol></dd><dt>專(zhuān)業(yè)核心課</dt><dd>包括軟件建模、軟件構(gòu)造、軟件測(cè)試等</dd></dl></p>常用標(biāo)簽--表格表格是HTML頁(yè)面用于展示數(shù)據(jù)或內(nèi)容的一種直觀方式，表格由<table>標(biāo)簽來(lái)定義。每個(gè)表格均有若干行，表格行使用<tr>標(biāo)簽定義。每行可被分割為若干單元格，使用<td>標(biāo)簽來(lái)定義，其中為數(shù)據(jù)單元格的內(nèi)容。數(shù)據(jù)單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等。2025/5/21《Web程序設(shè)計(jì)》25表格標(biāo)簽標(biāo)簽描述<table>定義表格<caption>定義表格標(biāo)題。<th>定義表格中的表頭單元格。<tr>定義表格中的行。<td>定義表格中的單元。<thead>定義表格中的表頭內(nèi)容。<tbody>定義表格中的主體內(nèi)容。<tfoot>定義表格中的表注內(nèi)容(腳注)。<col>定義表格中一個(gè)或多個(gè)列的屬性值。<colgroup>定義表格中供格式化的列組。2025/5/21《Web程序設(shè)計(jì)》26示例2025/5/21《Web程序設(shè)計(jì)》27<tableborder="1"><caption>公司年度銷(xiāo)售明細(xì)</caption><tr><th>季度</th><th>銷(xiāo)售額(萬(wàn)元)</th><th>去年同期增長(zhǎng)</th><th>備注</th></tr><tr><td>一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門(mén)店規(guī)模擴(kuò)張</td></tr><tr><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr></table>表格屬性表格標(biāo)簽還定義了一系列屬性，用于控制表格的樣式及顯示效果。2025/5/21《Web程序設(shè)計(jì)》28屬性描述取值說(shuō)明border表格的邊框數(shù)值型，0表示沒(méi)有邊框cellpadding單元格的邊距，單元格與其內(nèi)容之間的間隔數(shù)值型，單位是像素，0表示沒(méi)有邊距cellspacing單元格的間距，單元格與單元格之間的間距數(shù)值型，單位是像素，0表示沒(méi)有間距bgcolor表格的背景顏色顏色值width寬度長(zhǎng)度數(shù)值height高度長(zhǎng)度數(shù)值表格屬性示例2025/5/21《Web程序設(shè)計(jì)》29<tableborder="1"cellpadding="3"cellspacing="0"><caption><h4>公司年度銷(xiāo)售明細(xì)<h4></caption><tr><th>季度</th><th>銷(xiāo)售額(萬(wàn)元)</th><th>去年同期增長(zhǎng)</th><th>備注</th></tr><trbgcolor="#eeeeee"><td>一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門(mén)店規(guī)模擴(kuò)張</td></tr><trbgcolor="#eeeeee"><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr></table>表格單元格合并橫向合并使用colspan屬性，即一個(gè)單元格跨多列；縱向合并使用rowspan屬性，即一個(gè)單元格跨多行。2025/5/21《Web程序設(shè)計(jì)》30<tableborder="1"cellpadding="3"cellspacing="0"><caption><h4>公司年度銷(xiāo)售明細(xì)<h4></caption><tr><thwidth=“100”>季度</th><thwidth=“100”>地區(qū)</th><th>銷(xiāo)售額(萬(wàn)元)</th><th>去年同期增長(zhǎng)</th><th>備注</th></tr><trbgcolor="#eeeeee"><tdrowspan="4">一季度</td><td>1215.36</td><td>11.8%</td><td></td></tr><tr><td>二季度</td><td>1011.88</td><td>3.2%</td><td>門(mén)店規(guī)模擴(kuò)張</td></tr><trbgcolor="#eeeeee"><td>三季度</td><td>1531.29</td><td>16.7%</td><td></td></tr><tr><tdcolspan="4"align="right">合計(jì)：</td><td>810.8萬(wàn)元</td></tr></table>表單表單是HTML中用于與用戶交互，向服務(wù)器端提交數(shù)據(jù)的主要方式。表單標(biāo)簽定義了一個(gè)區(qū)域，這個(gè)區(qū)域中可以包含多個(gè)表單輸入項(xiàng)，這些輸入項(xiàng)分別用相應(yīng)的輸入標(biāo)簽定義，共同組成了表單區(qū)域。2025/5/21《Web程序設(shè)計(jì)》31表單標(biāo)簽元素表單標(biāo)簽元素<form>，用于定義一個(gè)表單區(qū)域，包含多個(gè)表單輸入項(xiàng)。2025/5/21《Web程序設(shè)計(jì)》32<form屬性名=”屬性值”...>...表單輸入項(xiàng)列表...</form>參數(shù)說(shuō)明：

屬性名，要設(shè)置的form標(biāo)簽屬性名稱(chēng)；

屬性值，要設(shè)置的form標(biāo)簽值；

表單輸入項(xiàng)列表，定義表單中具體的輸入項(xiàng)。表單標(biāo)簽的主要屬性form標(biāo)簽屬性說(shuō)明取值說(shuō)明action定義表單向何處發(fā)送表單數(shù)據(jù)。URLautocomplete定義是否啟用表單的自動(dòng)完成功能。on/offenctype定義向服務(wù)器發(fā)送表單數(shù)據(jù)的編碼方式。(適用于method="post"的情況)application/x-www-form-urlencodedmultipart/form-datatext/plainmethod定義發(fā)送表單數(shù)據(jù)的方法。getpostname定義了表單名稱(chēng)。文本target定義了在何處打開(kāi)actionURL，與超鏈接的target類(lèi)似。_blank：新窗口_self：當(dāng)前窗口_parent：當(dāng)前框架中的父窗口_top：當(dāng)前框架中的頂層窗口自定義名稱(chēng)：在已有名稱(chēng)的窗口中打開(kāi)，如果沒(méi)有則新建一個(gè)窗口2025/5/21《Web程序設(shè)計(jì)》33表單支持的輸入項(xiàng)元素標(biāo)簽描述<form>定義供用戶輸入的表單<input>定義輸入項(xiàng)<textarea>定義多行文本域，可以輸入多行文本<label>定義了<input>元素的標(biāo)簽，一般為輸入標(biāo)題<fieldset>定義了一組相關(guān)的表單元素，并使用外框包含起來(lái)<legend>定義了<fieldset>元素的標(biāo)題<select>定義了下拉選項(xiàng)列表<optgroup>定義選項(xiàng)組<option>定義下拉列表中的選項(xiàng)<button>定義一個(gè)點(diǎn)擊按鈕2025/5/21《Web程序設(shè)計(jì)》34(1)輸入項(xiàng)inputinput標(biāo)簽定義了用戶可以在其中輸入數(shù)據(jù)的輸入字段，input可定義多種方式輸入，取決于其type屬性。2025/5/21《Web程序設(shè)計(jì)》35屬性名稱(chēng)含義使用說(shuō)明text普通文本框用于輸入單行文本password密碼框用于輸入密碼radio單選框用于定義一個(gè)單選輸入項(xiàng)，一組單選框應(yīng)保證他們的name屬性值相同。checkbox復(fù)選框用于定義一個(gè)復(fù)選輸入項(xiàng)，一組復(fù)選框應(yīng)保證他們的name屬性值相同。hidden隱藏域不顯示在頁(yè)面上，通常用于處理參數(shù)傳輸。file文件域用于定義一個(gè)文件上傳組件button按鈕用于定義一個(gè)按鈕submit提交按鈕用于定義一個(gè)提交按鈕，該按鈕點(diǎn)擊后會(huì)自動(dòng)提交表單reset重置按鈕用于定義一個(gè)重置按鈕，該按鈕點(diǎn)擊后會(huì)重置表單區(qū)域中所有表單輸入項(xiàng)的值輸入項(xiàng)示例2025/5/21《Web程序設(shè)計(jì)》36<formaction="/save_product"><h3>產(chǎn)品信息登記</h3>產(chǎn)品編號(hào):<inputtype="text"name="product_id"><br>產(chǎn)品名稱(chēng):<inputtype="text"name="product_name"><br>產(chǎn)品型號(hào):<inputtype="radio"name="size">大<inputtype="radio"name="size">中<inputtype="radio"name="size">小<br>產(chǎn)品分類(lèi)：<inputtype="checkbox"name="product_type">電子儀器類(lèi)<inputtype="checkbox"name="product_type">加工設(shè)備類(lèi)<inputtype="checkbox"name="product_type">模具類(lèi)<inputtype="checkbox"name="product_type">計(jì)算機(jī)類(lèi)<inputtype="checkbox"name="product_type">其它類(lèi)<br><inputtype="submit"value="保存產(chǎn)品數(shù)據(jù)"><inputtype="reset"value="重置數(shù)據(jù)"> </body>下拉選擇框下拉選擇框可以定義一些輸入的選項(xiàng)，讓用戶直接從選項(xiàng)中選擇所需的值。2025/5/21《Web程序設(shè)計(jì)》37<selectname=”名稱(chēng)”><optionvalue=”選項(xiàng)1的值”>選項(xiàng)1的文本</option><optionvalue=”選項(xiàng)2的值”>選項(xiàng)2的文本</option>......</select>參數(shù)說(shuō)明：名稱(chēng)：定義下拉框的名稱(chēng)，服務(wù)器端通過(guò)該名稱(chēng)可以獲取選擇的選項(xiàng)值；選項(xiàng)的值：定義該選項(xiàng)的值，將會(huì)在表單提交時(shí)發(fā)送到服務(wù)器端；選項(xiàng)的文本：定義該選項(xiàng)的顯示文本，會(huì)顯示在頁(yè)面上。下拉選擇框的選項(xiàng)值還可以設(shè)置分組，通過(guò)<optgroup>標(biāo)簽可以定義選項(xiàng)的組別，用戶選擇時(shí)有組別的提示。2025/5/21《Web程序設(shè)計(jì)》38請(qǐng)選擇課程：<select><option>==請(qǐng)選擇==</option><optgrouplabel="專(zhuān)業(yè)平臺(tái)課"><option>程序設(shè)計(jì)基礎(chǔ)</option><option>離散數(shù)學(xué)</option></optgroup><optgrouplabel="專(zhuān)業(yè)核心課"><option>數(shù)據(jù)結(jié)構(gòu)</option><option>操作系統(tǒng)</option><option>計(jì)算機(jī)網(wǎng)絡(luò)</option></optgroup></select>多行文本域多行文本域允許用戶輸入多行大量文本，顯示時(shí)也允許查看多行。多行文本域通過(guò)標(biāo)簽<textarea>定義。2025/5/21《Web程序設(shè)計(jì)》39<textarea屬性1=”屬性值1”>初始文本內(nèi)容</textarea>參數(shù)說(shuō)明：屬性，<textarea>標(biāo)簽的屬性，常用的有cols(列數(shù))、rows(行數(shù))，分別定義了該多行文本域的寬度和高度，取值為字符數(shù)；屬性值，屬性對(duì)應(yīng)的取值；初始文本內(nèi)容，<textarea>標(biāo)簽的初始文本內(nèi)容，默認(rèn)可以為空，如果有初始值，則頁(yè)面顯示時(shí)會(huì)顯示該值。面板容器面板容器可以定義一個(gè)區(qū)域，該區(qū)域中可放置相關(guān)的表單元素，形成一個(gè)內(nèi)容相關(guān)區(qū)域，方便用戶理解輸入。使用<fieldset>標(biāo)簽定義面板容器，可以使用<legend>標(biāo)簽指定該區(qū)域的標(biāo)題。2025/5/21《Web程序設(shè)計(jì)》40<fieldset><legend>標(biāo)題文本</legend>

表單元素項(xiàng)</fieldset>參數(shù)說(shuō)明：標(biāo)題文本，定義區(qū)域的標(biāo)題文本；表單元素項(xiàng)，定義該區(qū)域內(nèi)放置的表單元素項(xiàng)。示例2025/5/21《Web程序設(shè)計(jì)》41<h3>報(bào)名信息登記</h3><form><fieldset><legend>個(gè)人基本信息</legend>姓名：<inputtype="text"name="username"><br/>性別：<inputtype="radio"name="gender">男<inputtype="radio"name="gender">女<br/>出生年月：<inputtype="text"name="birth"placeholder="yyyy-MM"><br/>身份證號(hào)：<inputtype="text"name="id"><br/></fieldset></form>常用標(biāo)簽--框架框架是HTML中的一種經(jīng)典布局方法，可以將HTML頁(yè)面劃分為多個(gè)區(qū)域，每個(gè)區(qū)域顯示不同的內(nèi)容。采用框架后，每個(gè)區(qū)域定義不同的頁(yè)面，可以實(shí)現(xiàn)某個(gè)區(qū)域的頁(yè)面按需跳轉(zhuǎn)、刷新等。2025/5/21《Web程序設(shè)計(jì)》42框架集框架集采用<frameset>標(biāo)簽定義，實(shí)際上定義的是一個(gè)框架的布局，其中包含的區(qū)域使用<frame>標(biāo)簽定義。2025/5/21《Web程序設(shè)計(jì)》43<framesetrows=”多行設(shè)置”cols=”多列設(shè)置”><framesrc=”頁(yè)面url”></frame><framesrc=”頁(yè)面url”></frame></frameset>參數(shù)說(shuō)明：多行設(shè)置，設(shè)置該框架包含幾行子框架，指定子框架的行高，高度值可以是像素值、百分比；多列設(shè)置，設(shè)置該框架包含幾列子框架，指定子框架的列寬，高度值可以是像素值、百分比；頁(yè)面url，設(shè)置該子框架的頁(yè)面url。2025/5/21《Web程序設(shè)計(jì)》44<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>框架示例</title></head><framesetrows="200,*"><framesrc="top.html"></frame><framesetcols="20%,*"><framesrc="left.html"></frame><framesrc="main.html"></frame></frameset></frameset></html><frame>標(biāo)簽還定義了一些屬性，用于設(shè)置框架與子框架的樣式2025/5/21《Web程序設(shè)計(jì)》45屬性描述取值frameborder定義是否顯示框架周?chē)倪吙?|1，分別表示無(wú)邊框或有邊框marginheight定義框架上方和下方的邊距像素值marginwidth定義框架左側(cè)和右側(cè)的邊距像素值name定義了框架的名稱(chēng)，允許作為表單提交、超鏈接的target自定義值noresize定義框架不支持大小調(diào)整noresizescrolling定義框架中是否顯示滾動(dòng)條yes：一直顯示滾動(dòng)條no：一直不顯示滾動(dòng)條auto：根據(jù)內(nèi)容決定內(nèi)嵌框架內(nèi)嵌框架是允許在一個(gè)頁(yè)面中嵌入一個(gè)子框架(或者稱(chēng)窗口)，該子框架中指定顯示另一個(gè)頁(yè)面，通過(guò)這種形式實(shí)現(xiàn)網(wǎng)頁(yè)的嵌入。使用<iframe>定義一個(gè)內(nèi)嵌的子框架。2025/5/21《Web程序設(shè)計(jì)》46<iframesrc=”頁(yè)面url”屬性=”屬性值”></iframe>參數(shù)說(shuō)明：頁(yè)面url，指定嵌入的頁(yè)面url；屬性，定義iframe的控制屬性，例如是否顯示邊框、滾動(dòng)條等；屬性值，設(shè)置該屬性的值。<iframe>示例2025/5/21《Web程序設(shè)計(jì)》47<h3>iframe示例</h3><p><ahref="article1.html"target="win">文章1</a><ahref="article2.html"target="win">文章2</a><ahref="article3.html"target="win">文章3</a><ahref="article4.html"target="win">文章4</a><ahref="article5.html"target="win">文章5</a></p><p><iframename="win"src=""width="600"height="300"></iframe></p>常用標(biāo)簽--多媒體網(wǎng)頁(yè)中的多媒體通常是指圖片、音樂(lè)、視頻和動(dòng)畫(huà)。目前瀏覽器已能支持多種格式的媒體信息。文件（image)音頻（audio）2025/5/21《Web程序設(shè)計(jì)》48<imgsrc=“圖片url”alt=“圖片不能顯示時(shí)的替代文本”></img><audiocontrols><sourcesrc=”音頻url”type=”音頻類(lèi)型”></audio>參數(shù)說(shuō)明：src，定義了音頻文件的來(lái)源；type，定義了音頻文件的類(lèi)型，主要有audio/mpeg、audio/ogg、audio/wav。視頻<embed>標(biāo)簽可以在HTML頁(yè)面中嵌入多媒體信息，需要瀏覽器支持flash特性，否則無(wú)法顯示。<object>標(biāo)簽也可以在HTML頁(yè)面中嵌入多媒體信息HTML5中引入了一個(gè)新的視頻標(biāo)簽<video>，可以嵌入視頻或影片2025/5/21《Web程序設(shè)計(jì)》49<videowidth=””height=””controls><sourcesrc=””type=””/>......</video>主要內(nèi)容2025/5/21《Web程序設(shè)計(jì)》501HTML簡(jiǎn)介2基本語(yǔ)法3常用標(biāo)簽4HTML5新特性語(yǔ)義化標(biāo)簽HTML5提供的語(yǔ)義化標(biāo)簽使標(biāo)簽本身具有一定的語(yǔ)義含義，使頁(yè)面有良好的結(jié)構(gòu)，頁(yè)面元素有含義，能夠讓人和搜索引擎都容易理解。少用無(wú)語(yǔ)義的div、span標(biāo)簽等，鼓勵(lì)使用HTML5中新增的較多強(qiáng)語(yǔ)義化標(biāo)簽；

不要使用樣式化標(biāo)簽，如font、b等，應(yīng)使用CSS實(shí)現(xiàn)樣式；

盡量使用strong標(biāo)簽加強(qiáng)強(qiáng)調(diào)，em標(biāo)簽設(shè)置斜體

表格應(yīng)使用規(guī)范標(biāo)簽：標(biāo)題要用caption，表頭部分用thead包圍，主體部分用tbody包圍，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開(kāi)，表頭用th，單元格用td；

表單區(qū)域要用fieldset標(biāo)簽包圍起來(lái)

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論