前端html css

時間 2019-11-19

標籤前端 html css 欄目 HTML 简体版

原文原文鏈接

1、編輯器

pycharm | sublime | Hbuild | webstrom | atom

2、前端

# 前端概念
# 廣義: 用戶能看見而且交互的展現界面
# 狹義: 運行在瀏覽器上的頁面

# 學習的語言
# html5 => (h5架構 + css3佈局 + javascript邏輯)
# 網頁編寫 | 移動端應用編寫 | (客戶端編寫)

# 先後臺分離 開發方式 => 經過接口完成數據交互 => 後臺能夠千千萬,前端就是h5

3、HTML: 超文本標記語言

# 學習html的目的: 完成頁面結構的搭建 (何時用什麼標籤)

# html屬於標記語言: 標記語言爲非編程語言，不具有編程語言具有的程序邏輯

# html三大組成:
'''
標籤：被尖括號<>包裹，由字母開頭包含合法字符的，能夠被瀏覽器解析的標記。eg:系統標籤，自定義標籤;
指令：被尖括號<>包裹，由!開頭的標記。eg：<!doctype html>（聲明文件類型）  <!-- -->（註釋）
    <!-- 指令: 由<>包裹, !開頭的標記(兩個):文檔類型 | 註釋 -->
    <!--注: 文檔類型必須出如今最上方-->
    <!--注: html語法不區分大小寫 --> 

轉義字符：被&與;包裹的特殊字母組合或#開頭的十進制數。eg:&#60; 小於 &lt; | &#62; 大於 &gt; | &nbsp; 空格
'''

一、標籤

# what
# 標籤的概念: 被<>包裹由字母開頭,能夠結合合法字符(-|數字),能被瀏覽器解析的特殊符號

# why
# 標籤具備特定的功能: 換行 | 設置頁面字符編碼集 | 控制文本字體顏色與大小 | 加載圖片與視頻

# 注意
# 標籤都有頭有尾, 用/來標識標籤的結束(用來標識尾)  eg：<h1></h1>結尾標識

二、頁面

# HTML頁面模板
<!-- html的註釋: 一個html頁面有且只有一個頁面模板 -->
<html>
    <head>
        <!-- 字符編碼 -->
        <meta charset="utf-8">
        <!-- 頁面標籤的標題 -->
        <title>頁面</title>
        <!-- 內部或外部的css樣式 | js腳本 | 頁面其餘設置 -->
    </head>
    <body>
        <!-- 全部頁面顯示的內容: 文本 | 圖片 | 視頻 | 超連接 | 表格 | 表單 ... -->
        <!-- js腳本 -->
    </body>
</html>

三、經常使用標籤

# 學習的目的: 使用標籤的語義與功能 | 完成頁面架構的搭建(div)

# 1.div: "三無", 無語義,無功能,無樣式, 完成頁面架構的搭建
    # <div></div> 經常使用於整合結構 將一段獨立的代碼放入其中 

# 2.h1: 頁面總標題, 表明頁面'總體含義', 出現一次便可

# 3.列表: ul>li*5 （簡化後的書寫方式）  無序列表
獲得的結果爲：
    <ul>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
    </ul>
    #  注： 有序列表爲ol

# 4.p: 段落標籤  段落自帶換行 

# 5.img: 圖片標籤, src(數據源), alt(資源加載失敗的文本提示)
    # <!--src: 數據源 -->
    # <!--alt: 資源加載失敗的文字提示 -->
    # <!--width|height: 設置一個,另外一個會等比縮放(同時設置極可能致使圖片失真)-->
    
# 6.a: 超連接標籤, href(超連接地址), target(轉跳方式_self|_blank), 錨點
    # <!--href: 連接的地址-->
    # <!--target: _self|_blank -->
    # <!--title: 鼠標懸浮提示, 能夠給任意標籤添加-->
 # eg ：<a href="https://www.baidu.com" target="_blank" title="鼠標懸浮提示">前往百度</a>
    #b：<!--錨點: 快速定位到頁面指定位置-->  eg:<a href="#top">返回Top</a>  返回頂部 
    
# 7.經常使用的文本類標籤: span i b
    # <span>文本標籤</span>
    # <i>斜體</i><em>斜體方式強調</em>
    # <b>加粗</b><strong>加粗方式強調</strong>
    # <sup>上角標</sup><sub>下角標</sub>
    
