HTML5 & CSS3

• HTML5

  • 都有兼容性要求

新增標(biāo)簽新增表單新表單屬性

語義化標(biāo)簽	input表單	限制輸入屬性
多媒體標(biāo)簽

• 新增語義化標(biāo)簽

• <header> <nav> <artical> <section> <aside> <footer>

  • 注意

    • 此語義化標(biāo)準(zhǔn)是針對搜索引擎的
    • 新增標(biāo)簽可在頁面使用多次
    • IE9中，需要將元素轉(zhuǎn)換為塊級元素
    • 更常在移動端使用

  • 多媒體標(biāo)簽

    • 視頻

      • 支持格式：MP4，WebM，Ogg

      • 谷歌瀏覽器會禁止自動播放，加muted屬性

      • 通常不適用controls組件

      • 多屬性

      • <media src="" controls="controls" ></media>

    • 音頻

      • 支持格式：MP3，Wav，Ogg

      • <audio src="" controls="controls"></audio>

      • 谷歌瀏覽器會禁止自動播放-通過JS解決

  • form表單-input

    • 新增type的屬性值，限制輸入框的內(nèi)容

    • 當(dāng)submit時會反饋

    • 屬性屬性值說明

      required	required	該屬性必填
      placeholder	提示文本	提示信息，存在默認值不顯示
      autofocus	autofocus	自動聚焦屬性
      autocomplete	off/on	歷史提示，加上name屬性
      multiple	multiple	多選文件提交

    • CSS樣式

      • input::placeholder
      • …

