《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第1-9次課：Web前端開發(fā)概述及HTML基礎(chǔ)- 盒子模型、文本與背景_第1頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第1-9次課：Web前端開發(fā)概述及HTML基礎(chǔ)- 盒子模型、文本與背景_第2頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第1-9次課：Web前端開發(fā)概述及HTML基礎(chǔ)- 盒子模型、文本與背景_第3頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第1-9次課：Web前端開發(fā)概述及HTML基礎(chǔ)- 盒子模型、文本與背景_第4頁
《Web前端開發(fā)(HTML5+CSS3+JavaScript)》 教案 嚴(yán)健武 第1-9次課：Web前端開發(fā)概述及HTML基礎(chǔ)- 盒子模型、文本與背景_第5頁
已閱讀5頁，還剩170頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

PAGE16PAGEXXX學(xué)院教案二0二～二0二學(xué)年第學(xué)期課程名稱課程類別￡公共基礎(chǔ)課￡大類平臺課￡通識課R專業(yè)課￡實驗課￡集中實踐課課程性質(zhì)R必修□選修授課專業(yè)及班級任課教師系（教研室）主教材信息（教材名稱、出版社及出版時間）Web前端開發(fā)(HTML5+CSS3+JavaScript)嚴(yán)健武主編中國鐵道出版社2024年8月出版總學(xué)時起始周理論課時數(shù)實驗課時數(shù)習(xí)題課時數(shù)機動48321600W1第1次課：Web前端開發(fā)概述及HTML基礎(chǔ)第次課1課題web前端開發(fā)概述及HTML基礎(chǔ)教學(xué)目標(biāo)與要求：理解Web前端開發(fā)及技術(shù)相關(guān)概念掌握開發(fā)環(huán)境搭建和使用掌握HTML基本結(jié)構(gòu)、HTML編寫規(guī)范掌握HTML常用標(biāo)記及其屬性通過本章節(jié)內(nèi)容的學(xué)習(xí)，能夠使用VSCode制作簡單排版功能的HTML文檔。授課類型(請打√)：理論課R討論課□實驗課□習(xí)題課□上機□輔導(dǎo)□其他□教學(xué)重點：VSCode的安裝和使用HTML基礎(chǔ)標(biāo)記和屬性教學(xué)難點：對靜態(tài)頁面與動態(tài)頁面執(zhí)行過程的理解。圖片浮動教學(xué)方法和手段：教學(xué)方法：課堂講授、實例演示與實操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：教學(xué)內(nèi)容主要包括：Web相關(guān)概念；環(huán)境安裝和使用；HTML結(jié)構(gòu)；HTML常用標(biāo)記及其屬性。一、Web前端開發(fā)概述1.1web前端開發(fā)是什么前端開發(fā)是創(chuàng)建WEB頁面或APP等前端界面呈現(xiàn)給用戶的過程，通過HTML，CSS及JavaScript以及衍生出來的各種技術(shù)、框架、解決方案，來實現(xiàn)互聯(lián)網(wǎng)產(chǎn)品的用戶界面交互。由于Web頁面日益復(fù)雜，不再是簡單的內(nèi)容呈現(xiàn)，而是桌面化軟件的交互方式，及呈現(xiàn)后端化傾向，因此在WEB2.0后，作為獨立前端開發(fā)工程范疇。1.2web前端核心技術(shù)（1）HTML：HyperTextMarkupLanguage的簡寫，通過使用標(biāo)記呈現(xiàn)頁面內(nèi)容。超文本標(biāo)記語言，制作WEB的基礎(chǔ)語言。重點在于內(nèi)容的呈現(xiàn).（2）CSS：CascadingStyleSheets，層疊式樣式表。頁面布局；改變或增強頁面元素的效果，美化頁面。如圖1.1，列表樣式為導(dǎo)航。（3）JavaScript：重點在于是用戶交互。如圖1.2，事件響應(yīng)和數(shù)據(jù)讀寫。圖1.1樣式效果圖1.2用戶交互1.3web工程過程（1）靜態(tài)頁面[HTMLCSSJavaScript]:htm/html；可直接執(zhí)行(雙擊打開)（2）動態(tài)頁面[JSPPHPASP.NET]；不可直接執(zhí)行，服務(wù)器端編譯后執(zhí)行，結(jié)果為html內(nèi)容圖1.3web工作過程1.4Web相關(guān)概念（1）URL:UniformResourceLocator如何定位到文件（資源位置）語法格式：協(xié)議：//域名[/資源路徑和文件名]示例：http(s):///index.html（2）Web服務(wù)器硬件+軟件：提供網(wǎng)站資源訪問圖1.4web服務(wù)器軟件（3）超鏈接包含指向目標(biāo)資源位置的快捷方式，由瀏覽器解析執(zhí)行跳轉(zhuǎn)。定位到網(wǎng)絡(luò)資源的方式：從一個頁面指向另外一個目標(biāo)[頁面]的鏈接關(guān)系，可以指向另外一個網(wǎng)頁或同一頁面的不同位置，也可以是圖片等其他類型文件等。是文件與文件之間的關(guān)聯(lián)方式。圖1.5文字和圖片鏈接1.5Web前端開發(fā)環(huán)境圖1.6開發(fā)工具選擇VSCode的使用下載：/插件使用：1.安裝完畢后，啟動。2.單擊【view】菜單=>【Extension】擴展=>打開擴展面板3.在出現(xiàn)的面板的搜索欄輸入：Chinese，找到擴展插件，單擊【install】進(jìn)行安裝。必要插件：htmltagwrap:alt+w：選擇文本，插入標(biāo)記AutoCloseTag：自動插入閉合標(biāo)記AutoRenameTag：修改標(biāo)記時，自動修改閉合標(biāo)記AutoFileName：自動顯示目錄下的文件提供選擇openinbrowser:在瀏覽器打開創(chuàng)建項目和運行：1.在電腦任意位置創(chuàng)建一個文件夾,如：D:\Web2.打開VSCode，執(zhí)行：【文件】【打開文件夾】，選擇D:\Web.3.在控制工作臺：資源管理器【W(wǎng)EB】新建文件圖標(biāo)輸入文件名和擴展名：雙擊打開文件進(jìn)行編輯。4.輸入標(biāo)記，按ALT+B快捷鍵，在瀏覽器中打開web頁面。本節(jié)目標(biāo)：1.了解本課程學(xué)習(xí)內(nèi)容：H5+CSS3+JS，各自任務(wù)角色2.理解前端開發(fā)的核心任務(wù)3.理解基本概念：靜態(tài)/動態(tài)網(wǎng)頁的工作過程、WEB服務(wù)器、URL和超鏈接的概念4.重點掌握開發(fā)工具的安裝和使用目標(biāo)體現(xiàn)：1.能使用VSCode創(chuàng)建標(biāo)準(zhǔn)結(jié)構(gòu)的HTML文件，并在瀏覽器中打開查看效果、查看源代碼2.VSCode插件的安裝（練習(xí)：下載、安裝及安裝插件）二、HTML基礎(chǔ)2.1HTML標(biāo)準(zhǔn)結(jié)構(gòu)（1）H5文檔標(biāo)識：!DOCTYPE（2）組成：頭部head+主體body（3）meta元數(shù)據(jù)：告知瀏覽器文檔的基本信息；以及如何解析或執(zhí)行頁面渲染；（4）link元素：引入外部文件，如js、css、icon等。（5）style和script：包含額樣式和JS代碼。2.2基礎(chǔ)標(biāo)記每個標(biāo)記有特定含義，由瀏覽器負(fù)責(zé)解析。成對標(biāo)記：標(biāo)題、段落單標(biāo)記：換行、橫線、圖片標(biāo)題h1~h6段落p文檔中一個段落。標(biāo)記前后分行特征：1.可以包含文本和圖片等其他不會自動分行的內(nèi)容；2.段落前后內(nèi)容自動分行；3.具有默認(rèn)的行間距。<p>這是段落1</p><p>這是段落2</p>代碼效果（3）換行br單標(biāo)記，在文本中進(jìn)行換行，與段落的區(qū)別：br前后文本間距小，用于在任意文本中進(jìn)行換行顯示。<!DOCTYPEhtml><html><body><p>這是段落1</p><p>這是段落2</p>這是第1行<br/>這是第2行<p>這是段落中第1行<br/>這是段落中的第2行</p></body></html>代碼效果注意：連續(xù)的空白字符（空格、回車、跳表鍵…），都作為一個空格處理（4）橫線hr單標(biāo)記，簡單的水平線效果，特征：占滿寬度，前后內(nèi)容自動分行。<h3>這是文檔標(biāo)題</h3><hr/><p>這是段落的內(nèi)容</p>代碼效果2.3標(biāo)記屬性作用：描述標(biāo)記的特征，包括元素基本效果，如對齊方式、寬度、高度等。位置：開始標(biāo)記內(nèi)。其他屬性包括：標(biāo)記的標(biāo)識，如ID；標(biāo)記的值，如文本框輸入的值等；以及有class、style、事件監(jiān)聽等。本節(jié)學(xué)習(xí)目的：使用有限的屬性實現(xiàn)簡單的圖文混排。學(xué)習(xí)方法；對比Word文檔的理解來學(xué)習(xí)。暫時記住介紹的屬性。例如：例如，如何實現(xiàn)下面所述效果：寬度50%，紅色的橫線，居中對齊方式段落居中(只有：對齊方式屬性)標(biāo)題居中(只有：對齊方式屬性)顯示圖片：來源、大?。痪又械膱D片屬性語法(均為小寫)單標(biāo)記：<標(biāo)記名屬性名=“屬性值”屬性名=“屬性值”…/>成對標(biāo)記：<標(biāo)記名屬性名=“屬性值”屬性名=“屬性值”…></標(biāo)記名>注意：一個標(biāo)記可以有多個屬性，每個屬性使用空格隔開，屬性值使用雙引號括起。（1）標(biāo)題和段落屬性屬性名：align，表示段落文本的對齊方式取值：left、right、center和justify，分別代表文本在段落中左對齊、右對齊、居中對齊和兩端對齊。示例：段落和標(biāo)題的對齊方式<h1align="left">這是左對齊H1標(biāo)題</h1><h2align="right">這是右對齊H2標(biāo)題</h2><h3align="center">這是居中對齊H3標(biāo)題</h3><palign="left">這是左對齊段落文本</p><palign="right">這是右對齊段落文本</p><palign="center">這是居中對齊段落文本</p>代碼效果兩端對齊效果。<palign=“justify”>段落內(nèi)容-拉伸為滿行</p>注：justify兩端對齊，是指超過一行的文字，這一行文字對齊左右兩端（類似拉伸本行文字，對中文平均分配字符間隔,對英文而言，單詞不會中間斷開），沒有超過一行的，正常顯示.。（2）水平線屬性<hrwidth=“寬度值”size=“大小”color=“顏色值”align=“對齊方式”/>width：寬度，單位為px（像素）或%（百分比），如果使用百分比%，那么是相對父元素的寬度值，當(dāng)前所有的示例父元素都為body，即瀏覽器窗口寬度。size：大小，類似橫線的高度，單位為px。color：橫線的顏色值，單位為英文單詞，如紅色red，灰色gray等；也可以是十六進(jìn)制數(shù)字，如：#ffffff。align：對齊方式，當(dāng)設(shè)置寬度后，可以設(shè)置橫線左對齊、居中對齊（默認(rèn)）和右對齊演示與講解示例：橫線屬性使用<h4>默認(rèn)橫線</h4><hr/><h4>寬度為50%的紅色橫線</h4><hrwidth="50%"color="#ff0000"/><h4>左對齊、寬度為50%、大小為10px的橫線</h4><hrwidth="50%"size="10"color="red"align="left"/>這是橫線后面文字，自動分行了代碼效果（3）圖片屬性img是單標(biāo)記，用于在頁面實現(xiàn)圖片，其語法為：<imgsrc="圖片URL"width="寬度值"height="高度值"/>src：圖片文件位置，可以是絕對位置(網(wǎng)絡(luò)圖片)，也可以是相對位置。width、height屬性：圖片的寬度和高度，如果不設(shè)置則顯示圖片原始大小。通過改變圖片寬度和高度值，可以縮放圖片。單位：px(像素)，也可以是百分比%，注意，使用百分比值時，是相對其父元素的寬度和高度值。align：圖片后續(xù)文本與圖片的對齊方式，默認(rèn)底部對齊；取值為left或right，表示圖片在左邊或右邊浮動，其后續(xù)文本將環(huán)繞圖片。演示與講解示例：顯示原始圖片大小和縮小圖<h4>1.默認(rèn)圖片</h4><imgsrc="baidu.png"/>圖片后面文字，默認(rèn)底部對齊，超出寬度則換行到圖片下方<h4>2.縮小圖片</h4><imgsrc="baidu.png"width="60px"height="60px"/>圖片后面文字，默認(rèn)底部對齊，超出寬度則換行到圖片下方演示與講解示例：顯示左右浮動的圖片<h3>1.圖片左浮動</h3><imgsrc="baidu.png"width="60px"height="60px"align="left"/>圖片后面文字，浮動在圖片左邊<br/>圖片后面文字，浮動在圖片左邊<br/>圖片后面文字，浮動在圖片左邊<br/><h3>2.圖片右浮動</h3><imgsrc="baidu.png"width="60px"height="60px"align="right"/>圖片后面文字，浮動在圖片右邊<br/>圖片后面文字，浮動在圖片右邊<br/>圖片后面文字，浮動在圖片右邊<br/>代碼效果2.4注釋語法格式：<!--注釋內(nèi)容-->2.5HTML文檔編寫規(guī)范1.HTML標(biāo)記是由尖括號包圍的關(guān)鍵字，所有的標(biāo)記以<開始，以>結(jié)束，結(jié)束標(biāo)記前加/。2.單標(biāo)記在結(jié)束符>前，建議加/，形成自我閉合的標(biāo)記，如：<br/>、<hr/>、<img/>3.標(biāo)記可以嵌套，但不要交叉，如：<p><imgsrc=“”/></p><head><titile></head></title>X嵌套的標(biāo)記要考慮實際需要：<p><p>段落中的段落</p></p>沒必要，如果文本需要分行，使用br標(biāo)記段落與標(biāo)題不要相互包含，如果使用標(biāo)題，與段落分開實現(xiàn)4.標(biāo)記不區(qū)分大小寫，但建議全部小寫。5.關(guān)于標(biāo)記的屬性，屬性值一般用雙引號括起。如：<hrcolor=“red”size=“2”>屬性之間是空格隔開6.注意：空格、tab和回車符在HTML中成為”空白字符”，多個空格和回車符將被當(dāng)作一個空白字符處理；空格可以使用： 表示。需要換行使用<br/>標(biāo)記。7.HTML文檔命名規(guī)范文檔擴展名為：html或htm，建議使用：html，如:index.html文檔命名一般使用字母/單詞或拼音，不要使用中文名稱。主頁一般命名為：index.html或default.html綜合實例與練習(xí)根據(jù)教材中給出的素材和效果，使用所學(xué)的內(nèi)容來實現(xiàn)。1.文字標(biāo)題使用標(biāo)題3且居中2.紅色2px橫線3.段落文字縮進(jìn)兩個空格,兩端對齊4.圖片居中,大?。?00*100px5.灰色2px橫線6.底部段落文字居中素材：HTML百度詞條HTML的全稱為超文本標(biāo)記語言，是一種標(biāo)記語言。它包括一系列標(biāo)簽．通過這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。百度一下，你就知道本章目標(biāo)：1.熟悉HTML基本文檔結(jié)構(gòu)，各部分包含的具體內(nèi)容2.掌握基本標(biāo)記含義及其常用屬性：p/br/hr/h1~h6/img（當(dāng)前只要先記?。?.掌握HTML文檔的規(guī)范要求。目標(biāo)體現(xiàn)：按給出的要求，實現(xiàn)簡單的圖文混排效果。創(chuàng)建index.html文件，請實現(xiàn)如圖的效果：1.瀏覽器窗口標(biāo)題欄為：百度搜索。2.顯示標(biāo)題3：百度一下，你就知道3.添加橫線：2px，灰色。4.圖文混排，段落內(nèi)換行，首行縮進(jìn)2字符，圖片寬度為200px,高度為100px且左浮動。素材：百度（Baidu）是擁有強大互聯(lián)網(wǎng)基礎(chǔ)的領(lǐng)先AI公司。百度愿景是：成為最懂用戶，并能幫助人們成長的全球頂級高科技公司?！鞍俣取倍?，來自于八百年前南宋詞人辛棄疾的一句詞：眾里尋他千百度。這句話描述了詞人對理想的執(zhí)著追求。1999年底，身在美國硅谷的李彥宏看到了中國互聯(lián)網(wǎng)及中文搜索引擎服務(wù)的巨大發(fā)展?jié)摿?，抱著技術(shù)改變世界的夢想，他毅然辭掉硅谷的高薪工作，攜搜索引擎專利技術(shù)，于2000年1月1日在中關(guān)村創(chuàng)建了百度公司。擬融入課程思政/勞動教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：分析Web開發(fā)的技術(shù)棧，明確學(xué)習(xí)目標(biāo)和職業(yè)規(guī)劃。教學(xué)后記：這是首次課，學(xué)生比較投入、專注；內(nèi)容較為廣泛、簡單。說明：教案編寫應(yīng)以一次課（一般2學(xué)時）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W1第2次課：格式化文本和段落第次課2課題格式化文本和段落教學(xué)目標(biāo)與要求使用文本格式化標(biāo)簽實現(xiàn)文本效果掌握簡單的特殊符號，如空格掌握段落格式化標(biāo)簽授課類型(請打√)：理論課R討論課□實驗課□習(xí)題課□上機□輔導(dǎo)□其他□教學(xué)重點：文本格式化標(biāo)簽段落格式化教學(xué)難點：圖文排版及格式化教學(xué)方法和手段：教學(xué)方法：課堂講授、實例演示與實操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：教學(xué)內(nèi)容主要包括：特殊符號；文本格式化標(biāo)簽；段落格式化標(biāo)簽。2.1特殊符號應(yīng)用場景：在頁面中如果要輸出HTML保留字符，或者添加無法從鍵盤輸入獲取的字符圖標(biāo)，需要使用到HTML的特殊字符。特殊字符語法格式：&+字符+分號例如大于號：>常用的特殊字符如下圖所示特殊字符應(yīng)用實例（1）段落縮進(jìn)4個空格: 尊敬的領(lǐng)導(dǎo)：<br/>    您好！執(zhí)行效果如下：（2）實現(xiàn)版權(quán)和商標(biāo)代碼：Microsoft®版權(quán)所有©，微軟公司實現(xiàn)數(shù)學(xué)公式代碼：X÷2<2&&y×2>3提示也可以使用輸入法中的特殊符號代替,如：乘除，×÷（如果僅為了顯示，可以中文輸入法＞＜，但在XML文件中，有時是比較運算，只能使用特殊符號表示法，如mybatis中sql映射語句。）其他特殊字符-大全，了解，應(yīng)用：使用字符代替圖標(biāo)/post/html-enerty-code.html2.2文本修飾效果包括：粗體（著重）、斜體（強調(diào)）、下劃線、刪除線；上標(biāo)、下標(biāo)。應(yīng)用實例：實現(xiàn)下圖的文本效果代碼：<!DOCTYPEhtml><html><body><b>粗體</b><br/><strong>著重，類似粗體</strong><br/><i>斜體</i><br/><em>強調(diào)，類似斜體</em><br/><u>下劃線</u><br/><del>刪除線</del><br/>上標(biāo)：X<sup>2</sup><br/>下標(biāo):X<sub>2</sub><br/></body></html>代碼<!DOCTYPEhtml><html><body><p>micosoft<sup>®</sup></p><p>X<sub>1</sub><sup>2</sup>+Y<sub>1</sub><sup>2</sup>=Z<sub>1</sub></p><p>原價：<del>￥1999</del>，當(dāng)前價：<b><u><i>￥99</i></u></b>(粗體、斜體、下劃線)</p></body></html>2.2字體效果包括字體名、字體顏色和大小標(biāo)記語法：<fontface=字體名color=顏色size=大小>文本</font>說明：face：系統(tǒng)安裝的字體名color：單詞|16進(jìn)制（以#為前綴）size：數(shù)字，1-7(不在此范圍則為1,超過7為7)應(yīng)用實例：實現(xiàn)下圖效果素材：榮耀暢玩205000mAh超大電池續(xù)航6.5英寸大屏萊茵護(hù)眼4GB+64GB全網(wǎng)通幻夜黑當(dāng)前價：￥2999，原價￥4999<p><imgsrc="huawei.jpg"align="left"/><fontface="黑體"size="6"color="blue">榮耀暢玩</font>205000mAh超大電池續(xù)航6.5英寸大屏萊茵護(hù)眼4GB+64GB全網(wǎng)通幻夜黑<br/>當(dāng)前價：<u><fontcolor="red"size="5">￥2999</font></u>，原價：<del><i><fontcolor="gray">￥4999</font></i></del><p>2.3段落與排版1.段落縮進(jìn)(長引用)語法格式：<blockquote>縮進(jìn)文字</blockquote>效果：包含的文字縮進(jìn)約5個字母，2.5個漢字距離；可以嵌套；前后分行，類似段落標(biāo)記注意：該標(biāo)記可以嵌套使用，子元素依次縮進(jìn)4個字符。應(yīng)用實例：實現(xiàn)下圖效果實現(xiàn)代碼：2.預(yù)處理標(biāo)記作用：按標(biāo)記內(nèi)原始格式顯示內(nèi)容，如果有其他文本樣式標(biāo)記，則以文本修飾格式顯示。標(biāo)記用法：<pre>文本</pre>應(yīng)用實例：實現(xiàn)下圖效果具體實現(xiàn)：綜合實例，根據(jù)給出的素材，按以下要求實現(xiàn)：1.文字標(biāo)題使用標(biāo)題22.段落：紅色、3號、仿宋字體3.段落文字4.橫線：2px；gray5.標(biāo)題3,：藍(lán)色blue6.圖片200*100px,左浮動，段落文字全部縮進(jìn)2.5個字符。7.標(biāo)題3,藍(lán)色blue8.段落文字9.橫線：2px；gray10.居中段落文字；注冊符號：上標(biāo)、紅色、加粗素材高中數(shù)學(xué)解題方法導(dǎo)引100冊以上團購優(yōu)惠聯(lián)系電話4006186622何家竣著上海大學(xué)出版社編輯推薦不依教科書式的單個知識點羅列，以思想性及解題方法為主線，側(cè)重論述解題思想與方法，在注重通法的前提下，展示一題多解性，讓人耳目一新。作者簡介何家竣，原為上海大學(xué)教師，后辭職專職從事“家教”，主要進(jìn)行高中數(shù)學(xué)教育培訓(xùn)，以實戰(zhàn)著稱。其獨特的高中數(shù)學(xué)學(xué)習(xí)方法及不一樣解題視角與技巧，為他贏得良好的市場口碑，很多市重點學(xué)校的學(xué)生都慕名而來學(xué)習(xí)。版權(quán)所有JD效果：代碼實現(xiàn)<!DOCTYPEhtml><html><body><!--1.文字標(biāo)題使用標(biāo)題22.段落：紅色、3號、仿宋字體3.段落文字4.橫線：2px；gray5.標(biāo)題3：藍(lán)色blue6.圖片100*200px,左浮動，段落文字縮進(jìn)4字符7.標(biāo)題3,藍(lán)色blue8.段落文字9.橫線：2px；gray10.居中段落文字；注冊符號：上標(biāo)、紅色、加粗--><h2>高中數(shù)學(xué)解題方法導(dǎo)引</h2><p><fontface="仿宋"color="red"size="3">100冊以上團購優(yōu)惠聯(lián)系電話4006186622</font></p><p>何家竣著上海大學(xué)出版社</p><hrsize="2"color="gray"/><h3><fontcolor="blue">編輯推薦</font></h3><imgsrc="book.png"width="200px"height="100px"align="left"/><blockquote>不依教科書式的單個知識點羅列，以思想性及解題方法為主線，側(cè)重論述解題思想與方法，在注重通法的前提下，展示一題多解性，讓人耳目一新。</blockquote><br/><br/><br/><h3><fontcolor="blue">作者簡介</font></h3><p>何家竣，原為上海大學(xué)教師，后辭職專職從事“家教”，主要進(jìn)行高中數(shù)學(xué)教育培訓(xùn)，以實戰(zhàn)著稱。其獨特的高中數(shù)學(xué)學(xué)習(xí)方法及不一樣解題視角與技巧，為他贏得良好的市場口碑，很多市重點學(xué)校的學(xué)生都慕名而來學(xué)習(xí)。</p><hrcolor="gray"size="2"/><palign="center">版權(quán)所有JD<fontcolor="red"><sup>®</sup></font></p><p>microsoft®</p><p>X<sub>1</sub><sup>2</sup>+Y<sub>1</sub><sup>2</sup>=Z<sub>1</sub></p>原價：<b><del>￥1999</del></b>，當(dāng)前價：<b><i><u>￥99(粗體、斜體、下劃線)</u></i></b></body></html>本章目標(biāo)：掌握特殊字符輸出：空格、大于、小于、&，注冊和版權(quán)符號。掌握簡單文本格式：粗體、斜體、下劃線、刪除線、上標(biāo)下標(biāo)等的用法；以及字體font樣式屬性理解blockquote和pre標(biāo)記含義及使用目標(biāo)體現(xiàn)：按要求能實現(xiàn)簡單的文本效果。簡單數(shù)學(xué)公式使用：上標(biāo)、下標(biāo)、特殊符號商品正常價格、劃線價格，字體效果實現(xiàn)：粗體、斜體、下劃線、刪除線。簡單文本排版：縮進(jìn)和按原格式輸出擬融入課程思政/勞動教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：掌握基礎(chǔ)知識，多練習(xí)，熟能生巧。創(chuàng)新源自熟練和思考。教學(xué)后記：通過15分鐘的課堂練習(xí)，學(xué)生接收程度不錯，能按要求完成課堂練習(xí)。說明：教案編寫應(yīng)以一次課（一般2學(xué)時）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W2第3次課：列表第次課3課題列表教學(xué)目標(biāo)與要求：掌握列表的分類和應(yīng)用場景掌握無序、有序和定義列表的標(biāo)記，了解它們的屬性和屬性取值。授課類型(請打√)：理論課R討論課□實驗課□習(xí)題課□上機□輔導(dǎo)□其他□教學(xué)重點：無序列表和嵌套列表的應(yīng)用，能夠完成課堂作業(yè)。教學(xué)難點：嵌套列表的使用。教學(xué)方法和手段：教學(xué)方法：課堂講授、實例演示與實操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：教學(xué)內(nèi)容主要包括：無序列表、有序列表和定義列表，以及嵌套列表的使用。授課內(nèi)容：列表主要作用是在頁面列出數(shù)據(jù)項，結(jié)合CSS，可以實現(xiàn)頁面的水平、垂直導(dǎo)航鏈接、商品展示等局部布局效果。1.無序列表無序列表類似Word文檔的符號列表，用于展示對順序不敏感的一組數(shù)據(jù)項，即數(shù)據(jù)項不存在前后順序關(guān)系。其用法如下：<ultype="符號類型">

