HTML+CSS+JavaScript基礎知識

# HTML5
```
* 基本程式碼：
*     <html>
*         <head>
*             <title>title</title>
*         <head>
*         <body>
*             <FONT color='red'>Hello world</FONT><br/>
*             <FONT color='green'>HTML5</FONT>
*         </body>
*     </html> 
```

##  
1.標籤學習
### 1. 檔案標籤：
    html：根標籤
    head：頭標籤，指定html文件的一些屬性，引入外部資源
    title：標題標籤
    body：體標籤
### 2.文字標籤：
    <! -- 註釋內容 -->：註釋
    <br>：換行
    h1 - h6：標題標籤，自帶換行
    <p></p>：段落標籤
    <hr>：顯示一條水平線
        引數：color width size align
    <b>：字型加粗
    <i></i>：字型斜體
     
<font></font>：字型標籤
        屬性：color size face
### 3.圖片標籤：
    <img>：屬性：src，./；代表當前目錄 ../：代表上一級目錄
### 4.列表標籤：
    <ol></ol>有序列表 <li>：裡面的列表項 type：標籤 start：開始項
    <ul></ul>無序列表
### 5.連結標籤：
    <a ></a>：href：連結 target："_self"直接開啟 "_blank"：新網頁開啟 裡面也可以放圖片和文字
###  
6.特殊標籤：
    <span></span>：行內標籤，用來包裹的，和CSS一起才有用
    <div></div>：每一個div佔滿一整行，塊級標籤，也是和CSS一起使用
### 7.語義化標籤：html5中為了提高程式可讀性
    <header></header>：頭
    <footer></footer>：腳
### 8.表格標籤：
    table：定義表格
        width：寬度
        border：邊框
        cellpadding：定義內容和單元格的距離
        cellspacing：單元格之間的距離
        bgcolor：背景色
        align：對齊方式
    tr：定義行
        bgcolor：背景顏色
        align：對齊方式
    td：定義單元格
        colspan：合併列
        rowspan：合併行
    th：定義表頭單元格
    <caption>：表格標題
    <thead>：表示表格的頭部分
    <tbody>：表示表格的體部分
    <tfoot>：表示表格的腳部分
### 9.表單標籤：
    概念：用於採集使用者輸入的資料，和伺服器進行互動
    from：用於定義表單，可以定義一個範圍，範圍代表採集使用者資料的範圍
        action：指定提交資料的URL
        method：指定提交方式
            get：
                請求引數會在地址中顯示
                請求引數大小是有限制的
                不太安全
            post：
                請求資料會封裝在請求體中
                請求引數的大小沒有限制
                較為安全
        name：表單中的資料想要被提交，需要指定name屬性
### 10.表單項標籤：
    input：可以通過type屬性值，改變元素展示的樣式
        type屬性：
            text：文字輸入框，預設值
                placeholder：指定輸入框的提示資訊
            password：密碼輸入框
            radio：單選框
                要想讓多個單選框實現單選的效果，多個單選框的name屬性值必須一致
                一般會給每一個單選框提供value屬性
                checked：可以指定預設值
            checkbox：複選框
                checked：預設值
            file：檔案選擇框
            hidden：隱藏域，用於提交一些資訊
            按鈕：
                submit：提交按鈕
                button：普通按鈕
                image：圖片提交按鈕
                    src：路徑
    label：指定輸入項的文字描述資訊
        label的for屬性一般會和input的id屬性值對應。如果對應了，則點選label區域，會讓input輸入框獲取焦點。
    select：下拉列表
        option：子元素，指定列表項
    textarea：文字域
        cols：指定列數，每一行有多少字元
        rows：預設多少行

## 2.CSS：頁面美化和佈局控制
### 1.概念：
    Cascading Style Sheets：層疊樣式表，多個樣式可以作用在同一個html元素上
    功能強大
    將內容展示盒樣式控制分離
        降低耦合度
        讓分工協作更容易
        提高開發效率
### 2.CSS的使用：
    內聯樣式：在標籤內使用sytle屬性指定css程式碼
    內部樣式：在head標籤內，定義style標籤，style標籤的標籤體內容就css程式碼
    外部樣式：定義CSS資原始檔，在head標籤內，定義link標籤，引入外部的資原始檔
### 3.CSS的語法：
    格式：
        選擇器{
            屬性名1：屬性值1；
            屬性名2：屬性值2；
            。。。}
        選擇器：篩選具有相似特徵的元素
### 4.選擇器：
    基礎選擇器：
        id選擇器：選擇具體的id屬性值的元素
            語法： #id屬性值{}
        元素選擇器：選擇具有相同標籤名稱的元素
            語法：標籤名稱{}
            id選擇器要優先於元素選擇器
        類選擇器：選擇具有相同的class屬性值的元素
            語法：.class屬性值{}
    擴充套件選擇器：
        選擇所有元素：*{}
        並集選擇器：選擇器1，選擇器2{}
        子選擇器：篩選選擇器1元素下的選擇器2元素
            語法：選擇器1 選擇器2{}
        父選擇器：篩選選擇器2下的選擇器1
            語法：選擇器1>選擇器2
        屬性選擇器：選擇元素名稱，屬性名=屬性值的元素
            語法：元素名稱[屬性名="屬性值"]{}
        偽類選擇器：選擇一些元素具有的狀態
            語法：元素：狀態{}
            如：<a>
                狀態：link 初始化 visited active hover：滑鼠懸停
