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的导航形式

您的项目需求