<litype="符號類型">數(shù)據(jù)項1</li>

<li>數(shù)據(jù)項2</li></ul>用法說明：ul（UnorderList）：表示無序列表，是列表項的容器。標(biāo)記之間只能包含列表項li標(biāo)記，不能有其他標(biāo)記。type屬性表示列表項的符號類型，取值可以為none（無符號）、disc（實心圓，默認(rèn)值）、circle（空心圓）和square（正方形）。Ii（List）：列表項，可以包含文本、圖片、段落和標(biāo)題等標(biāo)記，是一個容器標(biāo)記。注意所有這些內(nèi)容必須放在li之間。ul中的type屬性用于統(tǒng)一設(shè)置各個列表項的符號，但如果個別列表項要設(shè)置不同的符號，那么單獨設(shè)置列表項中的type屬性。表3.1是無序列表的具體應(yīng)用效果。表3.1無序列表示例示例效果<!--默認(rèn)效果--><ul><li>爬行動物</li><li>飛禽類動物</li><li>魚類動物</li><li>家禽類動物</li></ul><!--統(tǒng)一設(shè)置符號類型--><ultype="circle"><li>爬行動物</li><li>飛禽類動物</li><li>魚類動物</li><li>家禽類動物</li></ul><!--統(tǒng)一設(shè)置符號類型，個別項目獨立設(shè)置--><ultype="circle"><li>爬行動物</li><litype="square">飛禽類動物</li><litype="square">魚類動物</li><li>家禽類動物</li></ul>2.有序列表如果數(shù)據(jù)項之間有前后順序，那么通常使用有序列表來展示數(shù)據(jù)項。有序列表類似Word文檔中的編號列表，其用法如下：<oltype=“編號類型”start=“起始編號”><litype=“編號類型”value=“當(dāng)前編號”>列表項</li><li>列表項</li>……</ol>用法說明：ol：OrderList的縮寫，表示有序列表，標(biāo)記之間只能存在列表項標(biāo)記li。type：表示列表項目的編號類型，取值可以為：none（無編號）、1（數(shù)字編號，默認(rèn)值）、A或a（大寫字母或小寫字母編號）、I或i（大寫或小寫羅馬數(shù)字編號）。start：表示起始編號，整數(shù)。value：用于改變當(dāng)前列表項的編號。注意，其后續(xù)的列表項編號依次從該編號開始。表3.2是有序列表的具體應(yīng)用效果。表3.2有序列表示例示例效果<!--默認(rèn)效果--><ol><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol><!--統(tǒng)一設(shè)置編號類型和起始編號--><oltype="A"start="1"><li>列表項1</li><li>列表項2</li><li>列表項3</li></ol><!--統(tǒng)一設(shè)置，個別項目獨立設(shè)置--><oltype="I"start="2"><li>列表項1</li><litype="1"value="3">列表項2</li><li>列表項3</li></ol>3.定義列表定義列表（DefinitionList）用于分組列出數(shù)據(jù)項，其用法如下：<dl><dt>項標(biāo)題</dt><dd>列表項</dd><dd>列表項</dd>…<dl>用法說明：定義列表使用dl標(biāo)記，該標(biāo)記包含dt（標(biāo)題項）和dd（數(shù)據(jù)項）標(biāo)記，dd項自動縮進(jìn)。定義列表可以包含多個分組標(biāo)題項，每個標(biāo)題項可以包含多個描述項。表3.3是定義列表的應(yīng)用示例。表3.3定義列表應(yīng)用示例效果<dl><dt>學(xué)校名稱</dt><dd>廣州交通大學(xué)</dd><dt>學(xué)校地址</dt><dd>廣州黃埔區(qū)紅山三路101號</dd><dt>聯(lián)系電話</dt><dd>lt;/dd><dd>lt;/dd><dt>相關(guān)院校</dt><dd>上海海事大學(xué)</dd><dd>大連海事大學(xué)</dd><dd>集美航海學(xué)院</dd></dl>4列表嵌套列表嵌套是指一個列表中包含其他的列表（子列表）。注意，子列表必須位于父列表的列表項中。例如，下面是正確的列表嵌套寫法：<ul><li>列表項1</li><li>列表項2<ul><li>列表項21</li><li>列表項22</li></ul></li><li>列表項3</li></ul>通常，列表中的首行文本作為該列表項的標(biāo)題使用，例如這里的“列表項2”；無序列表和有序列表可以相互嵌套使用。上面文檔的效果如圖3.3所示。圖3.3嵌套列表而下面的是錯誤的列表嵌套用法：<ul><li>列表項1</li><li>列表項2</li><ul><li>列表項21</li><li>列表項22</li></ul><li>列表項3</li></ul>因為ul列表標(biāo)記只能包含li列表項標(biāo)記，而且子列表必須位于父列表的列表項li中，所以這里錯誤的原因在于,粗斜體所示部分標(biāo)記直接將ul包含在ul中，而沒有位于li內(nèi)。例選擇合適的HTML標(biāo)記實現(xiàn)圖3.4呈現(xiàn)的效果。參照圖3.4，按以下順序要求逐步實現(xiàn)：調(diào)整合適尺寸，顯示商家LOGO圖片。顯示灰色段落文字。顯示內(nèi)容列表。顯示底部列表內(nèi)容。圖3.4例3.1示例效果具體實現(xiàn)如下：<!DOCTYPEhtml><html><body><imgsrc="pupu.jpg"width="200px"/><p><fontcolor="gray">樸樸超市是一家30分鐘即時配送的移動互聯(lián)網(wǎng)購物平臺。</font></p><ul><li>蔬菜豆制品類</li><li>肉禽類<ul><li>豬肉<ul><li>排骨</li><li>瘦肉</li><li>豬肚</li></ul></li><li>雞肉</li><li>鴨肉</li><li>牛肉</li></ul></li><li>海鮮水產(chǎn)類</li></ul><fontcolor="gray"><dl><dt>樸樸客服</dt><dd>全國免費熱線:400-777-1313</dd><dd>工作時間：周一~周日8：00-22：00</dd><dt>樸樸官網(wǎng)</dt><dd>官網(wǎng)：/</dd></dl></font></body></html>代碼說明：行4：顯示指定寬度、在當(dāng)前目錄下的圖片。行5：顯示灰色的段落文本。行6~24：使用嵌套列表，其中行7是單純列表項；行8列表項包含子列表，其首行文本作為子列表標(biāo)題，即行9；行10~行21為二級列表，而行11為三級列表的標(biāo)題，其又包含三級列表，即行12~行16。使用列表嵌套的基本思路時，首先列出一級列表，再以一級列表的列表項中，添加二級列表，以此順序創(chuàng)建多級列表。行25和行33：將包含的文本都使用font標(biāo)記統(tǒng)一設(shè)置字體樣式。行26~32：定義列表的具體應(yīng)用，dl包含多組標(biāo)題項dt，每個dt之后可以添加任意多個描述項。課堂練習(xí)根據(jù)給出的素材和效果，使用所學(xué)的內(nèi)容來實現(xiàn)。效果素材百度糯米-便宜實惠，品質(zhì)保證，服務(wù)專業(yè)！麻辣燙/冒菜美食中餐/家常菜夏日飲品米芝蓮：24元滬上阿姨：12.90元哆哆鮮奶吧：30元黃記玉米汁：80元創(chuàng)意菜/私房菜聯(lián)系客服人員:郵箱：nuomihelp@周一至周日9:00-22:00客服電話免長途費4006-888-887參考答案：<!DOCTYPEhtml><html>

