前端HTML、css、javascript學習

時間 2019-12-09

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

原文原文鏈接

1、html、css、javascript基本認識javascript

1.HTMLcss

類型：超文本標記語言html

用途：可用於網頁結構的設計或搭建：java

後綴：html.html編程

超文本簡述：‘超文本’就是指的是其能夠包含圖片、連接、音樂、程序等非文字元素瀏覽器

HTML簡述以下：ruby

一、標記語言：標記語言爲非編程語言，不具有編程語言的程序邏輯網絡

二、HTML組成部分：由標籤、指令、轉義字符（實體）編程語言

標籤：被尖括號包裹有字幕開頭的合法字符能夠被瀏覽器解析的標記。（系統標籤、自定義標籤）ide

指令：被尖括號包裹有！開頭的標記

轉義字符：被&與；包裹的特殊字母組合或#開頭的十進制數。（空格&nbsp，版權&copy）

2.CSS

類型：級聯樣式表

用途：可讓網頁頁面的風格設計，樣式、美觀

後綴：CSS.css

CSS簡述：

一、css也可叫標記語言同上

二、CSS的組成部分：選擇器、樣式塊、做用域

選擇器：有標籤、id、類單獨或組合出現

做用域：由{}包裹

樣式塊：知足css鏈接語法的衆多樣式：

3.javascript

類型：瀏覽器腳本語言

用途：能夠負責頁面特效、調用劉亂起的API（BOM）\操做改變頁面頁面內容（DOM）,從禍端獲取數據、渲染頁面等：

後綴：javascript.js

javascript簡述：

一、實實在在的編程語言有着完善的語法、能夠完成複雜的程序邏輯

二、javascript組成部分：由BOM、DOM、ES(ECMAScript)

DOM:文檔對象模型

BOM:瀏覽器對象模型

ES：是一種開放的且廣爲被桀紂的腳本語言規範

2、HTML經常使用標籤

一、無語義標籤

    <div></div>
    <span></span>

二、經常使用語義標籤

    <h1>一級標題</h1>
    <p>段落</p>
    <pre>原文本</pre>
    <br/>換行
    <hr/>分割線

三、文本標籤

        <i>斜體</i>
    <em>強調型斜體</em>
    <b>粗體</b>
    <strong>強調型粗體</strong>
    <del>刪除文本</del>
    <s></s>
    <ins>添加文本</ins>
    <u></u>
    <sub>下標字</sub>
    <sup>上標字</sup>
    <ruby>
        拼音<rt>pinyin</rt>
    </ruby>

3、標籤分類
一、單雙標籤

單標籤：單標籤在⾃自身標籤標識結束，主要應⽤用場景爲功能性標籤

雙標籤：雙標籤有成對的結束標識，主要應⽤用場景爲內容性標籤

二、行塊標籤

行標籤：又名內聯標籤，內聯標籤⾃身不具有寬⾼，一般同行顯示

塊標籤：又名塊級標籤，塊標籤擁有⾃身寬⾼，一般獨⾃佔據⼀行

三、單一或組合標籤

單一標籤：單獨出現，表示具體的功能或展現具體的內容

組合標籤：配合使⽤用，才能產⽣生相應的內容與效果

4、模板解析

一、基礎模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>網頁標題</title>
</head>
<body>
    
</body>
</html>

View Code

二、模板解讀
DCOTYPE:指定文檔類型，規定html標籤語法

html：文檔根標籤、標註着文檔（頁面）的開始與結束

head：文檔頭標籤、能夠引用腳步文件、指定樣式表、書寫代碼邏輯塊、提供元信息

body：文檔主體標籤，包含文檔全部文本與超文本內容

title：文檔tag標題標籤，設置文檔tag的標題內容

三、meta（元標籤）

<meta charset="UTF-8">
    <title>css選擇器</title>
    <meta name="keywords" content="網頁搜索的關鍵字">
    <meta name="description" content="有關網頁的描述在80字之內">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=decvice-width,initial-scale=1,maxmum-scale=1,minmum-scale=1,user-scale=no">

View Code

四、link鏈接標籤

<!-- 外聯樣式 -->
    <link rel="stylesheet" type="text/css" href="文件名.css">
    <!-- 文檔tag樣式 -->
    <link rel="icon" type="image/x-icon" href="圖片路徑或網址">

五、script標籤

