《html基礎(chǔ)常識(shí)》課件

HTML基礎(chǔ)常識(shí)HTML是網(wǎng)頁(yè)的基礎(chǔ)，用于構(gòu)建網(wǎng)頁(yè)的結(jié)構(gòu)和內(nèi)容。它是一種標(biāo)記語(yǔ)言，使用標(biāo)簽來(lái)定義文本、圖像、鏈接和其他網(wǎng)頁(yè)元素。HTML簡(jiǎn)介超文本標(biāo)記語(yǔ)言HTML是用于創(chuàng)建網(wǎng)頁(yè)的標(biāo)準(zhǔn)標(biāo)記語(yǔ)言，由W3C（萬(wàn)維網(wǎng)聯(lián)盟）制定。網(wǎng)頁(yè)結(jié)構(gòu)HTML使用標(biāo)簽定義網(wǎng)頁(yè)的內(nèi)容，這些標(biāo)簽指示瀏覽器如何顯示內(nèi)容。網(wǎng)頁(yè)內(nèi)容HTML可以包含文本、圖像、視頻、音頻和其他內(nèi)容，以創(chuàng)建豐富多彩的網(wǎng)頁(yè)。易學(xué)易用HTML語(yǔ)言結(jié)構(gòu)簡(jiǎn)單，語(yǔ)法清晰，易于學(xué)習(xí)和使用。HTML文檔結(jié)構(gòu)1DOCTYPE聲明告訴瀏覽器文檔類(lèi)型2HTML標(biāo)簽文檔根元素3頭部（Head）元數(shù)據(jù)4主體（Body）可見(jiàn)內(nèi)容HTML文檔結(jié)構(gòu)類(lèi)似于樹(shù)狀結(jié)構(gòu)，由根節(jié)點(diǎn)HTML開(kāi)始。頭部包含元數(shù)據(jù)，例如標(biāo)題和字符集。主體包含瀏覽器顯示的所有可見(jiàn)內(nèi)容。HTML標(biāo)簽簡(jiǎn)介標(biāo)簽的組成標(biāo)簽由一對(duì)尖括號(hào)包圍，例如：<p>標(biāo)簽的屬性標(biāo)簽可以包含屬性，用于指定標(biāo)簽的額外信息，例如：<imgsrc="...">標(biāo)簽的嵌套標(biāo)簽可以互相嵌套，形成文檔的結(jié)構(gòu)，例如：<p><ahref="...">鏈接</a></p>標(biāo)簽的語(yǔ)義標(biāo)簽代表網(wǎng)頁(yè)內(nèi)容的特定含義，例如：<h1>標(biāo)題</h1>HTML標(biāo)簽屬性11.屬性名稱(chēng)屬性名稱(chēng)通常是英文單詞，例如href、src、alt等。22.等號(hào)屬性名稱(chēng)后面緊跟一個(gè)等號(hào)(=)，用于連接屬性名稱(chēng)和屬性值。33.屬性值屬性值通常用雙引號(hào)("")括起來(lái)，表示屬性的具體內(nèi)容。44.屬性作用屬性用于為標(biāo)簽提供額外的信息，例如鏈接地址、圖片路徑等。常用HTML標(biāo)簽標(biāo)題標(biāo)簽定義網(wǎng)頁(yè)標(biāo)題，例如H1,H2,H3等。不同的標(biāo)題標(biāo)簽會(huì)顯示不同的文字大小和樣式。段落標(biāo)簽表示網(wǎng)頁(yè)中的一個(gè)段落，使用<p>標(biāo)簽。每個(gè)段落之間默認(rèn)會(huì)空一行。列表標(biāo)簽用于創(chuàng)建列表，包括無(wú)序列表<ul>和有序列表<ol>。鏈接標(biāo)簽定義超鏈接，使用<a>標(biāo)簽。標(biāo)題標(biāo)簽H1標(biāo)簽H1標(biāo)簽用于定義頁(yè)面最重要的標(biāo)題。它在頁(yè)面結(jié)構(gòu)中扮演著重要的角色，并對(duì)搜索引擎優(yōu)化(SEO)有重要影響。H1標(biāo)簽代碼示例使用<h1>和</h1>標(biāo)簽來(lái)包圍您的標(biāo)題文本。例如，<h1>歡迎來(lái)到我的網(wǎng)站</h1>會(huì)在頁(yè)面上創(chuàng)建一個(gè)名為“歡迎來(lái)到我的網(wǎng)站”的大標(biāo)題。段落標(biāo)簽段落標(biāo)簽作用段落標(biāo)簽用于將文本劃分為不同的段落。段落間距瀏覽器會(huì)自動(dòng)在段落之間添加間距。段落內(nèi)容段落標(biāo)簽內(nèi)可以包含各種文本內(nèi)容，包括文字、圖像和鏈接。列表標(biāo)簽無(wú)序列表使用ul標(biāo)簽創(chuàng)建無(wú)序列表，使用li標(biāo)簽定義列表項(xiàng)。例如，<ul><li>item1</li><li>item2</li></ul>有序列表使用ol標(biāo)簽創(chuàng)建有序列表，使用li標(biāo)簽定義列表項(xiàng)。例如，<ol><li>item1</li><li>item2</li></ol>定義列表使用dl標(biāo)簽創(chuàng)建定義列表，使用dt標(biāo)簽定義術(shù)語(yǔ)，使用dd標(biāo)簽定義描述。例如，<dl><dt>術(shù)語(yǔ)</dt><dd>描述</dd></dl>鏈接標(biāo)簽定義鏈接鏈接標(biāo)簽使用``標(biāo)簽定義，用于在網(wǎng)頁(yè)中創(chuàng)建指向其他網(wǎng)頁(yè)或文件的鏈接。語(yǔ)法結(jié)構(gòu)鏈接標(biāo)簽的語(yǔ)法結(jié)構(gòu)如下：`鏈接文本`，其中`href`屬性指定鏈接的目標(biāo)地址，`鏈接文本`是用戶(hù)在網(wǎng)頁(yè)上看到的文本。鏈接類(lèi)型鏈接可以指向其他網(wǎng)頁(yè)、文件、電子郵件地址、錨點(diǎn)等，根據(jù)鏈接的目標(biāo)不同，使用不同的地址格式。示例代碼例如，`百度`創(chuàng)建一個(gè)指向百度網(wǎng)站的鏈接。圖像標(biāo)簽圖像標(biāo)簽語(yǔ)法使用<img>標(biāo)簽插入圖像。<img>標(biāo)簽是空標(biāo)簽，沒(méi)有閉合標(biāo)簽。<img>標(biāo)簽有src屬性，用來(lái)指定圖像文件的路徑。圖像標(biāo)簽屬性alt屬性是圖像標(biāo)簽的可選屬性，用來(lái)描述圖像內(nèi)容。alt屬性的內(nèi)容在圖像無(wú)法顯示時(shí)會(huì)被顯示，也可以作為圖像的替代文本，方便搜索引擎理解圖像內(nèi)容。圖像標(biāo)簽示例例如，<imgsrc="image.jpg"alt="圖片描述"/>，將插入名為image.jpg的圖像，并用“圖片描述”作為替代文本。HTML文本格式化HTML文本格式化，是指在網(wǎng)頁(yè)中對(duì)文本進(jìn)行格式化，使其更具可讀性和美觀性。1加粗使用<B></B>標(biāo)簽2斜體使用<I></I>標(biāo)簽3下劃線使用<U></U>標(biāo)簽4刪除線使用<S></S>標(biāo)簽5上標(biāo)使用<SUP></SUP>標(biāo)簽HTML文本格式化標(biāo)簽可以組合使用，例如可以將一個(gè)文本同時(shí)加粗和斜體。HTML表格表格結(jié)構(gòu)表格使用table標(biāo)簽定義，由tr標(biāo)簽定義行，td標(biāo)簽定義單元格。表格標(biāo)題表格標(biāo)題使用th標(biāo)簽定義，位于表格的第一行，通常居中顯示。表格邊框表格邊框通過(guò)border屬性設(shè)置，可以定義邊框顏色和寬度。表格單元格單元格可以包含文本、圖像和其他HTML內(nèi)容。HTML表單1定義表單HTML表單用于收集用戶(hù)輸入信息，例如姓名、電子郵件地址或密碼。2表單元素表單包含各種元素，例如文本框、密碼框、下拉列表、單選按鈕和復(fù)選框，以便用戶(hù)輸入。3提交表單表單數(shù)據(jù)通過(guò)提交按鈕發(fā)送到服務(wù)器，由服務(wù)器處理并存儲(chǔ)用戶(hù)提供的信息。HTML表單元素文本輸入文本輸入框用于收集用戶(hù)輸入的文本信息，例如姓名、地址、電子郵件等。密碼輸入密碼輸入框用于收集用戶(hù)輸入的敏感信息，例如密碼，并將其隱藏以確保安全性。單選按鈕單選按鈕提供多個(gè)選項(xiàng)，用戶(hù)只能選擇其中一個(gè)。復(fù)選框復(fù)選框允許用戶(hù)從多個(gè)選項(xiàng)中選擇一個(gè)或多個(gè)。HTML表單屬性name屬性為表單元素指定一個(gè)名稱(chēng)，以便在提交表單時(shí)將數(shù)據(jù)發(fā)送到服務(wù)器。每個(gè)表單元素都應(yīng)該有一個(gè)唯一的名稱(chēng)，以便服務(wù)器可以識(shí)別每個(gè)值。value屬性為表單元素設(shè)置默認(rèn)值。例如，在文本輸入框中，value屬性可以設(shè)置一個(gè)默認(rèn)的文本值，以便用戶(hù)可以輕松開(kāi)始輸入。type屬性指定表單元素的類(lèi)型，例如文本輸入框、密碼框、復(fù)選框、單選按鈕、下拉列表等。不同的表單元素類(lèi)型有不同的功能和用戶(hù)交互方式。id屬性為表單元素提供一個(gè)唯一的標(biāo)識(shí)符，以便可以通過(guò)JavaScript或CSS選擇和操作該元素。id屬性對(duì)于使用JavaScript動(dòng)態(tài)修改表單元素非常有用。HTML框架定義框架HTML框架可以將網(wǎng)頁(yè)分割成多個(gè)區(qū)域。每個(gè)區(qū)域可以獨(dú)立顯示不同的內(nèi)容?？蚣芸梢詾橛脩?hù)提供更直觀的瀏覽體驗(yàn)，并將相關(guān)內(nèi)容整合到一個(gè)頁(yè)面?？蚣芙Y(jié)構(gòu)框架結(jié)構(gòu)使用frameset標(biāo)簽定義，并通過(guò)frame標(biāo)簽設(shè)定每個(gè)框架區(qū)域的大小和位置?？蚣軜?biāo)簽通常包含src屬性，用于指定每個(gè)框架區(qū)域要加載的頁(yè)面。HTML顏色11.十六進(jìn)制顏色代碼例如：#FF0000表示紅色，#00FF00表示綠色，#0000FF表示藍(lán)色。22.RGB顏色模型使用紅、綠、藍(lán)三原色來(lái)表示顏色，例如：rgb(255,0,0)表示紅色。33.HSL顏色模型使用色調(diào)、飽和度和亮度來(lái)表示顏色，例如：hsl(0,100%,50%)表示紅色。44.預(yù)定義顏色名稱(chēng)HTML支持一些預(yù)定義的顏色名稱(chēng)，例如：red、green、blue。HTML樣式樣式表CSS（層疊樣式表）用于定義網(wǎng)頁(yè)的外觀和格式。內(nèi)部樣式表在<style>標(biāo)簽中嵌入CSS規(guī)則，適用于單個(gè)頁(yè)面。外部樣式表將CSS規(guī)則存儲(chǔ)在單獨(dú)的文件中，可以跨多個(gè)頁(yè)面使用。樣式屬性使用屬性和值控制文本、顏色、大小、間距等。HTML布局1塊級(jí)元素例如：div、p、h1-h62行內(nèi)元素例如：span、a、img3浮動(dòng)布局元素脫離文檔流，可實(shí)現(xiàn)更靈活的布局4定位布局通過(guò)position屬性控制元素位置，例如：static、relative、absolute、fixedHTML布局是網(wǎng)站布局的基礎(chǔ)，通過(guò)不同的布局方法，可以實(shí)現(xiàn)各種各樣的網(wǎng)頁(yè)效果。HTML語(yǔ)義化可訪問(wèn)性使用語(yǔ)義化標(biāo)簽，讓網(wǎng)頁(yè)內(nèi)容更易于理解和訪問(wèn)，例如使用<article>和<aside>標(biāo)簽。搜索引擎優(yōu)化語(yǔ)義化標(biāo)簽可以幫助搜索引擎更好地理解網(wǎng)頁(yè)內(nèi)容，從而提高網(wǎng)站排名。代碼可讀性語(yǔ)義化標(biāo)簽可以使代碼更易于閱讀和維護(hù)，方便開(kāi)發(fā)人員理解網(wǎng)頁(yè)結(jié)構(gòu)。移動(dòng)設(shè)備友好語(yǔ)義化標(biāo)簽可以使網(wǎng)頁(yè)更易于在移動(dòng)設(shè)備上顯示，提升用戶(hù)體驗(yàn)。HTML多媒體音頻和視頻HTML支持音頻和視頻元素，可以輕松地在網(wǎng)頁(yè)上嵌入多媒體內(nèi)容。圖片HTML通過(guò)img標(biāo)簽嵌入圖片，可以調(diào)整圖片大小、添加邊框等。背景音樂(lè)使用音頻標(biāo)簽可以添加背景音樂(lè)，提升用戶(hù)體驗(yàn)。HTML5新特性語(yǔ)義化標(biāo)簽HTML5引入了新的語(yǔ)義化標(biāo)簽，如``、``和``，它們可以更準(zhǔn)確地描述網(wǎng)頁(yè)內(nèi)容，并提高網(wǎng)頁(yè)的可訪問(wèn)性和搜索引擎優(yōu)化。多媒體支持HTML5增強(qiáng)了對(duì)音頻和視頻的支持，簡(jiǎn)化了媒體內(nèi)容的嵌入和播放。它還提供了``標(biāo)簽，用于創(chuàng)建動(dòng)態(tài)圖形和動(dòng)畫(huà)。離線應(yīng)用程序HTML5允許創(chuàng)建能夠在離線狀態(tài)下運(yùn)行的應(yīng)用程序，使用緩存和數(shù)據(jù)庫(kù)API存儲(chǔ)數(shù)據(jù)和邏輯，提高用戶(hù)體驗(yàn)。應(yīng)用程序接口HTML5提供了豐富的API，包括地理位置API、拖放API和Web存儲(chǔ)API，使開(kāi)發(fā)人員能夠構(gòu)建更強(qiáng)大的交互式網(wǎng)頁(yè)應(yīng)用程序。HTML5常用標(biāo)簽11.語(yǔ)義化標(biāo)簽增強(qiáng)網(wǎng)頁(yè)的可讀性和可訪問(wèn)性，例如：header、footer、article、aside。22.多媒體標(biāo)簽簡(jiǎn)化音頻和視頻的嵌入，例如：audio、video。33.表單新元素提供更豐富和直觀的表單元素，例如：datalist、output、keygen。44.離線應(yīng)用允許網(wǎng)站在沒(méi)有網(wǎng)絡(luò)連接的情況下提供服務(wù)，例如：manifest、serviceworker。HTML5語(yǔ)義化標(biāo)簽結(jié)構(gòu)更清晰語(yǔ)義化標(biāo)簽可以更好地描述頁(yè)面內(nèi)容，有利于搜索引擎和屏幕閱讀器理解頁(yè)面結(jié)構(gòu)?？稍L問(wèn)性增強(qiáng)語(yǔ)義化標(biāo)簽可以幫助殘障人士更好地理解頁(yè)面內(nèi)容，提升網(wǎng)站可訪問(wèn)性。代碼更簡(jiǎn)潔語(yǔ)義化標(biāo)簽可以使代碼更易讀，更易維護(hù)，提升開(kāi)發(fā)效率。HTML5多媒體標(biāo)簽音頻標(biāo)簽使用audio標(biāo)簽嵌入音頻文件。視頻標(biāo)簽使用video標(biāo)簽嵌入視頻文件。多媒體屬性添加controls屬性來(lái)顯示默認(rèn)的播放控件。HTML5表單新元素1日期和時(shí)間輸入使用input標(biāo)簽的type屬性設(shè)置date、time或datetime-local，以創(chuàng)建日期或時(shí)間輸入框。2顏色選擇器使用input標(biāo)簽的type屬性設(shè)置color，以創(chuàng)建一個(gè)顏色選擇器。3數(shù)字輸入使用input標(biāo)簽的type屬性設(shè)置number，以創(chuàng)建一個(gè)數(shù)字輸入框，并可以使用min、max和step屬性設(shè)置范圍和步長(zhǎng)。4范圍輸入使用input標(biāo)簽的type屬性設(shè)置range，以創(chuàng)建一個(gè)滑動(dòng)條，用于選擇一個(gè)范圍內(nèi)的值。HTML5離線應(yīng)用緩存數(shù)據(jù)離線應(yīng)用可以存儲(chǔ)數(shù)據(jù)在本地設(shè)備，這樣即使沒(méi)有網(wǎng)絡(luò)連接也可以訪問(wèn)數(shù)據(jù)。無(wú)縫體驗(yàn)用戶(hù)可以在離線狀態(tài)下使用應(yīng)用程序，就像在線一樣，提供流暢的用戶(hù)體驗(yàn)。網(wǎng)絡(luò)切換應(yīng)用可以檢測(cè)網(wǎng)絡(luò)連接狀態(tài)，在網(wǎng)絡(luò)恢復(fù)時(shí)自動(dòng)更新數(shù)據(jù)，確保數(shù)據(jù)同步。HTML5地理位置定位用戶(hù)獲取用戶(hù)設(shè)備的地理位置信息，例如經(jīng)緯度坐標(biāo)。附近搜索根據(jù)用戶(hù)位置，提供附近商店、餐廳、景點(diǎn)等信息。天氣預(yù)報(bào)基于用戶(hù)位置，提供個(gè)性化的天氣預(yù)報(bào)信息。導(dǎo)航服務(wù)提供路線規(guī)劃，引導(dǎo)用戶(hù)到達(dá)目的地。HTML5拖放API拖放操作拖放API允許用戶(hù)通過(guò)拖放操作將數(shù)據(jù)從一個(gè)位置移動(dòng)到另一個(gè)位置。拖放操作可以用于各種場(chǎng)景，例如將文件從一個(gè)文件夾移動(dòng)到另一個(gè)文件夾，將圖像從一個(gè)網(wǎng)站移動(dòng)到另一個(gè)網(wǎng)站，或者將文本從一個(gè)應(yīng)用程序移動(dòng)到另一個(gè)應(yīng)用程序。事件處理拖放API提供了一系列事件，允許您在拖放操作的不同階段執(zhí)行代碼。例如，您可以使用`ondragstart`事件在用戶(hù)開(kāi)始拖動(dòng)元素時(shí)執(zhí)行代碼，使用`ondragover`事件在用戶(hù)將元素拖放到目標(biāo)元素上時(shí)執(zhí)行代碼，使用`ondrop`事件在用戶(hù)將元素放到目標(biāo)元素上時(shí)執(zhí)行代碼。HTML5Web存儲(chǔ)本地存儲(chǔ)Web存儲(chǔ)提供了一種在用戶(hù)瀏覽器中存儲(chǔ)數(shù)據(jù)的機(jī)制。數(shù)據(jù)持久化即使關(guān)閉瀏覽器，存儲(chǔ)的數(shù)據(jù)也會(huì)保留。兩種存儲(chǔ)方式localStorage:存儲(chǔ)的數(shù)據(jù)沒(méi)有過(guò)期時(shí)間sessionStorage:存儲(chǔ)的數(shù)據(jù)僅在當(dāng)前會(huì)話中有效HTML5歷史管理頁(yè)面歷史記錄HTML5提供了一個(gè)新的API來(lái)管理瀏覽器的歷史記錄，允許開(kāi)發(fā)者控制用戶(hù)的瀏覽歷史并進(jìn)行操作，如前進(jìn)和后退等。History對(duì)象History對(duì)象提供了訪問(wèn)瀏覽器歷史記