web前端基礎-HTML及CSS選擇器

TML及CSS選擇器

一、html基本結構
二、html標簽

1、標題標簽
2、a標簽
3、img標簽
4、div和span標簽
5、列表標簽
6、表格標簽
7、form表單
8、select下拉框標簽
9、textarea標簽

三、CSS

1、css樣式引入方式
2、標簽嵌套
3、css選擇器

一、html基本結構

html是一種超文本標記語言，進行網頁頁面的文本編輯
html注釋寫法：

基本結構如下：

<!DOCTYPE html>                <!--文檔聲明-->
<html 	lang="en">             <!--lang="en"表示語言-->
<head>                         <!--頭部信息：網站的配置信息-->
	<meta charset="UTF-8"> 	   <!--解碼方式-->
	<title>我是標題</title>	   <!--網站標題-->
</head>
<body>
</body> 					   <!--body體：網站顯示內容-->
</html>

link圖標：
標題圖標：
寫法：<link rel=“icon” href=“圖片路徑”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="icon" href="timg.jpeg">
</head>
<body>

</body>
</html>

二、html標簽

標簽寫法分類：
1、全封閉標簽，如<h1>xxx</h1>
標簽屬性：<h1 xx=“ss”>xxx</h1> xx:屬性名 ss:屬性值
2、自封閉標簽：<meta charset=“UTF-8”>

1、標題標簽

<h1></h1>-<h6></h6>：表示一級標題到六級標題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
公司
<b>Asir</b>     <!--加粗-->
<s>Bsir</s>     <!--加劃線-->


<h1>小王</h1>
<h2>小李</h2>
<h3>小趙</h3>
<h4>小<br>胡</h4> <!--<br>換行-->
<hr>             <!--<hr>加分割線-->
<h5>小周</h5>
<h6>小李</h6>
</body>
</html>

頁面效果：

2、a標簽

跳轉對應網址的頁面
未訪問之前是藍色字體，訪問后變紫色

# 要a標簽的效果，但不刷新或跳轉頁面：
<a href="#">xxx</a>
<a href=“javascript：void(0);”>xxx</a>

錨點：
頁面內容進行跳轉
標簽設置id屬性=值(xx),a標簽href屬性的值寫法href=’#xx’,點擊這個a標簽就能跳轉到id屬性為xx的那個標簽所在位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div id="top">頂部位置</div>  <!--設置錨點-->
<a>公司</a>
<a href="">potal</a>
<a href="http://www.baidu.com" target="_blank">百度</a>  <!--_blank表示在新標簽頁打開-->
<a href="#">potal</a>
<a href="javascript：void(0);">potal</a>
<a href="#top">回到頂部</a>  <!--返回錨點-->
</body>
</html>

頁面效果：

可通過第二個按鈕跳轉到百度：

3、img標簽

img標簽：頁面插入圖片
src屬性：圖片路徑必須寫
alt屬性：圖片加載失敗或者正在加載時提示的內容
title屬性：鼠標懸浮時顯示的內容，不是img標簽獨有的
width：設置圖片寬度（建議用css設置）
height：設置圖片高度（建議css設置）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1319369445,160835837&fm=26&gp=0.jpg" alt="圖片未成功加載" title="清新辦公" width="300" height="500">
<img src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1941575090,3819526635&fm=26&gp=0.jpg" alt="圖片未成功加載" title="未聞花名">
<img src="timg.jpeg" alt="圖片未成功加載" title="未聞花名2" width="1000" height="500">
</body>
</html>

頁面效果：

4、div和span標簽

沒有任何文本修飾效果：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<span>小王</span>
<p>小李</p>
<span>小文</span>
<div>小林</div>
</body>
</html>

頁面效果：

擴展：標簽分類
塊級標簽(行外標簽)：獨占一行，h1-h6、p、br、hr、div、ul、li
塊級標簽可以包含內聯標簽，以及某些塊級標簽
內聯標簽(行內標簽)：不獨占一行，img/a/span，只能包含內聯標簽，不能包含塊級標簽

5、列表標簽

1）ul標簽：
寫法：

<ul type="none">
	<li>內容1</li>
	<li>內容2</li>
	......
<ul>

2）ol標簽
寫法：

<ol type="指定標注種類" start="指定標注起始值">
	<li>內容1</li>
	<li>內容2</li>
	......
</ol>

3）dl標簽

<dl>
	<dt>無空位內容</dt>
	<dd>有空位內容<dd>
	......
</dl>

頁面效果：

6、表格標簽