<script style="text/javascript"></script>

5、CSS三種引入方式

 1、三種方式的書寫規範

 一、行間式

```html
<div style="width: 100px; height: 100px; background-color: red"></div>
```

 二、內聯式

```html
<head>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
```

三、外聯式

```css
file: zero.css
div {
    width: 100px;
    height: 100px;
    background-color: red;
}
```

```css
file: zero.html
<head>
    <link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```

 2、三種方式間的"優先級"

* 與樣式表的解析順序有關

 v_test：掌握三種CSS引入方式方式

css三種引入方式

6、經常使用樣式及長度顏色

一、樣式模板

<head>
    <style type="text/css">
        div{
            color: red;
        }
    </style>
</head>

二、長度
* px：像素(pixel)，屏幕上顯示的最小單位，用於網頁設計，直觀方便
* mm：毫米
* cm：釐米
* in：英寸
* pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，很是簡單易用；
* em：至關長度，一般1em=16px，應用於流式佈局

三、顏色

* rgb()：三個值可爲[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue）
* rgba()：前三個值可爲像素或是百分比，最後一個爲[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha）
* hsl()：第一個值爲[0,360]數值，後二個值可爲百分比，以,相隔（h:Hue s:Saturation l:Lightness）
* hsla()：第一個值爲[0,360]數值，中間二個值可爲百分比，最後一個爲[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
* #AABBCC：六個十六進制位，每兩位一總體，分別表明Red、Green、Blue，能夠簡寫#abc

7、三種經常使用樣式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>三合一練習</title>
    <style type="text/css">
    /*字體練習*/
        span{
            color: blue;
            /*字體粗細（lighter細，normal標準，bold粗）*/
            font-weight:bold;
            /*字體風格（oblique斜體，normal標準，initial首字母大寫）*/
            font-style: oblique;
            line-height: 10px;
            font-size:10mm;
            /*font:lighter 10mm/10mm "STSong","微軟雅黑";*/
        }
        /*文本練習*/
        div{
            width: 100px;
            color: red;
            /*文本水平排列方式*/
            text-align: center;
            /*字詞間距*/
            letter-spacing: 1mm;
            word-break: 1mm;
            /*文本下劃線underline，中劃線line-through，上劃線overline*/
            text-decoration:line-through;
            /*顯示方式（行內塊同一行顯示）*/
            display: inline-block;
        }
        div{
            /*文本內容首行縮進*/
            text-indent: 2em;
            /*垂值排列方式（top 上，middle中，（基線baseline，底部bottom））*/
            vertical-align:baseline;
        }
        /*標題水平居中*/
        h1{
            text-align: center;
        }
        /*背景練習*/
         .d{
            width: 300px;
            height: 300px;
            background-color: blue;
            /*插入背景圖片*/
            background-image: url('bg_repeat.gif');
            /*平鋪方式（repeat平鋪，no-repeat不平鋪，repeat-x橫平鋪，repeat-y縱平鋪）*/
            background-repeat:no-repeat;
            /*定位第一個爲水平的值（left，center，right），第二爲垂值的值（top，center，bottom）*/
            /*background-position: right top;*/
            /*插入背景圖片是否滾動（scroll，fixed）*/
            background-attachment: scroll;
            /*實現滾動效果*/
            overflow: auto;
        }

    </style>
</head>
<body>
    <span>
        嘿嘿
    </span>
    <h1>dd</h1>
    <div> 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個</div>
    <div> kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff kk gg ff</div>
    <div>55</div>
    <!-- <div class="d">等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個 等等 各個</div> -->
    <div class="d"></div>
    br*50
</body>
</html>

三種樣式合一

8、CSS選擇器
　　

八、 1、基礎選擇器

一、通配選擇器

```css * { border: solid; } 匹配文檔中全部標籤：一般指html、body及body中全部顯示類的標籤 ```

二、標籤選擇器

```css div { background-color: yellow; } 匹配文檔中全部與標籤名匹配的標籤：如div{}會匹配文檔中所有div，span{}會匹配文檔中全部span ```

三、類選擇器

```css .red { color: red; } 匹配文檔中全部擁有class屬性且屬性值爲red的標籤：如<sup class="red"></sup> <sub class="red"></sub>均會被匹配 ```

四、id選擇器

```css #div { text-align: center; } 匹配文檔中全部擁有id屬性且屬性值爲div的標籤：如<div id="div"></div> <section id="div"></section>均會被匹配 ```

補充：基礎選擇器的優先級

- 基礎選擇器優先級大體與選擇器匹配範圍成反比，匹配範圍越小，優先級越高
- 基礎選擇器優先級大體與選擇器匹配精度成正比，匹配精度越高，優先級越高
- 基礎選擇器優先級：id選擇器 > 類選擇器 > 標籤選擇器 > 通配選擇器

八、二　組合選擇器　

一、羣組選擇器

```css div, span, .red, #div { color: red; } ```

- 一次性控制多個選擇器 - 選擇器之間以,隔開，每個選擇器位都可覺得任意合法選擇器或選擇器組合

二、子代(後代)選擇器

```css 子代選擇器用>鏈接 body > div { color: red; } 後代選擇器用空格鏈接 .sup .sub { color: red; } ```

- 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器 - 每個選擇器位都可覺得任意合法選擇器或選擇器組合 - 子代選擇器必須爲一級父子嵌套關係，後代選擇器能夠爲一級及多級父子嵌套關係

三、相鄰(兄弟)選擇器

```css 相鄰選擇器用+鏈接 .d1 + .d2 { color: red; } 兄弟選擇器用~鏈接 .d1 ~ .d3 { color: red; } ```

- 一次性控制一個選擇器(邏輯最後的那個選擇器)，前置位的選擇器爲修飾性選擇器 - 每個選擇器位都可覺得任意合法選擇器或選擇器組合 - 相鄰選擇器必須爲直接相鄰關係，兄弟選擇器能夠爲直接相鄰或間接相鄰關係

補充：組合選擇器優先級

- 組合選擇器優先級與權值相關，權值爲權重和 - 權重對應關係

| 選擇器 | 權重 | | :--------: | :---: |

| 通配 | 1 | |

標籤 | 10 | |

類、屬性 | 100 |

| id | 1000 |

| !important | 10000 |

- 選擇器權值比較，只關心權重和，不更新選擇器位置 - 不一樣級別的選擇器間不具有可比性：1個類選擇器優先級高於n個標籤選擇器的任意組合

四、屬性選擇器

- [attr]：匹配擁有attr屬性的標籤 - [attr=val]：匹配擁有attr屬性，屬性值爲val的標籤 - [attr^=val]：匹配擁有attr屬性，屬性值以val開頭的標籤 - [attr$=val]：匹配擁有attr屬性，屬性值以val結尾的標籤 - [attr*=val]：匹配擁有attr屬性，屬性值包含val的標籤

v_hint：屬性選擇器權重等價於類

演示以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>組合選擇器</title>
    <style type="text/css">
        /*組合選擇器*/
        /*特性:每一個選擇器位能夠爲任意基本選擇器或選擇器組合*/

        /*羣組選擇器: ,隔開*/
        /*控制多個*/
        div, .s, section {
            color: red;
        }
        /*子代選擇器: >鏈接*/
        body > div {
            color: orange;
            text-decoration: underline;
        }
        /*div > a {
            text-decoration: none;
        }*/
        /*後代選擇器: 空格鏈接*/
        /*包含子代選擇器*/
        body a {
            text-decoration: none;
        }
        /*相鄰選擇器: +鏈接*/
        span + section {
            background-color: pink;
        }
        /*兄弟選擇器: ~鏈接*/
        /*包含相鄰選擇器*/
/*        div ~ section {
            background-color: brown;
        }
        
        /*交集選擇器*/
        /*便是選擇器1又是選擇器2*/
/*        i.s {
            color: yellow;
        }
        
        /*多類名選擇器*/
        /*.d1 {
            color: blue;
        }
        .d1.d2 {
            color: tan;
        }
        .d1.d2.d3 {
            color: #780;
        }**//*/
    </style>
</head>
<body>
    <!-- div{div}+span{span}+section{section} -->
    <div>div</div>
    <span class="s">span</span>
    <section>section</section>
    <div>
        <i class="s">iiii</i>
        <a href="">a標籤</a>
    </div>
    <div class="d1 d2 d3">呵呵</div>

</body>
</html>
2、組合選擇器優先級演示以下：
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>組合選擇器優先級</title>
    <style type="text/css">
        /*同目錄結構下*/
        /*1.子代與後代優先級相同*/
        /*body > div == body div*/
        /*2.相鄰與兄弟優先級相同*/
        /*div + span == div ~ span*/
        /*3.最終樣式採用邏輯後的樣式值*/

        /*不一樣目錄結構下*/
        /*1.根據選擇器權值進行比較*/
        /*2.權值爲標籤權重之和*/
        /*3.權重: *:1 div:10 class:100 id:1000 !important:10000 */
        /*4.權值比較時,關心的是值大小,不關心位置與具體選擇器名*/
        /*5.id永遠比class大,class永遠比標籤大*/
        /*注:控制的是同一目標,才具備可比性*/
        /*div>div>div>div>...>div {} 11 < .div{}*/
        
        /*10*/
        div {
            color: red;
        }
        /*20*/
        div div {
            color: yellow;
        }
        /*大於一切標籤*/
        .d2 {
            color: blue;
        }
        /*.d2抵消,剩權重10*/
        div .d2 {
            color: orange;
        }
        /*等價於div .d2,權值相同,位置決定*/
        .d1 div {
            color: pink;
        }
        /*又多10*/
        div .d1 div {
            color: tan;
        }
        /*不具備可比性*/
        div .d1 > div{
            color: green;
        }
        /*高於一切class及標籤*/
        #dd1 div {
            color: #000;
        }
    </style>
</head>
<body>
    <!-- div>.d1>#dd1>div>.d2 -->
    <div>
        <div class="d1">
            <div id="dd1">
                <div>
                    <div class="d2">12345</div>
                </div>
            </div>
            <!-- <div id="dd2">
                <div>
                    <div class="d2">12345</div>
                </div>
            </div> -->
        </div>
    </div>
</body>
</html>

組合選擇器演示

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        .d2 {
            color: red;
        }
        /*屬性選擇器權重 == class選擇器權重*/
        /*有屬性class的全部標籤*/
        [class] {
            color: orange;
        }

        /*有屬性class且值爲d2的全部標籤(值不影響權重)*/
        [class="d2"] {
            color: pink;
        }
        
        /*是div且class='d2',增長了權重*/
        div[class='d2'] {
            color: blue;
        }
        
        /*屬性以什麼開頭: ^= */
        /*屬性以什麼結尾: $= */
        /*屬性模糊匹配: *= */
        [class ^= 'he'] {
            color: yellow;
        }
        [class $= 'ld'] {
            color: tan;
        }
        [class *= 'ow'] {
            color: cyan;
        }
        [class][dd] {
            color: brown;
        }

    </style>
</head>
<body>
    <!-- div.d1>.d2 -->
    <div class="d1">00000
        <div class="d2">12345</div>
        <!-- dd與do爲自定義屬性 -->
        <div class="helloworld" dd do="do something">helloworld</div>
    </div>
</body>
</html>

屬性選擇器演示

9、盒模型及其佈局
一、盒模型

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style type="text/css">
        .box {
            margin: 10px;
            border: solid;
            padding: 10px;
            width: 100px;
            height: 100px;
            /*background-color: orange;*/
            /*覆蓋*/
            background: red;
        }
        /*組成:margin + border + padding + content*/
        /*content = width * height*/
        /*1.四個成員均具備自身獨立顯示區域,不相互影響(視覺上感受會相互影響)*/
        /*2.margin/padding外邊距/內邊距控制佈局*/
        /*3.border控制邊框*/
        /*4.content控制內容*/

        /*padding*/
        /*與content共有背景顏色*/
        
        /*content*/
        /*內容顯示區域*/
        /*紅色區域 120 * 120 */
        /*content區域 100 * 100 => 內容顯示區域*/

        /*值設置*/
        .box {
            /*控制四個方位*/
            /*margin: 20px;
            padding: 30px;*/
            
            /*上下 左右*/
            /*margin: 10px 20px;
            padding: 30px 40px;*/
            
            /*上 左右 下*/
            /*margin: 10px 20px 30px;
            padding: 30px 40px 50px;*/
            
            /*上 右 下 左*/
            margin: 10px 20px 30px 40px;
            padding: 30px 40px 50px 40px;
            /*總結*/
            /*1.規定起始 2.順時針 3.不足找對面*/
        }

        /*邊框: 寬度,顏色,樣式*/
        .box {
            border-width: 10px;

            /*transparent透明,會透出背景顏色*/
            /*border-color: transparent;*/
            border-color: #333;

            /*solid solid dotted dotted outset inset double*/
            border-style: double;

            /*總體設置*/
            border: 5px solid orange;
        }


    </style>
</head>
<body>
    <div class="box">12345</div>
</body>
</html>

盒模型演示

二、盒模型佈局

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型佈局</title>
    <style>
        /*作頁面必備reset操做*/
        html, body {
            margin: 0
        }
        .box, .wrap {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .wrap {
            background: orange;
        }
        /*影響自身佈局*/
        /*.box {
            margin-top: 30px;
            margin-left: 100px;
        }*/
        /*影響兄弟佈局*/
        /*margin-bottom影響上下兄弟,儘可能別對margin-right進行設置*/
        /*margin-right影響左右兄弟,儘可能別對margin-bottom進行設置*/
        .box {
            /*margin-bottom: 30px;*/
            margin-right: 100px;
        }

        /*display:顯示方式*/
        /*塊:block*/
        /*內聯:inline*/
        /*內聯塊:inline-block*/
        .box, .wrap {
            display: inline-block;
            /*vertical-align: top;*/
        }

        
        /*兄弟坑*/
        /*盒模型佈局坑只出如今和margin-top相關的地方*/
        .s1, .s2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        /*重疊取大值*/
        .s1 {
            margin-bottom: 30px;
        }
        .s2 {
            margin-top: 50px;
        }
        
        /*父子坑*/
        .sup {
            width: 200px;
            height: 200px;
            background-color: cyan;
        }
        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
        }
        /*父子top重疊,取大值*/
        .sup {
            margin-top: 50px;
        }
        .sub {
            margin-left: 50px;
        }
        /*解決盒模型經典佈局坑*/
        /*1.將父級固定*/
        .sup {
            /*border-top: 1px solid black;*/
            /*border-top: 1px solid transparent;*/
            /*保證顯示區域 200*200 */
            /*height: 199px;*/
        }
        .sub {
            /*margin-top: 50px;*/
        }
        /*2.經過padding*/
        .sup {
            padding-top: 50px;
            height: 150px;
        }

        
    </style>
</head>
<body>
    <div class="box"></div>
    <div class="wrap"></div>

    <!-- 坑 -->
    <section class="s1"></section>
    <section class="s2"></section>

    <div class="sup">
        <div class="sub"></div>
    </div>
</body>
</html>

盒模型佈局

10、邊界圓角

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>邊界圓角</title>
    <style type="text/css">
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /*單角設置*/
        .box {
            /*一個固定值: 橫縱*/
            border-top-left-radius: 100px;
            /*兩個固定值:橫 縱*/
            border-top-left-radius: 100px 50px;
            /*百分比賦值*/
            border-top-left-radius: 100%;
        }

        /*總體賦值*/
        .box {
            /*不分方位(橫縱)*/
            /*左上爲第一個角,順時針,不足找對角*/
            /*border-radius: 10px 100px 50px;*/

            /*區分橫縱*/
            /*1./前控制橫向,後控制縱向*/
            /*2.橫向又能夠分爲1,2,3,4個值,縱向毅然*/
            border-radius: 10px 100px 50px / 50px;
            /*左上橫10 右上橫100 右下橫50 左下橫100 / 縱向全爲50*/
            /*全部最多能夠賦值8個值*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

邊界圓角演示

11、僞類選擇器

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>僞類選擇器</title>
    <style type="text/css">
        a {
            color: #333;
            text-decoration: none;
        }
        /*:link爲一個總體,表明超連接的初始狀態*/
        a:link {
            color: orange;
        }
        /*:hover鼠標懸浮*/
        a:hover {
            color: green;
            /*鼠標樣式*/
            cursor: pointer;
        }
        /*:active活動狀態中(被鼠標點擊中)*/
        a:active {
            color: red;
        }
        /*:visited訪問過的狀態*/
        a:visited {
            color: cyan;
        }
        /*普通標籤運用: :hover :active*/
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .box:hover {
            background-color: orange;
            cursor: pointer;
        }
        .box:active {
            width: 400px;
            border-radius: 50%;
        }


        /*內容僞類*/
        .txt:before {
            content: "我是前綴~~~"
        }
        .txt:after {
            content: ">>>我是後綴"
        }
        
        /*僞類能夠單獨出現*/
        /*:after {
            content: "呵呵"
        }*/


        /*位置僞類*/
        /*1.位置從1開始*/
        /*2.*/
        /*先匹配位置,再匹配類型: 找到全部結構下的第2個標籤,若是恰好是div,那麼匹配成功*/
        /*body a-baidu div01*/
        div:nth-child(2) {
            color: green;
        }
        
        /*先肯定類型,再匹配位置*/
        /*先將頁面中全部div找出,在匹配那些在本身結構層次下的第二個div*/
        div:nth-of-type(2) {
            color: cyan;
        }

        /*2n*/
        /*
            div ooo div
            ooo div ooo
            div ooo div
        */

        /*3n*/
        /*
            div div ooo
            div div ooo
            div div ooo
        */

        /*3n - 1*/
        /*
            div ooo div
            div ooo div
            div ooo div
        */

        /*取反僞類*/
        /*:not([d]) {
            color: red;
        }
        body.body {
            color: orange;
        }*/
        span:not([d]) {
            color: red;
        }
    </style>
</head>
<body class="body">
    <!-- 1.a標籤的四大僞類 -->
    <a href="./123.html">訪問頁面</a>
    <a href="https://www.baidu.com">訪問過頁面</a>
    <div class="box">box</div>

    <!-- 2.內容僞類 -->
    <div class="txt">原來的文本</div>

    <!-- 3.位置僞類 -->
    <div class="wrap">
        <span>span01</span>
        <div>div01</div>
        <div>div02</div>
    </div>
    
    <!-- 4.取反僞類 -->
    <span d>12345</span>
    <span dd>67890</span>
</body>
</html>

僞類選擇器演示

12、a、img、列表標籤

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>a_img_list</title>
    <style type="text/css">
        /*reset操做: a標籤一些默認屬性的清除*/
        a {
            color: #333;
            text-decoration: none;
            outline: 0;
        }
    </style>
</head>
<body>
    <!-- 一.基本使用 -->
    <!-- 超連接標籤:a -->
    <!-- 雙/行/單一類型標籤 -->
    <a href="https://www.baidu.com">前往百度</a>
    <a href="./05_邊界圓角.html">前往邊界圓角頁面</a>
    <!-- ./或省略表明當前文件所在路徑,能夠訪問與該文件同路徑下的全部文件及文件夾 -->
    <a href="./temp/temp.html">前往temp頁面</a>

    <!-- 二.屬性 -->
    <!-- title:鼠標懸浮的文本提示 -->
    <!-- target:_blank,新開空白標籤位來打開目標頁面 -->
    <a href="http://sina.com.cn" title="新浪網" target="_blank">前往新浪</a>

    <!-- 三.其餘應用場景 -->
    <!-- mailto | sms | tel -->
    <a href="mailto:zero@163.com">信息給zero</a>
    

    <!-- 四.錨點 -->
    <!-- a與a href="#錨點名" -- name="錨點名" -->
    <!-- a與標籤 href="#錨點名" -- id="錨點名" -->
    <a href="#tag">前往底部</a>
    <!-- 測試錨點請tab -->
    br * 100
    <!-- 設置一個錨點 -->
    <!-- .bottom作底部佈局的區域 -->
    <div class="bottom">
        <a name="tag"></a>
        <!-- <i id="tag"></i> -->
        <!-- <div id="tag"></div> -->
        ...
    </div>

    <!-- 五.img使用 -->
    <!-- src能夠鏈接本地及網絡圖片 -->
    <!-- alt:資源加載失敗時的文本提示 -->
    <!-- title:圖片的文本信息(鼠標懸浮時展現) -->
    <!-- <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537511739499&di=f5f2763fe54c8ea4d89b2fafe0569c84&imgtype=0&src=http%3A%2F%2Fimg.alicdn.com%2Fimgextra%2Fi1%2FTB2IZbxogmTBuNjy1XbXXaMrVXa_%2521%25212754890204.jpg_400x400.jpg" alt="雪納瑞" title="一覽雪納瑞風姿"> -->

    <!-- 六.list列表 -->
    <!-- reset操做 -->
    <style type="text/css">
        ol, ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
    </style>

    <!-- 有序列表 -->
    <ol>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
    </ol>
    <!-- 無需列表:經常使用 -->
    <ul>
        <li>列表項</li>
        <li>列表項</li>
        <li>列表項</li>
    </ul>
</body>
</html>