HTML5基礎(chǔ)總結(jié)

HTML5頁面設(shè)計(jì)

  1. DTD的寫法
<!DOCTYPE html>
  1. 頁面結(jié)構(gòu)
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>  
    </body>
</html>
  1. 超鏈接標(biāo)簽<a>的完整寫法
<a href = “http://www.163.com “> 請點(diǎn)擊</a>
  1. 有序列表和無序列表的寫法
    1. 無序列表
    <ul>
        <li>Python</li>
        <li>HTML5</li>
        <li>Java</li>
        <li><a >谷歌</a></li>
</ul>
    1. 有序列表
    <ol>
        <li>Python</li>
        <li>HTML5</li>
        <li>Java</li>
        <li><a >谷歌</a></li>
</ol>
  2. img標(biāo)簽的用法
<img src="image/logo.gif" alt="請上淘寶網(wǎng)"/>
  1. form表單的action、method、enctype屬性
    1. action屬性：

      ??用戶填入表單的信息總是需要程序來進(jìn)行處理，這個(gè)屬性指明表單數(shù)據(jù)要發(fā)送到的頁面或程序，如果這個(gè)屬性是空的或未寫，那么當(dāng)前的文檔URL將被使用。
    2. method屬性：

      ??有兩個(gè)值:

      ??get:它是默認(rèn)值，使用這種方法表單中提交的數(shù)據(jù)將會(huì)附加在url之后，以?分開與url分開。字母數(shù)字字符原樣發(fā)送,空格轉(zhuǎn)換為”+”，其它符號轉(zhuǎn)換為%XX,其中XX為該符號以16進(jìn)制表示的ASCII（或ISO Latin-1）值。

      ??例如：
    http://www.test.com/1.htm?keyword=asp.net+ajax
    ??使用這種方式傳輸?shù)臄?shù)據(jù)量小，由于受到URL長度的限制，最多只能傳遞1024字節(jié)（1KB），它在HTTP頭部傳遞。

    ??post：這種方法傳遞的數(shù)據(jù)量大，可以達(dá)到2M，它把數(shù)據(jù)作為http請求的內(nèi)容，數(shù)據(jù)不會(huì)附加在url之后。
    1. enctype屬性

      ??有兩個(gè)值：
application/x-www-form-urlencoded

??窗體數(shù)據(jù)被編碼為名稱/值對。這是標(biāo)準(zhǔn)的編碼格式，缺省值；

multipart/form-data

??form表單中需要上傳文件時(shí)需修改成這個(gè)值。

  1. input標(biāo)簽的required、placeholder屬性的使用，type屬性的各種變化
    1. placeholder

      用戶還沒有輸入值時(shí)，輸入型控件向用戶顯示提示信息。
    2. required

      用于實(shí)現(xiàn)輸入智能提示

      input標(biāo)簽加入required屬性
    3. type
      1. 簡單文本框 text
      2. 密碼框 password
      3. 數(shù)字框 number
      4. 復(fù)選框 checkbox
      5. 單選框 radio
      6. 日期選擇 date
      7. 上傳文件 file
      8. 普通按鈕 button
      9. 圖片按鈕 image
      10. 提交表單數(shù)據(jù)按鈕 submit
      11. 清除表單數(shù)據(jù)按鈕 reset
      12. 顏色選擇框 color
      13. 日期+時(shí)間輸入 datetime-local
      14. 周數(shù)選擇 week
      15. 月份選擇 month
      16. 時(shí)間輸入 time
      17. Email輸入框 email
      18. 電話輸入框 tel
      19. 網(wǎng)址輸入框 url
      20. 搜索框 sesrch
      21. 滑塊 range
      22. 隱藏域 hidden
      23. select 下拉框標(biāo)簽
      <select name="水果" size="5" multiple>
        <option value="1">蘋果</option>
        <option value="2">橘子</option>
        <option value="3">栗子</option>
        <option value="4">香蕉</option>
