《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第9課 HTML與HTML5（八）_第1頁(yè)
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第9課 HTML與HTML5（八）_第2頁(yè)
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第9課 HTML與HTML5（八）_第3頁(yè)
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第9課 HTML與HTML5（八）_第4頁(yè)
《網(wǎng)站前端技術(shù)》（梁玲）621-7 教案 第9課 HTML與HTML5（八）_第5頁(yè)
已閱讀5頁(yè)，還剩6頁(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)介

PAGE4PAGE4PAGE3PAGE3PAGE3PAGE3

課題第9課HTML與HTML5（八）課時(shí)2課時(shí)（90min）教學(xué)目標(biāo)知識(shí)技能目標(biāo)：掌握HTML5新增的表單控件屬性素質(zhì)目標(biāo)：（1）加強(qiáng)理論基礎(chǔ)，提升專(zhuān)業(yè)技能（2）制作百度首頁(yè)，鍛煉實(shí)踐能力，從而達(dá)到學(xué)以致用的目的教學(xué)重難點(diǎn)教學(xué)重點(diǎn)：HTML5表單控件的新增屬性教學(xué)難點(diǎn)：HTML5表單控件的新增屬性、制作百度首頁(yè)教學(xué)方法問(wèn)答法、討論法、講授法、實(shí)踐練習(xí)法教學(xué)用具電腦、投影儀、多媒體課件、教材、文旌課堂APP教學(xué)設(shè)計(jì)第1節(jié)課：→→→傳授新知（28min）→頭腦風(fēng)暴（10min）第2節(jié)課：→傳授新知（17min）→綜合案例（20min）→課堂小結(jié)（3min）→作業(yè)布置（2min）教學(xué)過(guò)程主要教學(xué)內(nèi)容及步驟設(shè)計(jì)意圖第一節(jié)課課前任務(wù)【教師】布置課前任務(wù)，和學(xué)生負(fù)責(zé)人取得聯(lián)系，讓其提醒同學(xué)通過(guò)文旌課堂APP或其他學(xué)習(xí)軟件，完成課前任務(wù)請(qǐng)大家了解HTML5新增表單控件屬性的相關(guān)內(nèi)容?！緦W(xué)生】完成課前任務(wù)通過(guò)課前任務(wù)，使學(xué)生了解本次課的主要內(nèi)容，增加學(xué)生的學(xué)習(xí)興趣考勤

（2min）【教師】使用文旌課堂APP進(jìn)行簽到【學(xué)生】按照老師要求簽到培養(yǎng)學(xué)生的組織紀(jì)律性，掌握學(xué)生的出勤情況問(wèn)題導(dǎo)入（5min）【教師】提出以下問(wèn)題HTML5表單控件有哪些新增屬性？【學(xué)生】思考、舉手回答【教師】通過(guò)學(xué)生的回答引入要講的知識(shí)通過(guò)問(wèn)題導(dǎo)入的方法，引導(dǎo)學(xué)生主動(dòng)思考，激發(fā)學(xué)生的學(xué)習(xí)興趣傳授新知

