HTML上機(jī)指導(dǎo).docx

HTML簡(jiǎn)單網(wǎng)頁制作一、大綱HTML語法規(guī)范HTML標(biāo)簽二、實(shí)驗(yàn)?zāi)繕?biāo)：掌握HTML語法規(guī)范的基本要求，能寫出格式良好的HTML文檔掌握學(xué)會(huì)使用HTML表單標(biāo)簽、超鏈接標(biāo)簽、表格標(biāo)簽等元素制作簡(jiǎn)單網(wǎng)頁三、教學(xué)案例：1.HTML語法規(guī)范1標(biāo)簽要正確關(guān)閉正確：歡迎來到HTML的世界 錯(cuò)誤：歡迎來到HTML的世界 2屬性屬性必須有值正確：錯(cuò)誤：屬性值必須使用引號(hào)括起來，單引號(hào)、雙引號(hào)都可以，推薦使用雙引號(hào)正確：錯(cuò)誤：3嵌套正確嵌套： 單元格交叉嵌套：?jiǎn)卧?不允許2. HTML注釋：3.table標(biāo)簽單元格單元格單元格單元格單元格單元格。4.a標(biāo)簽Go to Target Page5.表單(1)form標(biāo)簽action：表單提交的目標(biāo)地址method：表單的提交方式GET方式請(qǐng)求：page/target.html?username=TomPOST方式請(qǐng)求：page/target.htmlenctype：如果需要上傳文件則指定enctype=multipart/form-data(2)文本框把input標(biāo)簽type屬性設(shè)定為text定義一個(gè)文本框鍵值對(duì)關(guān)系：username=Tom2014在服務(wù)器端通過username能夠找到Tom2014通過value屬性指定默認(rèn)值(3)密碼框把input標(biāo)簽的type屬性設(shè)定為password定義一個(gè)密碼框鍵值對(duì)關(guān)系：pwd=123456通常不使用value屬性設(shè)定密碼框的默認(rèn)值，因?yàn)轱@示的都是黑色的圓點(diǎn)(4)提交按鈕把input標(biāo)簽的type屬性設(shè)定為submit定義一個(gè)提交按鈕，作用是提交表單，提交按鈕不需要指定name屬性，value屬性可以設(shè)定按鈕在頁面上顯示的文字內(nèi)容(5)重置按鈕把input標(biāo)簽的type屬性設(shè)定為reset定義一個(gè)重置按鈕，作用是把可以輸入值的表單控件恢復(fù)為默認(rèn)值，value屬性可以設(shè)定按鈕在頁面上顯示的文字內(nèi)容(6)單選按鈕把input標(biāo)簽的type屬性設(shè)定為radio定義一個(gè)單選按鈕，但要想實(shí)現(xiàn)“單選”，必須使用name屬性將多個(gè)單選按鈕設(shè)定為一組，才能實(shí)現(xiàn)彼此之間互斥。鍵值對(duì)關(guān)系不是：season=夏天，這里“夏天”是提示信息，給用戶看的，從程序角度來說和單選按鈕沒有任何關(guān)系鍵值對(duì)關(guān)系應(yīng)該是：season=summer春天夏天秋天冬天使用checked=checked屬性設(shè)置默認(rèn)選中夏天(7)多選框把input標(biāo)簽的type屬性設(shè)定為checkbox定義一個(gè)多選框，使用name屬性將多個(gè)多選框設(shè)定為一組，鍵值對(duì)關(guān)系：hobby= swimming使用checked=checked屬性設(shè)置默認(rèn)選中讀書游泳購物睡覺(8)普通按鈕把input標(biāo)簽的type屬性設(shè)定為button定義一個(gè)普通按鈕，沒有默認(rèn)行為(9)文件上傳框把input標(biāo)簽的type屬性設(shè)定為file定義一個(gè)文件上傳框，此時(shí)form標(biāo)簽的enctype屬性需設(shè)置為：multipart/form-data(10)表單隱藏域在頁面上沒有任何顯示，但是可以隨表單一起提交，通常用來攜帶一些后臺(tái)程序需要用到的值(11)多行文本框使用textarea標(biāo)簽定義一個(gè)多行文本框，rows控制高度，cols控制寬度鍵值對(duì)關(guān)系：content=多行文本框的默認(rèn)值沒有value屬性多行文本框的默認(rèn)值(12)多選下拉列表使用select標(biāo)簽定義下拉列表，使用option標(biāo)簽定義下拉列表的列表項(xiàng)myList=item03使用selected=selected屬性設(shè)定默認(rèn)選中列表項(xiàng)01列表項(xiàng)02列表項(xiàng)03列表項(xiàng)04列表項(xiàng)05myMulList=mulItem01&myMulList=mulItem03&myMulList=mulItem05多選下拉列表項(xiàng)01多選下拉列表項(xiàng)02多選下拉列表項(xiàng)03多選下拉列表項(xiàng)04多選下拉列表項(xiàng)056.列表無序列表火影忍者死神海賊王妖精的尾巴有序列表漩渦鳴人黑崎一護(hù)路飛妖精的尾巴7.標(biāo)題標(biāo)簽一級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題8.段落白日依山盡葉子的離去是風(fēng)的追求，還是樹的不挽留呢？黃河入海流9.插入圖片10.HTML顏色葉子的離去是風(fēng)的追求，還是樹的不挽留呢？葉子的離去是風(fēng)的追求，還是樹的不挽留呢？葉子的離去是風(fēng)的追求，還是樹的不挽留呢？葉子的離去是風(fēng)的追求，還是樹的不挽留呢？11.框架使用frameset定義框架集，在frameset標(biāo)簽內(nèi)使用frame定義框架把瀏覽器窗口分成3列，第一列占30%，第二列占30%，第三列占40%通過src屬性指定關(guān)聯(lián)的HTML文件的路徑設(shè)定name屬性后，可以使用超鏈接target屬性讓目標(biāo)頁面在當(dāng)前框架中顯示，詳情見PPT 45頁在整體的第三列里面再分成上下兩行，各占50%如果瀏覽器不支持框架，則顯示noframes里面body里面的內(nèi)容，注意：如果沒有noframes標(biāo)簽，body標(biāo)簽和frameset標(biāo)簽不能共存抱歉，您的瀏覽器不支持框架!四、實(shí)驗(yàn)方式：每個(gè)學(xué)員必須獨(dú)立完成五、任務(wù)任務(wù)1：使用今天所學(xué)內(nèi)容制作一個(gè)注冊(cè)頁面，要求包括所有表單元素（時(shí)間：40分鐘）任務(wù)描述：可以自己設(shè)定一個(gè)情境，比如模擬一個(gè)論壇注冊(cè)頁面，用文本框、密碼框提交用戶名、密碼；用單選框提交性別；用多選框提交愛好；用多行文本框提交個(gè)性簽名；用下拉列表選擇喜歡的版塊等等。任務(wù)目的：學(xué)會(huì)使用表單標(biāo)簽任務(wù)要求：將整個(gè)項(xiàng)目打包，壓縮并且上傳到作業(yè)平臺(tái)。難點(diǎn)提示：布局方面可以使用進(jìn)行換行任務(wù)2：使用今天所學(xué)內(nèi)容制作一個(gè)表格頁面（時(shí)間：20分鐘）任務(wù)描述：數(shù)據(jù)可以自己設(shè)定，比如學(xué)生成績(jī)，員工工資等任務(wù)目的：學(xué)會(huì)使用HTML表格標(biāo)簽任務(wù)要求：將整個(gè)項(xiàng)目打包，壓縮并且上傳到作業(yè)平臺(tái)。任務(wù)3：使用今天所