PHPCMS中國WEB前端基礎培訓課程HTML篇.ppt

《PHPCMS中國WEB前端基礎培訓課程HTML篇.ppt》由會員分享，可在線閱讀，更多相關《PHPCMS中國WEB前端基礎培訓課程HTML篇.ppt（64頁珍藏版）》請在裝配圖網上搜索。

課程名稱web前端基礎課程(html),講師：老蝸牛PHPCMS中國培訓中心QQ：860275582郵件：i@,開篇,用于頁面展示學習內容：HTML、CSS、div+css、JavaScript學習時間：四天,主要內容,HTML簡介HTML結構headtitlebodyfontlinkimgtableulformdivframesetiframe,HTML簡介,什么是HTML？名稱HTML英文名稱是什么?HyperTextMarkupLanguage（超文本標記語言）主要用于頁面信息展示,HTML簡介,HTML簡介,HTML語言是目前制作網頁最流行的語言可以通過瀏覽器或文本編輯器查看HTML文檔,如何編寫HTML,先看個實例,HTML簡介,以“”開始，以“”表示標簽的結束一對標簽中還可以嵌套其它的標簽。單獨標簽不需要與這配對的結束標簽，又稱這為空標簽，例如屬性設置的一般格式為：屬性名＝屬性值，屬性值部分可以用英文的雙引號（””）可單引號（‘’）引起來，也可以不使用任何引號。,HTML結構,文件擴展名為.html/.htmHTML文件的所有內容都應該包含在標記中HTML語言在結構上分為兩部分，即頭部和主體。頭部描述瀏覽器所需要的一些信息，如文件編碼、標題等。主體則包含了文件的主體內容,人,HTML結構,標簽：,,,,,,,,,,,,,HTML結構,HTML頭部,HTML頭部需要包含在中，可以在頭中使用的標記包括、、、、等等。定義文檔的標題，最終將顯示在瀏覽器標題欄上定義頁面元信息，主要包含了搜索信息用于引入文件.css指定頁面腳本文件.js,Meta元素,META標簽分兩大部分：HTTP標題信息(HTTP-EQUIV)和頁面描述信息(NAME)HTTP-EQUIV似于HTTP的頭部協議，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容,響應報頭信息，如頁面編碼、緩存模式等等.NAME定義頁面基本信息，這些信息是提供給網絡搜索引擎的，搜索引擎通過這些信息可以找到頁面,META--HTTP-EQUIV,HTTP-EQUIVHTTP-EQUIV類似于HTTP的頭部協議，它回應給瀏覽器一些有用的信息，以幫助正確和精確地顯示網頁內容。常用的HTTP-EQUIV類型有：Content-Type和Content-Language(顯示字符集的設定)Refresh(刷新)Expires(期限)Pragma(cach模式)---禁止從本地緩存中獲取信息Content="No-cach"Window-target(顯示窗口的設定)---強制頁面在當前窗口以獨立頁面顯示。Content選項：_blank、_top、_self、_parent,META--HTTP-EQUIV,Content-Type和Content-Language(顯示字符集的設定)使用:使用較少,META--HTTP-EQUIV,refresh--刷新例子：refresh.html,META--NAME,name屬性用于描述頁面內容，主要是向搜索引擎提供查詢關鍵字等NAME變量name是描述網頁的，對應于Content（網頁內容），以便于搜索引擎機器人查找、分類（目前幾乎所有的搜索引擎都使用網上機器人自動查找meta值來給網頁分類）Keywords(關鍵字)Description(簡介)：Robots(機器人向導)說明：Robots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。Content的參數有all、none、index、noindex、follow、nofollow。默認是all,HTML主體,HTML主體是HTML頁面中最終要顯示出來的內容部分，主體應該包含在中可以在主體中輸出文本、插入圖片、表格、表單等等。,HTML簡介,練習：請做一個html頁面，輸出：“這是我的第一個html頁面”,HTML標簽,標簽屬性標簽可以擁有屬性。屬性進一步說明了該元素的顯示或使用特性。如：屬性的格式：xxx,body體屬性,背景顏色bgcolor="red”背景圖片background＝"back-ground.gif”給出圖片文件位置，如圖片小于頁面時，將循環(huán)填充背景音樂考慮到效率,基本不用,Body主體----字體,字體大小文字#=1,2,3,4,5,6,7字體顏色文字標題字文字#=1，2，3，4，5，6,Body主體----字體,下劃線：文字刪除線：文字增強：文字粗體：文字斜體：文字刪除線:文字下劃線:文字地址:文字用的少,其他元素,段落：標題字：注釋：span塊div層Span”,然后按空格即可彈出下個提示。,框架,框架（frame）用于分割窗口，也就是瀏覽器在顯示頁面時分成幾部分，每部分由獨立的頁面顯示，如圖,,,,,框架,加入框架的頁面不需要元素，使用frameset在另外一個frame中打開頁面target左右分：,框架,上下分：,框架,frameset屬性COLS=“20,*”左右分，可一次分多個ROWS=“20,*”上下分，同上,框架,frame屬性1.SRC=“a.htm”當前框架顯示的網頁URL2.NAME框架名稱3.scrolling=“no”是否顯示滾動條，YES顯示，NO不顯示，AUTO視情況顯示。,框架,4.noresize不讓使用者改變大小。5.marginheight=2框架高度部份邊緣所保留的空間。6.marginwidth=2框架寬度部份邊緣所保留的空間。,框架,不需要一個單獨的頁面存放框架.靈活性好.Target*******_self_parent_blank_top,練習,做一個上下,左右結構的框架框架頁面frameset.html,作業(yè)1,做一個注冊頁面form.html要求:1,有用戶名,密碼,確認密碼,Email,所在城市這幾個必須填寫的項.(例:用戶名*)2,有性別,生日,個人主頁,自我介紹等選填項3,有是否接受系統(tǒng)郵件選擇(接受或不接受),作業(yè)2,完成由一個登陸頁面登陸頁面login.html用戶名，密碼，驗證碼，提交登陸進入到剛才寫的那個框架頁面,框架頁面的left頁面有文字鏈接”注冊”點注冊鏈接到作業(yè)1的注冊頁面form.html顯示在mainMain顯示注冊頁面register.html作業(yè)完成后提交到PHPCMS中國社區(qū)培訓區(qū)作業(yè)板塊。可以在PHPCMS中國建站培訓交流群探討：143560049,PHPCMS零基礎建站培訓,培訓內容（大分類）包括：1.網站策劃；2.主機空間、域名選購；3.前端培訓（細分）4.主流開源CMS建站培訓（主講phpcms，dedecms）5.網站運營及搜索引擎優(yōu)化（SEO）6.待定主辦：PHPCMS中國模板超市網,