（28min）2.14.3HTML5表單控件的新增屬性【教師】講解HTML5表單控件新增屬性的使用與示例1．placeholder屬性placeholder屬性一般用于提示用戶可輸入的預(yù)期信息。當(dāng)用戶輸入時(shí)，提示文本消失。【示例2-14-3】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"placeholder="請(qǐng)輸入您的密碼"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“placeholder屬性的應(yīng)用效果”“輸入內(nèi)容后“圖片（詳見(jiàn)教材），并講解效果：用戶輸入賬號(hào)和密碼時(shí)，提示內(nèi)容立即消失，刷新頁(yè)面，頁(yè)面變回初始狀態(tài)。2.form屬性form屬性用于設(shè)置控件屬于哪個(gè)表單，可以將表單控件置于<form>標(biāo)簽之外。它的值為某個(gè)表單的id值?！菊n堂互動(dòng)】?【教師】提問(wèn)HTML中的form屬性如何應(yīng)用？?【學(xué)生】聆聽(tīng)、思考、回答【示例2-14-14】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""id="login"> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/> </form> <inputtype="submit"form="login"/></body>【教師】ppt展示“form屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：HTML文件中“提交”按鈕位于表單之外，但是頁(yè)面中，“提交”按鈕仍然可以提交數(shù)據(jù)，且提交后的數(shù)據(jù)作為參數(shù)跟在頁(yè)面URL后面。3.formaction屬性【示例2-14-15】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"formaction="login"value="登錄"/> <inputtype="submit"formaction="regist"value="注冊(cè)"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“formaction屬性的應(yīng)用效果”“表單數(shù)據(jù)提交到不同的目標(biāo)地址“圖片（詳見(jiàn)教材），并講解效果：輸入信息并單擊“登錄”按鈕后，地址欄中的“？”參數(shù)前面是login；單擊“注冊(cè)”按鈕后，地址欄中的“？”參數(shù)前面是regist。4.formmethod屬性formmethod屬性用于規(guī)定將表單數(shù)據(jù)發(fā)送到action屬性規(guī)定的地址中的方法?！菊n堂互動(dòng)】?【教師】提問(wèn)formmethod屬性的作用是什么？?【學(xué)生】聆聽(tīng)、思考、回答它可以覆蓋<form>標(biāo)簽的method屬性，還可以為不同的submit按鈕設(shè)置不同的表單數(shù)據(jù)發(fā)送方法。該屬性的取值有g(shù)et（默認(rèn)值）和post?！臼纠?-14-16】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"formmethod="get"value="登錄"/> <inputtype="submit"formmethod="post"value="注冊(cè)"/> </form></body>【教師】ppt展示“不同的formmethod屬性值的不同效果”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面初始狀態(tài)與form屬性應(yīng)用效果相同，當(dāng)輸入信息并單擊“登錄”按鈕后，地址欄中會(huì)顯示提交的表單數(shù)據(jù)。但是，單擊“注冊(cè)”按鈕后，地址欄不會(huì)顯示提交的表單數(shù)據(jù)。5.formenctype屬性formenctype屬性用于規(guī)定表單數(shù)據(jù)提交到服務(wù)器時(shí)的編碼方式。它可以覆蓋<form>標(biāo)簽的enctype屬性，還可以為不同的submit按鈕設(shè)置不同的表單數(shù)據(jù)編碼方式。該屬性的值有application/x-www-form-urlencoded（默認(rèn)值）、multipart/form-data、text/plain。【示例2-14-17】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"value="提交"/> <inputtype="submit"formenctype="multipart/form-data"value="以multipart/form-data編碼方式提交"/> </form></body>【教師】ppt展示“formenctype屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：填寫(xiě)賬號(hào)與密碼，無(wú)論選擇那種提交方式，地址欄中都會(huì)顯示提交的表單數(shù)據(jù)。6.formtarget屬性formtarget屬性用于規(guī)定提交表單數(shù)據(jù)后頁(yè)面地址的打開(kāi)方式。它可以覆蓋<form>標(biāo)簽的target屬性，還可以為不同的submit按鈕設(shè)置不同的頁(yè)面地址打開(kāi)方式。該屬性的值有_self（默認(rèn)值）和_blank。【課堂互動(dòng)】?【教師】提問(wèn)HTML中的formtarget屬性怎么應(yīng)用？?【學(xué)生】聆聽(tīng)、思考、回答【示例2-14-18】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"value="提交"/> <inputtype="submit"formtarget="_blank"value="打開(kāi)一個(gè)新窗口"/> </form></body>效果：填寫(xiě)賬號(hào)與密碼，單擊“提交”按鈕會(huì)在當(dāng)前窗口打開(kāi)頁(yè)面；單擊“打開(kāi)一個(gè)新窗口”按鈕會(huì)在新窗口打開(kāi)頁(yè)面。7.autocomplete屬性【課堂互動(dòng)】?【教師】提問(wèn)autocomplete屬性有什么作用？?【學(xué)生】聆聽(tīng)、思考、回答autocomplete屬性用于規(guī)定輸入字段是否開(kāi)啟自動(dòng)完成功能，其取值有on（默認(rèn)值）和off。當(dāng)屬性值為on時(shí)，啟動(dòng)自動(dòng)完成功能；屬性值為off時(shí)，禁用自動(dòng)完成功能。【示例2-14-19】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"name="user_account"placeholder="請(qǐng)輸入您的賬號(hào)"autocomplete="on"/><br/> 密碼：<inputtype="password"name="user_password"placeholder="請(qǐng)輸入您的密碼"/> <inputtype="submit"/> </form></body>效果：提交過(guò)信息后，再次輸入時(shí)，輸入框下方就會(huì)出現(xiàn)最近的歷史輸入信息。若屬性autocomplete="off"，則輸入框下方不會(huì)出現(xiàn)歷史輸入信息。8.autofocus屬性autofocus屬性用于規(guī)定頁(yè)面加載后表單控件自動(dòng)獲得焦點(diǎn)，其取值為autofocus。【示例2-14-20】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"placeholder="請(qǐng)輸入您的賬號(hào)"autofocus="on"/><br/> 密碼：<inputtype="password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"value="登錄"/> </form></body>【教師】ppt展示“autofocus屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：頁(yè)面加載后，“請(qǐng)輸入您的賬號(hào)”文本框邊框凸起，且光標(biāo)在該文本框內(nèi)閃爍，該文本框獲得焦點(diǎn)。9.required屬性required屬性用于規(guī)定必須在提交之前填寫(xiě)輸入字段。如果使用該屬性，則字段是必填（或必選）的。此外，在提交表單時(shí)，若字段中沒(méi)有輸入數(shù)據(jù)，瀏覽器會(huì)顯示提示內(nèi)容“請(qǐng)?zhí)顚?xiě)此字段”。該屬性的取值為required。【示例2-14-21】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 賬號(hào)：<inputtype="text"placeholder="請(qǐng)輸入您的賬號(hào)"required="required"/><br/> 密碼：<inputtype="password"placeholder="請(qǐng)輸入您的密碼"/><br/> <inputtype="submit"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“required屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：如果賬號(hào)還沒(méi)有輸入，直接單擊“提交”按鈕，頁(yè)面中會(huì)顯示“請(qǐng)?zhí)顚?xiě)此字段”的提示。10.list屬性list屬性可以為輸入類(lèi)型的表單控件指定一個(gè)可用的選項(xiàng)列表，用戶可以直接輸入信息，也可以從列表中選擇。該屬性的取值為與之關(guān)聯(lián)的<datalist>標(biāo)簽的id值?！臼纠?-14-22】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 行業(yè)選擇：<inputtype="text"name="myprof"list="profession"placeholder="可從列表中選擇"/> <inputtype="submit"value="提交"/> </form> <datalistid="profession"> <optionvalue="education">教育</option> <optionvalue="manufacture">制造</option> <optionvalue="construction">建筑</option> <optionvalue="IT">IT</option> <optionvalue="food">食品</option> </datalist></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“l(fā)ist屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：當(dāng)文本框獲得焦點(diǎn)時(shí)，顯示列表內(nèi)容?！咎崾尽看a中<datalist>標(biāo)簽可以置于任何地方，建議將其與關(guān)聯(lián)的<input>放在一起。若用戶輸入了列表中原來(lái)沒(méi)有的內(nèi)容點(diǎn)，并單擊“提交”按鈕，則該內(nèi)容會(huì)出現(xiàn)在列表底部。【學(xué)生】聆聽(tīng)、記錄、理解通過(guò)教師講解、課堂互動(dòng)、演示操作等方式，使學(xué)生了解HTML5表單控件新增屬性的語(yǔ)法及使用頭腦風(fēng)暴（10min）【教師】根據(jù)頭腦風(fēng)暴主題，組織學(xué)生分組開(kāi)展討論根據(jù)各隊(duì)伍的網(wǎng)站主題，討論如何使用placeholder屬性提示用戶可輸入的預(yù)期信息，將輸入字段開(kāi)啟自動(dòng)完成功能，并且規(guī)定在提交之前必須填寫(xiě)輸入字段。【學(xué)生】思考、討論通過(guò)頭腦風(fēng)暴的形式，活躍課堂氣氛，引發(fā)學(xué)生思考，培養(yǎng)學(xué)生的創(chuàng)新能力和團(tuán)隊(duì)精神第二節(jié)課問(wèn)題導(dǎo)入（3min）【教師】提出以下問(wèn)題除了之前所講到的屬性外，HTML5表單控件還有哪些新增屬性？【學(xué)生】思考、舉手回答通過(guò)提問(wèn)引導(dǎo)學(xué)生思考本節(jié)課內(nèi)容傳授新知