可以在網頁中生成表格
寫法：

<table border="表框粗細" cellpadding="表格大小" cellspacing="表線寬度">
	<thead>  <!--表頭信息-->
		<tr>
			<th>表頭1</th>
			<th>表頭2</th>
			...
		</tr>
	<thead>
	<tbody>  <!--body-->
		<tr>
			<td>內容1</td>
			<td>內容2</td>
			...
		</tr>
	</tbody>
</table>

colspan：橫行合并
rowspan：縱列合并
示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<table border="1" cellpadding="10" cellspacing="8">
    <thead>    <!--表頭信息-->
        <tr>
            <th>名稱</th>
            <th>年齡</th>
            <th>愛好</th>
        </tr>
    </thead>
    <tbody>    <!--body-->
        <tr>
            <td>小王</td>
            <td>18</td>
            <td>籃球</td>
        </tr>
        <tr>
            <td rowspan="2">小李</td>
            <td>20</td>
            <td>游泳</td>
        </tr>
        <tr>
            <td colspan="2">小王</td>
        </tr>
    </tbody>
</table>
</body>
</html>

頁面效果：

7、form表單

<form action="http://127.0.0.1:8001">
</form>

action屬性：指定提交路徑，提交到哪里去
form表單標簽會將嵌套在form標簽里面的輸入框的數據全部提交到指定路徑

input標簽輸入框：
input標簽，如果要提交數據，一定要寫name屬性

<input type=“text”> 普通文本輸入框
<input type=“password”> 密文輸入框
<input type=“submit” value=“登陸”> 提交按鈕觸發form表單提交數據動作
<input type=“reset”> 重置按鈕清空輸入內容
<input type=“button” value=“注冊”> 不會觸發form表單提交數據的操作
<input type=“date”> 時間日期輸入框
<input type=“file”> 文件選擇框
<input type=“number”> 純數字輸入框

單選框：
<input type=“redio”>
多選框：
<input type=“checkbox”>

單選框和多選框請務必加name屬性和value默認值
單選和多選value默認值可將存儲的數據變短

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<form action="http://127.0.0.1:8001">
    <div>
        <h1>歡迎來到xxx公司</h1>
        用戶名：<input type="text" name="username">
        <br>
        密碼：<input type="password" name="password">
        <br>
        性別：
        <input type="radio" name="sex" value="0">女
        <input type="radio" name="sex" value="1">男
        <br>
        愛好：
        <input type="checkbox" name="hobby" value="1">籃球
        <input type="checkbox" name="hobby" value="2">足球
        <input type="checkbox" name="hobby" value="3">乒乓球
        <br>
        <input type="reset">
        <br>
        <hr>
        數字：
        <input type="number">
        <br>
        <input type="date">
        <br>
        <input type="file">
        <br>
        <input type="submit" value="點擊確認">

    </div>
</form>
</body>
</html>

頁面效果：

8、select下拉框標簽

<select name="屬性">
	<option value="默認值">
</select>

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
選擇性別：
<select name="sex">
    <option value="0">男</option>
    <option value="1">女</option>
</select>
<br>
喜歡的明星：
<select name="star" multiple>  <!--允許多選-->
    <option value="1">明星1</option>
    <option value="2">明星2</option>
    <option value="3">明星3</option>
</select>
</body>
</html>

頁面效果：

9、textarea標簽

多行文本輸入框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標簽</title>
</head>
<body>
<span>請輸入內容：</span>
<br>
<textarea name="message" cols="30" rows="10"></textarea>
</body>
</html>

頁面效果：

三、CSS

1、css樣式引入方式

第一種：
直接在頭部添加<style>引入：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        span{
            width:100px;
            height:100px;
            background-color:navajowhite;
        }
        div{
            width:100px;
            height:50px;
            background-color:red;
        }
    </style>
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

頁面效果：

第二種：
外部文件引入
<link rel=“stylesheet” href=“css文件路徑”>
html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div>hello</div>
<span>How are you?</span>
</body>
</html>

css文件：

span{
    width:100px;
    height:100px;
    background-color:navajowhite;
}
div{
    width:100px;
    height:50px;
    background-color:red;
}

頁面效果：

第三種：
內聯樣式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
<div style="background-color:red;weight:100px;height:100px">hello</div>
<span style="background-color:wheat">How are you?</span>
</body>
</html>

頁面效果：

塊級標簽能夠設置高度寬度，能夠嵌套某些塊級標簽和內聯標簽，p不能嵌套塊級標簽，也不能嵌套p標簽

