HTML5和CSS3重點知識彙總

時間 2019-11-12

標籤 html5 html css3 css 重點知識彙總欄目 HTML5 简体版

原文原文鏈接

HTML5

一、什麼是H5：css

HTML5是HTML最新的修訂版本，2014年10月由萬維網聯盟（W3C）完成標準制定。設計目的是爲了在移動設備上支持多媒體。html

二、新增特性：web

繪畫<canvas>；多媒體播放<video><audio>；本地離線存儲；特殊內容元素<article><header><nav><footer>；表單控件<calendar><date><email>等canvas

三、最小的HTML5文檔瀏覽器

<!DOCTYPE html>  <!--h5的聲明-->
<html>
<head>
<meta charset="utf-8">
<title>文檔標題</title>
</head>
 
<body>
文檔內容......
</body>
 
</html>

四、支持：緩存

最新版Safari,Chrome,Firefox,Opera支持，IE9支持服務器

五、自定義標籤：網絡

首先在html標籤經過xmlns:命名空間名來指定；其次可使用這個標籤寫內容（一般命名採用-鏈接方式）；最後，在樣式裏使用session

命名空間名\:標籤名{}定義編輯器

<!DOCTYPE html>
<html xmlns:ownhtml>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
//二、這裏若是有多個標籤，都是從ownhtml建立的，那麼對其設置樣式主要是冒號後面的部分，也就是命名空間部分
        ownhtml\:customdiv{
            font-size: .36rem;
            font-weight: bold;
            color:red;
        }
        p{
            color: green;
        }
    </style>
</head>
 <body>

    <ownhtml:customdiv class="custom">this is a custom element!</ownhtml:customdiv>
    <!--一、冒號後的命名空間能夠有多個值，這樣就有多個不一樣的標籤能夠拿來使用-->

    <p>this is normal text</p>
</body>
</html>

六、canvas

這個 HTML 元素是爲了客戶端矢量圖形而設計的。它本身沒有行爲，但卻把一個繪圖 API 展示給客戶端 JavaScript 以使腳本可以把想繪製的東西都繪製到一塊畫布上。默認狀況下 <canvas> 元素沒有邊框和內容。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

<script>
//首先找到canvas元素
var c=document.getElementById("myCanvas");

//建立 context 對象：是內建的 HTML5 對象，擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。
var ctx=c.getContext("2d");

//fillStyle屬性能夠是CSS顏色，漸變，或圖案。fillStyle 默認設置是#000000（黑色）
ctx.fillStyle="#FF0000";

//fillRect(x,y,width,height) 方法定義了矩形當前的填充方式。
ctx.fillRect(0,0,150,75);
</script>

canvas 的左上角座標爲 (0,0),上面的 fillRect(0,0,150,75)意思是：在畫布上繪製 150x75 的矩形，從左上角開始 (0,0)。

再來一個畫圓的實例：arc(x,y,r,start,stop)

其中，畫布左上角座標0，0；x爲圓心在x軸上座標，y同理；r爲半徑長度；start爲起始角度；stop結束角度；Math.PI表示180°，順時針

<canvas id="myCanvas" width="500" height="500" style="border:1px solid #d3d3d3;">
您的瀏覽器不支持 HTML5 canvas 標籤。</canvas>
<script>
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.beginPath();
 ctx.arc(250,250,250,0,Math.PI);
 ctx.stroke();
</script>

七、SVG

指可伸縮矢量圖形，定義用於網絡的基於矢量的圖形，使用XML格式定義，圖像改變尺寸質量不會損失。

優勢：可經過文本編輯器建立與修改；可被索引，壓縮；是可伸縮的；可在任何分辨率下高質量打印。

異同：SVG 是一種使用 XML 描述 2D 圖形的語言；Canvas 經過 JavaScript 來繪製 2D 圖形

八、video和audio

一個是音頻，一個是視頻。均可以有多個source，第一個不支持便播放下一個。

controls功能爲讓瀏覽器啓用自己的播放控制欄。

Source標籤用於給媒體（video/audio）指定多個可選擇的（瀏覽器最終只能選一個）文件地址，且只能在媒體標籤沒有使用src屬性時使用。

