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

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