（17min）2.14.3HTML5表單控件的新增屬性【教師】講解HTML5表單控件新增屬性的使用與示例11.novalidate屬性【課堂互動(dòng)】?【教師】提問(wèn)novalidate屬性起什么作用？?【學(xué)生】聆聽(tīng)、思考、回答novalidate屬性用于規(guī)定在提交表單時(shí)不對(duì)元素內(nèi)容進(jìn)行驗(yàn)證，其取值為novalidate?！臼纠?-14-23】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""novalidate="novalidate"> 賬號(hào)：<inputtype="text"placeholder="請(qǐng)輸入您的賬號(hào)"required="required"/><br/> 密碼：<inputtype="password"placeholder="請(qǐng)輸入您的密碼"/><br/> E-mail地址：<inputtype="email"placeholder="請(qǐng)輸入您的郵箱地址"required="required"/> <inputtype="submit"/> </form></body>效果：為<form>標(biāo)簽設(shè)置novalidate屬性，單擊“提交”按鈕后，對(duì)于輸入的非郵件地址格式不進(jìn)行驗(yàn)證，沒(méi)有提示缺少@。12.pattern屬性pattern屬性用于驗(yàn)證表單輸入的內(nèi)容，可配合使用title屬性定義驗(yàn)證規(guī)則提示，其取值為正則表達(dá)式?！臼纠?-14-24】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction=""> 姓名：<inputtype="text"placeholder="請(qǐng)輸入您的姓名"required="required"pattern="^[\u4e00-\u9fa5]{2,4}$"title="2-4個(gè)中文字符"/><br/> 手機(jī)號(hào)：<inputtype="tel"placeholder="請(qǐng)輸入您的手機(jī)號(hào)"pattern="^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$"/> <inputtype="submit"/> </form> </body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“姓名正則驗(yàn)證效果”“手機(jī)號(hào)碼正則驗(yàn)證效果“圖片（詳見(jiàn)教材），并講解效果：因設(shè)置title屬性，所以在姓名輸入框中輸入5個(gè)中文，單擊“提交”按鈕后，提示中附加格式要求。因未設(shè)置title屬性，所以在手機(jī)號(hào)輸入框中輸入數(shù)字，并單擊“提交”按鈕后，提示中只要求保持格式一致，沒(méi)有具體要求。13.maxlength屬性和wrap屬性maxlength和wrap屬性都是<textarea>標(biāo)簽新增的屬性。maxlength屬性用于規(guī)定文本區(qū)域中的最大字符數(shù)，其取值為數(shù)值。wrap屬性用于規(guī)定文本區(qū)域中的文本在提交表單時(shí)是否包含換行，其取值為soft（默認(rèn)值）和hard。其中，soft表示不包含換行；hard表示包含換行（如果有換行）?！臼纠?-14-25】編輯HTML文檔<body>標(biāo)簽的內(nèi)容，代碼如下：<body> <formaction="index.html"id="login"> 請(qǐng)留下您的建議：<br/> <textareaname="somesuggestions"rows="2"cols="10"maxlength="25"wrap="hard"></textarea><br/> <inputtype="submit"value="提交"/> </form></body>【教師】組織學(xué)生分組上機(jī)完成上面的任務(wù)，并在各組中挑選一位學(xué)生進(jìn)行演示，演示完成后教師進(jìn)行點(diǎn)評(píng)【學(xué)生】聆聽(tīng)、上機(jī)操作、演示【教師】ppt展示“maxlength、wrap屬性的應(yīng)用效果”圖片（詳見(jiàn)教材），并講解效果：在文本區(qū)域輸入“wodehaizifeichangpiaoliang”，由于maxlength="25"，所以文本框；當(dāng)wrap="soft"時(shí)，單擊“提交”按鈕后，地址欄中的參數(shù)中則只有輸入的字符，沒(méi)有換行“%0D%0A”?！緦W(xué)生】聆聽(tīng)、記錄、理解通過(guò)教師講解、課堂互動(dòng)、演示操作等方式，使學(xué)生了解HTML5表單控件新增屬性的語(yǔ)法及使用綜合案例（20min）2.15綜合案例——百度首頁(yè)【教師】講解編輯百度首頁(yè)的具體操作【課堂互動(dòng)】?【教師】提問(wèn)百度首頁(yè)有什么功能與模塊？?【學(xué)生】聆聽(tīng)、思考、回答【教師】ppt展示圖片“百度首頁(yè)最終效果”（詳見(jiàn)教材），輔助并講解該項(xiàng)目實(shí)現(xiàn)的網(wǎng)頁(yè)最終顯示效果如圖所示。網(wǎng)頁(yè)中含有圖片、文本、超鏈接、文本框控件和按鈕等內(nèi)容。1．搭建網(wǎng)站在C盤(pán)上新建文件夾，并命名為“baidu”，以此文件夾作為項(xiàng)目站點(diǎn)?！咎崾尽吭诰W(wǎng)站中的所有文件或文件夾名稱(chēng)都只能包含英文、下劃線、數(shù)字，不能包含漢字，且首字母不能為數(shù)字。2．準(zhǔn)備圖像素材在“baidu”文件夾下新建文件夾，并命名為“img”，然后將圖像素材“l(fā)ogo.gif”復(fù)制到“img”文件夾下?！咎崾尽烤W(wǎng)站根目錄中通常有各種功能目錄，如用來(lái)存放圖像資源的img目錄，用來(lái)存放網(wǎng)站樣式文件的css目錄等。3．創(chuàng)建網(wǎng)站首頁(yè)“index.html”（1）使用快捷方式在站點(diǎn)根目錄下創(chuàng)建文本文檔，并將文件名設(shè)置為“index.html”，其中.html為文件后綴名。（2）使用“記事本”工具打開(kāi)“index.html”文件。【提示】一個(gè)網(wǎng)站首頁(yè)默認(rèn)的文件名為“index”或“default”。本書(shū)中所涉及的教學(xué)項(xiàng)目網(wǎng)站首頁(yè)名稱(chēng)均為“index”。4．編輯首頁(yè)文件的基本結(jié)構(gòu)【課堂互動(dòng)】?【教師】提問(wèn)在編輯基本結(jié)構(gòu)時(shí)需要用到哪些標(biāo)簽？?【學(xué)生】聆聽(tīng)、思考、回答（1）在“index.html”文件中輸入<html>標(biāo)簽。代碼如下：<html></html>（2）在<html>標(biāo)簽內(nèi)部，輸入<head>和<body>標(biāo)簽。代碼如下：<html> <head></head> <body></body></html>【提示】在HTML中，標(biāo)簽包含和被包含的關(guān)系稱(chēng)為父子關(guān)系，如此處<html>標(biāo)簽有<head>和<body>兩個(gè)子標(biāo)簽。為了使文檔結(jié)構(gòu)清晰，在開(kāi)發(fā)過(guò)程中開(kāi)發(fā)人員應(yīng)養(yǎng)成子標(biāo)簽相對(duì)父標(biāo)簽縮進(jìn)的書(shū)寫(xiě)習(xí)慣。但是，通常在網(wǎng)站發(fā)布前，開(kāi)發(fā)人員會(huì)使用軟件將文檔中的空格和換行符消除。（3）測(cè)試首頁(yè)文件的效果。保存“index.html”文件，然后在站點(diǎn)目錄中找到“index.html”文件，選中該文件，并單擊鼠標(biāo)右鍵，選擇打開(kāi)方式為“GoogleChrome”。其中，首頁(yè)的標(biāo)題為index.html，內(nèi)容空白?！咎崾尽抗雀韬突鸷Q(chēng)為開(kāi)發(fā)者瀏覽工具，對(duì)HTML5新標(biāo)簽和CSS3新樣式有很高的兼容性，同時(shí)提供開(kāi)發(fā)者工具。因此，為了使初學(xué)者不必考慮兼容性問(wèn)題，學(xué)習(xí)本書(shū)的過(guò)程中建議使用谷歌瀏覽器。5．編輯文件<head>標(biāo)簽的內(nèi)容（1）在<head>標(biāo)簽中輸入單標(biāo)簽<meta>，設(shè)置字符編碼方式為utf-8。代碼如下：<metacharset="utf-8"/>（2）接著在<head>標(biāo)簽中輸入標(biāo)題標(biāo)簽<title>，<title>標(biāo)簽內(nèi)容為“張麗的百度首頁(yè)”。代碼如下：<title>張麗的百度首頁(yè)</title>此時(shí)，使用瀏覽器測(cè)試首頁(yè)效果，首頁(yè)標(biāo)題變?yōu)椤皬堺惖陌俣仁醉?yè)”。【提示】編寫(xiě)HTML文件的過(guò)程中要及時(shí)保存文件，并刷新網(wǎng)頁(yè)，觀察網(wǎng)頁(yè)編輯效果。6．編輯文件<body>標(biāo)簽的內(nèi)容（1）在<body>標(biāo)簽中輸入段落標(biāo)簽<p>，并設(shè)置該標(biāo)簽的對(duì)齊方式屬性align="right"。接著，輸入標(biāo)簽內(nèi)容“搜索設(shè)置  |  登錄”。代碼如下：<palign="right">搜索設(shè)置  |  登錄</p>（2）在<p>標(biāo)簽后面再輸入一個(gè)<p>標(biāo)簽，并設(shè)置該標(biāo)簽的對(duì)齊方式屬性align="center"。接著，在該標(biāo)簽的內(nèi)容部分輸入圖像標(biāo)簽<img>，圖像地址屬性src="img/logo.gif"，寬度屬性width="270"，高度屬性height="auto"。代碼如下：<palign="center"> <imgsrc="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)論