loop屬性用於指定視頻是否循環播放，是一個布爾屬性。

Autoplay屬性用於設置視頻是否自動播放，是一個布爾屬性。

preload屬性用於定義視頻是否預加載值有none,metadata,auto(默認)。

poster屬性用於指定一張圖片，在當前視頻數據無效時顯示（預覽圖）。

<audio controls="controls">
 <source src="song.ogg" type="audio/ogg">
 <source src="song.mp3" type="audio/mpeg">
 Your browser does not support the audio tag.
</audio>

九、關於header,footer等的統一說明：

header:文檔頭部區域；nav定義導航連接部分；section定義文檔中的章節；article定義獨立的內容；aside定義頁面主區域以外內容；figure規定獨立的流內容（圖像，圖表等）；footer定義文檔底部。

考慮到其兼容問題，可在樣式中對其全部標籤設置一個display:block屬性。

其中，article是一個特殊的section標籤，它比section具備更明確的語義, 它表明一個獨立的、完整的相關內容塊。

<article>
　　<header>
       <h1>article元素使用方法</h1>
　　　　<p>發表日期：<time pubdate="pubdate">2010/10/10</time></p>
　　</header>
　　<p>此標籤裏顯示的是article整個文章的主要內容，，下面的section元素裏是對該文章的評論</p>
　　<section>
       <h2>評論</h2>
　　　　<article>
          <header>
　　　　　　　　<h3>發表者：maizi</h3>
　　　　　　　　<p><time>1小時前</time></p>
　　　　　　</header>  
　　　　　　<p>這篇文章很不錯啊，頂一下！</p>
           </article> 
　　　　<article>
          <header>            
　　　　　　　　<h3>發表者：小妮</h3>
             <p><time>1小時前</time></p>
　　　　　　</header>
　　　　<p>這篇文章很不錯啊，對article解釋的很詳細</p>  
　　　　</article>
   </section>
</article>

十、MathML<math>

數學標記語言，基於XML的標準，書寫數學符號和公式的語言。

十一、input新增幾個類型

type=color選取顏色；date從日期選擇器選擇日期；email提交表單自動驗證域名合法性；number選擇數字(上下箭頭)<input type="number" name="quantity" min="1" max="5">1 到 5 之間；tel電話號碼；url自動校驗url的值

十二、web存儲

localStorage：長久保存網站數據，無過時時間，直到手動去除；

sessionStorage：臨時保存同一窗口數據，關閉窗口後刪除；

mainfest：離線緩存，斷開網絡時繼續訪問頁面。

經常使用API：

保存數據localStorage.setItem(key,value);

讀取localStorage.getItem(key);

刪除單個localStorage.removeItem(key);

刪除全部localStorage.clear();

獲得某個索引的key，localStorage.key(index);

對於離線緩存，首先創建一個manifest文件，內容爲cache manifest,cache（必須）,network,fallback。cache manifest固定格式，寫在第一行，#加版本號做爲註釋，cache標識出哪些文件須要緩存。而後在html標籤里加上便可。服務器部署是須要添加相應mime-type

CACHE MANIFEST
# version 2018-08-20 10:44

CACHE:
./asset/src/style/main.css
./asset/src/style/index.html
./asset/src/style/main.js

HTML
<html lang="en" manifest="index.manifest"></html>

CSS3

一、邊框

border-radius有四個值，對應1)border-top-left-radius，2)border-top-right-radius，3)border-bottom-right-radius，4)border-bottom-left-radius，能夠分別設置，也能夠連寫。當連寫狀態下，只有一個值，則四個角都爲該值；有兩個值，則對應13,24（對角）；若是爲三個值，則1,24,3。

box-shadow，用來定義盒模型陰影而不是文字陰影，有以下幾個值：陰影的x軸，y軸，模糊值(越大越模糊)，顏色，（inset可選，加上這個屬性是內部陰影）。xy軸單位是px，用來定義陰影方向，爲正則是右側下側陰影，爲負左側上側。

如box-shadow:2px 2px 5px #333;

border-image，使用圖像建立邊框。

