整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5開發(fā)學(xué)習(xí)進(jìn)階篇

          HTML5開發(fā)學(xué)習(xí)進(jìn)階篇

          、盒模型

          我們在上篇文章<html5前端開發(fā)之基礎(chǔ)篇>中已經(jīng)對HTML有了基礎(chǔ)的了解,都說‘盒模型’非常神奇,但是很多朋友始終不能掌握其原理。此事無礙,且看此圖。

          我們把這個盒子,類比成我們中秋節(jié)的時候包裝月餅的月餅盒子。

          其中兩個月餅盒子之間的距離就是咱們要介紹的-->margin(外邊距).

          而咱們每個月餅都要有最外層的包裝盒,

          這個包裝盒的厚度,就是咱們的--> border(邊框).

          那咱們的月餅不可能都是直接挨在一起的,對吧,

          那每個月餅之間的間距,咱們就叫做--> padding(內(nèi)邊距).

          那咱們介紹了月餅盒,咱們的月餅總應(yīng)該有吧。

          對的,咱們月餅的寬度就是 --> width.

          高度就是 --> height.

          而咱們的月餅就叫做 --> element(元素).

          “那我們的盒模型的距離又該怎么去計算呢?”看下圖

          在 CSS 中,width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。

          增加內(nèi)邊距、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸,但是會增加元素框的總尺寸。

          假設(shè)框的每個邊上有 10 個像素的外邊距和 5 個像素的內(nèi)邊距。

          如果希望這個元素框達(dá)到 100 個像素,就需要將內(nèi)容的寬度設(shè)置為 70 像素。

          二、div標(biāo)簽

          上篇文章中我們學(xué)習(xí)了 HTML 的入門基礎(chǔ),接下來我們該來一起學(xué)學(xué)最常用的標(biāo)簽 div了。

          什么是div呢?說白了,div 是一個塊級元素,在實際HTML文檔應(yīng)用中一個塊通常是以<div>開頭,以</div>結(jié)束,<div>的出現(xiàn)也意味著它的內(nèi)容自動地開始一個新行。此外,還可以對 <div> 元素應(yīng)用 class 或 id 屬性。可以對同一個 <div>元素應(yīng)用 class 或 id 屬性,但是更常見的情況是只應(yīng)用其中一種。這兩者的主要差異是,class 用于元素組(類似的元素,或者可以理解為某一類元素),而 id 用于標(biāo)識單獨的唯一的元素。

          三、塊元素(block)

          塊元素基本特征

          塊元素會獨占一行,多個block元素會各自新起一行。默認(rèn)情況下,block元素寬度自動填滿其父元素寬度。

          塊元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。

          塊元素可以設(shè)置margin和padding屬性。

          塊元素支持所有的 CSS 樣式

          塊元素基本可以劃分以下幾類:

          div

          無意義,主要是配合界面布局(雙標(biāo)簽)

          p

          語義:段落(雙標(biāo)簽)

          h1~h6

          定義一級標(biāo)題至六級標(biāo)題

          注意

          h1 權(quán)重非常高,一般一個頁面只有一個H1

          h2 權(quán)重非常高,一般一個頁面不要超過10個,大型網(wǎng)站除外

          h3 隨便用

          都是雙標(biāo)簽

          但是需要注意一點,假如使用 p 標(biāo)簽的時候,里面嵌套了 div 標(biāo)簽,這樣會導(dǎo)致 p 標(biāo)簽里面的樣式被分割掉,這點需要注意。

          除此之外,塊元素還包括有序列表 ol,無序列表 ul ,以及列表dl,dt,dd。

          注:所有的標(biāo)簽全部有特定的樣式,我們可以通過 CSS 去清掉所有的樣式,建立屬于自己的 reset.css 文件。

          /*margin的樣式初始化*/body,h1,h2,h3,h4,h5,h6,p,ol,ul { margin:0;

          }/*padding的樣式初始化*/ol,ul { padding:0;

          }/*列表點點的樣式初始化*/ul,ol { list-style: none;

          }

          四、內(nèi)聯(lián)元素(inline)

          內(nèi)聯(lián)元素基本特征

          inline元素不會獨占一行,多個相鄰的行內(nèi)元素會排列在同一行里,直到一行排列不下,才會新?lián)Q一行

          內(nèi)容撐開寬度

          inline元素設(shè)置width,height屬性無效。

          inline元素不支持上下的margin和padding,只支持左右的margin和padding

          代碼換行被解析

          內(nèi)聯(lián)元素中,有一個我們最常見的標(biāo)簽,那就是超鏈接 a 標(biāo)簽。它能從一個頁面中跳轉(zhuǎn)到另外一個界面,同時也可以在同一個頁面之中設(shè)置空間‘錨點’,實現(xiàn)特定位置的跳轉(zhuǎn)

          注意:a 標(biāo)簽中一定不能嵌套 a 標(biāo)簽

          a標(biāo)簽的錨點設(shè)置方法:

          可以通過設(shè)置 href=“# + 錨點名稱” 的方式進(jìn)行跳轉(zhuǎn),注意,一定要加 #

          例如:

          <!DOCTYPE html><html lang="en"><head>

          <meta charset="UTF-8">

          <title>Document</title></head><body>

          <span id=“top”></span>

          <p>asdnajsd</p>

          <br>

          <br>

          <br>

          <br>

          <br>

          <br>

          <br>

          <a href=“#top”>回到頂部</a></body></html>

          標(biāo)簽的初始化

          下劃線的樣式初始化/*下劃線的樣式初始化*/a { text-decoration: none;

          }/*字體樣式初始化*/em { font-style:normal;

          }

          五、內(nèi)聯(lián)塊元素

          內(nèi)聯(lián)塊元素基本特性

          1.支持所有css的樣式

          2.除塊屬性的標(biāo)簽以外,同屬性以及行屬性標(biāo)簽排在一排

          3.代碼換行被解析

          內(nèi)聯(lián)塊元素同時具有了塊元素可以設(shè)置寬度和高度的特點,同時又可以像內(nèi)聯(lián)元素一樣,可以和其他行屬性標(biāo)簽處于同一行。

          雖然內(nèi)聯(lián)塊元素能同時擁有塊元素和內(nèi)聯(lián)元素的特性,但很多時候,在頁面中還是要使用不同標(biāo)簽對應(yīng)的特性。其次就是,內(nèi)聯(lián)塊也并不是完美無缺的。因為設(shè)置內(nèi)聯(lián)塊的時候,它的換行會被解析。

          如下文所示:

          從下圖可以看見,img 的邊上,并沒有 margin,但是實際展示的時候,會存在一條白的間隙。

          而當(dāng)我們把兩個 img 標(biāo)簽連在一起寫的時候,就正常了,如第一個 img 和第二個 img。

          具體解決方法會在下一篇文章中介紹

          圖片標(biāo)簽的初始化

          img { border:none;

          }

          當(dāng)然,你在網(wǎng)頁中看到塊元素,不一定就是塊元素,他有可能已經(jīng)是一個內(nèi)聯(lián)塊元素了。

          display 可以對它原本的特性進(jìn)行一個修改,可以讓原本是塊屬性的元素變成行屬性元素,同時內(nèi)聯(lián)屬性也同樣可以轉(zhuǎn)化為塊屬性。

          本文鏈接:http://hn.lanou3g.com/lozx/2890.html

          HTML5 是最近十年來 Web 開發(fā)標(biāo)準(zhǔn)最巨大的飛躍,目前蘋果、谷歌、微軟世界三大移動互聯(lián)網(wǎng)巨頭都支持了 HTML5,HTML5 的發(fā)展給移動互聯(lián)網(wǎng)應(yīng)用帶來了全新的變化。HTML5 的出現(xiàn),給移動互聯(lián)網(wǎng)帶來了新的變革,為移動互聯(lián)網(wǎng)中富媒體的應(yīng)用提供了新的思路,并具有廣闊的應(yīng)用前景。所以HTML5適應(yīng)了目前的移動互聯(lián)網(wǎng)應(yīng)用潮流。

          Html5課程內(nèi)容主要包括以下八個方面:Web頁面制作基礎(chǔ),UI網(wǎng)站設(shè)計,編程基礎(chǔ)技術(shù),后端開發(fā)技術(shù),移動互聯(lián)網(wǎng)應(yīng)用,特效開發(fā)高級實戰(zhàn),企業(yè)級應(yīng)用開發(fā)以及網(wǎng)頁游戲開發(fā)。

          兄弟連教育根據(jù)公司和行業(yè)發(fā)展的實際需要設(shè)計教學(xué)內(nèi)容,現(xiàn)行的課程體系包括四大階段和特級課:“基礎(chǔ)網(wǎng)頁布局與響應(yīng)式布局”、“前端核心技術(shù):Javascript”、“HTML5新特性”、”MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發(fā)”,”特級課:微信開發(fā)”。

          第一階段:基礎(chǔ)網(wǎng)頁布局與響應(yīng)式布局

          主要內(nèi)容:

          1、HTML CSS

          2、PS操作,網(wǎng)頁切圖

          3、基本網(wǎng)頁布局

          4、HTML5 語義標(biāo)簽

          5、HTML5 智能表單

          6、CSS3

          7、Media Query響應(yīng)式布局

          --------------------------------------------------分割符---------------------------------------------------------------------------

          詳細(xì)內(nèi)容包括:

          WEB開發(fā)構(gòu)件

          系統(tǒng)及文件基本操作

          基本的快捷鍵

          描述 Windows Mac OS

          編輯菜單 Alt + E Ctrl + F2 + F

          文件菜單 Alt + F Ctrl + F2 + E

          視圖菜單 Alt + V Ctrl + F2 + V

          全選文本 Ctrl + A Cmd + A

          復(fù)制文本 Ctrl + C Cmd + C

          查找文本 Ctrl + F Cmd + F

          查找替換文本 Ctrl + H Cmd + F

          新建文檔 Ctrl + N Cmd + N

          打開文件 Ctrl + O Cmd + O

          打印選項 Ctrl + P Cmd + P

          保存文件 Ctrl + S Cmd + S

          粘貼文本 Ctrl + V Cmd + V

          剪切文本 Ctrl + X Cmd + X

          重做文本 Ctrl + Y Shift + Cmd + Z

          撤銷文本 Ctrl + Z Cmd + Z

          文本編輯 描述 Windows Mac OS

          光標(biāo)移動操作

          文本編輯操作

          Web 瀏覽器操作

          標(biāo)簽/窗口管理

          打印當(dāng)前網(wǎng)頁

          保存當(dāng)前網(wǎng)頁

          地址欄操作

          書簽操作

          屏幕截圖

          WEB開發(fā)構(gòu)件

          C/S結(jié)構(gòu)

          B/S結(jié)構(gòu)

          HTTP協(xié)議

          傳輸數(shù)據(jù)方式:post,get

          HTTP消息類型:2xx,4xx,5xx

          URL組成

          HTML介紹

          HTML發(fā)展史

          HTML5簡介

          新標(biāo)準(zhǔn)

          引入原生多媒體支持

          引入可編程內(nèi)容

          引入予以Web

          http協(xié)議

          HTTP消息類型:2xx,4xx,5xx

          開發(fā)軟件

          nodepad++

          sublime

          dreamweaver

          HTML介紹

          HTML發(fā)展史

          HTML5介紹

          HTML基本語法與規(guī)范

          標(biāo)簽

          屬性

          固有屬性

          自定義屬性

          通用屬性

          元素

          父元素(理解)

          子元素

          兄弟元素

          后代元素

          主體結(jié)構(gòu)

          長度單位

          顏色單位

          基礎(chǔ)標(biāo)簽

          文本類標(biāo)簽

          文本格式化標(biāo)簽

          <b> 定義粗體文本

          <strong> 定義加重語氣

          <em> 定義著重文字

          <i> 定義斜體字

          <br> 換行標(biāo)簽

          <sub> 定義下標(biāo)字

          <sup> 定義上標(biāo)字

          <ins> 定義插入字

          <del> 定義刪除字

          <code> 定義計算機代碼

          <kbd> 定義鍵盤碼

          <samp> 定義計算機代碼樣本

          <var> 定義變量

          <pre> 定義預(yù)格式文本

          <abbr> 定義縮寫

          <address> 定義地址

          <bdo> 定義文字方向

          <blockquote> 定義長的引用

          <q> 定義短的引用語

          <cite> 定義引用、引證

          <dfn> 定義一個定義項目。

          計算機輸出類

          語義,引用及標(biāo)簽定義

          鏈接<a>

          標(biāo)題Hn

          HTML框架iframe

          段落P

          列表標(biāo)簽

          字符實體

          空格 &nbsp; &#160;

          < 小于號 &lt; &#60;

          > 大于號 &gt; &#62;

          & 和號 &amp; &#38;

          " 引號 &quot; &#34;

          ' 撇號 &apos; (IE不支持) &#39;

          ¢ 分 &cent; &#162;

          £ 鎊 &pound; &#163;

          ¥ 日元 &yen; &#165;

           歐元 &euro; &#8364;

          § 小節(jié) &sect; &#167;

          ? 版權(quán) &copy; &#169;

          ? 注冊商標(biāo) &reg; &#174;

          ? 商標(biāo) &trade; &#8482;

          × 乘號 &times; &#215;

          ÷ 除號 &divide; &#247;

          表格標(biāo)簽

          colgroup

          caption

          table

          thead

          col

          span

          th

          tbody

          tr

          td

          colspan

          rowspan

          tfoot

          頭部標(biāo)簽

          <!doctype html>

          <head> 定義了文檔的信息

          <title> 定義了文檔的標(biāo)題

          <base> 定義了頁面鏈接標(biāo)簽的默認(rèn)鏈接地址

          <link> 定義了一個文檔和外部資源之間的關(guān)系

          <meta> 定義了HTML文檔中的元數(shù)據(jù)

          charsetNew character_set 定義文檔的字符編碼。

          content text 定義與 http-equiv 或 name 屬性相關(guān)的元信息。

          http-equiv content-type

          default-style

          refresh 把 content 屬性關(guān)聯(lián)到 HTTP 頭部。

          name application-name

          author

          description

          generator

          keywords 把 content 屬

          <script> 定義了客戶端的腳本文件

          <style> 定義了HTML文檔的樣式文件

          多媒體標(biāo)簽

          1. img

          1.1 導(dǎo)入一張圖片

          1.2 屬性

          src 圖片地址

          width 設(shè)置圖片寬

          height 設(shè)置圖片高

          border 設(shè)置圖片邊框

          alt 不顯示圖片時的提示信息

          title 鼠標(biāo)放上時顯示的圖片描述信息

          usemap map標(biāo)簽的name #name

          2. map

          2.1 給圖片劃分區(qū)域 配合area

          2.2 屬性

          name 給map指定一個name

          3. area

          3.1 在map的配合下給圖片劃分指定形狀的區(qū)域

          3.2 屬性

          shape 劃分的形狀

          coords 形狀的坐標(biāo)·

          href 要鏈接的地址

          target 新網(wǎng)頁打開方式

          4. audio

          4.1 導(dǎo)入音頻的標(biāo)簽 HTML5新標(biāo)簽

          4.2 屬性

          src 音頻源的路徑 必備

          controls 顯示控制按鈕 必備

          autoplay 自動播放

          loop 是否循環(huán)

          preload 預(yù)加載 不能跟autoplay屬性混用

          4.3 audio標(biāo)簽內(nèi)部加文字,如果瀏覽器支持這個標(biāo)簽則文字不會顯示 ,如果不支持就會顯示

          4.4 audio標(biāo)簽的兩個格式

          簡單格式

          <audio src="../video/music.mp3" controls>您的破瀏覽器不支持,請升級瀏覽器

          </audio>

          完整格式 視頻源單獨放到source標(biāo)簽中

          <audio controls>

          您的破瀏覽器不支持,請升級瀏覽器

          <source src='../video/music.mp3' type='audio/mp3'>

          <source src='../video/music.wav' type='audio/wav'>

          </audio>

          5. video

          5.1 導(dǎo)入視頻的標(biāo)簽 HTML5新標(biāo)簽

          5.2 屬性

          src 路徑

          controls 顯示控制按鈕

          autoplay 自動播放 屬性值 auto none

          loop 是否循環(huán)播放

          width 視頻的寬

          height 視頻的高

          poster 縮略圖地址

          6. source

          6.1 配合video標(biāo)簽 導(dǎo)入不同格式的視頻 HTML5新標(biāo)簽

          6.2 屬性

          src 視頻地址

          7. canvas 用于畫圖的標(biāo)簽

          8. embed

          8.1 導(dǎo)入多媒體文件 音頻 視頻 HTML5新標(biāo)簽

          8.2 屬性

          src 多媒體文件地址

          width

          height

          HTML表單及智能表單

          1. 表單相關(guān)標(biāo)簽

          1.1 form 客戶端跟服務(wù)器端進(jìn)行交互,常用語 登錄 注冊 調(diào)查問卷...

          ① 定義表單 所有的表單控件放在form中

          ② 屬性

          action 表單要提交的地址

          method 提交方法 get(默認(rèn))提交的值會顯示在url上 不安全而且傳遞的值數(shù)量有限 post 提交的內(nèi)容不會顯示 在url上,傳遞的值范圍也比get方式的大,相對安全

          target 打開新網(wǎng)頁的方式 _self _blank _top _parent

          enctype="multipart/form-data" 傳文件必須加上

          1.2 input

          ① 定義輸入框密碼框單選框復(fù)選框.....

          ② 屬性

          type input的類型

          name input的名字

          value input的值

          checked 默認(rèn)radio和checkbox

          size input框的大小 type:text password textarea

          maxlength input最大輸入長度 type:text password

          1.3 button

          ① 以標(biāo)簽形式定義按鈕

          ② 屬性

          type 設(shè)置submit(默認(rèn)值), 按鈕具有提交功能 設(shè)置為button,普通按鈕 reset 重置

          1.4 textarea

          ① 文本域 雙標(biāo)簽

          ② 屬性

          name 指定名字

          rows 指定行數(shù) 決定文本域高度

          cols 指定列數(shù) 決定文本域?qū)挾?/p>

          1.5 select

          ① 選擇框 下拉框 單選框

          ② 屬性

          name 指定名字

          multiple 設(shè)置為多選

          1.6 option

          ① 定義select中的的選項

          ② 屬性

          value 指定真正的值

          selected 默認(rèn)值

          1.7 optgroup

          ① 給option分組 不常用

          1.8 fieldset 套在form的外部 添加邊框 不常用

          1.9 legend 在邊框定義form的標(biāo)題 不常用

          1.20 input select textarea button 稱作表單控件元素

          1.21 通用屬性 所有的表單控件元素都具有屬性 disabled enabled(默認(rèn))

          2. form表單input中type類型

          text 文本框 value設(shè)置默認(rèn)值

          password 密碼框 value設(shè)置默認(rèn)值

          radio 單選框 所有的redio name相同才能單選 value設(shè)置真正提交的值 默認(rèn)的按鈕可以設(shè)置checked

          checkbox 復(fù)選框 value設(shè)置真正提交的值 設(shè)置默認(rèn)添加checked屬性

          image 提交按鈕,按鈕樣式來自圖片 配合src屬性

          submit 提交按鈕, value指定按鈕上的文字

          reset 重置按鈕 value指定按鈕上的文字

          button button按鈕 value指定按鈕上的文字

          file 上傳框

          hidden 隱藏域 name value

          3. label標(biāo)簽

          用來嵌套input, 點擊label嵌套的任何元素都可以激活label內(nèi)的input

          屬性 for 指定 input的id

          語義標(biāo)簽

          <header> 定義了文檔的頭部區(qū)域

          <nav> 定義運行中的進(jìn)度(進(jìn)程)。

          <article> 定義頁面獨立的內(nèi)容區(qū)域。

          <figure> 規(guī)定獨立的流內(nèi)容(圖像、圖表、照片、代碼等等)。

          <figcaption> 定義 <figure> 元素的標(biāo)題

          <aside> 定義頁面的側(cè)邊欄內(nèi)容。

          <section> 定義文檔中的節(jié)(section、區(qū)段)。

          <footer> 定義 section 或 document 的頁腳。

          <address> 定義文檔作者或擁有者的聯(lián)系信息

          <bdi> 允許您設(shè)置一段文本,使其脫離其父元素的文本方向設(shè)置。

          <command> 定義命令按鈕,比如單選按鈕、復(fù)選框或按鈕

          <details> 用于描述文檔或文檔某個部分的細(xì)節(jié)

          <summary> 標(biāo)簽包含 details 元素的標(biāo)題

          <dialog> 定義對話框,比如提示框

          dt

          dd

          <mark> 定義帶有記號的文本。

          <meter> 定義度量衡。僅用于已知最大和最小值的度量。

          <progress> 定義任何類型的任務(wù)的進(jìn)度。

          <ruby> 定義 ruby 注釋(中文注音或字符)。

          <rt> 定義字符(中文注音或字符)的解釋或發(fā)音。

          <rp> 在 ruby 注釋中使用,定義不支持 ruby 元素的瀏覽器所顯示的內(nèi)容。

          <time> 定義日期或時間。

          <wbr> 規(guī)定在文本中的何處適合添加換行符。

          CSS基礎(chǔ)與規(guī)范知識

          1. CSS的定義

          Cascading Style Sheets 層疊樣式表(級聯(lián)樣式表)

          2. CSS的作用

          定義網(wǎng)頁外觀,如字體、背景、顏色等

          3. CSS特點

          ① 精確的定位 準(zhǔn)確的控制頁面的任何元素

          ② 精細(xì)的控制 可以做到像素級別的調(diào)整

          ③ 樣式與內(nèi)容的分離 便于維護(hù),便于重用

          4. 發(fā)展歷程

          ① CSS1 作為一項W3C推薦,CSS1發(fā)布于 1996年12月17 日。1999 年1月11日,此推薦被重新修訂。

          ② CSS2 作為一項 W3C 推薦,CSS2發(fā)布于 1999年1月11日。CSS2添加了對媒介(打印機和聽覺設(shè)備)和可下載字體的支持。

          ③ CSS3 CSS3 計劃將 CSS 劃分為更小的模塊。2001年至今 HTML5+CSS3

          CSS選擇器

          HTML tag

          Class

          包含選擇器:div span a

          ID

          組合選擇 div,span,a

          任意選擇器(通配符選擇器)*

          關(guān)系選擇器

          包含選擇符

          子選擇符

          相鄰選擇符

          兄弟選擇符

          屬性選擇器

          偽類選擇器

          偽對象選擇器

          CSS3屬性

          尺寸

          邊框

          背景

          內(nèi)補白

          外補白

          布局

          定位

          字體

          文本

          列表

          表格

          用戶界面

          多欄

          2D變換

          過渡

          動畫

          Photoshop網(wǎng)頁設(shè)計基礎(chǔ)

          I設(shè)計介紹

          photoshop安裝與設(shè)置

          位圖與矢量圖

          網(wǎng)頁常用圖片格式

          圖像大小與分辨率

          選區(qū)創(chuàng)建和編輯

          選區(qū)的創(chuàng)建

          選區(qū)工具M(jìn)

          套鎖工具L

          快速選區(qū)工具W和魔術(shù)棒W

          鋼筆選區(qū)

          創(chuàng)建矢量路徑

          錨點操作

          鋼筆工具

          形狀轉(zhuǎn)選區(qū)ctrl+Enter

          選區(qū)的編輯

          選區(qū)的存儲

          應(yīng)用輔助功能

          使用標(biāo)尺ctrl+R

          設(shè)置網(wǎng)格:視圖>顯示>網(wǎng)格ctrl+'

          應(yīng)用變換功能

          選擇>可變換選區(qū)ctrl+T

          縮放

          旋轉(zhuǎn)

          扭曲

          透視

          變形

          水平翻轉(zhuǎn)

          垂直翻轉(zhuǎn)

          應(yīng)用內(nèi)容識別比例功能

          操控變形

          裁剪圖像

          裁剪工具

          基礎(chǔ)繪畫

          了解繪畫和繪畫修飾工具

          畫筆

          顏色替換

          涂抹工具

          繪畫的基本技巧

          繪制直線,按住shift

          繪制曲線

          定義顏色

          使用拾色器

          漸變工具

          填充前景色:alt+delete

          填充背景色:control+delete

          為圖像填充顏色shift+f5

          圖形、路徑計算

          網(wǎng)頁布局規(guī)范

          Web設(shè)計規(guī)范

          banner設(shè)計

          網(wǎng)頁柵格系統(tǒng)

          網(wǎng)頁構(gòu)成

          命名規(guī)范

          導(dǎo)航設(shè)計

          版式設(shè)計

          網(wǎng)頁配色

          Photoshop網(wǎng)頁切圖

          網(wǎng)頁切圖及切圖常見問題

          精靈圖片技術(shù)

          專題頁設(shè)計

          W3C盒子模型

          div+css網(wǎng)頁布局

          HTML5兼容性處理

          使用 HTML5布局元素的布局

          Media Query響應(yīng)式布局

          原生響應(yīng)式布局

          媒體查詢+尺寸屬性:百分比,max-width,max-height,min-width,min-height

          --------------------------------------------------分割符---------------------------------------------------------------------------

          可實現(xiàn)效果

          1、表格制作個人簡歷

          2、使用表單制作注冊頁面

          3、div+css基本網(wǎng)頁布局

          4、PS網(wǎng)頁設(shè)計

          5、精靈圖片技術(shù)

          6、語義化標(biāo)簽布局

          7、智能表單驗證

          8、多媒體播放

          9、css3:圓角邊框、邊框九宮格特效、多圖背景、動畫、漸變和倒影、多列屬性布局、服務(wù)器端字體

          10、響應(yīng)式網(wǎng)頁實現(xiàn)

          --------------------------------------------------分割符---------------------------------------------------------------------------

          第二階段:前端核心技術(shù):Javascript

          主要內(nèi)容:

          1、Javascript

          2、Ajax

          3、JQuery

          4、JS高級特效

          --------------------------------------------------分割符---------------------------------------------------------------------------

          詳細(xì)內(nèi)容

          JavaScript 腳本語言

          什么是JavaScript?

          1. JavaScript 是一種客戶端腳本語言(腳本語言是一種輕量級的編程語言)。

          2. JavaScript 通常被直接嵌入 HTML 頁面。

          3. JavaScript 是一種解釋性語言(就是說,代碼執(zhí)行不進(jìn)行預(yù)編譯)。

          特點:

          1. 弱類型

          2. 基于對象。(因為面向?qū)ο笮枰哂蟹庋b、繼承、多態(tài)的特征)

          JavaScript語言中包含三個核心:ECMAScript基本語法、DOM、BOM

          JavaScript是基于對象的腳本語言。

          在HTML中如何使用JavaScript

          1. 使用<script></script>標(biāo)簽:

          屬性:

          charset(可選)字符集設(shè)置、

          defer(可選執(zhí)行順序)值:defer、

          language(已廢除)、

          src(可選)使用外部的js腳本文件

          type(必選)類型:值:text/javascript

          <script type="text/javascript">

          <!--

          javaScript語言

          //-->

          </script>

          2. 在html標(biāo)簽的事件中,超級鏈接里。

          <button onclick="javaScript語言"></button>

          <a href="javascript:alert('aa');alert('bb')">點擊</a>

          3. 外部導(dǎo)入方式(推薦):

          <script type="text/javascript" src="my.js"></script>

          JavaScript的語法:

          1.區(qū)分大小寫:變量名、函數(shù)名、運算符以及其他一切東西都是區(qū)分大小寫的。

          2.他和php一樣屬于弱類型語言。

          3.每行結(jié)尾的分號可有可無。(js中的每條語句之間的分割符可以是回車換行也可以是";"分號(推薦))

          4.腳本注釋:

          // 單行注釋

          /* 多行注釋 */

          5.括號表示代碼塊:{}

          6.變量的定義:使用var關(guān)鍵字來聲明。

          變量的命名規(guī)范是:字母數(shù)字,$符和下劃線構(gòu)成,但是不可以以數(shù)字開始。

          變量名不可以使用關(guān)鍵字.

          typeof函數(shù)獲取一個變量的類型:

          7.JavaScript的數(shù)據(jù)類型:

          undefined 類型

          null 類型(對象)

          boolean 類型

          number 類型

          object引用類型

          8. 類型轉(zhuǎn)換:

          JavaScript的運算符

          1. 一元運算符

          delete:用于刪除對象中屬性的 如:delete o.name; //刪除o對象中的name屬性

          void: void 運算符對任何值返回 undefined。沒有返回值的函數(shù)真正返回的都是 undefined。

          ++ --

          一元加法和一元減法

          2. 位運算符

          位運算 NOT ~

          位運算 AND &

          位運算 OR |

          位運算 XOR ^ (不同為1,相同則為0)

          左移運算 <<

          右移運算 >>

          3. 邏輯運算符

          邏輯 NOT ! 運算符 非

          邏輯 AND && 運算符 與

          邏輯 OR || 運算符 或

          4. 乘性運算符:*( 乘) /(除) %(取模)求余

          5. 加性運算符: + -

          *其中+號具有兩重意思:字串連接和數(shù)值求和。

          就是加號”+“兩側(cè)都是數(shù)值則求和,否則做字串連接

          6. 關(guān)系運算符 > >=< <=

          7. 等性運算符=====!=!==

          8. 條件運算符 ? : (三元運算符)

          9. 賦值運算符=+=-=*=/=%=>>=<<=

          10 逗號運算符

          用逗號運算符可以在一條語句中執(zhí)行多個運算。

          var iNum1=1, iNum2=2, iNum3=3;

          javaScript(語句流程控制)

          1. 判斷語句 if語句; if... else ... if ... else if ... else...

          2. 多分支語句: switch(){。 case :。。。。}

          switch (i) {

          case 20: alert("20");

          break;

          case 30: alert("30");

          break;

          case 40: alert("40");

          break;

          default: alert("other");

          }

          3. 循環(huán)語句(迭代語句)

          for:

          while

          do...while

          *for-in 語句: 語句是嚴(yán)格的迭代語句,用于枚舉對象的屬性。

          var a=[10,20,30,40,50];

          //迭代的是數(shù)組的下標(biāo)。

          for(i in a){

          document.write(a[i]);

          }

          //輸出: 1020304050

          4. break 和 continue 語句對循環(huán)中的代碼執(zhí)行提供了更嚴(yán)格的控制。

          5. *with 語句用于設(shè)置代碼在特定對象中的作用域。

          //擴(kuò)充知識:

          1. 在網(wǎng)頁文檔中獲取一個節(jié)點對象(HTML標(biāo)簽)

          document.getElementById("mid"); //獲取標(biāo)簽id屬性值為mid的節(jié)點對象

          2. 定時相關(guān)函數(shù):

          setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 單次定時執(zhí)行指定函數(shù)

          clearTimeout(iTimeoutID) -- 取消上面的單次定時

          setInterval(vCode, iMilliSeconds [, sLanguage]) --無限次定時執(zhí)行指定函數(shù)

          clearInterval(iIntervalID)-- 取消上面的多次定時

          一、JavaScript的函數(shù):

          標(biāo)準(zhǔn)格式: function 函數(shù)名([參數(shù)列表..]){

          函數(shù)體。。。

          [return 返回值;]

          }

          JavaScript三種定義函數(shù)方法:

          *第一種是使用function語句定義函數(shù)

          如上面格式

          第二種是使用Function()構(gòu)造函數(shù)來定義函數(shù)(不常用)

          var 函數(shù)名=new Function(“參數(shù)1”,”參數(shù)2”,”參數(shù)3”……”函數(shù)體”);

          如:

          var 函數(shù)名=new Function(”x”,”y”,”var z=x+y;return z;”);

          *第三種是在表達(dá)式中定義函數(shù)

          var 函數(shù)名=function(參數(shù)1,參數(shù)2,…){函數(shù)體};

          //例如:

          //定義

          var add=function(a,b){

          return a+b;

          }

          //調(diào)用函數(shù)

          document.write(add(50,20));

          arguments 對象

          在函數(shù)代碼中,使用特殊對象 arguments,開發(fā)者無需明確指出參數(shù)名,就能訪問它們。

          例如,在函數(shù) sayHi() 中,第一個參數(shù)是 message。用 arguments[0]

          也可以訪問這個值,即第一個參數(shù)的值(第一個參數(shù)位于位置 0,

          第二個參數(shù)位于位置 1,依此類推)。

          關(guān)于變量和參數(shù)問題:

          函數(shù)外面定義的變量是全局變量,函數(shù)內(nèi)可以直接使用。

          在函數(shù)內(nèi)部沒有使用var定義的=變量則為全局變量,

          *在函數(shù)內(nèi)使用var關(guān)鍵字定義的變量是局部變量,即出了函數(shù)外邊無法獲取。

          js函數(shù)定義的參數(shù)沒有默認(rèn)值(目前只有最新的火狐瀏覽器支持)

          二、系統(tǒng)中常用的內(nèi)置函數(shù):

          escape() //字串編碼

          unescape() //字串反編碼

          *eval() //將參數(shù)字符串作為腳本代碼來執(zhí)行。

          *isNaN() // is not a number (不是一個數(shù)值)

          *parseInt()

          *parseFloat()

          三、JavaScript的對象的定義和使用

          1.使用構(gòu)造函數(shù)創(chuàng)建內(nèi)置對象

          var myObject=new Object();

          myObject.name=“l(fā)ijie”;

          myObject.age=20;

          myObject.say=function(){...}

          2.直接創(chuàng)建自定義對象

          var 對象名={屬性名1:屬性值,屬性名2:屬性值2,…….}

          *3.使用自定義構(gòu)造函數(shù)創(chuàng)建對象

          function pen(name,color,price){

          //對象的name屬性

          this.name=name;

          //對象的color屬性

          this.color=color;

          //對象的piece屬性

          this.price=price;

          //對象的say方法

          this.say=function(){};

          }

          var pen=new pen(“鉛筆”,”紅色”,20);

          pen.say();

          一、for…in語句

          ----------------------------------------

          for(var i in window){

          document.write(i+”----”+window[i]);

          }

          這種語句可以遍歷對象中的所有屬性或數(shù)組中的所有元素。

          二、with語句

          --------------------------------------------

          如果使用with語句,就可以簡化對象屬性調(diào)用的層次。

          document.write(‘test1’);

          document.write(‘test2’);

          document.write(‘test3’);

          可以使用with來簡化:

          with(document){

          write(‘test1’);

          write(‘test2’);

          write(‘test3’);

          }

          三、JavaScript內(nèi)置對象

          * Array(數(shù)組)

          var a=new Array(); //創(chuàng)建一個空數(shù)組

          a=new Array(10); //創(chuàng)建一個數(shù)組單元為10個的數(shù)組。

          a=new Array(10,20,30);//創(chuàng)建一個指定數(shù)組單元的數(shù)組。

          a=['a','b','c','d']; //快捷定義數(shù)組

          常用屬性:

          length--獲取長度。

          常用方法:

          toString() 把數(shù)組轉(zhuǎn)換為字符串,并返回結(jié)果。

          sort() 對數(shù)組的元素進(jìn)行排序

          join() 把數(shù)組的所有元素放入一個字符串。元素通過指定的分隔符進(jìn)行分隔。

          pop() 刪除并返回數(shù)組的最后一個元素

          push() 向數(shù)組的末尾添加一個或更多元素,并返回新的長度。

          * Boolean 布爾值包裝類對象

          方法:toSource() 返回該對象的源代碼。

          toString() 把邏輯值轉(zhuǎn)換為字符串,并返回結(jié)果。

          valueOf() 返回 Boolean 對象的原始值。

          * Date

          var dd=new Date();

          getDate() 從 Date 對象返回一個月中的某一天 (1 ~ 31)。

          getDay() 從 Date 對象返回一周中的某一天 (0 ~ 6)。

          getMonth() 從 Date 對象返回月份 (0 ~ 11)。

          getFullYear() 從 Date 對象以四位數(shù)字返回年份。

          getYear() 請使用 getFullYear() 方法代替。

          getHours() 返回 Date 對象的小時 (0 ~ 23)。

          getMinutes() 返回 Date 對象的分鐘 (0 ~ 59)。

          getSeconds() 返回 Date 對象的秒數(shù) (0 ~ 59)。

          getMilliseconds() 返回 Date 對象的毫秒(0 ~ 999)。

          getTime() 返回 1970 年 1 月 1 日至今的毫秒數(shù)。

          同上還有很多set方法用來設(shè)置。

          * Math 對象用于執(zhí)行數(shù)學(xué)任務(wù)。方法是靜態(tài)的。

          abs(x) 返回數(shù)的絕對值。

          ceil(x) 對數(shù)進(jìn)行上舍入。

          floor(x) 對數(shù)進(jìn)行下舍入。

          random() 返回 0 ~ 1 之間的隨機數(shù)。

          round(x) 把數(shù)四舍五入為最接近的整數(shù)。

          max(x,y) 返回 x 和 y 中的最高值。

          min(x,y) 返回 x 和 y 中的最低值。

          * Number

          toString();

          toFixed 把數(shù)字轉(zhuǎn)換為字符串,結(jié)果的小數(shù)點后有指定位數(shù)的數(shù)字。

          * String 子串處理對象

          anchor() 創(chuàng)建 HTML 錨。

          *charAt() 返回在指定位置的字符。

          charCodeAt()返回在指定的位置的字符的 Unicode 編碼。

          *indexOf() 檢索字符串。

          *lastIndexOf() 從后向前搜索字符串。

          match() 找到一個或多個正在表達(dá)式的匹配。

          *replace() 替換與正則表達(dá)式匹配的子串。

          search() 檢索與正則表達(dá)式相匹配的值。

          slice() 提取字符串的片斷,并在新的字符串中返回被提取的部分。

          split() 把字符串分割為字符串?dāng)?shù)組。

          substr() 從起始索引號提取字符串中指定數(shù)目的字符。

          *substring() 提取字符串中兩個指定的索引號之間的字符。

          toLocaleLowerCase() 把字符串轉(zhuǎn)換為小寫。

          toLocaleUpperCase() 把字符串轉(zhuǎn)換為大寫。

          *toLowerCase() 把字符串轉(zhuǎn)換為小寫。

          *toUpperCase() 把字符串轉(zhuǎn)換為大寫。

          * RegExp

          exec()正則匹配

          test()

          match()

          * Global

          escape(string) -- 可對字符串進(jìn)行編碼

          unescape(string) -- 函數(shù)可對通過 escape() 編碼的字符串進(jìn)行解碼。

          encodeURI(URIstring) -- 函數(shù)可把字符串作為 URI 進(jìn)行編碼。

          decodeURI(URIstring) -- 函數(shù)可對 encodeURI() 函數(shù)編碼過的 URI 進(jìn)行解碼。

          *eval(string) -- 函數(shù)可計算某個字符串,并執(zhí)行其中的的 JavaScript 代碼。

          getClass(javaobj) -- 函數(shù)可返回一個 JavaObject 的 JavaClass。

          *isNaN(x) -- 函數(shù)用于檢查其參數(shù)是否是非數(shù)字值。

          Number(object) --函數(shù)把對象的值轉(zhuǎn)換為數(shù)字。

          *parseFloat(string) -- 函數(shù)可解析一個字符串,并返回一個浮點數(shù)。

          *parseInt(string, radix)

          事件處理

          一、事件源: 任何一個HTML元素(節(jié)點) body, div , button p, a, h1 .......

          二、事件: 你的操作

          鼠標(biāo):

          * click 單擊

          dblclick 雙擊

          contextmenu (在body) 文本菜單(鼠標(biāo)右鍵使用)

          要想屏蔽鼠標(biāo)右鍵使用return false

          window.document.oncontextmenu=function(ent){...}

          * mouseover 放上(移入)

          * mouseout 離開(移出)

          mousedown 按下

          mouseup 抬起

          * mousemove 移動

          鍵盤:

          keypress 鍵盤事件

          keydown 按下

          文檔:(主要使用在body標(biāo)簽中)

          * load 加載

          unload 關(guān)閉(為了兼容可使用下面函數(shù))

          beforeunload 關(guān)閉之前

          表單:

          * focus 焦點

          * blur 失去焦點

          * submit 提交事件

          * change 改變(如下拉框選擇事件)

          其它:

          * scroll 滾動事件(常用延遲加載、瀑布流技術(shù))

          window.onscroll=function(){

          document.documentElement.scrollTop;//獲取滾動條的上距離

          document.documentElement.scrollLeft;//滾動條的左距離

          }

          selectd 事件

          。。。。

          三、事件處理程序

          使用一個匿名或回調(diào)函數(shù)

          有三種方法加事件

          第一種:

          格式: <tag on事件="事件處理程序" />

          *第二種:

          <script>

          對象.on事件=事件處理程序

          </script>

          第三種:(火狐不兼容)

          <script for="事件源ID" event="on事件">事件處理程序</script>

          事件對象:

          屬性:

          1. srcElement

          2. keyCode 鍵盤值

          事件 event window.event

          1. srcElement 代表事件源對象

          2. keyCode 事件發(fā)生時的鍵盤碼 keypress , keydown keyup

          3. clientX, clientY 坐標(biāo)位置

          4. screenX, screenY

          5. returnValue

          6. cancelBubble;

          //為頁面添加鼠標(biāo)右點擊事件

          window.document.oncontextmenu=function(ent){

          //兼容IE和火狐瀏覽器兼容

          var event=ent || window.event;

          //獲取事件坐標(biāo)位置

          var x=event.clientX;

          var y=event.clientY;

          ...

          }

          一、BOM

          1. window對象

          常用的屬性:

          *document :對 Document 對象的只讀引用

          *history :對 History 對象的只讀引用。

          *location:用于窗口或框架的 Location 對象

          Navigator: 對 Navigator 對象的只讀引用

          *parent: 返回父窗口。

          length: 設(shè)置或返回窗口中的框架數(shù)量。

          Screen: 對 Screen 對象的只讀引用

          status: 設(shè)置窗口狀態(tài)欄的文本。

          top: 返回最頂層的先輩窗口。

          常用方法:

          alert() 顯示帶有一段消息和一個確認(rèn)按鈕的警告框。

          confirm() 顯示帶有一段消息以及確認(rèn)按鈕和取消按鈕的對話框。

          prompt() 顯示可提示用戶輸入的對話框。

          close() 關(guān)閉瀏覽器窗口。

          open() 打開一個新的瀏覽器窗口或查找一個已命名的窗口。

          scrollTo() 把內(nèi)容滾動到指定的坐標(biāo)。

          setTimeout() 在指定的毫秒數(shù)后調(diào)用函數(shù)或計算表達(dá)式。

          clearTimeout() 取消由 setTimeout() 方法設(shè)置的 timeout。

          setInterval() 按照指定的周期(以毫秒計)來調(diào)用函數(shù)或計算表達(dá)式。

          clearInterval() 取消由 setInterval() 設(shè)置的 timeout。

          2. Navigator 對象

          Navigator 對象包含的屬性描述了正在使用的瀏覽器。可以使用這些屬性進(jìn)行平臺專用的配置。

          常用屬性:

          with(document) {

          write ("你的瀏覽器信息:<ul>");

          write ("<li>代碼:"+navigator.appCodeName+"</li>");

          write ("<li>名稱:"+navigator.appName+"</li>");

          write ("<li>版本:"+navigator.appVersion+"</li>");

          write ("<li>語言:"+navigator.language+"</li>");

          write ("<li>編譯平臺:"+navigator.platform+"</li>");

          write ("<li>用戶表頭:"+navigator.userAgent+"</li>");

          write ("</ul>");

          }

          3. Screen 對象包含有關(guān)客戶端顯示屏幕的信息。

          常用屬性:

          document.write( "屏幕寬度:"+screen.width+"px<br />" );

          document.write( "屏幕高度:"+screen.height+"px<br />" );

          document.write( "屏幕可用寬度:"+screen.availWidth+"px<br />" );

          document.write( "屏幕可用高度:"+screen.availHeight+"px" );

          參考了解其他屬性信息獲取方式

          網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth

          網(wǎng)頁可見區(qū)域高: document.body.clientHeight

          網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)

          網(wǎng)頁可見區(qū)域高: document.body.offsetHeight (包括邊線的高)

          網(wǎng)頁正文全文寬: document.body.scrollWidth

          網(wǎng)頁正文全文高: document.body.scrollHeight

          網(wǎng)頁被卷去的高: document.body.scrollTop

          網(wǎng)頁被卷去的左: document.body.scrollLeft

          網(wǎng)頁正文部分上: window.screenTop

          網(wǎng)頁正文部分左: window.screenLeft

          屏幕分辨率的高: window.screen.height

          屏幕分辨率的寬: window.screen.width

          屏幕可用工作區(qū)高度: window.screen.availHeight

          屏幕可用工作區(qū)寬度: window.screen.availWidth

          4. History 對象包含用戶(在瀏覽器窗口中)訪問過的 URL。

          5. Location 對象包含有關(guān)當(dāng)前 URL 的信息。

          講解DOM

          一、基本概念

          HTML DOM 定義了訪問和操作HTML文檔的標(biāo)準(zhǔn)方法。

          HTML DOM 把 HTML 文檔呈現(xiàn)為帶有元素、屬性和文本的樹結(jié)構(gòu)(節(jié)點樹)。

          DOM 被分為不同的部分:

          1.Core DOM

          定義了一套標(biāo)準(zhǔn)的針對任何結(jié)構(gòu)化文檔的對象

          2.XML DOM

          定義了一套標(biāo)準(zhǔn)的針對 XML 文檔的對象

          3.HTML DOM

          定義了一套標(biāo)準(zhǔn)的針對 HTML 文檔的對象。

          節(jié)點:根據(jù) DOM,HTML 文檔中的每個成分都是一個節(jié)點。

          DOM 是這樣規(guī)定的:

          >整個文檔是一個文檔節(jié)點

          >每個 HTML 標(biāo)簽是一個元素節(jié)點

          >包含在 HTML 元素中的文本是文本節(jié)點

          >每一個 HTML 屬性是一個屬性節(jié)點

          >注釋屬于注釋節(jié)點

          節(jié)點彼此間都存在關(guān)系。

          >除文檔節(jié)點之外的每個節(jié)點都有父節(jié)點。

          >大部分元素節(jié)點都有子節(jié)點。

          >當(dāng)節(jié)點分享同一個父節(jié)點時,它們就是同輩(同級節(jié)點)。

          >節(jié)點也可以擁有后代,后代指某個節(jié)點的所有子節(jié)點,或者這些子節(jié)點的子節(jié)點

          >節(jié)點也可以擁有先輩。先輩是某個節(jié)點的父節(jié)點,或者父節(jié)點的父節(jié)點

          查找并訪問節(jié)點

          你可通過若干種方法來查找您希望操作的元素:

          >通過使用 getElementById() 和 getElementsByTagName() 方法

          >通過使用一個元素節(jié)點的 parentNode、firstChild 以及 lastChild childNodes屬性

          節(jié)點信息

          每個節(jié)點都擁有包含著關(guān)于節(jié)點某些信息的屬性。這些屬性是:

          nodeName(節(jié)點名稱)

          nodeValue(節(jié)點值)

          nodeType(節(jié)點類型)

          nodeName 屬性含有某個節(jié)點的名稱。

          元素節(jié)點的 nodeName 是標(biāo)簽名稱

          屬性節(jié)點的 nodeName 是屬性名稱

          文本節(jié)點的 nodeName 永遠(yuǎn)是 #text

          文檔節(jié)點的 nodeName 永遠(yuǎn)是 #document

          二、HTML DOM 對象參考

          Document: 代表整個 HTML 文檔,可被用來訪問頁面中的所有元素

          常用集合屬性:forms

          Anchor : 代表 <a> 元素

          Area : 代表圖像映射中的 <area> 元素

          Base : 代表 <base> 元素

          Body : 代表 <body> 元素

          Button : 代表 <button> 元素

          Event : 代表某個事件的狀態(tài)

          Form : 代表 <form> 元素

          Frame : 代表 <frame> 元素

          Frameset: 代表 <frameset> 元素

          Iframe : 代表 <iframe> 元素

          Image : 代表 <img> 元素

          Input button : 代表 HTML 表單中的一個按鈕

          Input checkbox : 代表 HTML 表單中的復(fù)選框

          Input file : 代表 HTML 表單中的文件上傳

          Input hidden : 代表 HTML 表單中的隱藏域

          Input password : 代表 HTML 表單中的密碼域

          Input radio : 代表 HTML 表單中的單選按鈕

          Input reset : 代表 HTML 表單中的重置按鈕

          Input submit : 代表 HTML 表單中的確認(rèn)按鈕

          Input text : 代表 HTML 表單中的文本輸入域(文本框)

          Link : 代表 <link> 元素

          Meta : 代表 <meta> 元素

          Object : 代表 <Object> 元素

          Option : 代表 <option> 元素

          Select : 代表 HTML 表單中的選擇列表

          Style : 代表單獨的樣式聲明

          Table : 代表 <table> 元素

          TableData : 代表 <td> 元素

          TableRow : 代表 <tr> 元素

          Textarea : 代表 <textarea> 元素

          AJAX

          var xmlhttp;

          1. 創(chuàng)建請求對象

          if(window.XMLHttpRequest){

          // code for IE7+, Firefox, Chrome, Opera, Safari

          xmlhttp=new XMLHttpRequest();

          }else{

          // code for IE6, IE5

          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

          }

          2. 設(shè)置回調(diào)函數(shù)(監(jiān)聽)

          xmlhttp.onreadystatechange=函數(shù)名;

          xmlhttp.onreadystatechange=function(){

          函數(shù)體。。。

          }

          3. 初始化:

          xmlhttp.open("GET",url,true);

          4. 發(fā)送:

          xmlhttp.send();

          其中:xmlhttp請求對象:

          **屬性:

          *readyState //請求狀態(tài):0,1,2,3,4

          *responseText//響應(yīng)內(nèi)容

          responseXML //xml響應(yīng)對象

          *status //瀏覽器響應(yīng)狀態(tài):200正常, 404 請求地址不存在 ,,

          statusText //狀態(tài)內(nèi)容

          *onreadystatechange //回調(diào)函數(shù)屬性

          方法:

          abort() //取消當(dāng)前響應(yīng),關(guān)閉連接并且結(jié)束任何未決的網(wǎng)絡(luò)活動。

          getAllResponseHeaders() //把 HTTP 響應(yīng)頭部作為未解析的字符串返回。

          getResponseHeader() //返回指定的 HTTP 響應(yīng)頭部的值

          *open() //初始化 HTTP 請求參數(shù)

          *send() //發(fā)送 HTTP 請求,使用傳遞給 open() 方法的參數(shù)

          *setRequestHeader() //向一個打開但未發(fā)送的請求設(shè)置或添加一個 HTTP 請求。

          自定義Ajax實例使用

          jQuery的基本語法

          對象的訪問

          each()

          size()

          length

          selector

          context

          get()

          index()

          jQuery 屬性操作

          屬性

          attr

          removeAttr

          prop

          removeProp

          CSS

          addClass

          removeClass

          toggleClass

          HTML代碼/文本/值

          html()

          text()

          val()

          基礎(chǔ)知識

          JQuery簡介

          JQuery 安裝

          JQuery語法

          jQuery CSS 操作

          css:css()

          位置

          offset()

          position()

          scrollTop()

          scrollLeft()

          尺寸

          height()

          width()

          innerHeight()

          innerWidth()

          outerHeifht()

          outerWIdth()

          jQuery 選擇器

          基本

          層級

          偽類

          內(nèi)容

          可見性

          屬性

          子元素

          表單

          表單對象屬性

          jQuery 篩選

          過濾

          查找

          串聯(lián)

          jQuery HTML文檔處理

          內(nèi)部插入

          外部插入

          包裹

          替換

          刪除

          復(fù)制

          jQuery 事件

          頁面載入

          事件處理

          事件委派

          事件切換

          事件

          jQuery效果

          jQuery 隱藏顯示

          jQuery 淡入淡出

          jQuery 滑動

          jQuery 動畫

          jQuery停止動畫

          jQuery Callback

          Jquery chaining

          jQuery Ajax

          jQuery Ajax簡介

          jQuery load()方法

          jQuery get()/post()方法

          jQuery 其他

          jQuery noConflict()方法

          jQuery JSONP

          數(shù)組和對象操作

          函數(shù)操作

          測試操作

          字符串操作

          瀏覽器及特性檢測

          URL

          數(shù)據(jù)緩存

          隊列機制

          jQuery 插件

          插件使用

          jQuery 自定義插件方法

          --------------------------------------------------分割符---------------------------------------------------------------------------

          可實現(xiàn)效果

          1、刷新改背景

          2、獲取和設(shè)置時間

          3、從URL中獲取文件名

          4、簡單的計算器

          5、滾動類效果

          6、自定義菜單

          7、下拉菜單

          8、手風(fēng)琴菜單

          9、彈出層

          10、瀑布流布局,滾動事件

          11、選項卡開發(fā)

          12、幻燈播放

          13、拖拽效果

          14、淘寶商品的放大效果

          15、登錄注冊驗證

          16、首頁多特效合成

          17、后臺效果制作

          18、瀑布流

          19、點名器

          20、抽獎

          --------------------------------------------------分割符---------------------------------------------------------------------------

          第三個階段:HTML5新特性

          主要內(nèi)容

          1、視頻/音頻

          2、地理定位

          3、Web 存儲

          4、應(yīng)用緩存

          5、拖放

          6、文件讀取

          7、Web Workers

          8、畫布 SVG

          9、CSS預(yù)處理

          10、BootStrap 響應(yīng)式框架

          --------------------------------------------------分割符---------------------------------------------------------------------------

          詳細(xì)內(nèi)容:

          HTML5 多媒體

          audio/video API操作

          地理位置信息獲取

          geolocation API操作

          地球間兩點距離計算方法

          地圖API調(diào)用

          HTML5離線緩存

          cache manifest規(guī)范及格式

          HTML5本地存儲

          localStorage - 沒有時間限制的數(shù)據(jù)存儲

          sessionStorage - 針對一個 session 的數(shù)據(jù)存儲

          拖放(Drag 和 drop)

          FileReader

          瀏覽器多線程

          畫布 SVG 動畫實現(xiàn)

          SASS使用

          SASS的基本語法

          Bootstrap配置

          使用Bootstrap布局頁面

          Bootstrap全局樣式

          柵格系統(tǒng)原理

          Bootstrap各種常用組件

          Bootstrap常用插件應(yīng)用

          --------------------------------------------------分割符---------------------------------------------------------------------------

          可實現(xiàn)效果:

          制作屬于自己的音/視頻播放器

          查看經(jīng)緯度

          獲取公交路線

          顯示路線導(dǎo)航

          離線應(yīng)用

          多線程優(yōu)化用戶體驗

          拖放歌曲列表

          圖片拖放顯示

          拖放照片墻

          繪畫五角星

          繪制時鐘

          勻速、變速、圓周、曲線等物理運動

          碰撞原理與實現(xiàn)

          九大行星圍繞運動

          鼠標(biāo)交互特效

          使用SASS制作動態(tài)CSS程序

          使用UI框架實現(xiàn)響應(yīng)式布局

          --------------------------------------------------分割符---------------------------------------------------------------------------

          第四階段:MEAN(MongoDB+Express+Angular.js+Node.js)全棧框架開發(fā)

          主要內(nèi)容:

          1、Node.js

          2、MongoDB

          3、Express

          4、AngularJS

          5、WEB APP制作

          --------------------------------------------------分割符---------------------------------------------------------------------------

          詳細(xì)內(nèi)容:

          NodeJS與瀏覽器js的區(qū)別

          NodeJS基礎(chǔ)

          NodeJS安裝

          模塊

          require

          exports

          module

          NPM

          代碼的組織和部署

          模塊路徑解析規(guī)則

          包(package)

          index.js

          package.json

          文件操作

          Buffer(數(shù)據(jù)塊)

          Stream(數(shù)據(jù)流)

          File System(文件系統(tǒng))

          Path(路徑)

          網(wǎng)絡(luò)操作

          HTTP

          HTTPS

          URL

          Query String

          Zlib

          Net

          NPM/Bower依賴管理工具

          Zepto.js庫

          NodeJS文件操作

          使用NodeJS搭建Web服務(wù)器

          使用NodeJS搭建Socket服務(wù)器

          數(shù)據(jù)倉庫:

          SQL:結(jié)構(gòu)化查詢語言(Structured Query Language)

          常見的SQL:MySQL Oracle MariaDB PostgreSQL等SQL

          常見的NoSQL:MongoDB Redis Memcache

          MongoDB:

          C++語言編寫,基于分布式文件存儲的開源數(shù)據(jù)庫系統(tǒng)

          BSON:類JSON對象(Binary JSON,二進(jìn)制形式的存儲格式)

          {"username":"zhangsan","age":20,"sex":"男"}

          由"鍵值對"組成

          結(jié)構(gòu)劃分:

          數(shù)據(jù)庫(database) db

          集合(collection)

          文檔(document)

          字段(field)

          安裝MongoDB

          1.針對庫的操作

          查看所有庫

          創(chuàng)建并進(jìn)入數(shù)據(jù)庫

          查看當(dāng)前庫

          刪除數(shù)據(jù)庫

          2.集合操作

          查看當(dāng)前集合

          3.針對文檔操作

          插入數(shù)據(jù)

          修改數(shù)據(jù):

          刪除

          查詢數(shù)據(jù)

          Express框架快速構(gòu)建WEB應(yīng)用程序

          Express簡介+MVC簡介

          Express路由模塊

          模板引擎 jade ejs handlebars

          nosql數(shù)據(jù)庫MogoDB管理數(shù)據(jù)

          使用mongoose操作MongoDB

          Angular JS介紹

          Angular JS 表達(dá)式

          Angular JS簡介

          Angular JS指令

          Angular JS模型

          Angular JS Scope(作用域)

          Angular JS 控制器

          Angular JS 過濾器

          Angular JS Http

          Angular JS 表格

          Angular JS SQL

          Angular JS HTML DOM

          Angular JS 事件

          Angular JS模塊

          Angular JS表單

          Angular JS輸入驗證

          Angular JS Bootstrap應(yīng)用

          Angular JS 包含

          Angular JS 應(yīng)用

          App介紹

          WebApp/NativeApp/HybirdApp簡介

          Cordova線下打包App

          移動應(yīng)用開發(fā)平臺云端打包App

          --------------------------------------------------分割符---------------------------------------------------------------------------

          可實現(xiàn)以下效果

          使用Nodejs搭建

          應(yīng)用程序的服務(wù)端

          使用Socket長連接實時網(wǎng)絡(luò)通信技術(shù)制作聊天室

          帶有前后臺的簡單博客系統(tǒng)

          使用AngularJS打造單頁面購物車應(yīng)用

          打包手機端應(yīng)用

          --------------------------------------------------分割符---------------------------------------------------------------------------

          特級課:微信開發(fā)

          主要內(nèi)容:微信開發(fā)

          1、微信接口開發(fā)

          2、微信應(yīng)用開發(fā)

          3、微信UI框架

          4、原型設(shè)計

          5、面試題講解

          --------------------------------------------------分割符---------------------------------------------------------------------------

          詳細(xì)內(nèi)容

          微信JSSDK使用

          分享接口

          圖像接口

          音頻接口

          智能接口

          設(shè)備信息

          地理位置

          界面操作

          WEUI框架

          原型設(shè)計

          用戶體驗設(shè)計

          面試題

          --------------------------------------------------分割符---------------------------------------------------------------------------

          可實現(xiàn)但不限于以下效果

          微信測智商

          測測上輩子是誰

          測運勢

          留言板

          照片分享發(fā)送

          語音識別

          位置顯示

          WEUI框架制作微信原生樣式界面

          小編已盡力排版,如小伙伴們覺得依然較亂,請留言

           華企網(wǎng)校課程顧問覺得,在線教育更加注重課堂的互動性與個性化要求,對HTML5大家都不陌生,它就像一個絕世大美女,一出場就受到了各方的強烈關(guān)注,自然也受到了移動學(xué)習(xí)平臺(m-learning)的青睞,HTML5的資本在于它支持跨平臺,在于它可以實現(xiàn)文字、圖片、表格、音頻、視頻的有機結(jié)合,在于它良好的交互性。

          html5課件--移動學(xué)習(xí)新方向

            支持跨平臺學(xué)習(xí)相對于傳統(tǒng)的HTML技術(shù),HTML5針對終端設(shè)備增加了許多新特性,只需一個版本即可實現(xiàn)跨平臺、跨分辨率、終端自適應(yīng)等。不需要再考慮是得用電腦還是手機,得用蘋果還是安卓。不管什么設(shè)備,只需要一個支持HTML5的瀏覽器,統(tǒng)統(tǒng)搞定。

            HTML5的這個特性對于移動學(xué)習(xí)來說無疑是個特大好消息,簡直就是為了移動學(xué)習(xí)量身定做的。如此一來,HTML5課件可以跨平臺,并實現(xiàn)終端自適應(yīng),既節(jié)省了培訓(xùn)課件開發(fā)的時間,又能讓學(xué)員獲得良好一致的學(xué)習(xí)體驗。

            文字、圖片、音頻、視頻等多種呈現(xiàn)方式Web剛出現(xiàn)的時候,我們都在網(wǎng)上看些基礎(chǔ)文檔學(xué)習(xí),隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展,純靜態(tài)頁面已經(jīng)難以吸引用戶的眼球,而HTML5課件的出現(xiàn),讓人眼前一亮,音頻、視頻等多媒體元素的支持,讓學(xué)習(xí)內(nèi)容變得更加豐富多彩,極大地提升了學(xué)員的學(xué)習(xí)興趣,這在課件形式上也是一場質(zhì)的飛躍。

            良好的交互性上學(xué)的時候,老師都比較喜歡積極發(fā)言的同學(xué),因為互動。同樣,在開發(fā)設(shè)計網(wǎng)頁課件時,教學(xué)設(shè)計人員也希望可以與用戶互動。HTML5的特性,正可以讓教學(xué)設(shè)計人員設(shè)計一些學(xué)習(xí)交互點,提升學(xué)員的學(xué)習(xí)參與度。

            正因為HTML5課件有如此多特性,使得企業(yè)在培訓(xùn)的微課形式上,更喜歡HTML5課件,華企網(wǎng)校專注企業(yè)e-learning綜合服務(wù)經(jīng)驗,為客戶提供課程定制開發(fā)服務(wù),課件形式包括:快速開發(fā)、圖文類、綜合動畫、HTML5交互。

            華企網(wǎng)校以學(xué)習(xí)平臺+數(shù)字內(nèi)容+運營服務(wù)的三維模式,為企業(yè)提供數(shù)字化在線學(xué)習(xí)服務(wù)整體解決方案,數(shù)字賦能企業(yè)培訓(xùn),讓培訓(xùn)工作者省心,效率加倍!

            更多HTML5課件--移動學(xué)習(xí)新方向了解更多詳情,敬請撥打電話400-619-6069。


          主站蜘蛛池模板: 色噜噜狠狠一区二区三区果冻 | 女人和拘做受全程看视频日本综合a一区二区视频 | 亚洲欧美一区二区三区日产| 在线不卡一区二区三区日韩| 国产精品va无码一区二区| 亚洲av高清在线观看一区二区| 一色一伦一区二区三区| 鲁丝片一区二区三区免费| 精品国产免费观看一区| 无码人妻精品一区二区蜜桃 | 任你躁国产自任一区二区三区| 久久青青草原一区二区| 亚洲av无码一区二区三区观看| 美女福利视频一区| 99久久国产精品免费一区二区| 日本在线观看一区二区三区| 在线精品自拍亚洲第一区| 无码人妻一区二区三区一| 3d动漫精品啪啪一区二区中文| 国产精品无码一区二区三级| 人妻免费一区二区三区最新| 超清无码一区二区三区| 中文字幕在线一区| 精品国产免费一区二区三区香蕉| 制服中文字幕一区二区| 少妇人妻偷人精品一区二区| 亚洲综合无码精品一区二区三区| 中日韩一区二区三区| 精品亚洲综合在线第一区| 久久精品无码一区二区日韩AV| 亚洲国产精品一区二区九九| 一区二区三区免费视频网站| 久久99精品免费一区二区| 国产精品无圣光一区二区| 91在线一区二区| 精品国产一区二区三区久| 免费在线观看一区| 国产一区二区三区免费| 精品国产乱码一区二区三区| 精品国产一区二区三区久久狼| 亚洲av午夜精品一区二区三区|