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

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

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