</select>
  2. 在form表單中name屬性的重要性

    name：定義input元素的名稱。
  3. HTML5提供了哪些新特性？
    1. canvas
    2. 音頻與視頻
    3. GeoLoction
    4. WebGL
    5. WebSocket
    6. 本地存儲(chǔ)
    7. 離線應(yīng)用程序

CSS

  1. css的語法格式
p{
    color:red;
    text-align:center;
}
  1. id選擇器和class選擇器的使用
    1. id選擇器：
    <p id=“intro”>測試文本</p>
#intro {font-weight:bold;}
    1. class選擇器：
    <p class =“intro”>測試1</p>
<p class =“intro”>測試2</p>
.intro{font-weight:bold;}
  2. css樣式的權(quán)重、!important的使用

    ??標(biāo)簽選擇器，權(quán)重為1；

    ??class選擇器，權(quán)重為10；

    ??id選擇器，權(quán)重為100；

    ??在html標(biāo)簽中直接使用style屬性，這里的style屬性的權(quán)重為1000；

    ??權(quán)重一樣時(shí)，會(huì)采用“層疊原則” 后定義的會(huì)被應(yīng)用，可以使用!important提升樣式的優(yōu)先級
  3. css的前綴問題

    -moz-對應(yīng) Firefox

    -webkit-對應(yīng) Safari and Chrome

    -o- for Opera

    -ms- for Internet Explorer
  4. 浮動(dòng)屬性的使用
float:left;
float:right;
clear:right/left/both;
  1. 相對定位與絕對定位

    position：元素定位方式
position:relative;//相對定位下，元素的位置相對于它本來該出現(xiàn)的位置的偏移，但原有的空位還留著
position:absolute；//在絕對定位下，元素的位置相對于最近的已定位的祖先元素，若沒有，則相對于body
position:fixed;//固定定位，以瀏覽器窗口作為參照物。不管瀏覽器滾動(dòng)條如何滾動(dòng)或?yàn)g覽器窗口大小如何變化，始終顯示在固定的位置。

z-index:控制多個(gè)元素重疊時(shí)的次序，值越大越在上面顯示

  1. 使用圓角的屬性
border-radius
  1. 使用動(dòng)畫效果的CSS規(guī)則寫法
@keyframes
  1. 使用網(wǎng)絡(luò)字體的css屬性
@font-face
  1. 實(shí)現(xiàn)響應(yīng)式布局的手段？重點(diǎn)是viewport的用法，@media、rem布局
    1. 使用viewport

      在開發(fā)應(yīng)用于移動(dòng)設(shè)備的網(wǎng)站時(shí)，常在<head>標(biāo)簽中加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

content中的屬性含義：

width：設(shè)置內(nèi)容的寬度，為一個(gè)正整數(shù)或”device-width”

initial-scale：初始放大比例，為1個(gè)數(shù)字，可用小數(shù)

minimum-scale：最小縮放值，可用小數(shù)

maximum-scale： 最大縮放值，可用小數(shù)

user-scalable：是否允許用戶進(jìn)行縮放，值為"no"或"yes"

  1. 不使用絕對寬度

    由于網(wǎng)頁會(huì)根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素

    不要使用：width:xxpx;

    要使用：width:xx%; 或width:auto;
  2. 相對大小rem

    尺寸和字體的大小都可以使用，相對于根元素<html>來設(shè)置字體大小的
<html style="font-size: 19.2px;"></html>

例如：width: 9.3rem;//實(shí)際大小是179px

font-size: 1.5rem;//實(shí)際大小是29px
  1. 流動(dòng)布局

    各個(gè)區(qū)塊的位置都是浮動(dòng)的，不是固定不變的,例如： 
    .main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
  2. @media規(guī)則

    針對不同的媒體類型和屏幕尺寸，還有不同的大小和高度實(shí)現(xiàn)響應(yīng)式布局，重新渲染頁面

    針對不同的屏幕尺寸設(shè)置不同的樣式