• CSS3

  • 有兼容性問題，IE9+才支持

  • 移動端優(yōu)于PC端

  • 現(xiàn)階段主要：新增選擇器，盒子模型，其它特性

  • 新增選擇器

    • 權(quán)重 10

    • 屬性選擇器結(jié)構(gòu)偽類選擇器偽元素選擇器

      E [att]	E:first-child	::before父元素內(nèi)容前創(chuàng)建元素
      E [att=“val”]	E:last-child	::after父元素內(nèi)容后創(chuàng)建元素
      E [att^=“val”]	E:nth-child(n)
      E [att$=“val”]	E:first-of-type
      E[att*=“val”]	E:last-of-type
      	E:nth-of-type(n)

    • n-----數(shù)字，表達式，關(guān)鍵字

      • n從0開始
      • 偶數(shù)–even，2n
      • 奇數(shù)–odd，2n+1
      • 選擇所有孩子：n
      • 前m個： -n+m
      • 第m個開始： n+m

    • nth-child（n）& **nth-of-type（n）**區(qū)別

      • nth-child（n）
        • 先父元素所有孩子固定排序
        • 執(zhí)行nth-child（n）
        • 再判斷是否與nth前的E類型符合
      • nth-of-type（n）
        • 把子元素指定E類型的元素排序
        • 再執(zhí)行nth-of-type（n）

    • 偽元素選擇器

      • 利用CSS創(chuàng)建新標(biāo)簽元素，不需要HTML，簡化HTML結(jié)構(gòu)

      • 否則層疊嵌套的元素過多

      • 注意

        • after，before創(chuàng)建一個元素–屬于行內(nèi)元素
        • 偽元素：在HTML文檔樹中不存在
        • 必須有content屬性，同標(biāo)簽選擇器權(quán)重==1

      • 使用場景

      • 1.偽元素字體圖標(biāo)2.遮罩效果3.清除浮動

        子絕父相	:hover::after/before	父級添加after偽元素
        		父級添加雙偽元素

        • after偽元素：后封閉

          • /* 清除浮動 */ .clearfix::after {content: "";display: block; /*必須塊級元素*/height: 0;clear: both;visibility: hidden; }

        • 雙偽元素–前后封閉

          • /* 清除浮動 */ .clearfix::before,.clearfix::after {content: "";display: table; }.clearfix::after {clear: both;}.clearfix {*zoom: 1;}

      • 其他

        • 額外標(biāo)簽法：插入一個不可見塊級元素
        • overflow：hidden

  • 新增盒子模型

    • 原因：修改padding，border值會影響盒子原本大小box-sizing

    • 屬性值組成

      content-box	width+padding+border
      border-box	width

    • border-box不會撐大盒子

  • 其它特性

    • 1. 圖片變模糊2. 盒子寬度計算width：calc函數(shù)

      filter：模糊/顏色偏移	+ - * /
      filter：blur(n)	width：calc（100%-80px）

  • CSS3過渡

    • 從一種狀態(tài)變換為另一種樣式時為元素增加效果

    • 常與 :hover 搭配使用

    • transition

      • 組成作用

        屬性	需要過渡的屬性
        花費時間	秒
        運動曲線	ease
        何時開始	延遲觸發(fā)時間

      • 若想加多個屬性

        • 需要寫在同一屬性，用逗號隔開
        • 所有屬性： all

  • 2D轉(zhuǎn)換–右X下Y

    • 移動盒子位置

      • 定位，盒子外邊距，2D轉(zhuǎn)換移動

    • transform–實現(xiàn)元素

      • 類別方法特點

        位移–translate	**1.**translate(x,y) **2.**translateX() **3.**translateY()	**1.**不會影響其他元素； **2.**對行內(nèi)標(biāo)簽無效果； **3.**百分比針對本身；
        旋轉(zhuǎn)–rorate	**1.**transform-origin(x,y) **2.**rorate(x y)	**1.**單位：deg； **2.**正-順時針，負-逆時針； **3.**默認旋轉(zhuǎn)中心；
        縮放–scale	**1.**scale(x,y)**2.**rorate(x y)	**1.**單位：倍數(shù)； **2.**不影響其他盒子； **3.**默認中心放大-縮小

      • 實現(xiàn)元素居中

        • 定位：position：absolute
          • top：50%； left：50%；
        • 位移轉(zhuǎn)換
          • translate（-50%，-50%）;

      • 轉(zhuǎn)換中心點

        • transform-origin（）
          • 參數(shù)–百分比、像素、方位名詞

      • 實現(xiàn)多個transform的順序

        • 位移—>其他
        • transform：translate() rorate() scale()

  • CSS3—動畫

    • 設(shè)置多個節(jié)點，精確控制一個/組動畫

    • 比過渡更多變化，控制，連續(xù)自動播放等效果

    • 定義動畫–調(diào)用動畫

    • 動畫序列

      • /*定義動畫 關(guān)鍵幀*/ @keyframes 動畫名稱 {0% { /*from*/}100% { /*to*/} } /*調(diào)用動畫*/ 元素 {/*使用動畫*/animation-name: 動畫名稱;/*持續(xù)時間*/ animation-duration: 持續(xù)時間; }

    • 注意

      • 位置移動是針對元素初始位置變化，而不是上一次變化結(jié)果
      • 簡寫
        • animation：
        • name duration 曲線 delay count 是否反方向 起始/結(jié)束狀態(tài)
        • 暫停動畫配合使用：animation-play-state：pause
        • 返回：animation-direction：alternate （跑馬燈）
        • 播放結(jié)束樣式：animation-fill-mode：forwords / backwords

    • animation-timing-function：曲線，默認ease

      • 值描述

        linear	勻速
        ease	低速-加快-變慢
        ease-in	低速開始
        ease-out	低速結(jié)束
        ease-in-out	低速開始，結(jié)束
        steps（）	指定時間函數(shù)的間隔數(shù)量（步長）

    • 熱點圖案例

      • 點+陰影

    • 步長案例

      • 打字機效果-overflow，white-space，steps（）

    • 同一元素加多個動畫，逗號隔開

  • CSS3—3D轉(zhuǎn)換 Transform

    • 三維空間

      • 坐標(biāo)軸注意

        X軸：水平向右	左負有正
        Y軸：垂直向下	上負下正
        Z軸：垂直屏幕	里負外正

    • 主要內(nèi)容

      • 類別方法注意

        3D位移：translate3d(x,y,z)	translateX/Y/Z，translate3d	不可省略
        3D旋轉(zhuǎn)：rorate3d(x,y,z)	繞軸旋轉(zhuǎn)
        透視：perspective		父盒子
        3D呈現(xiàn)：transform-style	2/3D環(huán)境	父盒子

        • 透視
          • 視距越小，所見越大；
          • z軸越大，所見越大；

    • 3D旋轉(zhuǎn)

      • 語法特點

        rorateX()	橫軸
        rorateY()	縱軸
        rorateZ()	2D
        rorate3d()	x,y,z確定矢量

    • 左手準(zhǔn)則

    • 3D呈現(xiàn)-------------------transform-style

      • 控制子元素是否開啟三維立體環(huán)境

        • 默認：flat
        • preserve-3d

      • 在父盒子設(shè)計，子盒子呈現(xiàn)

      • 兩面翻轉(zhuǎn)–只翻轉(zhuǎn)一面解決

        • /*方法一*/-webkit-backface-visibility:visible;backface-visibility: visible;/*方法二*/transform: translateZ(1px); ```

      • 旋轉(zhuǎn)木馬樣式

  • 瀏覽器私有前綴

    • 兼容老版本的寫法，較新的瀏覽器無需添加
    私有前綴屬性

    -moz-	firefox私有
    -mz-	ie私有
    -webkit-	sarari，chrome私有
    -o-	Opera私有

    • /*建議寫法*/-moz-borer-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;

  • 廣義的HTML5

    • HTML5+CSS3+JavaScript

  • 品優(yōu)購項目

    • 步驟

      • 提前設(shè)計文件夾

      • 設(shè)計相關(guān)頁面命名

      • 準(zhǔn)備好首頁，初始化CSS，并引入

      • 模塊化開發(fā)–common.css，公共部分

        • 按功能劃分
          • 重復(fù)使用，更換方便
        • 內(nèi)容
          • 頭部，底部
          • 版心寬度，清除浮動，頁面文字顏色

      • 主體部分–index.css

        • main盒子給高度就不用清除浮動

      • 主體部分-輪播圖

        • ul>li>img

      • favicon.ico圖標(biāo)

        • 比特蟲網(wǎng)站

        • 標(biāo)簽下--

    • 網(wǎng)站TDK三大標(biāo)簽SEO優(yōu)化

      • SEO-Search Engine Optimization搜索引擎優(yōu)化
        • 目的：對網(wǎng)站進行深度優(yōu)化，從而幫網(wǎng)站獲取免費流量，提升在搜索引擎上網(wǎng)站的排名，提高網(wǎng)站的知名度，點擊率更高；

    • TDK–優(yōu)化標(biāo)準(zhǔn)

      • Title-網(wǎng)站標(biāo)題
      • 網(wǎng)站名-網(wǎng)站介紹（30以內(nèi)）
      • Description
        • 網(wǎng)站總體業(yè)務(wù)和主題概括
        • 長尾關(guān)鍵詞
      • Keyword
        • 6~8關(guān)鍵詞，英文逗號隔開

    • 常用模塊類名命名

      • 名稱說明

        快捷導(dǎo)航欄	shortcut
        頭部	header
        標(biāo)志	logo
        購物車	shopcar
        搜索	search

      | 熱點詞 | hotwords |
      | 導(dǎo)航 | nav |
      | 導(dǎo)航左側(cè) | dropdown 包含.dd .dt |
      | 導(dǎo)航右側(cè) | navitems |
      | 頁面底部 | footer |
      | 頁面底部服務(wù)模塊 | mod_service |
      | 頁面底部幫助模塊 | mod_help |
      | 頁面底部版權(quán)模塊 | mod-copyright |

    • 注意SVG和PNG的區(qū)別

  • LOGO SEO優(yōu)化

    • H1標(biāo)簽–a鏈接–a背景圖片logo（點擊可返回首頁）
    • 鏈接中放文字（網(wǎng)站名稱），無顯示文字
      • 方法1：text-indent移到盒外，overflow-hidden
      • 方法2：font-size=0；
    • 鏈接title屬性=提示文字

  • 遇到問題

    • search搜索框的按鈕總是會與上下有縫隙，需要調(diào)整分辨率
    • 解決：
      • 不在父盒子search里設(shè)置邊框樣式
      • 在input和button里設(shè)置樣式

  • 電梯側(cè)導(dǎo)航

    • 大盒子包含–樓層區(qū)，不設(shè)高度
    • TabList-----TabContent
    • 一般情況下，a如果包含有寬度的盒子，a需要轉(zhuǎn)換為塊級元素

  • 列表頁----list.html，list.css

  • 注冊頁面-register.html

    • 注冊頁面比較隱私，不需要SEO優(yōu)化，保護用戶信息
    • 布局-header-register-footer

Web服務(wù)器

• 文件，數(shù)據(jù)庫，應(yīng)用程序，Web服務(wù)器

• 本地服務(wù)器–局域網(wǎng)，遠程服務(wù)器–互聯(lián)網(wǎng)

• 免費遠程服務(wù)器–http://free.3v.do/

  • 注冊賬號
  • FTP管理-激活
  • 記錄主機名，用戶名，密碼，域名
  • 利用cutftp軟件上傳到遠程服務(wù)器
  • 即可在瀏覽器中輸入域名訪問瀏覽器

• GitHub免費

總結(jié)

以上是生活随笔為你收集整理的HTML5和CSS3新增的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。