Python Day 46 前端、HTML5介紹、HTML標籤、標籤的嵌套規則、CSS3介紹、CSS代碼中書寫位置（重點）、CSS基礎選擇器、

時間 2019-12-14

標籤 python day 前端 html5 html 介紹標籤嵌套規則 css3 css 代碼書寫位置重點基礎選擇器欄目 Python 简体版

原文原文鏈接

　　##前端導讀css

「」「
接下來咱們進入前端知識的學習，前端的學習目的就是爲咱們開發的應用程序提供一個與用戶進行交互的界面，前端分爲HTML五、CSS三、JavaScript三大部分，咱們學習內容共分爲HTML五、CSS三、JavaScript、jQuery前端框架及Bootstrap前端框架五個課程內容來介紹。

」「」

#一、前端三劍客

1、html5：頁面結構框架    內容
    標籤 => 學會標籤的嵌套結構

2、css3：頁面佈局與樣式  外觀

3、javaScript：頁面的交互邏輯   動做

#二、瀏覽器輸入網址發送了幾件事？
1.輸入網址
2.朝服務端發送請求
3.服務器接收請求並查詢瀏覽器想要的數據返回給瀏覽器
4.瀏覽器拿到數據展現頁面

#三、前端解題思路：

架構分析---頁面樣式與佈局--內容展現--頁面邏輯交互

　　##HTML5html

#一、HTML5是什麼
HTML5就是html語言，數字5是該語言的版本號；html語言開發的文件是以.html爲後綴，製做運行在瀏覽器上展示給用戶使用的前端界面，採用的語言是超文本標記語言(HyperText Mark-up Language)。

#二、HTML5如何學習
學習方向：掌握轉義字符、指令和標籤三大組成部分

學習目的：經過標籤知識完成搭建頁面總體架構

#2-一、轉義字符（瞭解）
由 &與;包裹，可使10進制數字組合，也可使特殊單詞縮寫組合
1. 空格：&nbsp;
2. 字符"：&quot;
3. 字符&：&amp;
4. 字符<：&lt;
5. 字符>：&gt;

#2-二、指令
被<>包裹，以!開頭的特殊符號，稱之爲指令。
指令中不區分大小寫，前端須要掌握文檔指令和註釋指令兩個便可
1. 文檔指令：<!DOCTYPE html>
    -- 須要出如今一個html文件的最上方，表明該文件採用html5語法進行編寫文件的
2. 註釋指令：<!-- -->
    單行註釋
    <!-- 這裏書寫的就是html5語法下的註釋，不會被瀏覽器解析展示給用戶看 -->
    多行註釋
        <!--
        這是多行註釋
        -->

#2-三、標籤（重點）
        由<>包裹字母開頭，能夠結合數字和合法字符的能被瀏覽器解析的標記  --  字母 數字 -
    標籤有語義：<br> 換行
    標籤有做用範圍：<h1>中間就是標籤的做用範圍，由標籤來控制，具備默認樣式</h1>
    標籤能夠修改內容樣式：<xyz style="color: red">000</xyz>

        單雙標籤之分：單標籤無需內容，主功能，能夠省略結束符/；雙標籤主內容，須要有做用域，必須明確結束標籤<a></a>

　　##標籤前端

#一、頁面結構相關的系統標籤
1. 頁面根標籤：<html></html>
2. 頁面頭標籤：<head></head>
3. 頁面體標籤：<body></body>
4. 頁面標題標籤：<title></tile>
5. 元標籤：<meta />
6. 連接標籤：<link />
7. 樣式標籤：<style></style>
8. 腳本標籤：<script></script>

#二、簡單的系統標籤
1. 標題標籤：<h1></h1> ... <h6></h6>
2. 段落標籤：<p></p>
3. 換行標籤：<br />
4. 分割線標籤：<hr />
5. 行文本標籤：<span></span>
6. 斜體標籤：<i></i>
7. 加粗標籤：<b></b>
8. 圖片標籤：<img />
　 <!-- 圖片標籤: src：圖片源  alt：資源加載失敗的文本提示 title：鼠標懸浮的文本提示 -->

9. 超連接標籤：<a></a> 7. "架構"標籤：<div></div>

　　<!--超連接: target: _self _blank-->

#三、複雜的系統標籤 1. 無需列表標籤：<ul><li></li></ul> 2. 表格標籤：<table><!-- 包含大量的表格子標籤 --></table> 3. 表單標籤：<form><!-- 包含大量的表單子標籤 --></form>

