網頁基礎￥￥html 基礎課件

1、HTML基礎第一章課程地位2本課目標學完本門課程后，你能夠使用DIV+CSS布局網頁使用CSS美化網頁制作精美的商業(yè)網站3課程結構圖4學習方法5本章任務制作圖文并茂的簡單首頁制作李清照的詞“清平樂”制作李清照簡介制作京東商城家用電器排行榜制作聚美優(yōu)品新手指南頁面7本章目標會使用HTML的基本結構創(chuàng)建網頁會使用文本相關標簽排版文本信息會使用圖像相關標簽實現圖文并茂的頁面會使用a標簽創(chuàng)建超鏈接、錨鏈接以及功能性鏈接8HTML基本結構HTML網頁基本結構 我的第一個網頁 我的第一個網頁網頁頭部主體部分標簽標記著 HTML 文檔的開始和結束10網頁編輯工具記事本UltraEdit演示示例1：在記事本和

2、UltraEdit中操作11網頁基本信息3-1DOCTYPE聲明無標題文檔Strict（嚴格類型）Transitional（過渡類型）Frameset（框架類型）12網頁基本信息3-3標簽meta http-equiv=Content-Type content=text/html; charset=gb2312”搜索關鍵字內容描述網頁字符編碼14W3C標準HTML常用版本HTML和XHTML的區(qū)別HTML內容結構語義化15網頁的基本標簽6-2段落標簽北京歡迎你北京歡迎你，有夢想誰都了不起！有勇氣就會有奇跡。演示示例3：段落標簽17網頁的基本標簽6-3換行標簽北京歡迎你 北京歡迎你，有夢想誰都了

3、不起！ 有勇氣就會有奇跡。 北京歡迎你，為你開天辟地 演示示例4：換行標簽18網頁的基本標簽6-4水平線標簽北京歡迎你 北京歡迎你，有夢想誰都了不起！ 有勇氣就會有奇跡。 北京歡迎你，為你開天辟地 演示示例5：水平線標簽19網頁的基本標簽6-5字體樣式標簽加粗：斜體：徐志摩人物簡介 1910年入杭州學堂 1918年赴美國克拉大學學習銀行學 演示示例6：字體樣式標簽20網頁的基本標簽6-6注釋和特殊符號演示示例7和8：注釋和特殊符號特殊符號字符實體示例空格百度|新浪大于號()如果時間晚上6點，就坐車回家小于號()如果時間早上7點，就走路去上學引號()W3C規(guī)范中，HTML的屬性值必須用成對的引起

4、來版權符號 2003-2013北大青鳥21學員操作制作清平樂訓練要點標簽的嵌套使用網頁中基本標簽的使用需求說明標題用標簽，文字用標簽，標題與正文之間的分隔線使用標簽，詞結束后使用標簽換行教員講解需求指導實現思路詩詞內容均放在一個標簽中，詩詞中需要換行時使用換行，使用標簽的嵌套完成時間：15分鐘22共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解24圖像標簽常見的圖像格式JPGGIFPNGBMP25鏈接標簽演示示例10：超鏈接的應用鏈接文本或圖像鏈接路徑鏈接在哪個窗口打開語法無漂白薄皮核桃常用值：_self、_blank文本超鏈接圖像超鏈接示例27常用的超鏈接3-1頁面間鏈接從一個

5、頁面鏈接到另外一個頁面錨鏈接功能性鏈接演示示例11：頁面間鏈接28常用的超鏈接3-2錨鏈接從A頁面的甲位置跳轉到本頁中的乙位置從A頁面的甲位置跳轉到B頁面中的乙位置創(chuàng)建步驟創(chuàng)建跳轉標記創(chuàng)建跳轉鏈接演示示例12：錨鏈接乙位置甲位置29常用的超鏈接3-3功能性鏈接電子郵件QQMSN演示示例13：郵件鏈接聯系我們示例30學員操作制作電器排行榜訓練要點圖片和文字混合排版圖像標簽、標題標簽、水平線標簽的應用需求說明制作京東商城家用電器排行榜頁面，標題使用標題標簽，商品之間使用水平線分隔教員講解需求指導實現思路家用電器排行榜放在標題標簽中圖像使用標簽商品之間使用標簽實現分隔完成時間：20分鐘31學員操作制作新手指南頁面需求說明制作聚美優(yōu)品新手指南頁面，圖片均要加上alt屬性，“常見問題”和“用戶協(xié)議”設置成空鏈接，“注冊幫助”和“登錄幫助”設置本頁錨鏈接，分別鏈接至本頁新用戶注冊和登錄幫助處完成時間：20分鐘練習32共性問題集中講解常見問題及解決辦法代碼規(guī)范問題共性問題集中講解33總結HTML文件的基本結構和網頁基本信息基本標簽包括、插入圖像的基本語法，alt屬性的應用超鏈接的應用以及鏈接的分類34相關學習資源學習資料使用HTML語言和CSS開發(fā)商業(yè)站點“使用HTML語言和CSS開發(fā)商業(yè)站點”課程學生用書學習平