HPCMS中國WEB前端基礎(chǔ)培訓(xùn)課程HTML篇.ppt

《HPCMS中國WEB前端基礎(chǔ)培訓(xùn)課程HTML篇.ppt》由會(huì)員分享，可在線閱讀，更多相關(guān)《HPCMS中國WEB前端基礎(chǔ)培訓(xùn)課程HTML篇.ppt（64頁珍藏版）》請(qǐng)?jiān)谘b配圖網(wǎng)上搜索。

課程名稱web前端基礎(chǔ)課程 html 講師 老蝸牛PHPCMS中國培訓(xùn)中心QQ 860275582郵件 i 開篇 用于頁面展示學(xué)習(xí)內(nèi)容 HTML CSS div css JavaScript學(xué)習(xí)時(shí)間 四天 主要內(nèi)容 HTML簡介HTML結(jié)構(gòu)headtitlebodyfontlinkimgtableulformdivframesetiframe HTML簡介 什么是HTML 名稱HTML英文名稱是什么 HyperTextMarkupLanguage 超文本標(biāo)記語言 主要用于頁面信息展示 HTML簡介 HTML簡介 HTML語言是目前制作網(wǎng)頁最流行的語言可以通過瀏覽器或文本編輯器查看HTML文檔 如何編寫HTML 先看個(gè)實(shí)例 HTML簡介 以 開始 以 表示標(biāo)簽的結(jié)束一對(duì)標(biāo)簽中還可以嵌套其它的標(biāo)簽 單獨(dú)標(biāo)簽不需要與這配對(duì)的結(jié)束標(biāo)簽 又稱這為空標(biāo)簽 例如屬性設(shè)置的一般格式為 屬性名 屬性值 屬性值部分可以用英文的雙引號(hào) 可單引號(hào) 引起來 也可以不使用任何引號(hào) HTML結(jié)構(gòu) 文件擴(kuò)展名為 html htmHTML文件的所有內(nèi)容都應(yīng)該包含在標(biāo)記中HTML語言在結(jié)構(gòu)上分為兩部分 即頭部和主體 頭部描述瀏覽器所需要的一些信息 如文件編碼 標(biāo)題等 主體則包含了文件的主體內(nèi)容 人 HTML結(jié)構(gòu) 標(biāo)簽 HTML結(jié)構(gòu) HTML頭部 HTML頭部需要包含在中 可以在頭中使用的標(biāo)記包括 等等 定義文檔的標(biāo)題 最終將顯示在瀏覽器標(biāo)題欄上定義頁面元信息 主要包含了搜索信息用于引入文件 css指定頁面腳本文件 js Meta元素 META標(biāo)簽分兩大部分 HTTP標(biāo)題信息 HTTP EQUIV 和頁面描述信息 NAME HTTP EQUIV似于HTTP的頭部協(xié)議 它回應(yīng)給瀏覽器一些有用的信息 以幫助正確和精確地顯示網(wǎng)頁內(nèi)容 響應(yīng)報(bào)頭信息 如頁面編碼 緩存模式等等 NAME定義頁面基本信息 這些信息是提供給網(wǎng)絡(luò)搜索引擎的 搜索引擎通過這些信息可以找到頁面 META HTTP EQUIV HTTP EQUIVHTTP EQUIV類似于HTTP的頭部協(xié)議 它回應(yīng)給瀏覽器一些有用的信息 以幫助正確和精確地顯示網(wǎng)頁內(nèi)容 常用的HTTP EQUIV類型有 Content Type和Content Language 顯示字符集的設(shè)定 Refresh 刷新 Expires 期限 Pragma cach模式 禁止從本地緩存中獲取信息Content No cach Window target 顯示窗口的設(shè)定 強(qiáng)制頁面在當(dāng)前窗口以獨(dú)立頁面顯示 Content選項(xiàng) blank top self parent META HTTP EQUIV Content Type和Content Language 顯示字符集的設(shè)定 使用 使用較少 META HTTP EQUIV refresh 刷新例子 refresh html META NAME name屬性用于描述頁面內(nèi)容 主要是向搜索引擎提供查詢關(guān)鍵字等NAME變量name是描述網(wǎng)頁的 對(duì)應(yīng)于Content 網(wǎng)頁內(nèi)容 以便于搜索引擎機(jī)器人查找 分類 目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找meta值來給網(wǎng)頁分類 Keywords 關(guān)鍵字 Description 簡介 Robots 機(jī)器人向?qū)?說明 Robots用來告訴搜索機(jī)器人哪些頁面需要索引 哪些頁面不需要索引 Content的參數(shù)有all none index noindex follow nofollow 默認(rèn)是all HTML主體 HTML主體是HTML頁面中最終要顯示出來的內(nèi)容部分 主體應(yīng)該包含在中可以在主體中輸出文本 插入圖片 表格 表單等等 HTML簡介 練習(xí) 請(qǐng)做一個(gè)html頁面 輸出 這是我的第一個(gè)html頁面 HTML標(biāo)簽 標(biāo)簽屬性標(biāo)簽可以擁有屬性 屬性進(jìn)一步說明了該元素的顯示或使用特性 如 屬性的格式 xxx body體屬性 背景顏色bgcolor red 背景圖片background back ground gif 給出圖片文件位置 如圖片小于頁面時(shí) 將循環(huán)填充背景音樂考慮到效率 基本不用 Body主體 字體 字體大小文字 1 2 3 4 5 6 7字體顏色文字標(biāo)題字文字 1 2 3 4 5 6 Body主體 字體 下劃線 文字刪除線 文字增強(qiáng) 文字粗體 文字斜體 文字刪除線 文字下劃線 文字地址 文字用的少 其他元素 段落 標(biāo)題字 注釋 span塊div層Span div的區(qū)別 演示span div html body主體 圖片 圖片 img標(biāo)記用來在頁面中插入圖片 其語法形式 src指明圖片URL地址alt在圖象位置顯示的文字圖片邊框 border 設(shè)定圖像邊的寬度 鏈接 HTML使用超級(jí)鏈接來連接到網(wǎng)絡(luò)上的其他頁面上 語法形式 顯示文本href屬性 鏈接頁面地址 href 所要鏈接到的頁面地址 target屬性 網(wǎng)易屬性值 self body主體 鏈接 body主體 鏈接 鏈接PHPCMS中國查看 前者為絕對(duì)路徑 后者為相對(duì)路徑 同級(jí)目錄 上一級(jí)目錄 body主體 鏈接 文字作為連接 文字連接圖片作為鏈接 body主體 路徑 相對(duì)路徑 資源路徑與你打開頁面有關(guān)聯(lián)的路徑叫相對(duì)路徑絕對(duì)路徑 資源路徑與你打開頁面無關(guān)的路徑叫絕對(duì)路徑 body主體 表格 表格在頁面上最主要的作用其實(shí)不是繪制實(shí)際中使用的表格 更多情況下是為了使用頁面看起來更規(guī)整 而將頁面各部分放置到表格中 1 大量數(shù)據(jù)的現(xiàn)實(shí)table2 布局小網(wǎng)站 table大網(wǎng)站 div css body主體 表格 table實(shí)例 body主體 表格 表格基本語法 定義表格 定義表行 定義表元是的子元素定義列 body主體 表格 畫一個(gè)表格 一行兩列 注意 一個(gè)完整的表格必須由三個(gè)標(biāo)簽構(gòu)成 且應(yīng)該先畫行后畫列 body主體 表格 表格的屬性border 邊框 屬性 border number background 背景圖像 屬性 background 圖片位置 width height屬性 width 300 height 200 企業(yè)開發(fā)HTML工具 Dreamweaver安裝 body主體 表格 colspan屬性 合并縱向單元格 colspan number rowspan屬性 合并橫向單元格 rowspan number body主體 表格 可以為表格設(shè)置背景圖片和背景顏色背景色 Bgcolor 不推薦使用 背景圖片 background行背景色 bgcolor 練習(xí)表格 body主體 div和span div圖層span 其他元素 塊標(biāo)簽 內(nèi)容空格符 標(biāo)志實(shí)例 body主體 列表 無序列表 UnorderedList 有序列表 OrderedList 自定義列表 DefinitionList body主體 列表 無序列表 無序列表是一個(gè)項(xiàng)目的序列 各項(xiàng)目前加有標(biāo)記 通常是黑色的實(shí)心小圓圈無序列表以標(biāo)簽開始 每個(gè)列表項(xiàng)目以開始 例子 ulexample html body主體 列表 有序列表有序列表也是一個(gè)項(xiàng)目的序列 所謂有序 指的是按照數(shù)字或字母等順序排列列表項(xiàng)目 各項(xiàng)目前加有數(shù)字作標(biāo)記 有序列表以標(biāo)簽開始 每個(gè)列表項(xiàng)目以開始 屬性type可以指定為A a 1 i I例子 olexample html body主體 列表 自定義列表自定義列表不是一個(gè)項(xiàng)目的序列 它是一系列條目和它們的解釋 自定義列表以標(biāo)簽開始 自定義列表?xiàng)l目以開始 自定義列表的釋義以開始 例子 dlexample html總結(jié) 列表在我們后面的div css布局會(huì)經(jīng)常用到 所以大家認(rèn)真對(duì)待哦 body主體 表單 什么是表單 表單的作用 動(dòng)態(tài)網(wǎng)頁技術(shù)中 表單的作用是十分重要的 用戶與服務(wù)器的交互就是通過表單來完成的 表單的結(jié)構(gòu) 表單 輸入類型 文本框text密碼password隱藏字段hidden單選框radio復(fù)選框checkbox下拉菜單select和option文本域textarea文件打開file按鈕button提交與重置resetsubmit body主體 表單 HTML表單元素 表單元素是能夠讓用戶在表單中輸入信息的元素 文本框標(biāo)簽 注意 大部分瀏覽器中 文本框的寬度默認(rèn)是20個(gè)字符 body主體 表單 單選按鈕標(biāo)簽 MaleFemaleChecked屬性的特殊性注意 單選按鈕的名稱必須相同 否則不能控制單選特性 body主體 表單 復(fù)選框 studygame body主體 表單 Select屬性欄位名稱 name selectname 資料欄位名 設(shè)定顯示的選項(xiàng)數(shù) size selectsize 個(gè)數(shù) 多重選項(xiàng) multiple selectmultiple body主體 表單 文本域 Thecatwasplayinginthegarden body主體 表單 兩個(gè)特殊的按鈕提交按鈕重置按鈕注意 提交按鈕必須配合form的action屬性使用 修改input元素的外觀顯示 給元素增加style屬性 加上color后加上 然后按空格即可彈出下個(gè)提示 框架 框架 frame 用于分割窗口 也就是瀏覽器在顯示頁面時(shí)分成幾部分 每部分由獨(dú)立的頁面顯示 如圖 框架 加入框架的頁面不需要元素 使用frameset在另外一個(gè)frame中打開頁面target左右分 框架 上下分 框架 frameset屬性COLS 20 左右分 可一次分多個(gè)ROWS 20 上下分 同上 框架 frame屬性1 SRC a htm 當(dāng)前框架顯示的網(wǎng)頁URL2 NAME框架名稱3 scrolling no 是否顯示滾動(dòng)條 YES顯示 NO不顯示 AUTO視情況顯示 框架 4 noresize不讓使用者改變大小 5 marginheight 2框架高度部份邊緣所保留的空間 6 marginwidth 2框架寬度部份邊緣所保留的空間 框架 不需要一個(gè)單獨(dú)的頁面存放框架 靈活性好 Target self parent blank top 練習(xí) 做一個(gè)上下 左右結(jié)構(gòu)的框架框架頁面frameset html 作業(yè)1 做一個(gè)注冊頁面form html要求 1 有用戶名 密碼 確認(rèn)密碼 Email 所在城市這幾個(gè)必須填寫的項(xiàng) 例 用戶名 2 有性別 生日 個(gè)人主頁 自我介紹等選填項(xiàng)3 有是否接受系統(tǒng)郵件選擇 接受或不接受 作業(yè)2 完成由一個(gè)登陸頁面登陸頁面login html用戶名 密碼 驗(yàn)證碼 提交登陸進(jìn)入到剛才寫的那個(gè)框架頁面 框架頁面的left頁面有文字鏈接 注冊 點(diǎn)注冊鏈接到作業(yè)1的注冊頁面form html顯示在mainMain顯示注冊頁面register html作業(yè)完成后提交到PHPCMS中國社區(qū)培訓(xùn)區(qū)作業(yè)板塊 可以在PHPCMS中國建站培訓(xùn)交流群探討 143560049 PHPCMS零基礎(chǔ)建站培訓(xùn) 培訓(xùn)內(nèi)容 大分類 包括 1 網(wǎng)站策劃 2 主機(jī)空間 域名選購 3 前端培訓(xùn) 細(xì)分 4 主流開源CMS建站培訓(xùn) 主講phpcms dedecms 5 網(wǎng)站運(yùn)營及搜索引擎優(yōu)化 SEO 6 待定主辦 PHPCMS中國模板超市網(wǎng)