#3-一、無序列表

<ul>
    <li>列表項</li>
    <!-- 多少列表項就能夠出現多少個li標籤 -->
    <li>列表項</li>
</ul>
<!-- 無需列表只須要掌握ul與li的嵌套關係，樣式的調整會在CSS3詳細介紹 -->

#3-二、表格標籤（瞭解）

<!--
標籤部分：
1. table表格標籤
2. caption表格標題標籤
3. thead表格頭部區域標籤，tbody表格主體區域標籤，tfoot表格尾部區域標籤，都可以省略別寫
4. tr表格行標籤
4. th表格標題單元格標籤，td表格普通單元格標籤

全局屬性部分：
1. border表格的邊框寬度
2. cellspacing單元格直接的間距
3. cellpadding單元格內部的間距
4. rowspan合併行單元格
5. colspan合列行單元格
-->

#3-三、表單標籤（重點，後期先後臺交互時重點講）

<form actio="" method="" enctype="">
    <label></label>
<input type="text" name="user">
<input type="password" name="pwd">
<select name="list">
  <option value="val1">列表項</option>
  <option value="val2">列表項</option>
</select>
<textarea></textarea>
<button type="button">按鈕</button>
<input type="submit" value="提交">
</form>
<!--

標籤部分：
1. form表單標籤
2. 普通文本標籤
3. input輸入標籤，經過全局屬性type的值來肯定具體是什麼類型的輸入標籤
4. select表單中的列表標籤，option列表項標籤
5. textarea文本域標籤
6. button按鈕標籤

form全局屬性
1. action：提交表單數據給後臺的地址
2. method：提交數據的方式(get或post)

　　get: 不安全的提交數據，高效
　　post: 安全的提交數據，低效
　　前臺均可以給後臺提交數據，後臺必定會給前臺一個反饋結果
3. enctype：提交數據的編碼格式

form子標籤全局屬性
1. type：標籤的類型
2. name：將該標籤提交給後臺標識數據的key (不設置name的標籤的內容沒法提交給後臺)
3. value：該標籤提交給後臺的數據或是該標籤的顯示內容

input標籤tpye屬性值與分類
1. text：普通文本輸入框
2. password：密文文本輸入框
3. radio：單選框，該類型input標籤有個全局屬性checked，屬性值省略，表明單選框默認選中狀態
4. checkbox：複選框，該類型input標籤也有個全局屬性checke用同單選框，多個複選框用name值來標識屬於同一組複選框，如都表明愛好的複選框的name都應該叫hobby
5. file：文件輸入，該類型input標籤有個全局屬性multiple，屬性值省略，表明同時能夠選取多文件提交給後臺
6. submit：提交表單信息給後臺，用value設置提交按鈕的顯示內容

button標籤tpye屬性值與分類
1. button：不一樣按鈕，默認點擊後無任何操做
2. reset：重置按鈕，默認點擊後會還原表單的全部操做
3. submit：提交按鈕，和type爲submit的input標籤功能同樣，將表單信息提交給後臺
-->

　　#標籤的嵌套規則html5

<!-- w3c分析 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>頁面架構</title>
</head>
<body>
    <div class="site">
        <div class="top">
            <div>
                <img src="" alt="">
                <form action=""></form>
            </div>
            <ul>
                <li></li>
                ...
                <li></li>
            </ul>
        </div>
        <div class="mian">
            <!--.left+.center+.right-->
            <div class="left"></div>
            <div class="center">
                <div class="box1">
                    <h2></h2>
                    <div>
                        <p></p>
                        <p></p>
                    </div>
                    <h3></h3>
                </div>
            </div>
            <div class="right"></div>
        </div>
        <div class="foot"></div>
    </div>
</body>
</html>

　　##CSS3java

#一、CSS3是什麼
CSS3就是css語言，數字3是該語言的版本號；css語言開發的文件是以.css爲後綴，經過在html文件中引入該css文件來控制html代碼的樣式（css語言代碼也能夠直接寫在html文件中），採用的語言是級聯樣式表 （Cascading Style Sheet），也屬於標記語言。

#二、CSS3如何學習
學習方向：從css代碼書寫位置、css選擇器和css具體樣式設置三部分進行學習

學習目的：完成頁面樣式佈局和位置佈局

　　##CSS代碼中書寫位置（重點）css3

css是來控制頁面標籤的樣式，可是能夠根據實際狀況書寫在不一樣的位置，放在不一樣位置有不一樣的專業叫法，能夠分爲行間式、內聯式和外聯式三種。