# 8.表格標籤:table
    <!--table>(
    caption{標題}+
    (thead>tr>th{標題}*3)+
    (tbody>(tr>td{單元格}*3)*2)+
    (tfoot>tr>td{單元格}*3)
    )-->    # 建立表格的簡寫方式

    <!--table
    border: 表格邊框寬度
    cellspacing: 單元格之間的距離
    rules: all(所有) | groups(組線) | rows(行線) | cols(列線)
    cellpadding: 內容距上距左的距離
    -->      # 爲表格設置參數
    
    案列：
    <table border="10" width="500" height="300" cellspacing="0" rules="all" cellpadding="20">
        <caption>表格標題</caption>
        <thead>
            <tr>
                <!--th{標題}*3-->
                <th>標題</th>
                <th>標題</th>
                <th>標題</th>
            </tr>
        </thead>
        <tbody>
            <!--(tr>td{單元格}*3)*2-->
            <tr>
                <td>單元格</td>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
            <tr>
                <td>單元格</td>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
        </tbody>
        <tfoot>
            <!--tr>td{單元格}*3-->
            <tr>
                <td>單元格</td>
                <td>單元格</td>
                <td>單元格</td>
            </tr>
        </tfoot>
    </table>

View Code

4、CSS: 樣式層級表

# 學習CSS的目的: 完成頁面佈局(還原設計稿)

# 三大組成部分
'''
選擇器：由標籤、類、id單獨或組合出現
做用域：一組大括號包含的區域
樣式塊：知足css鏈接語法的衆多樣式
'''

一、選擇器

# what: 用來將css與html創建關聯的橋樑, 稱之爲css選擇器

# why: 將原來出如今標籤內部的樣式分離開來, 能夠用一個個選擇器加以管理, 達到頁面與樣式的解耦合目的, 從而提升代碼的複用性與開發效率

# 本質: 就是頁面標籤的某種名字

二、css三種引入方式

# 1.行間式
'''
i)寫在標籤的style屬性中
ii)屬性 與 屬性值 間用:賦值
iii)屬性 與 屬性 之間用;隔開
'''

# 2.內聯式
'''
i)寫在style標籤中(style標籤通常出如今head標籤中)
ii)用選擇器與html創建鏈接
iii)樣式塊書寫在做用域內
'''

# 3.外聯式
'''
i)css樣式徹底與html文件脫離, 造成單獨的.css文件, 樣式書寫在.css文件中
ii)用選擇器與html創建鏈接
iii)樣式塊書寫在做用域內
iv)要將.css文件與.html文件創建關聯  => <link rel="stylesheet" href="css文件的相對路徑">
'''

# 注: 選擇器的應用場景在 內聯式 和 外聯式

'''
總結:
開發: 最經常使用的是外聯式, 內聯與行間輔助樣式佈局
測試: 內聯式, 可讀性最強, 且解耦有複用性
行間的應用場景: 最簡單粗暴, js操做的樣式都是行間式
'''

案例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>樣式導入</title>

    <style>
        /*css註釋: 書寫在style標籤內部的要採用css語法*/

        /*
        p: 選擇器
        {}: 做用域
        寬高背景顏色: 樣式塊
        */
        p {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }
        h2 {
            width: 50px;
            height: 50px;
            background-color: red;
        }


    </style>

    <link rel="stylesheet" href="css/test.css">
</head>
<body>

    <!--1.行間式-->
    <!--
        i)寫在標籤的style屬性中
        ii)屬性 與 屬性值 間用:賦值
        iii)屬性 與 屬性 之間用;隔開
    -->
    <div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div>
    <div style="width: 100px;height: 100px; color: rgb(17, 119, 0);">></div>

    <!--2.內聯式-->
    <!--
        i)寫在style標籤中(style標籤通常出如今head標籤中)
        ii)用選擇器與html創建鏈接
        iii)樣式塊書寫在做用域內
    -->
    <p></p>
    <p></p>
    <h2></h2>
    <h2></h2>


    <!--3.外聯式-->
    <!--
        i)css樣式徹底與html文件脫離, 造成單獨的.css文件, 樣式書寫在.css文件中
        ii)用選擇器與html創建鏈接
        iii)樣式塊書寫在做用域內
        iv)要將.css文件與.html文件創建關聯
    -->
    <h3></h3>
    <h3></h3>
    <!--注: 用link標籤將css文件與html文件創建鏈接

    <link rel="stylesheet" href="css文件的相對路徑">
    -->


    <!--總結:
        開發: 最經常使用的是外聯式, 內聯與行間輔助樣式佈局
        測試: 內聯式, 可讀性最強, 且解耦有複用性
        行間的應用場景: 最簡單粗暴, js操做的樣式都是行間式
    -->
</body>
</html>