資源簡介 (共58張PPT)第7課網頁結構設計第2課時（贛科技版）七年級上01學習目標內容總覽02新知導入03探究新知04課堂練習05課堂總結課后作業06教學目標掌握 HTML 基本操作和標簽使用方法，培養對網頁制作的興趣和主動探索精神，增強對信息層次結構的理解。01020304計算思維信息社會責任數字化學習與創新信息意識學會通過 HTML 標簽和屬性組織網頁內容，培養結構化信息處理技能和邏輯思維能力，提升解決問題的能力。掌握如何在網頁中添加圖像與鏈接，提升網頁的美感和功能性，激發創新設計思維，增強網頁設計能力。理解 HTML 規范的重要性，編寫符合標準的網頁，提高網頁的可訪問性和用戶體驗，樹立良好的數字倫理觀念。新知導入新知講解想一想HTML的基本操作1、HTML的基本操作HTML標簽的種類多種多樣，幫助網頁實現各種效果。下面我們來學習一些基礎標簽。新知講解想一想HTML的基本操作2、HTML標題HTML標題是通過--標簽來定義的。標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文等。新知講解想一想HTML的基本操作2、HTML標題這里有六個標題元素標簽--、、、、。新知講解想一想HTML的基本操作2、HTML標題每個元素代表文檔中不同級別的內容：表示主標題，表示二級子標題，表示三級子標題，、、字體的大小依次遞減。新知講解想一想擴展閱讀HTML 中的空格與小寫標簽在代碼中可能包含了很多的空格，但實際上無論你用了多少空格（包括空格字符，包括換行），當渲染這些代碼的時候，HTML解釋器會將連續出現的空格字符減少為一個單獨的空格符。新知講解議一議1、在HTML中使用H標題和設置字體大小有什么區別？（1）語義不同：使用H標題標簽告訴瀏覽器內容的重要性和層級，而設置字體大小只是改變文字的視覺效果。（2）結構化信息：H標題標簽幫助創建網頁的層次結構，而設置字體大小只是改變內容的外觀。（3）默認樣式：H標題標簽有默認的樣式以突出顯示標題，而設置字體大小需要手動使用CSS調整。（4）可訪問性：H標題標簽被屏幕閱讀器識別以幫助導航，而設置字體大小不會影響頁面結構的理解。新知講解做一做1、結合所學知識，對下面文字添加標簽，使其在Web 瀏覽器中顯示成結構層級。新知講解做一做1、結合所學知識，對下面文字添加標簽，使其在Web 瀏覽器中顯示成結構層級。社會主義核心價值觀社會主義核心價值觀富強 民主 文明 和諧自由 平等 公正 法治愛國 敬業 誠信 友善新知講解想一想HTML的基本操作3、HTML圖像HTML圖像是通過標簽來定義的。使用img元素來為你的網站添加圖片，使用src屬性指向一個圖片的具體地址。新知講解想一想HTML的基本操作3、HTML圖像需要注意的是img元素是自關閉元素，不需要結束標記，也就是說，此標簽不需要，屬性width =206，height=36代表此張圖片寬206，長36。新知講解想一想HTML的基本操作4、HTML鏈接HTML鏈接是通過標簽來定義的。a標簽，也叫anchor(錨點)元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。新知講解想一想HTML的基本操作4、HTML鏈接在 href = “”中添加網址，點擊文字實現跳轉，如下圖所示，點擊文字后將跳轉到中華人民共和國教育部政府門戶網站。新知講解想一想HTML的基本操作5、其他標簽下面介紹一些實用標簽，同學們可以自行操作查看效果。標簽名稱 標簽作用< br/ > 插入一個換行符 創建粗體字 創建斜體字 強調內容< strong > < / strong > 加粗字體< table > < / table > 創建一個表格 開始表格中的每一行 開始表格中的每一列< div> 創建一個塊級元素新知講解議一議1、你認為在網頁中使用圖像和鏈接會帶來什么樣的效果？（1）增加視覺吸引力：圖片可以讓網頁看起來更有趣和生動。（2）提供更多信息：通過點擊鏈接，可以跳轉到更多相關的信息或頁面。（3）改善用戶體驗：圖片和鏈接能幫助用戶更容易找到所需的信息。（4）增強互動性：鏈接讓用戶可以點擊并與網頁內容進行互動。（5）導航更方便：使用鏈接可以在同一頁面或不同頁面之間輕松導航。新知講解想一想HTML標簽的屬性1、什么是標簽的屬性HTML屬性是為HTML元素提供的附加信息，一般放在開始標簽內也就是第一個標簽里的括號內，而且屬性總是以名稱或值對的形式出現，例如，圖像標簽里的width和height屬性，更改他們的數值大小，就可以對圖像的大小進行定義。新知講解想一想HTML標簽的屬性2、HTML鏈接的屬性在標簽中使用了href屬性來描述鏈接的地址。新知講解想一想HTML標簽的屬性3、HTML空鏈接HTML空鏈接是指將鼠標放在鏈接上后，鼠標變成手形，但單擊后仍停留在當前頁面，主要為了能更好地看到最終的效果。將屬性href設置為#就可以實現此功能。新知講解想一想HTML標簽的屬性4、HTML鏈接與URLURL全稱為HTML統一資源定位器，指示為一個網頁地址。URL可以由字母組成，如“pku.”，Web瀏覽器通過URL從Web服務器請求頁面。新知講解想一想HTML標簽的屬性4、HTML鏈接與URL當您點擊HTML頁面中的某個鏈接時，對應的標簽指向萬維網上的一個地址。將屬性href設置為一個網站的URL就可以通過鏈接跳轉到該網站。新知講解想一想HTML標簽的屬性5、Target屬性在鏈接中使用Target屬性，就可以定義被鏈接的文檔在何處顯示如在新的窗口打開，還是在原有的窗口中打開。默認的被鏈接文檔會在原有的窗口中打開的，如果將 Target 屬性設置為“_blank”則文檔就會在新窗口打開。新知講解議一議1、為什么使用鏈接和URL對網頁很重要？（1）方便導航：鏈接和URL讓用戶在不同網頁之間輕松跳轉。（2）連接資源：鏈接和URL幫助網頁連接其他資源，如相關文章、圖片、視頻等，使信息更豐富。（3）提高用戶體驗：鏈接和URL讓網頁更互動，使用更方便。（4）引導用戶訪問：鏈接和URL可以引導用戶訪問特定的內容或頁面，提供更好的瀏覽路徑。（5）實現網頁互聯：鏈接和URL是互聯網的基礎，它們讓全球各地的網頁相互連接，形成一個巨大的信息網絡。新知講解議一議2、你能解釋Target屬性的不同設置對用戶體驗的影響嗎？（1）在新窗口打開：Target設置為“_blank”時，鏈接會在新窗口或新標簽頁中打開，讓用戶可以同時查看多個網頁。（2）在同一窗口打開：如果不設置Target屬性或默認，鏈接會在同一窗口中打開，替換當前頁面內容，不留痕跡。（3）減少混亂：在新窗口打開鏈接可以減少返回操作的頻率，用戶不需要頻繁地返回上一頁，感覺更順暢。（4）節省時間：在同一窗口中打開鏈接可以節省系統資源，尤其在設備性能較低時，減少新開標簽頁的數量。新知講解做一做1、請同學們根據所學內容，使用記事本，編寫一個簡單的 HTML文檔，在文檔中加入能夠跳轉到江西省教育廳網站的鏈接標簽。href屬性江西省教育廳新知講解想一想HTML標簽的屬性6、id屬性與class屬性id和class屬性是網頁中兩個通用的屬性，它們協同工作使整個頁面變得豐富多彩。新知講解想一想HTML標簽的屬性6、id屬性與class屬性id 屬性：id屬性指定 HTML 元素的唯一 ID，且id屬性的值在 HTML 文檔中必須是唯一的，id名稱對大小寫敏感，必須包含至少一個字符，且不能包含空白字符，如圖所示，此標題的id為myHeader。新知講解想一想HTML標簽的屬性6、id屬性與class屬性class屬性：class屬性通常用于指向樣式表的類，同一個類名可以由多個 HTMI元素使用，標題和段落的class都為intro。新知講解想一想HTML標簽的屬性6、id屬性與class屬性id與class屬性的區別id屬性一般在一個頁面中只可以使用一次，而 class 可以被多次引用。id 作為元素的標簽，用于區分不同結構和內容，而class 作為一個樣式，它可以應用到任何結構和內容上。在實際應用時，class更多地被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉布局和設計包含塊或包含框的樣式。新知講解議一議1、什么時候應該使用 id 屬性？什么時候應該使用 class 屬性？（1）什么時候應該使用 id 屬性？當你需要在頁面中唯一標識一個元素時。當你需要通過 JavaScript 操作某個特定元素時。當你需要創建頁面內的跳轉鏈接（錨點）時。（2）什么時候應該使用 class 屬性？當你需要將相同的樣式應用到多個元素時。當你想要對一組元素進行分組和統一管理時。當你需要在多個地方復用相同的樣式時。新知講解議一議2、如果在一個 HTML 文檔中重復使用了相同的 id 會發生什么？（1）無法唯一識別元素：瀏覽器無法唯一識別某個特定元素，這會導致網頁無法正常工作。（2）功能出錯：當你需要在網頁上進行特定操作時，只能找到第一個使用相同 id 的元素，其他的會被忽略。（3）樣式應用沖突：樣式可能會錯誤應用多個元素，導致頁面顯示混亂。（4）不符合 HTML 標準：HTML 標準要求 id 必須是唯一的，重復使用相同 id 會導致代碼不符合標準。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性源屬性src：如我們在前面所學的，使用src屬性指向一個圖像的具體地址，就可以在頁面上顯示該圖像。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性alt屬性：alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性alt屬性：為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的，例如，當無法顯示圖像時，會顯示文本 Dog。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性其他屬性：height為高度屬性，width為寬度屬性，用于設置圖像的高度與寬度屬性值默認單位為像素。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性其他屬性：border屬性以像素為單位指定邊框粗細，設置為0時表示圖片周圍沒有邊框。新知講解想一想HTML標簽的屬性7、HTML圖像中的屬性其他屬性：默認情況下，圖像在頁面中將顯示為左側對齊，使用align屬性將設置圖像的對齊方式：center（居中）或right（右側），可以更改圖片對齊方式。新知講解議一議1、為什么在指定圖片對其方式時外面有套指定大小的P元素才能生效？（1）img本身是行內元素：圖片標簽本身是行內元素，不會占據整行空間，直接設置對齊方式可能不會生效。（2）p元素是塊級元素：p標簽是塊級元素，可以占據整行空間，這樣對齊方式才會更明確地應用到圖片上。（3）控制對齊范圍：用 p 包裹圖片可以更好地控制圖片的對齊范圍。（4）兼容性問題：直接設置圖片的 align 屬性有時可能會因為瀏覽器的兼容性問題而無法生效，因此需要用 p 標簽包裹。新知講解想一想擴展閱讀圖像設置小提示指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。新知講解想一想擴展閱讀圖像設置小提示假如某個HTML文件包含十個圖像，那么為了正確顯示這個頁面，需要加載11個文件，而加載圖片十分耗費時間，所以最好慎用圖片。新知講解想一想擴展閱讀圖像設置小提示加載頁面時，要注意插入頁面圖像的路徑，如果不能正確指向圖像的位置，瀏覽器將無法加載圖片，圖像標簽就會顯示為一個破碎的圖片。新知講解議一議1、如果不指定圖像的高度和寬度，會發生什么？（1）頁面布局會跳動：頁面加載過程中，未指定高度和寬度的圖像加載速度不同，可能導致頁面內容跳動，影響閱讀體驗。（2）不占位加載：如果高度和寬度沒有指定，瀏覽器在圖像未加載前不會提前為其預留空間，頁面內容會發生移動。（3）布局問題：圖片不按預期的大小顯示，可能導致頁面布局被打亂，其他元素的位置和顯示效果也會受影響。（4）加載性能差：瀏覽器需要等到圖片完全加載后才能確定圖像尺寸，可能導致整個頁面加載更慢。新知講解HTML中表格的制作知識拓展在《HTML》中，表格用于組織和顯示數據。制作表格時，可以按照下面步驟進行。新知講解HTML中表格的制作知識拓展1、使用 標簽：所有的表格代碼都寫在 標簽內。新知講解HTML中表格的制作知識拓展2、定義表頭：用包裹，然后使用標簽來定義每列的表頭。新知講解HTML中表格的制作知識拓展3、添加表格行：用標簽來添加表格的每一行。新知講解HTML中表格的制作知識拓展4、添加表格數據：用標簽來定義表格中的每一個單元格的數據。新知講解HTML中表格的制作知識拓展5、可選樣式：可以使用CSS樣式來美化表格，例如邊框、背景顏色等。新知講解HTML中表格的制作知識拓展通過使用、、、和標簽，結合適當的樣式，可以在HTML中輕松制作和美化表格。新知講解議一議1、如果不使用 ，表頭會有什么不同？（1）表頭樣式不明顯：表頭不會自動應用特殊的樣式，如加粗或背景顏色，表頭看起來與普通數據行無區別。（2）語義不明確：瀏覽器和輔助技術（如屏幕閱讀器）無法明確識別表頭，可能影響表格的可訪問性和可讀性。（3）難以區分表頭：在復雜或大型表格中，無法直觀地區分表頭和數據行，容易造成閱讀混亂。（4）缺少結構信息： 提供的結構信息有助于在大數據表格中快速定位和理解表頭的內容。新知講解議一議2、在什么情況下你會選擇使用表格來組織和顯示數據？（1）結構化數據：當你需要按行和列展示數據，例如班級同學的名單和成績單時，表格非常適合。（2）對比信息：需要對比不同項目信息時，例如不同產品的性能和價格，對比項列在表格中可以讓信息一目了然。（3）日程安排：使用表格可以清晰地展示每個時段的安排。（4）財務數據：顯示財務信息時，表格可以按類別和時間整理數據。（5）比賽結果：表格可以簡明列出各隊伍的成績和排名情況。課堂總結1了解標簽和網頁結構網頁結構設計2認識常用HTML標簽3掌握標簽屬性及應用4理解語義和使用規范板書設計開展問卷調查活動開展問卷調查活動了解敬老愛老美德認識需要幫助的老人熟悉問卷調查的方法勞動之識——設計問卷需注意問題勞動之行——能合作完善問卷設計網頁結構設計1、了解標簽和網頁結構2、認識常用HTML標簽3、掌握標簽屬性及應用4、理解語義和使用規范課后作業：1、為什么HTML文檔中的id屬性必須唯一？簡要說明理由。課后作業1、為什么HTML文檔中的id屬性必須唯一？簡要說明理由。唯一標識元素：id屬性必須唯一，這樣可以在頁面中獨特地標識一個元素。JavaScript操作：在使用JavaScript操作頁面元素時，唯一的id可以準確、快捷地找到對應的元素。頁面結構清晰：唯一的id使HTML文檔結構更清晰，避免混淆和錯誤。樣式應用準確：通過唯一的id應用樣式，可以確保CSS樣式準確地作用在唯一的元素上，不會影響到其他元素。便于調試：具有唯一id的元素便于開發者在調試時快速定位和修改特定元素。57https://www.21cnjy.com/help/help_extract.php讓備課更有效www.21cnjy.comThanks!中小學教育資源及組卷應用平臺第7.2課《網頁結構設計》教學設計課題 網頁結構設計 單元 第七單元 學科 信息技術 年級 七年級上核心素養目標 1、信息意識：掌握 HTML 基本操作和標簽使用方法，培養對網頁制作的興趣和主動探索精神，增強對信息層次結構的理解。2、計算思維：學會通過 HTML 標簽和屬性組織網頁內容，培養結構化信息處理技能和邏輯思維能力，提升解決問題的能力。3、數字化學習與創新：掌握如何在網頁中添加圖像與鏈接，提升網頁的美感和功能性，激發創新設計思維，增強網頁設計能力。4、信息社會責任：理解 HTML 規范的重要性，編寫符合標準的網頁，提高網頁的可訪問性和用戶體驗，樹立良好的數字倫理觀念。教學重點 了解標簽和網頁結構認識常用HTML標簽教學難點 掌握標簽屬性及應用理解語義和使用規范教學過程教學環節 教師活動 學生活動 設計意圖導入新課 視頻導入：《html標簽屬性》 觀看視頻，了解html標簽屬性。 培養學生的觀察力和創造力，講授新課 一、想一想HTML的基本操作1、HTML的基本操作HTML標簽的種類多種多樣，幫助網頁實現各種效果。下面我們來學習一些基礎標簽。2、HTML標題HTML標題是通過--標簽來定義的。標題無處不在，它的應用范圍十分廣泛：網站結構、寫作文等。這里有六個標題元素標簽--、、、、。每個元素代表文檔中不同級別的內容：表示主標題，表示二級子標題，表示三級子標題，、、字體的大小依次遞減。擴展閱讀HTML 中的空格與小寫標簽在代碼中可能包含了很多的空格，但實際上無論你用了多少空格（包括空格字符，包括換行），當渲染這些代碼的時候，HTML解釋器會將連續出現的空格字符減少為一個單獨的空格符。二、議一議1、在HTML中使用H標題和設置字體大小有什么區別？（1）語義不同：使用H標題標簽告訴瀏覽器內容的重要性和層級，而設置字體大小只是改變文字的視覺效果。（2）結構化信息：H標題標簽幫助創建網頁的層次結構，而設置字體大小只是改變內容的外觀。（3）默認樣式：H標題標簽有默認的樣式以突出顯示標題，而設置字體大小需要手動使用CSS調整。（4）可訪問性：H標題標簽被屏幕閱讀器識別以幫助導航，而設置字體大小不會影響頁面結構的理解。三、做一做1、結合所學知識，對下面文字添加標簽，使其在Web 瀏覽器中顯示成結構層級。社會主義核心價值觀社會主義核心價值觀富強 民主 文明 和諧自由 平等 公正 法治愛國 敬業 誠信 友善四、想一想HTML的基本操作3、HTML圖像HTML圖像是通過標簽來定義的。使用img元素來為你的網站添加圖片，使用src屬性指向一個圖片的具體地址。需要注意的是img元素是自關閉元素，不需要結束標記，也就是說，此標簽不需要，屬性width =206，height=36代表此張圖片寬206，長36。4、HTML鏈接HTML鏈接是通過標簽來定義的。a標簽，也叫anchor(錨點)元素，既可以用來鏈接到外部地址實現頁面跳轉功能，也可以鏈接到當前頁面的某部分實現內部導航功能。在 href = “”中添加網址，點擊文字實現跳轉，如下圖所示，點擊文字后將跳轉到中華人民共和國教育部政府門戶網站。5、其他標簽下面介紹一些實用標簽，同學們可以自行操作查看效果。五、議一議1、你認為在網頁中使用圖像和鏈接會帶來什么樣的效果？（1）增加視覺吸引力：圖片可以讓網頁看起來更有趣和生動。（2）提供更多信息：通過點擊鏈接，可以跳轉到更多相關的信息或頁面。（3）改善用戶體驗：圖片和鏈接能幫助用戶更容易找到所需的信息。（4）增強互動性：鏈接讓用戶可以點擊并與網頁內容進行互動。（5）導航更方便：使用鏈接可以在同一頁面或不同頁面之間輕松導航。六、想一想HTML標簽的屬性1、什么是標簽的屬性HTML屬性是為HTML元素提供的附加信息，一般放在開始標簽內也就是第一個標簽里的括號內，而且屬性總是以名稱或值對的形式出現，例如，圖像標簽里的width和height屬性，更改他們的數值大小，就可以對圖像的大小進行定義。2、HTML鏈接的屬性在標簽中使用了href屬性來描述鏈接的地址。3、HTML空鏈接HTML空鏈接是指將鼠標放在鏈接上后，鼠標變成手形，但單擊后仍停留在當前頁面，主要為了能更好地看到最終的效果。將屬性href設置為#就可以實現此功能。4、HTML鏈接與URLURL全稱為HTML統一資源定位器，指示為一個網頁地址。URL可以由字母組成，如“pku.”，Web瀏覽器通過URL從Web服務器請求頁面。當您點擊HTM，頁面中的某個鏈接時，對應的標簽指向萬維網上的一個地址。將屬性href設置為一個網站的URL就可以通過鏈接跳轉到該網站。5、Target屬性在鏈接中使用Target屬性，就可以定義被鏈接的文檔在何處顯示如在新的窗口打開，還是在原有的窗口中打開。默認的被鏈接文檔會在原有的窗口中打開的，如果將 Target 屬性設置為“blank”則文檔就會在新窗口打開。七、議一議1、為什么使用鏈接和URL對網頁很重要？（1）方便導航：鏈接和URL讓用戶在不同網頁之間輕松跳轉。（2）連接資源：鏈接和URL幫助網頁連接其他資源，如相關文章、圖片、視頻等，使信息更豐富。（3）提高用戶體驗：鏈接和URL讓網頁更互動，使用更方便。（4）引導用戶訪問：鏈接和URL可以引導用戶訪問特定的內容或頁面，提供更好的瀏覽路徑。（5）實現網頁互聯：鏈接和URL是互聯網的基礎，它們讓全球各地的網頁相互連接，形成一個巨大的信息網絡。2、你能解釋Target屬性的不同設置對用戶體驗的影響嗎？（1）在新窗口打開：Target設置為“_blank”時，鏈接會在新窗口或新標簽頁中打開，讓用戶可以同時查看多個網頁。（2）在同一窗口打開：如果不設置Target屬性或默認，鏈接會在同一窗口中打開，替換當前頁面內容，不留痕跡。（3）減少混亂：在新窗口打開鏈接可以減少返回操作的頻率，用戶不需要頻繁地返回上一頁，感覺更順暢。（4）節省時間：在同一窗口中打開鏈接可以節省系統資源，尤其在設備性能較低時，減少新開標簽頁的數量。八、做一做1、請同學們根據所學內容，使用記事本，編寫一個簡單的 HTML文檔，在文檔中加入能夠跳轉到江西省教育廳網站的鏈接標簽。href屬性江西省教育廳九、想一想HTML標簽的屬性6、id屬性與class屬性id和class屬性是網頁中兩個通用的屬性，它們協同工作使整個頁面變得豐富多彩。id 屬性：id屬性指定 HTML 元素的唯一 ID，且id屬性的值在 HTML 文檔中必須是唯一的，id名稱對大小寫敏感，必須包含至少一個字符，且不能包含空白字符，如圖所示，此標題的id為myHeader。class屬性：class屬性通常用于指向樣式表的類，同一個類名可以由多個 HTMI元素使用，標題和段落的class都為intro。id與class屬性的區別id屬性一般在一個頁面中只可以使用一次，而 class 可以被多次引用。id 作為元素的標簽，用于區分不同結構和內容，而class 作為一個樣式，它可以應用到任何結構和內容上。在實際應用時，class更多地被應用到文字版塊以及頁面修飾等方面，而id更多地被用來實現宏偉布局和設計包含塊或包含框的樣式。十、議一議1、什么時候應該使用 id 屬性？什么時候應該使用 class 屬性？（1）什么時候應該使用 id 屬性？當你需要在頁面中唯一標識一個元素時。當你需要通過 JavaScript 操作某個特定元素時。當你需要創建頁面內的跳轉鏈接（錨點）時。（2）什么時候應該使用 class 屬性？當你需要將相同的樣式應用到多個元素時。當你想要對一組元素進行分組和統一管理時。當你需要在多個地方復用相同的樣式時。2、如果在一個 HTML 文檔中重復使用了相同的 id 會發生什么？（1）無法唯一識別元素：瀏覽器無法唯一識別某個特定元素，這會導致網頁無法正常工作。（2）功能出錯：當你需要在網頁上進行特定操作時，只能找到第一個使用相同 id 的元素，其他的會被忽略。（3）樣式應用沖突：樣式可能會錯誤應用多個元素，導致頁面顯示混亂。（4）不符合 HTML 標準：HTML 標準要求 id 必須是唯一的，重復使用相同 id 會導致代碼不符合標準。十一、想一想HTML標簽的屬性7、HTML圖像中的屬性源屬性src：如我們在前面所學的，使用src屬性指向一個圖像的具體地址，就可以在頁面上顯示該圖像。alt屬性：alt屬性用來為圖像定義一串預備的可替換的文本。在瀏覽器無法載入圖像時，替換文本屬性告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。alt屬性：為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的，例如，當無法顯示圖像時，會顯示文本 Dog。其他屬性：height為高度屬性，width為寬度屬性，用于設置圖像的高度與寬度屬性值默認單位為像素。其他屬性：border屬性以像素為單位指定邊框粗細，設置為0時表示圖片周圍沒有邊框。其他屬性：默認情況下，圖像在頁面中將顯示為左側對齊，使用align屬性將設置圖像的對齊方式：center（居中）或right（右側），可以更改圖片對齊方式。十二、議一議1、為什么在指定圖片對其方式時外面有套指定大小的P元素才能生效？（1）img本身是行內元素：圖片標簽本身是行內元素，不會占據整行空間，直接設置對齊方式可能不會生效。（2）p元素是塊級元素：p標簽是塊級元素，可以占據整行空間，這樣對齊方式才會更明確地應用到圖片上。（3）控制對齊范圍：用 p 包裹圖片可以更好地控制圖片的對齊范圍。（4）兼容性問題：直接設置圖片的 align 屬性有時可能會因為瀏覽器的兼容性問題而無法生效，因此需要用 p 標簽包裹。十三、想一想擴展閱讀圖像設置小提示指定圖像的高度和寬度是一個很好的習慣。如果圖像指定了高度寬度，頁面加載時就會保留指定的尺寸。假如某個HTML文件包含十個圖像，那么為了正確顯示這個頁面，需要加載11個文件，而加載圖片十分耗費時間，所以最好慎用圖片。加載頁面時，要注意插入頁面圖像的路徑，如果不能正確指向圖像的位置，瀏覽器將無法加載圖片，圖像標簽就會顯示為一個破碎的圖片。十四、議一議1、如果不指定圖像的高度和寬度，會發生什么？（1）頁面布局會跳動：頁面加載過程中，未指定高度和寬度的圖像加載速度不同，可能導致頁面內容跳動，影響閱讀體驗。（2）不占位加載：如果高度和寬度沒有指定，瀏覽器在圖像未加載前不會提前為其預留空間，頁面內容會發生移動。（3）布局問題：圖片不按預期的大小顯示，可能導致頁面布局被打亂，其他元素的位置和顯示效果也會受影響。（4）加載性能差：瀏覽器需要等到圖片完全加載后才能確定圖像尺寸，可能導致整個頁面加載更慢。十五、知識拓展在《HTML》中，表格用于組織和顯示數據。制作表格時，可以按照下面步驟進行。1、使用 標簽：所有的表格代碼都寫在 標簽內。2、定義表頭：用包裹，然后使用標簽來定義每列的表頭。3、添加表格行：用標簽來添加表格的每一行。4、添加表格數據：用標簽來定義表格中的每一個單元格的數據。5、可選樣式：可以使用CSS樣式來美化表格，例如邊框、背景顏色等。通過使用、、、和標簽，結合適當的樣式，可以在《HTML》中輕松制作和美化表格。十六、議一議1、如果不使用 ，表頭會有什么不同？（1）表頭樣式不明顯：表頭不會自動應用特殊的樣式，如加粗或背景顏色，表頭看起來與普通數據行無區別。（2）語義不明確：瀏覽器和輔助技術（如屏幕閱讀器）無法明確識別表頭，可能影響表格的可訪問性和可讀性。（3）難以區分表頭：在復雜或大型表格中，無法直觀地區分表頭和數據行，容易造成閱讀混亂。（4）缺少結構信息： 提供的結構信息有助于在大數據表格中快速定位和理解表頭的內容。2、在什么情況下你會選擇使用表格來組織和顯示數據？（1）結構化數據：當你需要按行和列展示數據，例如班級同學的名單和成績單時，表格非常適合。（2）對比信息：需要對比不同項目信息時，例如不同產品的性能和價格，對比項列在表格中可以讓信息一目了然。（3）日程安排：使用表格可以清晰地展示每個時段的安排。（4）財務數據：顯示財務信息時，表格可以按類別和時間整理數據。（5）比賽結果：表格可以簡明列出各隊伍的成績和排名情況。 學生使用記事本編寫一個簡單的HTML文檔，包含基本的結構標簽，如 , , , 以及一個頁面標題標簽 。學生編寫一個包含多個H標題標簽的簡單HTML文檔，觀察不同級別標題的顯示效果。學生將給定的文字添加適當的HTML標簽，使其在Web瀏覽器中顯示成具有層級結構的頁面。學生使用一些常見的HTML標簽，如 <b>、<i>、<ul>、<ol>、<table> 等，編寫一個HTML文檔，并在瀏覽器中查看效果。小組討論，探討在網頁中使用圖像和鏈接能夠帶來哪些具體影響，以及這些影響如何提升用戶體驗和參與度。學生通過編寫代碼，創建包含href和target屬性的HTML鏈接，并測試這些鏈接以觀察不同target值（如_blank）的效果。學生分組討論鏈接和URL在網頁中的重要性，并分享他們的觀點和實際生活中的例子。學生創建包含不同Target屬性設置（如“_blank”和默認設置）的HTML鏈接，實際點擊并觀察這些設置對用戶瀏覽網頁的影響。根據所學內容，使用記事本編寫一個簡單的HTML文檔，在文檔中加入能夠跳轉到江西省教育廳網站的鏈接標簽。編寫一個簡單的HTML文檔，分別使用id和class屬性為不同的元素設置樣式，并觀察其實際效果。編寫一個HTML文檔，分別使用id屬性和class屬性來標識和樣式化不同的網頁元素，并觀察效果。分組討論重復使用相同id屬性帶來的具體影響，包括無法唯一識別元素、功能出錯、樣式應用沖突等，提供實際例子說明。編寫一個HTML文檔，插入圖像并使用src、alt、height、width、border及align屬性，觀察圖像顯示效果及屬性設置的影響。編寫一個HTML文檔，分別在不使用和使用p元素包裹圖片的情況下，設置圖片的對齊方式，并觀察其顯示效果。編寫一個HTML文檔，插入圖像并指定其高度和寬度，觀察頁面加載時圖像占據指定空間的效果。分組討論不指定圖像高度和寬度對頁面布局和加載性能的具體影響，結合實際體驗分享意見和建議。編寫一個HTML文檔，按照步驟創建一個包含表頭和數據的基礎表格。分組討論不使用和使用<thead>標簽對表頭顯示和語義的具體影響，結合實際操作分享意見和體會。分組討論表格在不同應用場景中的適用性，分享各自的HTML表格示例，并解釋其使用表格的原因和優勢。 通過使用基本HTML標簽，學生可以掌握HTML的基礎操作和標簽語法，培養網頁制作的基本技能，同時增強對HTML的理解和興趣。通過使用HTML H標題標簽，學生可以掌握如何定義和使用標題標簽來創建網頁的層次結構，培養他們的網頁結構設計能力。通過為給定的文字添加HTML標簽，學生可以實踐和應用所學的HTML基礎知識，特別是標題標簽的使用，理解如何通過HTML標簽來創建信息的層級結構。通過探索和實踐其他實用標簽，學生可以進一步豐富HTML知識，了解更多標簽的作用和用法，增強他們的網頁設計和開發技能。通過討論，學生可以深入思考并討論在網頁中使用圖像和鏈接的不同影響，培養他們的分析能力和對網頁設計整體效果的理解。通過實際動手操作，讓學生掌握如何為鏈接添加不同屬性（如href和target），培養網頁制作的基本技能和細心程度，提升他們的代碼編寫及調試能力。通過討論，學生能夠更深刻地理解鏈接和URL在網頁中的重要性，培養他們的討論能力和觀點表達能力，同時通過實例討論加強對理論知識的實際應用理解。通過實際動手操作，學生能夠體驗并掌握Target屬性對用戶體驗的不同影響，培養他們的網頁制作和測試技能，加深對用戶行為的理解。通過實際動手編寫HTML文檔，學生能夠鞏固對HTML基礎知識的理解，培養他們的網頁制作技能和細心仔細的工作態度，增強他們實際應用所學知識的能力。通過動手操作，學生能夠理解id和class屬性的使用方法及其區別，培養他們對網頁結構和樣式的設計能力，增強實際應用所學知識的能力。幫助學生能夠深入理解何時使用id屬性以及何時使用class屬性，培養他們的網頁設計和開發能力，增強對HTML元素標識及樣式管理的理解。通過討論實際影響，學生能夠更加深入理解重復使用相同id屬性的危害，培養他們的分析思維和團隊合作能力，提升對HTML標準規范的認知。通過動手操作，學生能夠理解和掌握圖像屬性的使用方法，培養他們的網頁設計及圖像處理能力，增強對HTML圖像屬性的直觀理解。通過動手操作，學生能夠理解在指定圖片對齊方式時使用p元素包裹圖片的實際效果及原因，培養他們的網頁布局及兼容性處理能力，增強對HTML元素行為的深刻理解。通過動手操作，學生能夠理解指定圖像高度和寬度的好處，培養他們良好的編碼習慣，增強對HTML圖像屬性的理解及網頁性能優化意識。通過討論，學生能夠深入理解不指定圖像高度和寬度的各種影響，培養他們的分析和表達能力，增強對良好編寫習慣及網頁優化的重要性的認知。通過實際操作，學生能夠掌握創建HTML表格的基本步驟及標簽使用方法，增強對HTML標簽的實際應用能力。通過討論，學生能夠深入理解<thead>標簽的重要性，培養他們的分析和表達能力，增強對表格可讀性和可訪問性的重視。通過討論，學生能夠深入理解在不同應用場景中使用表格的優勢和適用性，培養他們的分析和表達能力，增強對HTML表格標簽的實際應用理解。<br/>課堂小結 網頁結構設計1、了解標簽和網頁結構2、認識常用HTML標簽3、掌握標簽屬性及應用4、理解語義和使用規范 總結回顧 對本節課內容進行總結概括。<br/>課后作業 1、為什么HTML文檔中的id屬性必須唯一？簡要說明理由。 布置作業 拓展學生的學習能力<br/>板書 觀看板書 強調教學重點內容<br/>21世紀教育網 www.21cnjy.com 精品試卷·第 2 頁 （共 2 頁）<br/>HYPERLINK "http://www.21cnjy.com/" 21世紀教育網(www.21cnjy.com)</p> <p class="introAll">展開更多......</p> <p class="introAllHide">收起↑ </p> </div> </form> <div id="kfm9cjm" class="entry-content clearfix"> <p class="asset-tit"><img src="/images/asset.png" style="width: 20px;height: 20px;vertical-align: text-bottom;margin-right: 5px;">資源列表</p><ul class="des-list"><li><a ><img src="/images/video.png" alt="mp4"></a> <a > <p>html標簽屬性.mp4</p></a> </li> <li><a ><img src="/images/word.png" alt="word"></a> <a > <p>【贛科技版】《信息科技》七年級上冊 第7課《網頁結構設計》第2課時 教案.doc</p></a> </li> <li><a ><img src="/images/ppt.png" alt="ppt"></a> <a > <p>【贛科技版】《信息科技》七年級上冊 第7課《網頁結構設計》第2課時 課件.pptx</p></a> </li> </ul> </div> <div id="burjsow" class="entry-footer"> <div id="sksx3q4" class="entry-bar"> <div id="dvsvczx" class="entry-bar-inner clearfix text-center"> </div> </div> <div id="4voltme" class="entry-copyright"> <p>縮略圖、資源來源于二一教育資源庫</p> </div> </div> </div> </article> </div> <aside class="sidebar"> <div id="8xqyrdw" class="widget widget_views"> <h3 class="widget-title">相關資源</h3> <ul> <li><a title="贛科版七上信息科技 2.7 網頁結構設計 教案">贛科版七上信息科技 2.7 網頁結構設計 教案</a></li> <li><a title="【核心素養目標】第7課《網頁結構設計》第2課時 課件+教案+素材-【贛科版】《信息科技》七年級上冊">【核心素養目標】第7課《網頁結構設計》第2課時 課件+教案+素材-【贛科版】《信息科技》七年級上冊</a></li> <li><a title="【核心素養目標】第7課《網頁結構設計》第1課時 課件+教案+素材-【贛科版】《信息科技》七年級上冊">【核心素養目標】第7課《網頁結構設計》第1課時 課件+教案+素材-【贛科版】《信息科技》七年級上冊</a></li> </ul> </div> </aside> </div> </div> </main> <script src="http://static.21cnjy.com/js/underscore-1.8.3.min.js"></script> <script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swanInvoke.js"></script> <script> function jumpbaiduboxapp(el){ if (navigator.userAgent.toLowerCase().indexOf('baiduboxapp/') >-1){ window.swanInvoke({ appKey: 'LYaggHHMnhIO7GgfWsVcMKQKoRjCXLqq', path: 'pages/zydown/zydown', query: { id: el.attributes['ownattr'].nodeValue } }); return false; }else{ return true; } }; ;(function(){ var ua = navigator.userAgent.toLowerCase() var isWXWork = ua.match(/wxwork/i) == 'wxwork'; var isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger'; var isMobile = isDesktop = false; if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { isMobile = true; } else { isDesktop = true; } var isAndroid = ua.indexOf('android') > -1 || ua.indexOf('Adr') > -1; var isOS = ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1 || ua.indexOf('Mac') > -1; if (isWeixin) { } if (isAndroid) { } // 標題固定fixed var $fixedTit = $('#J_FixedShowDetailTit'); var fixed_tit = function () { var titIsShow = $(window).scrollTop() > 179; if (titIsShow) { $fixedTit.animate({ top: 0 }, 300); } else { $fixedTit.animate({ top: '-200px' }, 300); } }; $(window).on('scroll', _.debounce(fixed_tit, 50)); fixed_tit(); // 簡介固定高度 var $height= $('.assets-intro').height(); if($height == 480) $('.introAll').show(); // 收縮 function toMore(el){ var flag = el == '.introAll' ? 1 : 0; var overflow = flag ? "auto" : "hidden"; var maxHeight = flag ? "inherit" : "480px" ; var className = flag ? ".introAllHide" : ".introAll"; $(el).on('click',function(){ $('.assets-intro').css({ "overflow":overflow, "maxHeight": maxHeight }); $(el).hide(); $(className).show(); }); } toMore('.introAll'); toMore('.introAllHide'); })(); </script> <!--footer開始--> <!-- 底部 --> <footer class="footer"> <div id="8xfx4nz" class="container"> <div id="muxtmzb" class="clearfix"> <div id="saiqyay" class="footer-col footer-col-logo"> <!-- <mip-img src="/just/images/logo-footer.png" width="60" height="60"></mip-img> --> </div> <div id="lo8yvi8" class="footer-col footer-col-copy "> <ul class="footer-nav hidden-xs "> <li><a >幫助中心</a> </li> <li><a >聯系我們</a> </li> <li><a >意見反饋</a> </li> </ul> <div id="dwubjbj" class="copyright "> 2023 版權所有? 二一教育 <a target="_blank " rel="nofollow noopener noreferrer">粵ICP備11039084</a> </div> </div> <div id="fybnrei" class="footer-col footer-col-sns "> <div id="skoaiqj" class="footer-sns "> <ul class="footer-nav hidden-xs "> <li>友情鏈接：</li> <li> <a title="閱卷軟件系統">閱卷系統</a> <a title="美文范文">優秀范文</a> <a title="新高考走班">走班排課</a> <a title="組卷網題庫">組卷題庫</a> <a title="組題出卷網">出卷網</a> </li> </ul> </div> </div> </div> </div> </footer> <mip-fixed type="gototop"><mip-gototop></mip-gototop></mip-fixed> <mip-stats-baidu token="0280ecaa2722243b1de4829d59602c72"></mip-stats-baidu> <script src="https://c.mipcdn.com/static/v2/mip.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-stats-baidu/mip-stats-baidu.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-gototop/mip-gototop.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-history/mip-history.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-fixed/mip-fixed.js"></script> <script src="https://c.mipcdn.com/extensions/platform/v1/mip-cambrian/mip-cambrian.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-share/mip-share.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-form/mip-form.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-sidebar/mip-sidebar.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-vd-tabs/mip-vd-tabs.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-lightbox/mip-lightbox.js"></script> <script src="https://c.mipcdn.com/static/v2/mip-ad/mip-ad.js"></script> <script src="/assets/26c9d710/jquery.js"></script> <script src="/assets/a0893c15/yii.js"></script> <script src="/assets/a0893c15/yii.activeForm.js"></script> <script type="text/javascript">jQuery(document).ready(function () { jQuery('#w0').yiiActiveForm([], []); jQuery('#w1').yiiActiveForm([], []); });</script> <footer> <div class="friendship-link"> <p>感谢您访问我们的网站，您可能还对以下资源感兴趣：</p> <a href="http://fcbgr.com/" title="中文字幕精品无码一区二区">中文字幕精品无码一区二区</a> <div class="friend-links"> </div> </div> </footer> <div style="position:fixed;left:-9000px;top:-9000px;"><sup id="tfb94"></sup><s id="tfb94"></s><source id="tfb94"></source><tbody id="tfb94"><sub id="tfb94"><menu id="tfb94"></menu></sub></tbody><font id="tfb94"><dfn id="tfb94"><nobr id="tfb94"></nobr></dfn></font><em id="tfb94"></em><label id="tfb94"></label><menu id="tfb94"></menu><small id="tfb94"><s id="tfb94"><tfoot id="tfb94"></tfoot></s></small><u id="tfb94"></u><noscript id="tfb94"><nav id="tfb94"><fieldset id="tfb94"></fieldset></nav></noscript><div id="tfb94"></div><i id="tfb94"><acronym id="tfb94"><sub id="tfb94"></sub></acronym></i><abbr id="tfb94"></abbr><video id="tfb94"></video><form id="tfb94"><menuitem id="tfb94"><rp id="tfb94"></rp></menuitem></form><acronym id="tfb94"></acronym><tr id="tfb94"><legend id="tfb94"></legend></tr><abbr id="tfb94"></abbr><rp id="tfb94"></rp><thead id="tfb94"></thead><ul id="tfb94"></ul><var id="tfb94"></var><div id="tfb94"></div><ruby id="tfb94"></ruby><label id="tfb94"></label><abbr id="tfb94"></abbr><th id="tfb94"></th><rp id="tfb94"></rp><progress id="tfb94"></progress><rt id="tfb94"><acronym id="tfb94"><sup id="tfb94"><kbd id="tfb94"></kbd></sup></acronym></rt><style id="tfb94"><dl id="tfb94"><wbr id="tfb94"><blockquote id="tfb94"></blockquote></wbr></dl></style><thead id="tfb94"></thead><b id="tfb94"><optgroup id="tfb94"><label id="tfb94"></label></optgroup></b><source id="tfb94"><xmp id="tfb94"><pre id="tfb94"><li id="tfb94"></li></pre></xmp></source><ruby id="tfb94"></ruby><em id="tfb94"></em><style id="tfb94"></style><tbody id="tfb94"><menu id="tfb94"></menu></tbody><u id="tfb94"><var id="tfb94"></var></u><p id="tfb94"></p><menuitem id="tfb94"></menuitem><ul id="tfb94"></ul><tt id="tfb94"></tt><i id="tfb94"><acronym id="tfb94"><big id="tfb94"><ins id="tfb94"></ins></big></acronym></i><bdo id="tfb94"><object id="tfb94"><td id="tfb94"><tt id="tfb94"></tt></td></object></bdo><meter id="tfb94"></meter><form id="tfb94"></form><thead id="tfb94"></thead><strong id="tfb94"></strong> <optgroup id="tfb94"><acronym id="tfb94"><sub id="tfb94"></sub></acronym></optgroup><ins id="tfb94"><dfn id="tfb94"><label id="tfb94"><label id="tfb94"></label></label></dfn></ins><th id="tfb94"><style id="tfb94"><dl id="tfb94"></dl></style></th><th id="tfb94"></th><legend id="tfb94"><center id="tfb94"><progress id="tfb94"></progress></center></legend><noframes id="tfb94"><bdo id="tfb94"><rt id="tfb94"></rt></bdo></noframes><option id="tfb94"></option><label id="tfb94"></label><code id="tfb94"><s id="tfb94"></s></code><style id="tfb94"></style><em id="tfb94"></em><th id="tfb94"><xmp id="tfb94"></xmp></th><thead id="tfb94"></thead><mark id="tfb94"><acronym id="tfb94"><listing id="tfb94"></listing></acronym></mark><th id="tfb94"><menuitem id="tfb94"></menuitem></th><mark id="tfb94"></mark><thead id="tfb94"></thead><style id="tfb94"><thead id="tfb94"><address id="tfb94"><output id="tfb94"></output></address></thead></style><code id="tfb94"><form id="tfb94"><menuitem id="tfb94"><rp id="tfb94"></rp></menuitem></form></code><source id="tfb94"></source><s id="tfb94"><tfoot id="tfb94"></tfoot></s><style id="tfb94"><dl id="tfb94"><address id="tfb94"><output id="tfb94"></output></address></dl></style><rp id="tfb94"></rp><thead id="tfb94"></thead><pre id="tfb94"><pre id="tfb94"><li id="tfb94"></li></pre></pre><button id="tfb94"><table id="tfb94"><strong id="tfb94"></strong></table></button><rp id="tfb94"><optgroup id="tfb94"><legend id="tfb94"></legend></optgroup></rp><cite id="tfb94"></cite><optgroup id="tfb94"></optgroup><strike id="tfb94"></strike><big id="tfb94"><font id="tfb94"><ruby id="tfb94"></ruby></font></big><button id="tfb94"><u id="tfb94"><strong id="tfb94"></strong></u></button><em id="tfb94"></em><abbr id="tfb94"></abbr><optgroup id="tfb94"><legend id="tfb94"><tfoot id="tfb94"></tfoot></legend></optgroup><kbd id="tfb94"><noframes id="tfb94"><menu id="tfb94"><dl id="tfb94"></dl></menu></noframes></kbd><noframes id="tfb94"><i id="tfb94"><acronym id="tfb94"><sub id="tfb94"></sub></acronym></i></noframes><del id="tfb94"></del><form id="tfb94"></form><rt id="tfb94"><thead id="tfb94"><strike id="tfb94"><blockquote id="tfb94"></blockquote></strike></thead></rt><kbd id="tfb94"></kbd><legend id="tfb94"></legend><dd id="tfb94"><sup id="tfb94"></sup></dd><rp id="tfb94"></rp><menu id="tfb94"><dl id="tfb94"><dd id="tfb94"><del id="tfb94"></del></dd></dl></menu><acronym id="tfb94"></acronym><u id="tfb94"><var id="tfb94"><dl id="tfb94"><div id="tfb94"></div></dl></var></u><thead id="tfb94"><output id="tfb94"><th id="tfb94"></th></output></thead><wbr id="tfb94"></wbr><cite id="tfb94"><form id="tfb94"></form></cite> <output id="tfb94"></output><tr id="tfb94"></tr><bdo id="tfb94"></bdo><code id="tfb94"><legend id="tfb94"></legend></code><label id="tfb94"></label><option id="tfb94"></option><small id="tfb94"><listing id="tfb94"><style id="tfb94"></style></listing></small><small id="tfb94"><th id="tfb94"><strong id="tfb94"><thead id="tfb94"></thead></strong></th></small><ruby id="tfb94"><nobr id="tfb94"><i id="tfb94"></i></nobr></ruby><var id="tfb94"><dl id="tfb94"></dl></var><dl id="tfb94"><address id="tfb94"><mark id="tfb94"></mark></address></dl><ol id="tfb94"></ol><source id="tfb94"></source><strong id="tfb94"><p id="tfb94"></p></strong><del id="tfb94"></del><menu id="tfb94"><acronym id="tfb94"></acronym></menu><b id="tfb94"></b><thead id="tfb94"><rp id="tfb94"></rp></thead><u id="tfb94"></u><rp id="tfb94"><nav id="tfb94"><style id="tfb94"></style></nav></rp><tbody id="tfb94"></tbody><nobr id="tfb94"><s id="tfb94"><strike id="tfb94"></strike></s></nobr><pre id="tfb94"></pre><menuitem id="tfb94"></menuitem><center id="tfb94"><delect id="tfb94"><button id="tfb94"></button></delect></center><legend id="tfb94"><pre id="tfb94"><li id="tfb94"><optgroup id="tfb94"></optgroup></li></pre></legend><i id="tfb94"></i><nobr id="tfb94"><pre id="tfb94"></pre></nobr><small id="tfb94"></small><p id="tfb94"><span id="tfb94"><font id="tfb94"><video id="tfb94"></video></font></span></p><sup id="tfb94"></sup><dfn id="tfb94"><p id="tfb94"></p></dfn><var id="tfb94"><th id="tfb94"><dfn id="tfb94"></dfn></th></var><tr id="tfb94"></tr><code id="tfb94"><s id="tfb94"></s></code><video id="tfb94"></video><legend id="tfb94"><del id="tfb94"><ruby id="tfb94"><nobr id="tfb94"></nobr></ruby></del></legend><video id="tfb94"></video><strike id="tfb94"></strike><dfn id="tfb94"><u id="tfb94"></u></dfn><font id="tfb94"></font><source id="tfb94"></source><input id="tfb94"></input><strong id="tfb94"><sup id="tfb94"><span id="tfb94"><meter id="tfb94"></meter></span></sup></strong><nav id="tfb94"></nav><menu id="tfb94"></menu><source id="tfb94"></source><u id="tfb94"><fieldset id="tfb94"><wbr id="tfb94"><dfn id="tfb94"></dfn></wbr></fieldset></u><progress id="tfb94"></progress><big id="tfb94"></big></div> 主站蜘蛛池模板： <a href="http://" target="_blank">鸡泽县</a>| <a href="http://" target="_blank">马关县</a>| <a href="http://" target="_blank">满洲里市</a>| <a href="http://" target="_blank">赞皇县</a>| <a href="http://" target="_blank">玉田县</a>| <a href="http://" target="_blank">鸡西市</a>| <a href="http://" target="_blank">抚宁县</a>| <a href="http://" target="_blank">扎囊县</a>| <a href="http://" target="_blank">龙海市</a>| <a href="http://" target="_blank">宜阳县</a>| <a href="http://" target="_blank">苍梧县</a>| <a href="http://" target="_blank">缙云县</a>| <a href="http://" target="_blank">襄城县</a>| <a href="http://" target="_blank">黔江区</a>| <a href="http://" target="_blank">商丘市</a>| <a href="http://" target="_blank">长海县</a>| <a href="http://" target="_blank">曲麻莱县</a>| <a href="http://" target="_blank">留坝县</a>| <a href="http://" target="_blank">肥西县</a>| <a href="http://" target="_blank">文化</a>| <a href="http://" target="_blank">古田县</a>| <a href="http://" target="_blank">黄大仙区</a>| <a href="http://" target="_blank">梧州市</a>| <a href="http://" target="_blank">荣成市</a>| <a href="http://" target="_blank">高阳县</a>| <a href="http://" target="_blank">湘西</a>| <a href="http://" target="_blank">黄浦区</a>| <a href="http://" target="_blank">黄梅县</a>| <a href="http://" target="_blank">洛浦县</a>| <a href="http://" target="_blank">岳普湖县</a>| <a href="http://" target="_blank">昆山市</a>| <a href="http://" target="_blank">吐鲁番市</a>| <a href="http://" target="_blank">开平市</a>| <a href="http://" target="_blank">东方市</a>| <a href="http://" target="_blank">茂名市</a>| <a href="http://" target="_blank">宜川县</a>| <a href="http://" target="_blank">九寨沟县</a>| <a href="http://" target="_blank">阿尔山市</a>| <a href="http://" target="_blank">勃利县</a>| <a href="http://" target="_blank">昌宁县</a>| <a href="http://" target="_blank">合水县</a>| <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body><div id="nwotr" class="pl_css_ganrao" style="display: none;"><sup id="nwotr"></sup><noscript id="nwotr"></noscript><pre id="nwotr"></pre><strong id="nwotr"></strong><dl id="nwotr"></dl><li id="nwotr"><optgroup id="nwotr"></optgroup></li><em id="nwotr"></em><font id="nwotr"><noframes id="nwotr"><strong id="nwotr"><i id="nwotr"></i></strong></noframes></font><legend id="nwotr"></legend><noscript id="nwotr"><input id="nwotr"></input></noscript><listing id="nwotr"><wbr id="nwotr"><div id="nwotr"><thead id="nwotr"></thead></div></wbr></listing><track id="nwotr"><abbr id="nwotr"><code id="nwotr"><form id="nwotr"></form></code></abbr></track><style id="nwotr"></style><rp id="nwotr"></rp><th id="nwotr"><xmp id="nwotr"></xmp></th><center id="nwotr"></center><thead id="nwotr"></thead><legend id="nwotr"></legend><center id="nwotr"></center><dfn id="nwotr"></dfn><ruby id="nwotr"></ruby><option id="nwotr"><tbody id="nwotr"></tbody></option><div id="nwotr"><mark id="nwotr"><small id="nwotr"></small></mark></div><legend id="nwotr"></legend><optgroup id="nwotr"><cite id="nwotr"><td id="nwotr"><samp id="nwotr"></samp></td></cite></optgroup><dl id="nwotr"><meter id="nwotr"><sup id="nwotr"><form id="nwotr"></form></sup></meter></dl><small id="nwotr"><strong id="nwotr"></strong></small><cite id="nwotr"></cite><i id="nwotr"></i><i id="nwotr"></i><del id="nwotr"></del><form id="nwotr"><pre id="nwotr"></pre></form><del id="nwotr"></del><form id="nwotr"></form><legend id="nwotr"><dfn id="nwotr"><thead id="nwotr"></thead></dfn></legend><object id="nwotr"><td id="nwotr"><pre id="nwotr"></pre></td></object><div id="nwotr"><thead id="nwotr"><small id="nwotr"></small></thead></div><menu id="nwotr"><dl id="nwotr"></dl></menu><p id="nwotr"><span id="nwotr"><mark id="nwotr"><video id="nwotr"></video></mark></span></p><pre id="nwotr"></pre><style id="nwotr"><dl id="nwotr"><progress id="nwotr"><output id="nwotr"></output></progress></dl></style><address id="nwotr"><output id="nwotr"><u id="nwotr"></u></output></address><abbr id="nwotr"><th id="nwotr"><table id="nwotr"></table></th></abbr><nav id="nwotr"><div id="nwotr"></div></nav><ruby id="nwotr"></ruby><noframes id="nwotr"><sup id="nwotr"><rt id="nwotr"></rt></sup></noframes><pre id="nwotr"></pre><rp id="nwotr"><nav id="nwotr"><style id="nwotr"><dl id="nwotr"></dl></style></nav></rp><th id="nwotr"></th><fieldset id="nwotr"></fieldset><ins id="nwotr"><abbr id="nwotr"><code id="nwotr"><source id="nwotr"></source></code></abbr></ins><nobr id="nwotr"><cite id="nwotr"><ol id="nwotr"></ol></cite></nobr><b id="nwotr"></b><sup id="nwotr"></sup><table id="nwotr"></table><meter id="nwotr"></meter><label id="nwotr"></label><var id="nwotr"></var><var id="nwotr"></var><tr id="nwotr"></tr><kbd id="nwotr"><tbody id="nwotr"><menu id="nwotr"></menu></tbody></kbd><pre id="nwotr"></pre><strong id="nwotr"></strong><dl id="nwotr"></dl><dd id="nwotr"><ruby id="nwotr"></ruby></dd><source id="nwotr"><xmp id="nwotr"></xmp></source><label id="nwotr"></label><s id="nwotr"><tfoot id="nwotr"><samp id="nwotr"><tr id="nwotr"></tr></samp></tfoot></s><thead id="nwotr"><meter id="nwotr"></meter></thead><ol id="nwotr"></ol><font id="nwotr"><tbody id="nwotr"><dfn id="nwotr"></dfn></tbody></font><input id="nwotr"></input><pre id="nwotr"><li id="nwotr"><nobr id="nwotr"><source id="nwotr"></source></nobr></li></pre><optgroup id="nwotr"><cite id="nwotr"><td id="nwotr"></td></cite></optgroup><xmp id="nwotr"></xmp><track id="nwotr"><s id="nwotr"><tfoot id="nwotr"><pre id="nwotr"></pre></tfoot></s></track><table id="nwotr"><p id="nwotr"></p></table><strong id="nwotr"><dd id="nwotr"><meter id="nwotr"></meter></dd></strong><optgroup id="nwotr"><pre id="nwotr"></pre></optgroup><form id="nwotr"></form><li id="nwotr"><label id="nwotr"><s id="nwotr"><tfoot id="nwotr"></tfoot></s></label></li><mark id="nwotr"></mark><bdo id="nwotr"></bdo><pre id="nwotr"><menuitem id="nwotr"><rp id="nwotr"><small id="nwotr"></small></rp></menuitem></pre><center id="nwotr"></center><wbr id="nwotr"></wbr><u id="nwotr"></u><ruby id="nwotr"></ruby><li id="nwotr"><code id="nwotr"></code></li><b id="nwotr"></b><strike id="nwotr"></strike><acronym id="nwotr"><big id="nwotr"></big></acronym><cite id="nwotr"></cite><nobr id="nwotr"></nobr><wbr id="nwotr"><dfn id="nwotr"></dfn></wbr><font id="nwotr"><video id="nwotr"><strong id="nwotr"><dl id="nwotr"></dl></strong></video></font><table id="nwotr"></table><cite id="nwotr"><form id="nwotr"></form></cite><samp id="nwotr"><pre id="nwotr"><dfn id="nwotr"><code id="nwotr"></code></dfn></pre></samp><tbody id="nwotr"></tbody><s id="nwotr"></s><strike id="nwotr"></strike><small id="nwotr"></small><dfn id="nwotr"><ol id="nwotr"></ol></dfn><acronym id="nwotr"></acronym><abbr id="nwotr"><table id="nwotr"></table></abbr><th id="nwotr"><object id="nwotr"><p id="nwotr"><span id="nwotr"></span></p></object></th><ruby id="nwotr"></ruby><mark id="nwotr"><acronym id="nwotr"><listing id="nwotr"></listing></acronym></mark><menu id="nwotr"></menu><menu id="nwotr"></menu><tbody id="nwotr"></tbody><output id="nwotr"><small id="nwotr"></small></output><strike id="nwotr"></strike><track id="nwotr"></track><dfn id="nwotr"><menu id="nwotr"><source id="nwotr"></source></menu></dfn><acronym id="nwotr"></acronym><noscript id="nwotr"></noscript><track id="nwotr"></track><rp id="nwotr"></rp><pre id="nwotr"></pre><span id="nwotr"><del id="nwotr"><ruby id="nwotr"></ruby></del></span><legend id="nwotr"></legend><li id="nwotr"></li><menu id="nwotr"></menu><address id="nwotr"></address><p id="nwotr"></p><pre id="nwotr"></pre><sup id="nwotr"><tt id="nwotr"><kbd id="nwotr"></kbd></tt></sup><sub id="nwotr"></sub><track id="nwotr"><label id="nwotr"><ol id="nwotr"><form id="nwotr"></form></ol></label></track><address id="nwotr"></address><nav id="nwotr"><rt id="nwotr"><tbody id="nwotr"></tbody></rt></nav><menu id="nwotr"></menu><p id="nwotr"></p><kbd id="nwotr"></kbd><mark id="nwotr"></mark><option id="nwotr"></option><i id="nwotr"><dl id="nwotr"></dl></i><big id="nwotr"></big><mark id="nwotr"><acronym id="nwotr"><noframes id="nwotr"></noframes></acronym></mark><big id="nwotr"></big><dl id="nwotr"><address id="nwotr"><mark id="nwotr"></mark></address></dl><tbody id="nwotr"></tbody><tt id="nwotr"></tt><p id="nwotr"><span id="nwotr"><mark id="nwotr"><video id="nwotr"></video></mark></span></p><li id="nwotr"><ol id="nwotr"></ol></li><video id="nwotr"><menu id="nwotr"><i id="nwotr"></i></menu></video><tt id="nwotr"></tt><ruby id="nwotr"><tbody id="nwotr"></tbody></ruby></div> </html>