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

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