#三種書寫位置案例  .表明找class  #找id
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>樣式</title>
    <style>
        /* css語法下的註釋語法 */
        /* 設置頁面中全部h2標籤寬高背景顏色 */
        h2 {
            width: 50px; 
            height: 50px; 
            background-color: orange;
        }
        /* 設置頁面中全部h3標籤寬高背景顏色 */
        h3 {
            width: 100px; 
            height: 100px; 
            background-color: red;
        }
        .dd {
            width: 200px;
            height: 200px;
        }
        .d1 {
            background-color: yellow;
        }
        .dd.d2 {
            background-color: red;
        }
        .d2 {
            background-color: brown;
        }

    </style>

    <link rel="stylesheet" href="./css/4.樣式.css">
</head>
<body>
<h2></h2>
<h3></h3>
<!-- 標籤的寬度會適應父級，高度由內容撐開 -->
<!--一、行間式：直接，可讀性差-->
<div style="width: 200px; height: 200px; background-color: pink;"></div>
<div style="width: 300px; height: 200px; background-color: greenyellow;">123</div>

<!--二、內聯式：可讀性加強，複用性(文件內部複用) head->style標籤-->
<div class="dd d1"></div>
<div class="dd d2"></div>
<div></div>

<!--三、外聯式：團隊開發，複用性(文本級別複用) head->link->外部css文件-->
<div class="pp p1"></div>
<div class="pp p2"></div>
<div></div>
</body>
</html>

#三種書寫位置總結
行間式控制樣式最直接，可是樣式多了直接致使頁面可讀性變差，且樣式相同的標籤樣式也須要各自設置，複用性差；

內聯式能夠用一套樣式塊同時控制多個標籤，具備樣式的複用性，可是css樣式代碼仍是寫在html文件中，在項目開發下，代碼量劇增，致使html文件變得臃腫，不利於代碼維護；

外聯式將css樣式移到外部css文件中，不只避免項目開發下html文件的臃腫問題，同時具備一套代碼塊控制多個標籤，一個css樣式文件服務於多個html兩種複用性的好處，可是在學習階段代碼量不大時，樣式不須要服務於多個html頁面時，前面兩種方式顯然顯得更便利。

在行間式中，寫在標籤內部的樣式天然是用來控制該標籤的樣式，那寫在內聯式和外聯式中的樣式又是經過什麼樣的聯繫來控制對應頁面中標籤的樣式呢？答案就是用於創建css與html之間聯繫的css選擇器。

　　##CSS基礎選擇器瀏覽器

#基礎選擇器：注意各個選擇器的優先級**********
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>基礎選擇器</title>
    <style>
        /*優先級：按做用域大小區分，做用域越小優先級越高*/
        /* !important > 行間式 > id > class > 標籤 > 統配 */
        /*重點： class選擇器 - 單類名 多類名 */

        /*1.統配選擇器*/
        /* 特定標識符 星號(*) -- 能夠表示頁面全部標籤的名字 */
        /* 通配選擇器控制頁面中全部的標籤(不建議使用) */
        * {
            font-size: 30px;
            color: brown;
        }
        /*2.標籤選擇器：標籤名*/
        /* 特定標識符 標籤名 */
        /* 標籤選擇器控制頁面中標籤名爲標籤選擇器名的全部標籤*/
        div {
            color: orange;
        }
        span {
            color: darkcyan;
        }

        /*3.類選擇器：.類名*/（提倡使用）
        /* 特定標識符 點(.) 頁面中class屬性值爲box的標籤都能被匹配*/
        /* class選擇器控制頁面中標籤全局屬性class值爲class擇器名的全部標籤*/
        .aa {
            color: indigo;
        }

        /*4.id選擇器：#id名*/
        /* 特定標識符 井號(#) 頁面中id屬性值爲box的惟一標籤備匹配，id具備惟一性：一個頁面中全部標籤的id屬性值不能重名*/
        /* id選擇器控制頁面中標籤全局屬性id值爲id擇器名的惟一標籤*/
        
        #bb {
            color: green;
        }

        /*組合使用：找id爲bbclass爲aa的div*/
        div#bb.aa {
            color: red;
        }

        .aa {
            color: red!important;
        }
    </style>
</head>
<body>
    <div class="aa" id="bb" style="color: gold!important;">d1</div>
    <div class="aa">d2</div>
    <div>d3</div>
    <span class="aa">s1</span>
    <span>s2</span>
    <span>s3</span>
</body>
</html>