二、背景

background-image：url();background-position: left top;background-repeate: no-repeate;也能夠連寫background:url() left top no-repeate。

background-size：寬px 高px ；指定背景圖像大小

background-origin:border-box/padding-box/content-box；背景圖像的位置區域。

三、*漸變*

線性漸變：background: linear-gradient(direction,color-stop1,color-stop2,...);也可將顏色設置爲rgba()加了透明度。多個顏色默認均勻分佈，也可在其後面加上x%控制區域大小。

//從上到下漸變
background: linear-gradient(red,blue);
//左到右
background: linear-gradient(to right,red,blue);
//對角
background: linear-gradient(to bottom right,red,blue);
//角度定義方向
background: linear-gradient(180deg,red,blue);
//從上到下，其中0deg從下到上，45deg順時針45°，90則順時針90°也就是從左到右，180向下，-90從右到左

徑向漸變：由中心向外。radial-gradient(circle,red,yellow,green);其中circle表示圓形，默認是橢圓ellipse。

四、字體

能夠自定義字體，使用時，先在css引入並起名，而後使用

<style>
@font-face{//引入
  font-family: 起名字;
  url:('...');
}
div{
  font-family: 名字;//在這裏使用
}
</style>

五、2D轉換

transform:translate(20px,10px);沿着xy軸移動；

rotate(30deg);順時針旋轉角度；

scale(2,3);放大或縮小倍數，沿xy軸；

3D轉換

transforms:translate3d(x,y,z);scale3d(x,y,z);rotate3d(x,y,z,angle)

連寫：transform:rotate|scale|skew|translate|matrix

六、transitions和animations

transition:property duration timing-function，pro表示對哪一個屬性過渡，duration表示在多長時間內完成，最後表示經過什麼方法過渡。如：transitions: background-color 1s linear;

animations:name duration timing-function iteration-count，name表示關鍵幀的集合，duration多久完成過渡，timing-function經過什麼方法過渡，最後一個迭代次數，infinite無限循環，默認爲1。

建立動畫，首先使用keyframes,而後animation使用之。

<style>
.box {
    background-color: red;
    -webkit-animation: mycolor 4s linear infinite;
 }
 @-webkit-keyframes mycolor {
     0% {
        background-color: red;
     }
     40% {
         background-color: darkblue;
     }
     70% {
        background-color: yellow;
     }
     100% {
        background-color: green;
     }
 }
</style>

linear:一樣速度變化；ease-in:開始速度慢，愈來愈快；ease-out：開始快，後面減速；ease：開始慢，加速再減速。

七、多媒體查詢@media

可針對不一樣媒體類型定義不一樣樣式。

@media 媒介類型and|not|only (媒介特徵) {  
	... 
}

媒介類型：print:打印機和打印預覽；screen:電腦，平板或手機屏幕；all：全部媒體設備類型。

媒介特徵：

device-height/width:設備屏幕可見高度/寬度；

max-device-height:屏幕可見最大高度；

height/width:頁面可見區域高度；

max-height/width:頁面可見最大高度；

max-width指的是顯示區域的寬度，好比瀏覽器的顯示區域寬度；max-device-width指的是設備整個顯示區域的寬度，也就是設備分辨率。max-width在窗口大小改變或橫豎屏轉換時會發生變化；max-device-width只與設備相關，不會發生變化。

例子：爲不一樣頁面寬度設置不一樣的CSS樣式——頁面寬度大於320px和頁面寬度等於320px時分別爲div設置不一樣的背景顏色。

#square{
	width:100px;
	height:100px;
}
@media only screen and (min-width: 320px) {
    #square {
        background:red;
    }
}
@media only screen and (min-width: 320px) and (max-width: 320px) {//(min-width: 320px) and可省略
    #square {
        background:yellow;
   }
}

在head中引入

<link media="screen and (max-width:600px)" rel="stylesheet" href="example.css" />

在@import中引入

<style type="text/css" media="screen and (min-width:600px) and (max-width:900px)">
	@import url("css/style.css");
</style>

直接在CSS中使用

@media screen and (max-width: 800px) {  
	// CSS樣式
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。