內聯標簽不能設置高度寬度，它的高度寬度由內容來決定，只能嵌套內聯標簽

2、標簽嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
</head>
<body>
<div>
    <span>hello</span>
</div>
<p>
    <p>how old are you?</p>
</p>
</body>
</html>

頁面效果：

3、css選擇器

元素選擇器：
標簽名稱{css屬性:值}
id選擇器：
html寫標簽時：

<div id="d1">內容</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1{
            width:100px;
            height:100px;
            background-color:red
        }
        #d2{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1">你好啊</div>
<span id="d2">最近還好嗎</span>
</body>
</html>

頁面效果：

3）類選擇器
class后面跟類，表示一類，可統一改渲染效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        .c1{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1">你好啊</div>
<span id="d2" class="c1">最近還好嗎</span>
</body>
</html>

頁面效果：

4）屬性選擇器
可自定義屬性選擇

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        [ss]{
            width:100px;
            height:100px;
            background-color:red
        }
        [ss="dd"]{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">你好啊</div>
<span id="d2" class="c2" ss="dd">最近還好嗎</span>
</body>
</html>

頁面效果：

后代選擇器
加>為子代選擇器，只渲染子代，不加為后代選擇器，子代及所有后代皆渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 > span{
            width:100px;
            height:100px;
            background-color:red
        }
        .c2 .c4{
            background-color:wheat;
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

6）組合選擇器
后代選擇器用逗號組合：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我是標題</title>
    <style>
        #d1 span,#d2 span{
            width:100px;
            height:100px;
            background-color:red
        }
    </style>
</head>
<body>
<div id="d1" class="c1" ss="xx">
    <span id="d3" class="c3">hello</span>
</div>
<div id="d2" class="c2" ss="dd">
    <span class="c4">how old are you?</span>
</div>
</body>
</html>

頁面效果：

建議收藏，不然刷著刷著就可能找不到了。

有什么前端的問題歡迎私信我~期待你的到來。

學習是一個艱苦的過程，當然如果能把技術學成，最后也一定可以獲得高薪工作。掌握一個好的學習方法，跟對一個學習的人非常重要。今后要是大家有啥問題，可以隨時來問我，能幫助別人學習解決問題，對于自己也是一個提升的過程。自己整理了一份2020最全面前端學習資料，從最基礎的HTML+CSS+JS到HTML5的項目實戰的學習資料都有整理web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取

果你打開這篇文章并迅速滑到最后，那么恭喜，就在剛剛，你被消耗了 43 mb 的流量。

這個流量，可以讓你刷 5 個短視頻。

循環 12 遍 MP3 格式的《只因你太美》。

保存 3400 張“ 差評 ”二字的 GIF。

或者下載 5500 次，時長 2 分半，名為《羊與花》的動畫視頻。

差評君可沒寫錯。

因為這個視頻大小只有——8kb。

這個 “ 視頻 ” 是差評君沖浪時無意發現的，不過，它的準確說法并不是 “ 視頻 ” ，而是 “ demo ” 演示（不是游戲 demo ）。

看到這，可能有差友要拍大腿了：如果 D 盤用 demo 來存資料，豈不是。。。

別急嘛，差評君保證你不會用它來學習的。

因為它不能快進： (

demo 的格式并不是各位熟悉的 mp4 、 avi ，而是 exe 可執行程序。

雙擊打開后，你的電腦就開始實時生成畫面和音頻。

出于好奇心，差評君搜了一下 demo ，發現網上還有類似的存在。

下面這個 2016 年，時長也是兩分半的 demo ，大小只有恐怖的 4kb 。

大家可以欣賞下，耳機黨注意音量，想跟著音樂搖擺的可以拉滿。

怎么說，沒看夠，可以再看看這個海底探險故事的 demo 。

水紋、光線、陰影、模糊反射與折射、背景音樂要啥有啥，但你能猜到它只有 64kb 嗎？

看到這里，你肯定好奇這玩意怎么做到的。

有一個可能比較反認知的事情是：想讓電腦播放一段圖形和音頻，可以完全依靠代碼。

我們平時看到的視頻，就是一張張圖片組成的。那每一張圖片怎么組成的呢，就是告訴屏幕在什么位置生成什么顏色。

Demo 也是類似，只是它不和屏幕溝通，而是和 CPU 和 GPU 。兩兄弟接收到代碼后，要先猛算一下，再把答案告訴屏幕，哪個位置放什么顏色。

運行 demo 時， CPU/GPU 會被拉滿 ▼

舉個簡單例子。

我在著色器上輸入一行公式：fragColor = vec4 （ 1.0 , 1.0 , 1.0 , 1.0 ）

此時計算機會先算出結果，然后告訴屏幕：顯示白色。

如果更換括號里的任何數字，我就可以讓屏幕顯示成千上萬種顏色。

那么我想畫個彩虹，只需要把稍微復雜一點的公式告訴電腦，電腦算出答案后，再告訴屏幕在哪些位置畫哪個顏色就行。

除此之外，紋理、 3D 效果、運動軌跡也能用更復雜的公式讓電腦運算出來。

比如在著色器里輸入這么幾行公式：

vec3 lightAbsorption = pow(mediumColor, vec3(mediumDensity * lightDistance));

vec3 lightIntensity = distanceAttenuation * lightColor * lightAbsorption;

vec3 surfaceAbsorption = pow(mediumColor, vec3(mediumDensity * surfaceDistance));

vec3 surfaceColor = LightEquation(E, N, material) * lightIntensity * surfaceAbsorption;

就大概能生成光源進水后光線變淡，遠處更暗的效果。

搞清楚了 demo 的畫面是怎么生成，現在再來說它的背景音樂怎么做。畢竟一首 MP3 怎么也得好幾 M 吧。

Demo 音樂制作方式有很多種，最主流的是基于 Tracker 。

首先制作者要先采集音頻樣本，把外界的模擬音頻信號轉為數字音頻信號。而 Tracker 說簡單點，就是一個樣本排序工具。

世界上第一款 Tracker 工具，采用了一種類似表格的頁面。第一個縱列表示時間，另外四個縱列代表旋律、伴奏、低音、打擊樂器，下面一個個表格里放的就是樣本信息。

我們只要在 Tracker 里調整樣本順序，再調點音量音頻，就可以編排出一首歌曲的 “ 樂譜 ” 。

你把這段樂譜交給電腦，它就能播放音樂了。

是不是有點不可思議。

但一開始，差評君并不看好 demo 。

因為視頻要做出這種效果并不難，咱覺得牛逼，在于它建立在 4kb 、 8kb 基礎上。

除了能證明開發者能敲得一手好代碼，demo 似乎沒啥商業價值。

所以這頂多就是一兩個代碼仙人，純粹為耍酷才會做的事情。

不過在查了一圈后，我發現我錯了。

耍酷的人哪里是一兩個，分明就是一大波人，甚至多到已經形成一種數字亞文化了。

這種亞文化叫 demoscene ，已經持續 40 多年了。

你不要一聽到專業術語就慌，想想小區理發店的托尼老師，想想顆粒度對齊，就一代號而已。

“demoscene ” 直譯過來，就是 “ 演示場景 ” 。

其實類似 rap 代表街頭說唱文化， demoscene 則代表在聚會玩 demo 的文化。

就像這樣：

還有這樣：

對，就是一群技藝高超的程序員做著酷炫的 demo ，線下 PK 。

隨著差評君繼續探索下去，我發現 demoscene 影響力遠比我們想象中要大得多。

demoscene 的內核，是不斷探索機器性能的極限，盡可能做出高質量的程序。

奉承著 “ 用最少代碼，做最酷場景 ” ，在 demoscene 的文化里，那種體積小到可憐，卻能讓電腦生成頂級畫面和效果的 demo 比比皆是。

像這樣一個氣勢磅礴的大作，它的體積只有 4kb 。

還有這個 64kb demo 做出了光追效果。

雖然你明白了 demo 生成圖形的原理，但看到這里，你肯定會納悶它到底為啥只有 64kb ，甚至 4kb ，這里面可都是 3D 模型啊。

我只能說，奇技淫巧只有你想不到的，沒有 demoscene 玩家做不到的。

像下面國際象棋和杯子的模型，其實只需要幾行復雜的公式就能實現。

我們在左邊填寫幾個橫縱坐標，來標記一些散落的點。

接著，敲一段公式讓電腦把點連成線，這樣，就形成了一個面。

然后我們再用一段公式，讓電腦把這些面繞著中心軸旋轉，那么此時就得到一個立體的棋子 3D 模型了。

這樣一個模型有多大呢？一串坐標數字和幾行公式。

另外，這些公式可以復用，一套東西你可以用來生成 N 套模型。

如果你仔細觀察下圖，會發現只有兩種形狀，立方體和圓柱體。盒子、桌子、墻壁都是變形后的立方體組成的。臺燈、鉛筆、錘子都是用圓柱體組成。

別看個個都挺有特色的，大家都一個媽生的，頂多就生的姿勢不一樣。

現在你明白，為什么這些 3D 模型只有這么一點大小了吧。

但這對 demoscene 玩家來說：還不夠！得摳！

怎么摳？禁掉 C++ exception 異常！

這個功能是代碼出現錯誤時，可以先拋出一個異常提示而不是直接崩潰，但它會讓你多出很多行代碼。

別急，還能摳！

敲完代碼，再壓縮一下代碼。

就好比把堆成山的代碼打包進一個小箱子，接著在箱子外放一串解壓縮代碼（作為鑰匙）。這樣計算機要先拿鑰匙開啟箱子，然后再把代碼解讀給屏幕。

嗯， CPU 是燒了，但起碼代碼小了。

嘶嘶。。。

可以說， demoscene 就是一個追求極限的編程修羅場。

在這里，一代代程序員編程技術得以精湛。在 N-Gage 和 OVI 功能手機時代，諾基亞還通過贊助現金鼓勵 demoscene 活動舉辦，給大家磨練技能。

說出來你可能不信， demoscene “ 培養 ” 出的大佬案例多到數不過來。

拿游戲行業舉例。

1993 年 Assembly demoparty 上 PC demo 組的冠軍作品《 Second Reality 》，來自芬蘭團隊 Future Crew 。后來 Future Crew 創建了游戲公司 Remedy 。

不熟 ? 他們后來做出了第三人稱射擊游戲《馬克思佩恩》。

以《戰地》系列聞名的 DICE 游戲工作室，前身就是瑞典 demoscene 團隊 The Silents 。

《憤怒的小鳥》首席設計師 Jaakko Iisalo ，在 90 年代也是 demoscene 圈內知名人物。

成立于 1998 年 9 月，推出《殺手》系列的丹麥游戲公司 IO Interactive ，也是由 demoscene 團隊 Reto-Moto 和老牌工作室 Nordisk Film 合并而成。

用一句話概括， demoscene 就是一個歐洲游戲行業的黃埔軍校，華爾街青訓營。甚至前些年，一些老牌游戲公司的老板還經常參加 demoscene 活動，去挖掘一些編程小天才。

因為 demoscene 的文化影響深遠，前兩年它甚至被芬蘭、德國、波蘭、荷蘭列入聯合國教科文組織國家非物質文化遺產名錄，成為第一個被列入非遺的數字亞文化。

Demoscene 玩家慶祝 ▼

說實話，光是看到這些 demoscene 光榮事跡，就已經讓差評君驚掉下巴了，但在研究完它的起源后，我只能說：焯，下巴掉早了。

被四國申遺的文化，居然是始于盜版游戲的交流會？

時間拉到上個世紀 80 年代。隨著家庭電腦的普及，游戲行業也在迅速發展。

那會破解游戲的，大多是一些買不起游戲的小年輕。畢竟買電腦送編程指南，啟動游戲都要輸入 BASIC 命令的年代，玩著學著就是個野生程序員了。

這些小年輕破解完游戲，會互相分享。那時互聯網沒普及，交換盜版游戲最快的辦法，就是帶著軟盤去好基友家里復炸粘貼。

當好基友們越來越多，一種被稱為 CopyParty 的同城線下聚會出現了。

在這里，大家分享和炫耀最新的破解游戲。

在盜版游戲加載之前，人們往往都會看到一段來自破解團隊的動畫。

這段動畫叫 “ crack-intro ” 破解介紹。

因為破解游戲開發者設下的層層加密手段，對小年輕們來說，是一件非常值得炫耀的事。

這代表著他們在與開發者的技術競賽中獲勝了。

1987 年，盜版 Fairlight 出現的頁面 ▼

一開始的 crack-intro 呢，就只是寫一下游戲是誰誰破解的，提升一下聲望，嘚瑟兩下就行。

但漸漸地，大家開始在 intro 上卷起來了。

小年輕嘛，年輕氣盛，互相之間總想炫技。而除了破解游戲，能展現技術水平的最直觀最迅速的辦法，只有 intro 環節。

一開始，大家就是單純比誰能在 intro 里玩到極限，比如每一幀內誰能放滿更多的圖形元素。到后來開始比誰的文本滾動特效更炫酷，誰的畫面和音樂更屌。

甚至到最后， intro 都已經做得和游戲本身沒關系了，用的技術都比游戲超前了。

有一天大家就發現，不對啊，這 intro 都成為炫技的重心了，那 intro 也不是非得放在盜版游戲前面不可。

再加上軟件游戲行業和司法體系對盜版軟件打擊越來越嚴，很快噢，線下 CopyParty 就拆分出一個全新分趴，大家就專注于這種畫面、音頻的藝術創作。

這種脫離盜版游戲，獨立存在的 intro ，后來被統稱為 demo 。

Demoscene 文化就這樣形成了。

在這個文化成熟的過程中， demo 效果隨著硬件發展也逐步提升，團隊分工也更加明顯，出現了程序員、制圖師、音樂制作人，而社區也演變出了幾種比賽項目類別。

比如有不限制體積大小，讓你隨意發揮的 “ DEMO ” 類別，也有限制體積的 4KB-INTRO 、 64KB-INTRO ，還有更小的 1 KB 、甚至是 256 B 、 64 B 類別。

有體積限制，也是因為早期的電腦性能不夠，比如銷量之王 C64 的 RAM （內存）僅 64 KB。

不過幾十年過去了，電腦性能翻了成千上萬倍，這些限制級項目并沒有被拋棄。

與其說是保持傳統，更不如說 demoscene 的存在，就是為了打破束縛和邊界，完成不可能完成的任務。

這，就是一種極客精神。

差評君在寫這篇文章時，發現和商業公司合作過的 demo 團隊屈指可數，而且絕大多數 demoscene 大會要么設立很小的獎品，要么干脆不設。

這種沒有商業價值的文化能延續下去，根本原因就在于它非常純粹。

大家其實不需要什么物質獎勵，這里最流通的貨幣，是聲望，是認同。

他們千里迢迢從各個城市奔赴過來，他們最想要的獎品，是大屏幕上播放自己作品時，底下觀眾能夠報以掌聲和歡呼。

盡管這一群極客的作品到達了世界級水準，編程水平接近人類極限，但作為一種小眾亞文化， demoscene 的公眾關注度一直都不高，大部分人的作品都得不到應有的曝光。

但 demoscene 玩家們并不在乎這些。

畢竟愛好從來不是為了取悅別人，能照亮自己的一方小世界就已足夠。

就像他們當初喜歡上 demo 的原因：

自由，不用迎合市場和大眾的眼光

比于直接搜索，用戶更喜歡用導航，因為導航是讓用戶做選擇題，而搜索是填空題。那本文主要談談導航設計，看怎樣的導航設計更能讓用戶喜歡。

McGovern(the founder and CEO of Customer Carewords)說相比于直接搜索，用戶更喜歡用導航，因為導航是讓用戶做選擇題，而搜索是填空題（導航文案是現有的信息，不需要經過用戶大腦的額外加工去進行搜索)。并且他解釋道：如果鏈接的文案與用戶尋找的內容相符，那他們直接點擊鏈接的可能性更大。

盡管導航設計一直是一個有爭議的話題，仍然有一些比較好的應用規則，是作為用戶體驗設計師的我們，在進行網站導航設計時值得注意的：

保持(導航結構的)連貫性和一致性；
設計清晰易懂的交互方式；
設計扁平的導航結構；
考慮響應式設備的兼容性。

一、保持（導航結構）的連貫性和一致性

1-1 子頁面與落地頁

連貫性的產生也需要經過內容的篩選，不是所有的導航項目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會讓用戶誤以為不展示其子頁面鏈接，就沒有更多內容的導航項目。

如果子頁面鏈接沒有在一級導航結構中展示，那么就要確保其在各個板塊的次級導航結構中的使用始終保持一致（不要在這個版塊是一級導航結構中展示，而到了另一個版塊卻是在二級導航結構中展示）。

同樣，所有的一級導航項目要么都是跳轉到落地頁的鏈接，要么都是作為二級導航鏈接的標題。如果一部分是跳轉到落地頁，另一部分則是二級導航鏈接的標題，那么用戶就會在點擊時產生疑惑。

在視覺設計上，同樣應該比較明顯的示意處，一級導航項目到底是跳轉到落地頁的鏈接？還是二級導航機構的標題、字體的顏色和樣式，鼠標指針的變化？

此外，如果一級導航項目是一個鏈接，那么就要清楚地示意相關操作，或者通過文案措辭或者通過視覺設計。

在Fairfax County Public School’s官網的Full menu欄下，用戶可以通過點擊“Career”文案來鏈接到“Career”落地頁，或者點擊向右的箭頭來展開查看次級導航項目的標題。

這與前面講的導航機構的一致性也是相符的：一級導航項目要么都調到次級落地頁；要么都作為二級導航項目的標題入口。如果兩者都有，那么就在樣式上作區分。

如果新添加的內容不能很好地匹配當前網站的各個板塊，那么是時候重新思考一下網站的層級結構了，或者重新審視一下——既然這個部分的內容與網站的其他內容不相符，那為什么還要存在？是不是可以被刪掉或者將它合并到一個內容相關的頁面？

如果有些頁面需要被更加便捷地觸達，那么可以考慮在首頁試用一種響應時出現的功能模塊或者一個模塊的落地頁(浮層？)。用戶其實更愿意去關注這些模塊，對用戶來說很重要并且特征顯著的模塊并不會干擾到整個網站的導航結構。

1-2 面包屑導航結構

面包屑導航可以很好地引導用戶，這種引導對那些從外部鏈接跳轉進深層級頁面的用戶尤其重要。

但是面包屑導航，需要非常精確才能起到效果，不能丟失任何層級或者引導至錯誤層級的頁面。對于一些只有兩種層級結構的小網站，使用面包屑導航就沒有必要了，如果一定要使用那么就要保持層級的連貫性和一致性，可以去UI-Patterns這個網站學習更多關于面包屑導航的實際運用案例。

二、設計清晰易懂的交互方式

2-1 功能的可視化

視覺元素的變化，可以幫助用戶搞清楚網站有哪些可能的交互形式。例如：把關閉狀態的按鈕滑至開啟意味著某個設置改變了，并且知道如何反置。當icon沒有改變，那么用戶可能就無法預知操作結果。

在上圖所示網頁中，注意看箭頭方向的切換是基于對導航菜單的展開或者收起操作。

IOS的功能開關也是一個很好的案例

2-2 使用帶有icon的標簽

有時候icon可以替代文字鏈，包括帶有icon標簽的使用可以減少理解成本。例如：相比于(單獨)使用有爭議的漢堡包式的icon，在其旁邊放一個“Menu”標簽會很好的解決這個潛在的可用性問題。

這種方式對于其他常用的icon同樣適用，比如：“Contact”、“Log in”。

2-3 根據功能差異化icon

將icon差異化，把那些有鏈接的icon和只是純信息或者用作分類的icon做差異化。

根據NNG study的研究：用當戶在網頁檢索信息時，相比于只有文案，通過顏色和icon的差異化設計的視覺指引能讓用戶快37%。將icon的顏色做區分處理，而不僅僅只是設計成不同的樣式，可以讓用戶更容易感知到這些icon有著不同的作用。

例如：twitter上那些不能交互的icon，被設計成灰色方形內配合白色(描邊)icon。例如：“liked”（已經贊過的點贊按鈕）和“followed you”(已經關注的關注按鈕)。

那些用戶可以進行交互的icon則被設計成灰色，并且當用戶hover的時候進行顏色切換并展示一個解釋性的信息。

三、設計扁平的導航結構

為了設計一個很好的導航結構，好的網站信息架構和層級才是關鍵。當網站的信息層級結構圖已經出來時，此時就要盡力去設計一個扁平的導航結構，這種扁平的結構要能讓用戶只需要點擊一兩次就可以去到最底層的頁面。

盡管扁平的導航結構固然是最理想的，但是僅僅因為短時記憶的局限，而把菜單設計得很簡短也是錯的。

就像Nielsen Norman Group 說的：

菜單的意義是讓用戶辨識導航欄項目，而不是讓用戶去回憶(導航欄項目)。

所以菜單必須設計的簡短以方便用戶瀏覽，但是信息必須表達明確。(菜單欄必須設計得簡潔明了，表意準確)

3-1 限制導航層級

導航結構的層級數最終是由網站的信息層級所決定，理想狀態下，用戶需要點擊的導航層級越少，那么用戶到達他們的目標頁面也就越快越清晰。

我們再次引用Nielsen Norman Group說的：

信息層級越深，則用戶越容易被誤導

扁平的導航層級結構

深層級的導航結構

通常，絕大部分網站都是三到四個信息層級，這樣網站的頁面比較容易被觸達，不過這樣做需要確保網站的導航結構不至于太過寬泛。

要想弄清到底幾個信息層級是合適的，試著把現有的信息層級結構劃分成互不相關的獨立部分。然后審視一下各個子頁面的分組，看看他們是否可以被升至更高一個層級。

這時候需要注意：

更新一下當前信息版塊下的標簽；
建立一個完全新的信息版塊，去容納那些原本屬于交叉版塊的子頁面；
重新調整各個信息版塊之間的關系，也許他們應該依照操作行為來被分組而不是主題。

合并內容或者刪掉內容也是同樣可行的，把扁平化的導航設計做到極致，當前正成為全頁面導航設計的潮流這種做法，就是沒有子頁面并且只有一個信息層級。

3-2 為每一層級設計獨特的視覺(或者說差異化每一層及的視覺感受)

用戶應該能夠快速瀏覽導航信息，并且知道那些鏈接分別是哪個層級的導航項目，這些鏈接的擺放和分組都應該建立在這種層級基礎上。

像字體樣式、字體大小、字體權重或者顏色這些視覺設計，都應該建立在導航層級之上，并且應該始終保持一致。如果使用一個次級導航，那么它與其父/子或者同級導航鏈接的設計，也同樣應該區分開來并且與主導航保持一致。

Antro網站導航菜單的一級導航文案與二級導航文案在字體、字號、顏色一級hover狀態上都有區分

3-3 使用位置指引

就像面包屑導航結構，導航欄上的當前位置釋義能幫助用戶找到自己當前的位置，尤其是如果他們處在一個層級比較深的頁面，這種清晰的視覺指引可以幫助用戶明白他們在哪個頁面。

Audubon會高亮當前位置的導航菜單

四、考慮響應式設備的兼容性

一個好的導航結構可以很好的適應手機和平板電腦，設計導航結構時應該考慮到多端通用，或者考慮使用兩種相似的導航結構，這種結構不會讓用戶去切換思維模式去適應移動端和PC端的不同。

4-1 移動端沒有hover態

用戶在PC端hover主導航項目時狀態顯示次級導航的內容鏈接，然而移動端沒有hover狀態，這就會使得移動端和PC端不能保持一致。用戶在使用移動設備時，不會像在PC上本能地hover菜單來找他們想要的內容。

如果非得要把兩種交互形式用在一個內容鏈接上，可以考慮設計兩個不同的點擊位置(產生不同的點擊效果)，就像之前看過的Fairfax County Public Schools 的案例——點擊主導航標題文案本身可以跳轉到一個頁面，然后點擊標題文案旁邊的加號，可以展開這一部分主導航的內容。

4-2 為移動端設計不同于PC的導航形式

例如：日本的時代周刊在PC端的導航結構設計，用的是寬屏而且是橫向分布排列的導航條。而在移動端同樣的導航內容用的是漢堡包式導航設計，并且它在展開時利用的是手機長條的縱向空間這種特點。

當點擊一級導航標題時，二級導航標題會在其下方展開，而不是將導航區域分割成一級、二級導航兩條縱列。

這種設計并不是機械的把PC端的導航形式照搬到移動端，可以注意到移動端藍色線條，是更加挨著次級導航標題而不是主導航，這實際上更符合移動端上的設計。

誠然，優化不同端的導航設計時仍然需要有一致性的。

說明：喜歡翻譯國外交互設計體驗設計網站優秀文章案例，僅供互相學習探討，翻譯有版權，如有錯誤，請多指正~

拓展閱讀：

User Testing Blog’s set of 37 Menu Usability Resources

原文作者：Stephanie Lin

本文由 @ vanhelsinglhj 翻譯發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

在線咨詢

上一篇：大學生必備的66個網站，從大一用到大四！扶我起來，我還能學習
下一篇：Edge/Chrome 83新表單控件啟用黑色邊框給用戶和開發者帶來困擾

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

web前端基礎-HTML及CSS選擇器

TML及CSS選擇器

一、html基本結構

二、html標簽

1、標題標簽

2、a標簽

3、img標簽

4、div和span標簽

5、列表標簽

6、表格標簽

7、form表單

8、select下拉框標簽

9、textarea標簽

三、CSS

1、css樣式引入方式

2、標簽嵌套

3、css選擇器

有什么前端的問題歡迎私信我~期待你的到來。

一、保持（導航結構）的連貫性和一致性

1-1 子頁面與落地頁

1-2 面包屑導航結構

二、設計清晰易懂的交互方式

2-1 功能的可視化

2-2 使用帶有icon的標簽

2-3 根據功能差異化icon

三、設計扁平的導航結構

3-1 限制導航層級

3-2 為每一層級設計獨特的視覺(或者說差異化每一層及的視覺感受)

3-3 使用位置指引

四、考慮響應式設備的兼容性

4-1 移動端沒有hover態

4-2 為移動端設計不同于PC的導航形式

您的項目需求