<h3>百度糯米-便宜實惠，品質(zhì)保證，服務(wù)專業(yè)！</h3>

<imgsrc="./bdnm.png"/>

<!--麻辣燙/冒菜

美食

中餐/家常菜

夏日飲品

米芝蓮：24元

滬上阿姨：12.90元

哆哆鮮奶吧：30元

黃記玉米汁：80元

創(chuàng)意菜/私房菜-->

<ultype="disc">

<li>麻辣燙/冒菜</li>

<li>美食

<ultype="circle">

<li>中餐/家常菜</li>

<li>夏日飲品

<ultype="square">

<li>米芝蓮：24元</li>

<li>滬上阿姨：12.90元</li>

<li>哆哆鮮奶吧：30元</li>

<li>黃記玉米汁：80元</li>

</ul>

</li>

</ul>

</li>

<li>創(chuàng)意菜/私房菜</li>

</ul>

<fontcolor="gray">

<dl>

<dt>聯(lián)系客服人員:</dt>

<dd>郵箱：nuomihelp@</dd>

<dd>周一至周日9:00-22:00</dd>

<dt>客服電話免長途費</dt>

<dd>4006-888-887</dd>

</dl>

</font></body></html>本章目標(biāo)：掌握列表的分類和應(yīng)用場景。掌握無序、有序列表的標(biāo)記、屬性和屬性取值能夠使用嵌套列表在WEB頁面實現(xiàn)數(shù)據(jù)項展示目標(biāo)體現(xiàn)：能獨立實現(xiàn)課堂練習(xí)中提出的要求。1.列表分類2.無序列表和有序列表標(biāo)記和屬性、屬性取值3.嵌套列表使用4.定義列表簡單應(yīng)用練習(xí)題一、填空1.列表有三種類型，分別是_________,________和___________。2.ul是_____________列表標(biāo)記，有序列表的標(biāo)記是_________。3.ul的type屬性表示列表項的符號類型，取值有______、______、______和______。4.ol中的type屬性表示列表項的編號類型，start表示起始編號。5.dl是_______列表，包含子標(biāo)記_______和_________。二、判斷1.無序列表和有序列表的標(biāo)記之間只能包含列表項標(biāo)記（√）。2.列表項是一個容器標(biāo)記，可以包含文本、圖片、標(biāo)題和段落等其他標(biāo)記（√）。3.當(dāng)type屬性取值為none時，有序列表和無序列表效果相同（√）。4.無序列表中的列表項可以使用與其他列表項不同的符號（√）。5.無序列表中的列表項可以改變當(dāng)前編號，其后續(xù)的列表項編號不會順延（×）擬融入課程思政/勞動教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：以京東商城對比淘寶、優(yōu)衣庫等電子商務(wù)網(wǎng)站，結(jié)合列表展示商品列表來強調(diào)用戶習(xí)慣。教學(xué)后記：通過練習(xí)，學(xué)習(xí)效果基本達(dá)到預(yù)期。說明：教案編寫應(yīng)以一次課（一般2學(xué)時）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W3第4次課：鏈接、圖片熱點與多媒體第次課4課題鏈接、圖片與多媒體教學(xué)目標(biāo)與要求：1.掌握鏈接分類；鏈接各個屬性：href、target、name（錨點名）、title(通用屬性）2.理解和掌握相對URL及其用法。3.掌握錨點鏈接的使用：跳轉(zhuǎn)轉(zhuǎn)到當(dāng)前頁面指定位置、外部頁面指定位置4.掌握框架iframe屬性：src、name;掌握鏈接的target屬性中_top、_parent和框架名的使用5.理解圖片熱點概念，掌握當(dāng)熱點區(qū)域為矩形或圓時的用法。授課類型(請打√)：理論課R討論課□實驗課□習(xí)題課□上機□輔導(dǎo)□其他□教學(xué)重點：掌握超鏈接標(biāo)記、屬性和使用理解絕對路徑和相對路徑的概念教學(xué)難點：嵌入式框架的使用圖片熱點區(qū)域的創(chuàng)建教學(xué)方法和手段：教學(xué)方法：課堂講授、實例演示與實操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：教學(xué)內(nèi)容主要包括：超鏈接概念、分類、屬性；頁面鏈接、錨點鏈接、下載鏈接、郵件鏈接和空鏈接的具體應(yīng)用；圖片熱點；多媒體播放。授課內(nèi)容：一、超鏈接1.1基本概念超鏈接是從一個頁面指向其他目標(biāo)的一種鏈接方式。超鏈接根據(jù)目標(biāo)類型不同，可以分為網(wǎng)頁鏈接、錨點鏈接、文件下載鏈接和郵件鏈接，此外，還有空鏈接；根據(jù)鏈接資源的不同，可以分為文本鏈接和圖片鏈接。1.2網(wǎng)頁鏈接網(wǎng)頁鏈接是在頁面中指向其他目標(biāo)頁面的鏈接?？梢允俏谋炬溄?，也可以是圖片鏈接。其用法如下：<ahref="目標(biāo)頁面URL"target="目標(biāo)窗口"title="鏈接提示">文本或圖片</a>用法說明：href屬性：目標(biāo)頁面的URL，取值可以是絕對位置，也可以相對位置，甚至可以是#或空字符串值。取值為值為#，表示指向當(dāng)前頁面頂部，再次訪問該頁面時不會刷新，但會回到頁面頂部；取值為為空字符串””，每次單擊鏈接指向并刷新當(dāng)前頁面。絕對位置URL：表示目標(biāo)頁面的URL是其他外部網(wǎng)站的頁面，例如/index.html，絕對位置使用“協(xié)議://域名/文件名”格式。相對位置URL：表示指向當(dāng)前網(wǎng)站的其他頁面，其他頁面的位置相對當(dāng)前頁面的位置來設(shè)定。相對位置可以使用./（點斜杠，通常可以省略）表示當(dāng)前頁面所在的目錄，也可以使用../(點點斜杠)表示當(dāng)前頁面所在目錄的上一級目錄。例如href=”./login.html”，表示與當(dāng)前頁面位于同一個目錄的login.html頁面，也可以直接寫為：href=”login.html”；或者h(yuǎn)ref=”./admin/main.html”，表示與當(dāng)前頁面位于同一目錄中的images文件夾下的main.html；再如，href=”../user/user.html”，表示當(dāng)前頁面所在目錄的上一級目錄中user文件夾下的user.html文件。target屬性：表示目標(biāo)頁面打開的位置。取值有：_self（當(dāng)前窗口，默認(rèn)值）、_blank（新窗口）、_top（頂部窗口）、_parent（父窗口）和name（框架窗口），其中，后三個屬性與嵌入式框架iframe有關(guān)。title屬性：鼠標(biāo)在鏈接上懸停時顯示的提示信息。1.3錨點鏈接錨點鏈接也叫書簽，通過錨點鏈接，可以快速跳轉(zhuǎn)到目標(biāo)頁面指定的位置（錨點）。比如當(dāng)一個頁面內(nèi)容很長，用戶拉動到頁面底部后如果要快速回到頁面頂部瀏覽，那么可以通過創(chuàng)建錨點鏈接實現(xiàn)。錨點鏈接的用法分兩步實現(xiàn)：創(chuàng)建錨點在頁面需要跳轉(zhuǎn)的位置創(chuàng)建錨點：<aname="錨點名">錨點處文本</a>錨點定義使用鏈接標(biāo)記a和name屬性，name屬性指定當(dāng)前頁面具有唯一值的錨點名。鏈接到錨點使用鏈接標(biāo)記指向錨點，注意href屬性值格式為：”#錨點名”，如：<ahref="#錨點名">標(biāo)記文本</a>如果要跳轉(zhuǎn)到其他頁面的錨點位置，使用“目標(biāo)頁面URL#錨點名”，如：<ahref=“目標(biāo)頁面URL#錨點名”>標(biāo)記文本</a>單擊錨點鏈接時，將使錨點位置作為瀏覽器窗口首行內(nèi)容，移動到瀏覽器頂端。但注意，只有當(dāng)頁面高度超出了瀏覽器窗口可視范圍時（頁面出現(xiàn)滾動條），單擊錨點鏈接才有效。1.4其他鏈接（1）下載鏈接當(dāng)鏈接目標(biāo)是一個瀏覽器不能識別的文件類型時，例如zip、rar、docx、xlsx等文件類型，瀏覽器將提供對話框方式提供給用戶下載或者選擇合適的應(yīng)用程序來打開，而HTML文件、圖片文件，甚至PDF文件等這些瀏覽器能識別的文件將會直接在瀏覽器窗口打開。例如：<ahref="down/1.rar">下載1.rar文件</a>（2）郵件鏈接可以使用超鏈接來構(gòu)建郵件的基本信息，在單擊該鏈接時，將會啟動本地郵件管理程序來發(fā)送郵件。以下面郵件為例，介紹郵件鏈接的用法：<ahref="mailto:191085153@?subject=問候！&body=大家好!&cc=111@;222@&bcc=333@">發(fā)送郵件</a>用法說明：href屬性：以mailto：開始，冒號后面為郵件地址，即收件人電子郵箱。?(問號)：表示郵件參數(shù)，即郵件信息，多個參數(shù)使用&分隔。subject：郵件標(biāo)題。&：問號后面各個參數(shù)信息分隔符。cc：抄送，同時發(fā)給其他收件人時的收件人郵箱列表，多個收件人郵箱使用分號（；）分隔。bcc：密送，不顯示在發(fā)送列表中的收件人郵箱，多個密送郵箱使用分號（；）分隔。注意，單擊郵件鏈接并不會自動發(fā)送郵件，而是通過本地安裝的郵件管理程序來發(fā)送。1.5嵌入式框架如果要在一個頁面的指定位置顯示其他頁面的內(nèi)容，例如共享的導(dǎo)航頁面、來自其他網(wǎng)站的視頻文件、地圖定位插件頁面等，可以使用嵌入式框架iframe。iframe可以使其他頁面的內(nèi)容的與當(dāng)前頁面無縫結(jié)合在一起，因此如果多個頁面使用相同的內(nèi)容，可以將相同內(nèi)容單獨作為頁面，然后使用iframe包含進(jìn)來，從而實現(xiàn)共享頁面。其用法如下：<iframesrc="初始頁面"name="框架名"其他屬性>你的瀏覽器不支持框架，無法看到框架的內(nèi)容</iframe>用法說明：iframe：成對標(biāo)記，標(biāo)記之間的文本是在瀏覽器不支持框架時顯示的提示信息。src屬性：在嵌入式框架中初始顯示的頁面。name屬性：框架唯一的名稱。目的是讓其他鏈接通過設(shè)置target屬性為框架名，從而使目標(biāo)頁面在指定的框架窗口中打開。其他屬性包括：frameborder：取值為yes或no，表示是否顯示框架邊框；scrolling：取值為yes或no，表示是否出現(xiàn)滾動條；width/height：框架的寬度和高度。marginwidth：框架左右邊距，單位為px（像素）；marginheigh：框架上下邊距，單位為px。二、圖片熱點在前面我們介紹了圖片標(biāo)記img用于在頁面顯示圖片，而圖片熱點是指圖片被劃分為不同形狀的區(qū)域，這些區(qū)域能夠在被單擊時跳轉(zhuǎn)到不同的頁面。例如我們可以實現(xiàn)單擊地圖不同省份區(qū)域，跳轉(zhuǎn)到省份對應(yīng)的頁面查看當(dāng)前省份的天氣預(yù)報，這對用戶而言有良好的操作體驗。而這些能夠被單擊并響應(yīng)跳轉(zhuǎn)的圖片區(qū)域，我們稱之為圖片熱點區(qū)域。要實現(xiàn)圖片熱點功能，需要按照以下的步驟來實現(xiàn)：（1）顯示源圖片，并指定需要映射的熱點區(qū)域<imgsrc=”圖片URL”usemap=”#熱點區(qū)域名”/>說明：圖片URL：需要創(chuàng)建熱點區(qū)域的源圖片，該圖片也將顯示在頁面中。usemap屬性：已創(chuàng)建好的熱點區(qū)域的名稱，注意名稱前帶“#”號，下面將介紹如何創(chuàng)建熱點區(qū)域。（2）創(chuàng)建熱點區(qū)域，其用法如下：<mapname="熱點區(qū)域名"><areashape="形狀1"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/><areashape="形狀2"coords="坐標(biāo)值"href="目標(biāo)頁面URL"/><!--...以下可以繼續(xù)創(chuàng)建多個區(qū)域，重復(fù)上述內(nèi)容...--></map>說明：map標(biāo)記：表示這是圖片對應(yīng)的熱點區(qū)域，name為該區(qū)域唯一名稱。area標(biāo)記：map的子標(biāo)記，創(chuàng)建一個指定形狀的熱點區(qū)域。area標(biāo)記包含以下屬性：shape屬性：設(shè)置熱點區(qū)域形狀，取值為：rect（矩形）、circle（圓）和poly（多邊形）。coords：對應(yīng)熱點形狀的坐標(biāo)值，如果shape取值是rect，那么取左上角和右下角的坐標(biāo)(x,y)，使用逗號連接起來作為coords值；如果是shape取值是circle，那么取值為圓心坐標(biāo)和半徑值；如果shape取值為poly，那么取多邊形各個特征點的坐標(biāo)值。注意coords每個取值都使用逗號分隔，且每個坐標(biāo)值都是相對圖片左上角為(0,0)距離?？梢越柚鶳S，或者Window中的畫圖程序來獲取坐標(biāo)點。href屬性：熱點區(qū)域?qū)?yīng)的目標(biāo)頁面位置。title屬性：鼠標(biāo)懸停在熱點區(qū)域時顯示的提示信息。三音視頻播放如果要在頁面中播放視頻或音頻，可以使用HTML5中的新標(biāo)記video和audio。（1）視頻播放videovideo標(biāo)記的用法如下：<videosrc="視頻文件"其他可選屬性>你的瀏覽器不支持video標(biāo)記</video>用法說明：src屬性：視頻文件URL，可支持的視頻格式類型有MP4、WebM和Ogg三種。目前主流瀏覽器均支持該三種視頻格式文件的播放。其他可選屬性包括：controls：單屬性，表示是否顯示播放器的控制面板（比如播放/暫停按鈕）。如果要顯示，則添加該屬性，否則不要添加。所有的單屬性用法都相同，即需要該功能時才加上。autoplay：單屬性，表示是否自動播放。width：視頻界面寬度。height：視頻界面高度。preload：單屬性，是否預(yù)加載視頻。如果打開頁面的同時加載視頻，則加上該屬性；如果添加了autoplay屬性，那么該屬性無效。muted：單屬性，表示是否靜音播放視頻。poster：視頻封面圖片的URL。loop：單屬性，是否循環(huán)播放。此外，標(biāo)記之間的文本表示在瀏覽器不支持video標(biāo)記時顯示的提示文字。例如，下面標(biāo)記片段在頁面插入視頻，視頻不自動播放、設(shè)置視頻封面、靜音以及播放結(jié)束后循環(huán)播放。<videosrc="huwei_Mate_60.mp4"poster="huwei_Mate_60.png"width="400px"height="300px"controlsmutedloop>你的瀏覽器不支持video</video>頁面打開的初始效果如圖所示。（2）音頻播放audioaudio支持的音頻格式文件類型為MP3、Wav和Ogg，主流的瀏覽器都支持MP3格式的音頻文件，其用法如下：<audiosrc="音頻文件URL"其他可選屬性>你的瀏覽器不支持Audio標(biāo)記</auido>用法說明：src屬性：音頻文件URL。其他屬性：control：單屬性，是否顯示播放器的控制面板，如果使用該屬性，則向用戶顯示音頻控件（比如播放/暫停按鈕），如果不使用該屬性，那么頁面將隱藏播放界面，實現(xiàn)背景聲音或背景音樂播放。autoplay：單屬性，如果使用該屬性，則音頻在就緒后馬上播放。muted：單屬性，如果使用該屬性，則音頻靜音播放。loop：單屬性，音頻是否循環(huán)播放。preload：網(wǎng)頁加載時，視頻是否同時加載。例如，下面標(biāo)記片段在頁面播放mp3文件，顯示控制界面、自動并循環(huán)播放。<audiosrc="./1.mp3"controlsautoplayloop>你的瀏覽器不支持audio</audio>運行效果如圖所示。本章目標(biāo)：1.掌握鏈接分類；鏈接各個屬性：href、target、name（錨點名）、title(通用屬性）2.理解和掌握相對URL及其用法。3.掌握錨點鏈接的使用：跳轉(zhuǎn)轉(zhuǎn)到當(dāng)前頁面指定位置、外部頁面指定位置4.掌握框架iframe屬性：src、name;掌握鏈接的target屬性中_top、_parent和框架名的使用5.理解圖片熱點概念，掌握當(dāng)熱點區(qū)域為矩形或圓時的用法。目標(biāo)體現(xiàn)：熟悉并掌握本章示例；能獨立完成本章所給出的練習(xí)本章練習(xí)3.1列表一、填空1.列表有三種類型，分別是_________,________和___________。2.ul是_____________列表標(biāo)記，有序列表的標(biāo)記是_________。3.ul的type屬性取值有_______、________、________和________。4.ol中的type表示列表項的編號類型，start表示起始編號。5.dl是_______列表，包含子標(biāo)記_______和_________。二、判斷1.無序列表和有序列表的標(biāo)記之間只能包含列表項標(biāo)記（√）。2.列表項是一個容器標(biāo)記，可以包含文本、圖片、標(biāo)題和段落等其他標(biāo)記（√）。3.當(dāng)type屬性取值為none時，有序列表和無序列表效果相同（√）。4.無序列表中的列表項可以使用與其他列表項不同的符號（√）。5.無序列表中的列表項可以改變當(dāng)前編號，其后續(xù)的列表項編號不會順延（×）。3.2超鏈接一、填空1.按目標(biāo)類型分，超鏈接可以分為：_______、_______、________、_______和________。2.按鏈接內(nèi)容分，超鏈接可以分為______和_______。3.超鏈接的target屬性取值可以有_____、_____、______、______和______。4.超鏈接路徑中的./表示____________，../表示__________________。判斷超鏈接的相對路徑一般應(yīng)用于指向本網(wǎng)站的其他頁面（）。超鏈接的絕對路徑一般應(yīng)用于指向外部網(wǎng)站的頁面（）空鏈接指向當(dāng)前頁面（）。可以使用超鏈接實現(xiàn)文件下載功能（）。郵件鏈接可以直接發(fā)送郵件（）。錨點鏈接只能跳轉(zhuǎn)到當(dāng)前頁面的錨點位置（）。錨點鏈接可以跳轉(zhuǎn)到外部網(wǎng)站頁面的錨點位置（）。當(dāng)鏈接屬性href取值為#時，可以實現(xiàn)跳轉(zhuǎn)到頁面頂部功能（）。超鏈接路徑中的./表示當(dāng)前頁面所在的目錄，可以省略（）。如果要在一個頁面包含其他頁面的內(nèi)容，可以使用嵌入式iframe（）。嵌入式框架iframe可以實現(xiàn)頁面局部刷新的功能（）。3.3圖片熱點一、填空1.圖片熱點區(qū)域的形狀可以有______、______和_______。2.假如shape=rectcoords=20,80,40,100，那么20,80表示______，40，100表示______。3.假如有shape=circlecoords=20,40,12，那么20,40表示______，12表示______。4.假如圖片熱點區(qū)域名稱為ifrm，那么在圖片中創(chuàng)建熱點的用法是：<imgsrc=”圖片URL”________________/>。3.4音視頻播放一、填空1.視頻播放的標(biāo)記是_______；音頻播放的標(biāo)記是__________。2.音、視頻播放標(biāo)記中的屬性controls表示______；autoplay表示_______；muted表示__________；loop表示__________；preload表示__________。擬融入課程思政/勞動教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：萬丈高樓平地起，強調(diào)基礎(chǔ)重要性，通過京東網(wǎng)站結(jié)合本章內(nèi)容，激發(fā)學(xué)生學(xué)習(xí)興趣。教學(xué)后記：本章內(nèi)容較多，強調(diào)課后多練習(xí)，通過模仿例子實現(xiàn)來加強記憶。說明：教案編寫應(yīng)以一次課（一般2學(xué)時）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W3第5次課：實驗一HTML文檔格式化第5次課項目名稱：文檔格式化教學(xué)目標(biāo)與要求：能夠使用HTML基礎(chǔ)標(biāo)記和常用標(biāo)記格式化文檔。教學(xué)條件：（教學(xué)場地、設(shè)施、設(shè)備、軟件等要求說明）：實驗室：實驗室；安裝VSCODE、火狐、chrome等瀏覽器軟件教學(xué)組織（分組輪換、講解與訓(xùn)練安排等）：獨立完成、教師指導(dǎo)。安全事項：勿擅自處理計算機及其相關(guān)設(shè)備的故障。有問題報告老師。教學(xué)重難點（關(guān)鍵技術(shù)）：基礎(chǔ)標(biāo)記：標(biāo)題、段落、圖片、水平線、換行；常用標(biāo)記：字體、字形、字號；列表、超鏈接；教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：按給出的素材，完成下圖效果。一、文檔排版1.標(biāo)題3，文字居中：2023年中國本科生就業(yè)報告一覽；2.段落，字體顏色為#999、文字居中；來源：/article/138881.html；3.段落，2023大小6號字，1158萬大小6號字，紅色，萬字為上標(biāo)】2023年高校畢業(yè)生估算為1158萬人！創(chuàng)歷史新高。讓我們看看23年之前的本科生就業(yè)形勢吧??；4.圖片左對齊，文字環(huán)繞，括號中的文本為紅色；5.單擊圖片，在新頁面打開該圖片。二、使用無序列表實現(xiàn)下圖效果。圖片：寬度100px，單擊在新窗口打開原圖。段落文字：品名加粗；段落文字：原價灰色、刪除線；當(dāng)前價紅色。參考代碼<h3align="center">2023年中國本科生就業(yè)報告一覽</h3><palign="center"><fontcolor="#999">來源：/article/138881.html</font></p><p><p><fontsize="6"><b>2023</b></font>年高校畢業(yè)生估算為<fontsize="6"color=red>1158<sup>萬</sup></font>人！創(chuàng)歷史新高。讓我們看看23年之前的本科生就業(yè)形勢吧！</p></p><p><ahref="./分布圖.png"target="_blank"><imgsrc="./分布圖.png"align="left"width="300px"title="點擊放大圖片"/></a><fontcolor="#666">國家統(tǒng)計局?jǐn)?shù)據(jù)顯示，2022年全國城鎮(zhèn)非私營單位、城鎮(zhèn)私營單位就業(yè)人員年平均工資分別較上年名義增長6.7%、3.7%，增幅下降（<fontcolor="red">2021年城鎮(zhèn)非私營單位：9.7%，城鎮(zhèn)私營單位：8.9%</font>）。多重超預(yù)期因素影響下，大學(xué)生薪資增速明顯放緩。2022屆本科、高職畢業(yè)生平均月收入（<fontcolor="red">本科：5990元，高職：4595元</font>）較2021屆分別增長了3%、2%，起薪增幅較上一屆（<fontcolor="red">2021屆本科、高職起薪增幅分別為7%、6%</font>）下降了57%、67%。近六成本科生、超八成高職生起薪在6000元以下。從應(yīng)屆大學(xué)生起薪分布來看，2022屆本科、高職畢業(yè)生畢業(yè)半年后平均月收入在6000元以下的比例分別為57.7%、82.1%，在6000~8000元的比例分別為24.1%、11.9%，在8000元以上的比例分別為18.2%、6.0%。其中，2022屆本科畢業(yè)生畢業(yè)半年后平均月收入在10000元以上的比例僅為6.9%，顯示畢業(yè)即起薪過萬的僅是較少數(shù)。不過對比2018屆，2022屆大學(xué)畢業(yè)生薪資在6000元以下的比例減少（<fontcolor="red">本科、高職分別減少了16.5個、7.3個百分點</font>），而在6000元及以上的比例增加。</font></p>擬融入課程思政/勞動教育/創(chuàng)新創(chuàng)業(yè)內(nèi)容：教學(xué)后記：通過實驗，個別學(xué)生對標(biāo)記不夠熟悉，環(huán)境不夠熟悉，需要強調(diào)多動手實踐。說明：教案編寫應(yīng)以一次課（一般2學(xué)時）為單位編寫，重復(fù)班授課可不另填寫教案。注：填寫后，所有涂黃提示應(yīng)刪去。

W4第6次課：表格與表單第次課6課題表格與表單教學(xué)目標(biāo)與要求：1.掌握設(shè)計表格所有標(biāo)記和屬性。2.掌握表格行標(biāo)記的屬性及設(shè)置方法。3.掌握表格單元格的跨行與跨列屬性的設(shè)置方法。4.掌握表格的嵌套方法。5.學(xué)會使用表格進(jìn)行簡易網(wǎng)頁布局授課類型(請打√)：理論課R討論課□實驗課□習(xí)題課□上機□輔導(dǎo)□其他□教學(xué)重點：1.表格及其屬性的使用2.在表格中嵌入各種頁面元素3.表單結(jié)構(gòu)；4.表單元素的應(yīng)用教學(xué)難點：表格行列合并；表單結(jié)構(gòu)、屬性的理解教學(xué)方法和手段：教學(xué)方法：課堂講授、實例演示與實操教學(xué)手段：多媒體課件教學(xué)內(nèi)容及課堂設(shè)計(可續(xù)頁)：教學(xué)內(nèi)容主要包括：1.表格；2.表單一表格表格主要用于展示數(shù)據(jù)，也可以用于頁面布局，或者元素定位，例如使登錄表單元素對齊。1表格結(jié)構(gòu)和表格屬性（1）表格結(jié)構(gòu)一個完整表格的結(jié)構(gòu)包含四個部分：表格標(biāo)題、表頭、表體和表尾。如圖3.17所示。圖3.17表格結(jié)構(gòu)在HTML中，表格使用table標(biāo)記表示，在table標(biāo)記中只能包含表格標(biāo)題caption、表頭thead、表體tbody和表尾tfoot四個標(biāo)記，不能有其他標(biāo)記。其中表格標(biāo)題自動居中顯示，表頭只有一行，代表列標(biāo)題；而表體可以包含0行以上的數(shù)據(jù)；表尾也只有一行，表尾通常用來顯示統(tǒng)計類數(shù)據(jù)，例如總計、平均值等。表格結(jié)構(gòu)的HTML代碼如下：<table><caption>表格標(biāo)題</caption><!--表頭行：只一行--><thead></thead><!--主體：數(shù)據(jù)行，多行--><tbody></tbody><!--表尾；其他信息行，一行，例如數(shù)量、金額總計--><tfoot></tfoot></table>說明：表格使用成對標(biāo)記table，只能包含標(biāo)題、表頭、表體和表尾。除了表格標(biāo)題，其他三部分都可以只包含行標(biāo)記tr，而tr只包含一個或多個內(nèi)容單元格標(biāo)記td。表頭thead表示表格的標(biāo)題行，只包含一個tr行標(biāo)記，而tr只能包含標(biāo)題單元格標(biāo)記th或內(nèi)容單元格標(biāo)記td，兩者都是表格數(shù)據(jù)的容器。th與td的區(qū)別在于，th僅用于表頭行，且文本是加粗的，目的是突出標(biāo)題的效果。表體tbody是表格主體數(shù)據(jù)部分，包含一個或多個行標(biāo)記tr。每一行對應(yīng)一對tr標(biāo)記，每個tr標(biāo)記包含一個或多個內(nèi)容單元格標(biāo)記td。td用來包含具體數(shù)據(jù)，例如文本、段落、圖片或其他元素，也可以沒有數(shù)據(jù)（空單元格）。表尾tfoot通常用來顯示表體數(shù)據(jù)的統(tǒng)計信息，位于表格末尾。表尾不是必須的。如果存在表尾，那么表尾通常只有一行，且只包含tr及其子標(biāo)記td。表格結(jié)構(gòu)示意圖如圖3.18所示、圖3.18表格結(jié)構(gòu)示意圖下面是圖3.17完整表格標(biāo)記。<tableborder="1"><!--表格標(biāo)題--><caption>學(xué)生成績表</caption><!--表頭行：只一行--><thead><tr><th>姓名</th><th>班級</th><th>學(xué)號</th><th>平時成績</th><th>期末成績</th><th>總評</th></tr></thead>?<!--主體：數(shù)據(jù)行，多行--><tbody><tr><td>張三</td><td>軟工211</td><td>01</td><td>25</td><td>70</td><td>95</td></tr><tr><td>李四</td><td>軟工211</td><td>02</td><td>20</td><td>75</td><td>95</td></tr>?</tbody><!--表尾；其他信息行，一行，例如數(shù)量、金額總計--><tfoot><tr><td></td><td></td><td>平均分：</td><td>22.5</td><td>72.5</td><td>95</td></tr></tfoot></table>注意：表格所有的數(shù)據(jù)只能放在td標(biāo)記中，不能放在td之外。默認(rèn)情況下，每一行單元格數(shù)都應(yīng)該是相同的。表格標(biāo)題、表頭和表尾不是必須的，可以省略，這樣，一個table標(biāo)記通常只包含tr和td標(biāo)記，如圖3.19所示。圖3.19簡化結(jié)構(gòu)的表格示意圖圖3.20就是一個簡化結(jié)構(gòu)的表格，僅用于列出數(shù)據(jù)項。圖3.20簡化結(jié)構(gòu)的表格具體實現(xiàn)如下：<tableborder="1"><tr><td>姓名</td><td>班級</td><td>學(xué)號</td></tr><tr><td>張三</td><td>軟工222</td><td>2022190301</td></tr><tr><td>李四</td><td>軟工222</td><td>2022190302</td></tr></table>說明：thead和tbody、tfoot標(biāo)記是可以省略的。所有的數(shù)據(jù)都應(yīng)該放在td標(biāo)記之間，標(biāo)題行可以使用td來代替th，區(qū)別僅在于文本無加粗效果。如果需要，添加最后一行作為表尾行使用。表格默認(rèn)無邊框線，這里使用了表格屬性border，目的是顯示表格邊框線。（2）表格屬性常用的表格屬性如下：border：表格邊框，單位為px（像素），默認(rèn)值為0，即為邊框。cellpadding：單元格內(nèi)邊距，即文本離上、下、左、右的間距，單位為px。cellspacing：單元格外邊距，即單元格與其他單元格之間的間隔，單位為px。width：表格寬度，單位為px或%（百分比），如果使用%，則相對父元素寬度的百分比值，當(dāng)前指相對頁面寬度。如果設(shè)置了寬度，則單元格寬度將按比例自動縮放。height：表格高度，單位為為px或%（百分比）。如果設(shè)置了高度，則單元格的高度將按比例縮放。align：表格在頁面的對齊方式，取值為取值為left、right和center,分別代表左、右和居中對齊。background：表格背景圖，值為圖片文件的URL。bgcolor：表格背景色，取值可以使顏色關(guān)鍵字，或者16進(jìn)制值。frame：表格外邊框樣式，可以指定表格的上、下、左、右邊框線，邊框粗細(xì)取決border值，默認(rèn)為1px。取值為：none（無邊框線）、above(只有上邊框)、below(只有下邊框)、vsides（只有上下垂直邊框）、hsides（只有左右水平邊框）、lhs(左側(cè)邊框)和rhs(右側(cè)邊框)。rules：行、列邊框線樣式。取值為：all（包含行、列邊框）、rows（只有行邊框）、cols（只有列邊框）。演示與講解制作一個課程表表格在頁面居中，

溫馨提示

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

評論

0/150

提交評論