@media only screen and (media feature) {
                CSS-Code;
}

針對不同的媒體使用不同的.css文件：

<link rel="stylesheet" media="only screen  and (media feature)"    href="mystylesheet.css">
  1. BootStrp框架
    比較流行的一套前端開發(fā)框架,使用它可以輕松搭建響應(yīng)式布局頁面

JavaScript

  1. JavaScript在頁面中的書寫
    1. 嵌入網(wǎng)頁形式，在網(wǎng)頁任意處正確嵌套
    <script type="text/javascript">
        //javascript程序
</script>
    1. 單獨(dú)的.js文件形式，盡量放在body結(jié)束前底部
    <script src="js/test01.js"></script>
  2. 聲明變量的關(guān)鍵字

    var

    6種類型：undefined，null，boolean，number，string，object
  3. parseInt和parseFloat的使用

    parseInt方法和parseFloat方法，這兩個(gè)方法只能對string類型調(diào)用，其他的全部返回NaN

    parseInt方法首先檢查位置0處的字符，判斷它是否是個(gè)有效數(shù)字，若有效，再往下檢查，直到發(fā)現(xiàn)非數(shù)字，并返回前面的檢查結(jié)果。
    例：
var num1 = parseInt(“1234”); //得到1234
  1. ==與===的區(qū)別；
    1. ==
      為確定兩個(gè)變量是否相等時(shí)，兩個(gè)變量都會(huì)
      進(jìn)行類型轉(zhuǎn)換
alert(“5”==5);//輸出true
  1. ===
    除了比較數(shù)值的相等，還要比較數(shù)據(jù)類型
alert(“5”===5);//輸出false
  1. 定義數(shù)組
var array=[];
  1. 定義object對象
var obj={};
  1. jQuery的查找器符號”$”的使用

    $(選擇器符號字符串)
