Web | 一小時看懂前端語法

簡易安丶發表於2018-04-25
Web前端

自從H5出來之後，web前端的勢頭好像就有點燎原之勢。國內網際網路的發展就是這樣，像之前的移動App(iOS、Android)，簡直是火的一塌糊塗。所以不管是培訓機構也好，自學成才也好，都是一種途徑，能掌握好就是道理。

其他的不多說，直接步入主題，且看娓娓道來。

- 前端認識

Web前端,將效果圖生成網頁，結合Html+Css+Js等技術；網頁由文字、圖片、輸入框、視訊、音訊、超連結等組成。

 型別例項
Html網頁結構人的肢體結構
Css美化樣式穿漂亮衣服，化妝
Js行為事件看見喜歡的就開心、看電視
- 兩大關鍵

瀏覽器
網頁的載體就是瀏覽器，現有的比較主流的瀏覽器包括IE、火狐、谷歌、Safari、騰訊、Opera等等。
URL
URL，也就是網頁的地址。比如https://www.baidu.com

- 開發工具

現在主流的web開發工具一般用sublime、webstorm。

- HTML基礎

HTML，是Hyper Text Markup Language 的縮寫，俗稱超文字標記語言。

<!DOCTYPE html>                       //宣告文件標籤
<html lang="en">                          //根標籤
<head>                                       //頭標籤
    <meta charset="UTF-8">            //轉碼格式
    <title>Document</title>              //標題標籤
</head>
<body>                                              //主體標籤
    
</body>
</html>
- 標籤分類
<br>                 //單標籤
<body></body>    //雙標籤
<p></p>              //雙標籤
- 文字標籤

    <p>段落標籤</p>  

    <h1>一級標題</h1>
    <h2>二級標題</h2>
    <h3>三級標題</h3>
    <h4>四級標題</h4>
    <h5>五級標題</h5>
    <h6>六級標題</h6>

    <font size="6" color="red">文字標籤</font>

    <strong>文字加粗標籤</strong>
    <b>文字加粗標籤</b>

    <em>文字傾斜標籤</em>
    <i>文字傾斜標籤</i>

    <del>刪除線標籤</del>
    <s>刪除線標籤</s>

    <ins>下劃線標籤</ins>
    <u>下劃線標籤</u>

    ![](圖片連結地址)

    <a href="連結路徑" title="提示文字" target="開啟方式">超連結</a>
- 三種列表
//有序列表 
    <ul type="circle">
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ul>
    // 無序列表 
    <ol type="1">
        <li>無序列表</li>
        <li>無序列表</li>
        <li>無序列表</li>
    </ol>
    //自定義列表
    <dl>
        <dt>小標題</dt>
        <dd>自定義列表</dd>
        <dd>自定義列表</dd>
    </dl>
- 表格
//四行三列表格 
    <table>
        <tr>                                         //行
            <td>四行三列表格</td>                      //列
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
            <td>四行三列表格</td>
        </tr>
        <tr>
        <td>四行三列表格</td>
        <td>四行三列表格</td>
        <td>四行三列表格</td>
    </tr>
    </table>
- 表單標籤
<form action="處理資訊" method="回撥方法 get/post">
    使用者名稱：<input type="text" name="輸入框名稱" value="輸入框內容">
    密碼：<input type="password" name="密碼輸入框">
    //單選框
    <input type="radio" name="" checked="checked">男
    <input type="radio" name="">女

    //下拉選單 
    <select>
    <option value="">湖南</option>
    <option value="">湖北</option>
    </select>

    // 多選框
    <input type="checkbox" name="">喝酒
    <input type="checkbox" name="">看電影
    <input type="checkbox" name="">吃飯

    //多行文字框 
    <textarea cols="輸入字元長度" rows="行數"></textarea>

    //提交按鈕 
    <input type="submit" name="">
    //普通按鈕
    <input type="button" name="">
     //重置按鈕 
    <input type="reset" name="">
    
    </form>

- CSS基礎

Css概念:層疊樣式表(Cascading Style Sheets),用力愛美化HTML標籤。
兩種寫法：

//外鏈式寫法
<link rel="stylesheet" href="1.css">

//內嵌樣式表
<style type="text/css">在這裡寫入</style>

Css是以選擇器的形式出現，對網頁結構進行美化。

選擇器{屬性：值；屬性：值}

屬性釋義
Width寬
Height高
background-color背景顏色
font-size文字大小
text-align內容水平對齊方式
text-indent首行縮排
color文字顏色
- 選擇器型別
  1. 標籤選擇器：使用該標籤的都生效。
    標籤名{屬性：值}
  2. 類選擇器：呼叫者生效。
    .類名{屬性：值}
  3. ID選擇器：呼叫生效，但是一個頁面只能呼叫一次。
    //#ID名{屬性：值} （這裡井號會變成大標題，所以我加了註釋//）
  4. 萬用字元選擇器：所有標籤都會生效。
    *{屬性：值}
  5. 交集選擇器：兩個或者以上選擇器通過不同方式連線在一起。
    標籤名.類名{屬性：值}
    標籤#ID名{屬性：值}
    6.後代選擇器：滿足包含關係，無限制隔代也可以，標籤選擇器、類選擇器、ID選擇器都可以自有組合。
    標籤名 標籤名 類名{屬性：值}
  6. 並集選擇器。
    選擇器，選擇器，選擇器{屬性：值}
- 顯示方式

塊元素：獨佔一行，可以設定寬高，例如div、h1、p等。

行內元素：會在一行依次顯示，不能設定寬高，自適應內容，例如span、a、strong等。

行內塊元素:可以依次一行顯示，並且可以設定寬高，例如input、img等。

這些相互之間可以進行互相轉化，常用的是將元素轉化為行內塊元素。

span{
        display:inline-block;
}
- 連結偽類
//預設狀態
a{ 
    color:red; 
}
//連結訪問之後的狀態
a:visited{
    color:green; 
}
//滑鼠放到連結上顯示的狀態
a:hover{
    color:yellow;
}
//連結啟用的狀態
a:active{
    color:pink;
}
- 盒子模型
盒子模型

margin：外邊距
border:邊框
padding：內邊距

! 注意 盒子的寬度=定義的內容寬度+邊框寬度+左右內邊距

- JS基礎

Javascript是由網景公司和sun合作而作，是一款執行在客戶端的網頁程式語言。

  • Ecmascipt 標準
  • Dom 通過js操作網頁元素
  • Bom 通過API操作瀏覽器

Js主要有兩種書寫方式：

//內嵌式
<script type="text/javascript">  </script>

//外鏈式
<script src="1.js"> </script>
- 資料型別
//十進位制表示
var n1=23;   
//十六進位制
var n2=0x4322;
//八進位制
var n3=0432;

    //字串
var str="你好";
var s='123';

//布林資料型別
var n1=12;
var n2=23;
n1==n2;   //false
n1<n2;   // true
- 函式
//方法的定義
function test(){
    alert("nh");
}

//方法的呼叫
test();

相關文章