### 5.屬性：有很多，建議看文件，這裡只是瞭解一下
    字型，文字
        font-size
        color
        text-align
        line-height
    背景：
        background
    邊框：
        width height
    盒子模型：
        margin：外邊框
        padding：內邊框
            box-sizing border-box
        float：浮動
            left right
# 3.JavaScript：
## 1.概念：一門客戶端指令碼語言
    執行在客戶端瀏覽器中
    指令碼語言：不需要編譯，直接被瀏覽器解析執行
    用來增強使用者和html頁面的互動過程，控制html元素，增加動態效果
    JavaScript = ECMAScript + javaScript（BOM+DOM）
## 2.ECMAScript：客戶端指令碼語言標準
### 1.基本語法：
    與html結合方式
        內部js：定義<script>，標籤內容就是js程式碼
        外部js：定義<script>，通過src屬性引入外部的js檔案
    註釋：
        單行：//
        多行：/*  */
    資料型別：
        基本資料型別
            number String boolean null undefined
        引用資料型別
            物件
    變數：
        Java是強型別語言，JavaScript是弱型別語言
            強型別：在開闢變數儲存空間時，定義了空間將來儲存的資料型別
            弱型別：在開闢變數儲存空間時，不定義空間將來儲存的資料型別
        語法：var 變數名 = 初始化值；
            typeof：獲取變數的型別
    運算子：
        一元：++，--。注意：+：代表正號
        其他和java差不多
### 2.基本物件：
        Function：函式物件
            建立：
                var fun = new Function(形式引數列表，方法體)；不建議
                function 方法名稱(形式引數列表){
                    方法體}
                var 方法名 = function（形式引數列表）{
                    方法體}
            方法
            屬性：
                length：代表形參個數
            特點：
                方法定義是，形參的型別不用寫，返回值型別也不用寫。
                方法是一個物件，如果定義名稱相同的方法，會覆蓋
                在js方法中，方法的呼叫只與方法的名稱有關，和引數列表無關
                在方法生命中有一個隱藏的內建物件（陣列），arguments，封裝所有可能的實際引數
            呼叫：
                方法名稱（實際引數列表）
        基本物件：
            Array：
                建立：
                    var arr1 = new Array(1,2,3);
                    var arr2 = new Array(5); 不賦值的話就為空，顯示幾個逗號
                    var arr3 = [1,2,3,4];
                    var arr4 = new Array();
                方法：
                    join(引數)：將陣列中的元素按照指定的分隔符拼接為字串
                    push：向陣列的末尾加一個或者更多的元素，並返回新的長度
                屬性：length
                特點：
                    js中陣列的型別可變
                    js中陣列長度可變
            Date：
                建立：
                    var date = new Date();
                方法：
                    toLocaleString();返回對應時間
                    getTime();獲取毫秒值
            Math：
                方法：random ceil floor round
                屬性：Pi
            Number
            String
            RegExp：正則表示式物件
                建立：
                    var reg = new RegExp("正則表示式");
                    var reg = /正則表示式/;
                方法：
                    test(引數)
            Global：
                特點：
                    全域性物件，這個Global中封裝的方法不需要物件就可以直接呼叫。 方法名();
                方法：
                    encodeURI()：url編碼
                    decodeURI()：url解碼
                    encodeURIComponent()：url編碼，字元更多
                    decodeURIComponent()：解碼更多字元
                    parseInt()：字串轉數字，直到不是數字為止
                    isNAN()
                    eval()：講JavaScript字串，並把它作為指令碼程式碼來執行
## 3.DOM：
        功能：控制文件內容
        獲取頁面標籤（元素）物件：Element
            domcument.getElementById("id值");
        操作Element物件：
            修改屬性值
                檢視API文件吧
            修改標籤內容：
                屬性：innerHTML
        功能：某些元件被執行了某些操作後，觸發某些程式碼的執行
        如何繫結事件：
            直接在html標籤上，指定時間的屬性，屬性值就是js程式碼
            通過js獲取元素物件，指定事件屬性，設定一個函式
## 4.BOM：先略過了
## 5.Bootstrap_：先略過了
## 6.XML：先略過了
HTML+CSS+JavaScript基礎知識

HTML+CSS+JavaScript基礎知識

html,css,jquery基礎知識

半個月學習HTML CSS JS基礎知識總結下（內涵JS）

JavaScript基礎知識整理

JavaScript基礎知識總結

html+css入門基礎案例之頁面設計

JavaScript基礎知識

JavaScript基礎知識學習總結

CSS動畫基礎知識

JavaScript基礎知識三

JavaScript基礎知識二

JavaScript基礎知識一

JavaScript基礎知識四

JavaScript基礎知識五

購書網站前端實現（HTML+CSS+JavaScript）

JavaScript基礎知識梳理

GitHub標星13.2k，JavaScript基礎知識之變數詳解，前端入門必看

html+css+javascript,用data完成，距離某一天還有多少天

前端程式設計概述-HTML-CSS-JavaScript

JavaScript基礎知識：Class 其它(三)

HTML+CSS+JavaScript基礎知識

相關推薦