$(“#mybtn”)
  1. 標(biāo)準(zhǔn)DOM的查找方法
    1. getElementsByTagName：返回一個(gè)頁面
      上所有包含tagName（標(biāo)簽名）等于某個(gè)指定值的
      元素節(jié)點(diǎn)對象集合
    2. getElementById：根據(jù)標(biāo)簽的id屬性返回
      一個(gè)節(jié)點(diǎn)對象
    3. getElementsByClassName：返回所有
      class屬性為指定值的節(jié)點(diǎn)對象集合
    4. querySelector和querySelectorAll:使用CSS選擇器查找，不同的是前者只返回符合條件第1個(gè)節(jié)點(diǎn)對象，后者則是所有對象集合。
var oInput1=document.getElementById("mybutton1");
oInput1.onclick=function(){
                alert("hello world");
     }
  1. 使用function關(guān)鍵字定義類以及使用prototype屬性添加方法
function Car(color,speed){
    this.color = color;
    this.speed = speed;
}
Car.prototype.showInfo = function(){
    console.log(this.color+" "+this.speed);
}
var car = new Car("red",22);
car.showInfo();

setTimeout實(shí)現(xiàn)暫停

setInterval定義間隔

音頻與視頻

  1. audio和video
    1. audio
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <audio>
            <source src=“media/a.ogg”  type="audio/ogg">
            <source src=“media/a.mp3” type="audio/mp3">
            您的瀏覽器不支持audio，少年你該升級了！
    </audio>
    </body>
</html>
  1. video
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <video controls="controls" poster="media/poster.jpg">
            <source src="media/mov_bbb.ogg" type="video/ogg"></source>
            <source src="media/mov_bbb.mp4" type="video/mp4"></source>
            <track src="media/video_ch.vtt" srclang="zh_cn" kind="subtitles" label="中文" default/>
            <track src="media/video_en.vtt" srclang="en" kind="subtitles" label="英文"/>
            您的瀏覽器不支持video，少年你該升級了！
        </video>
    </body>
</html>
  1. 幾個(gè)屬性的使用loop、controls、preload
    • loop——如果出現(xiàn)該屬性，則每當(dāng)音頻結(jié)束時(shí)重新開始播放。
    • autoplay——如果出現(xiàn)該屬性，則音頻在就緒后馬上播放。
    • controls——如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。
    • preload——如果出現(xiàn)該屬性，則音頻在頁面加載時(shí)進(jìn)行加載，并預(yù)備播放。
      如果使用 "autoplay"，則忽略該屬性。

Canvas

  1. canvas的坐標(biāo)體系特點(diǎn)
    左上角為原點(diǎn)坐標(biāo)，只有正坐標(biāo)，無負(fù)坐標(biāo)
  2. 常用的一些api
var cxt = document.getElementById("mycanvas").getContext("2d");
  1. 繪制圖片drawImage方法的使用
var img=new Image()
img.onload=function(){
    ctx.drawImage(…);
};
img.src=“test.jpg”;
  1. drawImage(image,x,y)

    image:將要繪制的圖像引用

    x,y：圖像放在Canvas中的坐標(biāo)
  2. drawImage(image,x,y,width,height)

    width與height:繪制的圖像最終寬度與高度
  3. drawImage(image,sx,sy,sWidth,sHeight,dx,dy,width,height)

    sx,sy:裁剪區(qū)域左上角坐標(biāo)

    sWidth,sHeight:裁剪區(qū)域?qū)挾群透叨?br>
    dx,dy:圖像放在Canvas中的坐標(biāo)

    width,height:繪制的圖像最終寬度與高度
  4. 處理getImageData方法得到的像素的數(shù)組
    1.getImageData(x,y,width,height)

    x,y:所取區(qū)域的左上角坐標(biāo)；

    width和height:所取區(qū)域的寬度與高度

    該方法返回ImageData 對象，這個(gè)對象有3個(gè)屬性width、height、data，其中data是個(gè)數(shù)組，對于每個(gè)像素都存儲(chǔ)4個(gè)信息，即 RGBA 值：

    R - 紅色 (0-255)、G - 綠色 (0-255)、B - 藍(lán)色 (0-255)，A-Alpha（0-255,0是不透明，255是全透明）
    1. putImageData(imgData,x,y)

      用于修改或更新某個(gè)區(qū)域中的像素信息
    2. createImageData(width,height)

      建立一個(gè)空白的像素區(qū)域

WebSocket

  1. WebSocket對象的生成語法
  2. 常用的API有哪些
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <ul id="chatlist">  
        </ul>
        <input type="text" id="txtMessage" />
        <input type="button" value="send" id="btnSend" />
        <script src="js/jquery-2.1.0.js"></script>
        <script>
            if(window.WebSocket){
                //alert("support");
                var ws=new WebSocket("ws://127.0.0.1:2734");
                ws.onopen=function(){
                    alert("open");
                };
                ws.onclose=function(){
                    alert("close");
                };
                ws.onerror=function(){
                    alert("error");
                };
                //接收消息
                ws.onmessage=function(msg){
                    alert("received");
                    var data=msg.data;
                    $("<li></li>").text(data).appendTo($("#chatlist"));
                };
                $("#btnSend").click(function(){
                    var msg=$("#txtMessage").val();
                    //alert(msg);
                    if(ws){
                        ws.send(msg);                       
                        $("#txtMessage").val("");
                    }
                });
            }
        </script>
    </body>
</html>

本地存儲(chǔ)技術(shù)

  1. localStorage和sessionStorage的區(qū)別

    sessionStorage生命周期為當(dāng)前窗口或標(biāo)簽頁，一旦窗口或標(biāo)簽頁被永久關(guān)閉了，那么所有通過它存儲(chǔ)的數(shù)據(jù)也就被清空了（相當(dāng)于session的使用）

    localStorage生命周期是永久，這意味著除非用戶主動(dòng)清除存儲(chǔ)的信息，否則這些信息將永遠(yuǎn)存在。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容