览在线网站的体验并不总是流畅的。

曾经有一段时间，你在网上冲浪时，可能会听到你不愿意听的音乐，并在配色奇怪的网页上浏览用呆板字体（通常是 Times New Roman）写成的文字。

在 2000 年代，在 Squarespace 和社交媒体出现之前，网站是个性的体现，完全由对代码有一定了解并渴望上网的用户使用 HTML 从零开始构建。

现在，分散在网络上的程序员社区，正在努力恢复这种看似过时的东西。这场运动来源于艺术家劳蕾尔·施伍斯特（Laurel Schwulst）和埃利奥特·科斯特（Elliott Cost）创造的“HTML 能量”概念，绝不是对复古美学的肤浅致敬。

它专注于 HTML 编码的“触觉”过程，探索语言如何实现自我表达，并使个人能够在互联网中占据一席之地。

HTML 能量运动在小型 Discord 频道和数字杂志等领域形成，旨在庆祝数字体验中的“人性触摸”。

如今，大多数互联网都针对社交、电子商务和流媒体进行了优化。大多数互联网流量集中在少数几个网站上，这些网站又都归少数几家公司所有。从冗长的广告到咄咄逼人的 cookie 设置，一些小障碍和麻烦层出不穷。

用户不断被提醒，他们访问互联网的条件是让少数人从中获利。X（原推特）的情况完美地概括了互联网所有权的这种状态，只需要一位高管就可以引发大量用户逃离该平台，并将其长期存在的社区割裂开来。

然而，尽管大型科技公司垄断了市场，但一个基本现实仍然能够证明互联网的民主：任何人都可以用 HTML 免费发布网站。

从技术上讲，互联网为每个人都提供了空间，因此不存在无处容身的问题。真正的问题是流量。

当我与 HTML 能量社区的不同成员交谈时，所有人都一致地传达着一个基本信息：网络上的一切最终都是 HTML。HTML 是任何网站的主干。

这是网站运行所需的唯一东西。虽然当今流行的 web 开发语言使用 abridged 命令，通过所谓的数据抽象来隐藏技术复杂性，但 HTML 是细粒度的，编程经验也不是先决条件。

正如科斯特所解释的，正是 HTML 的包容性给了渴望在网络上发布自我的人机会。使用 HTML，即使缺少一行代码，网站仍将加载。HTML 能量运动包含了这些可能性：欢迎通过试错学习，鼓励创造性实验。

随着主流数字体验趋向于同质的视觉语言，人类的触觉在许多抽象层中迷失了。网站创建者离他们的网站越来越远，网络也变得更具交易性。

但 HTML 能量运动呼吁人们重新审视我们与技术的关系，使用 HTML 制作网站可以让程序员探索网站的本质。

与公司不同，人们自己创建网站无需向股东负责。他们没有创造有利可图的体验的压力，所以他们的创作可以采取各种各样的形式。

常见类型的 HTML 能量网站包括数字花园，其中的元素随着季节的变化而变化；交互式诗歌生成器，用户的输入会创造新的意义；以及分享创作者生活细节的个人网站。

在一个消费主义至上的互联网中，HTML 能量的网站温和地提醒人们，网站可以带来冥想一样的体验。

HTML 能量社区提倡理解 HTML 的字面含义，它就是一种语言。它赞美了这种语言的基本特征对用户意图的要求。

作为微小和复杂创意决策的融合，仅使用 HTML 构建的网站是一种自我表达形式。

查看网站的源代码与浏览界面一样重要。代码中经常隐藏着彩蛋，比如来自其他 HTML 网站的消息或引用。

在很多方面，HTML 网站都“记录着”创作者的身份：这个人选择了构建什么？如何构建？

这种对 HTML 不同应用的迷恋，也出现在被称为“freewrites”的物理社区聚会中，社区成员常聚在一起编写代码。

Sunday Sites 和 Fruitful School 是组织这些集会的网站之一，它们经常将教育元素融入活动中，以增强更多人加入该社区的能力。

与此同时，像 HTML 评论这样的网站以文学杂志的形式展示了它的一些产品。

项目 1：多景剧场

吉·金（Ji Kim）的“多景剧场”拼贴了一部旧 iPhone 的多个片段。当访问者浏览网站时，图像会重叠，并播放嵌入的音频片段。

当用户点击任何图像时，都会出现一个关于拍摄时间和地点的小描述，以及更多额外的媒体内容。

金的网站旨在模仿记忆的零散性和层次性。这是一种有意分散的数字体验，就像试图回忆几年前的一次家庭旅行一样。

项目 2：有窗户的房间

谢尔比·威尔逊（Shelby Wilson）的带窗户的房间，是一个只允许一种互动的网站：打开和关闭一组窗帘。

该网站有意将物理空间和数字空间混合在一起。威尔逊将浏览器视为通往有物理边界和边缘的地方的门户，但也保留了超现实主义元素（百叶窗关闭时房间不会变暗）和随机元素（每次访问时房间的颜色都会变化），以突出数字形式。

项目 3：HTML 花园

史宾赛·张（Spencer Chang）的网站设想了一个花园在互联网上的样子。

一些由原生 HTML 元素组成的“植物”在生长，每次访问你都会注意到时间的流逝：季节的变化、植物的发芽和开花。没有明确的行为，你所需要做的只是观察。

项目 4：散文剧

凯瑟琳·杨（Katherine Yang）的散文游戏是一首互动诗，鼓励用户在预设的句子结构中输入不同的单词。

该网站以单词为变量，探索互联网的互动性。它把“作者之死”的文学理论，即“文本的意义不是由作者的本意决定的，而是由读者的解释决定的”放在了代码的语境中。

项目 5：Erich Friedman

埃里希·弗里德曼（Erich Friedman）的网站是他生活的个人百科全书，里面有从电影评级到佛罗里达州中部迷你高尔夫球场评论的各种档案。该网站分为数学类、益智类、个人类和专业类，结构比较简单。

它使用基本的 HTML 来展示弗里德曼在过去十年中不拘一格的兴趣，包括从 0 到 9999 的每个数字的有趣事实列表，以及数学和琐事问题的集合。

该网站不需要任何特定操作。它只是对埃里希·弗里德曼的详尽、坦率的描述，在庞大的互联网中占据了一小部分。

项目 6：屏幕博物馆

图卢·图穆（Toulou TouMou）的屏幕博物馆，是一个存放由游戏爱好者创建的浏览器游戏的网站。为了与展示的游戏互动，用户必须在数字空间中导航，就像用 ASCII 图形可视化的物理博物馆一样。

这个网站有实际的参观时间，还会随机选择一个“休息日”。

图穆的博物馆是为了在 Flash 游戏时代给予业余开发者应有的荣誉而创建的，旨在强调承认作者身份和独立游戏丰富历史的重要性。

HTML 能量的网站没有集中的来源，偶然发现让他们觉得自己很特别，就像发现停车场的一幅街头艺术作品一样。它们不是为被发现而设计的，也不是为任何特定操作而优化的。

他们只是按照访客的条件与访客互动，描绘出创作者的风格。如果像谷歌或脸书这样的网站是你购买必需品的超市和购物中心，那么 HTML 能量的网站就像你偶然发现的隐藏花园，在任何地图上都找不到。

支持：Ren

实体正文组成的Web页面的内容结构很难被发现，也不会吸引眼球。为文档添加显示类型可以提供帮助用户浏览内容的日志。显示类型可创建信息架构并且添加引导浏览者阅读材料的各种视觉效果。有效的显示类型的关键是对版式强调的精确、髙效的应用。深圳网站制作为您讲解网页内容的设计中通过哪些方式来强调信息。

好几种历史悠久的版式技巧都可以用来对文本块进行强调，伹是必须要分开应用。如果你对所有的内容加粗，那么将没有任何内容能脱颖而出，而且看起来像是对读者很不恭敬。一个不错的应用类型的经验就是每次只使用一种参数来强调。如果你想将注意力集中到文档的标题，请不要同时对它设置大字号、加粗及全大写形式。如果你想让标题变大，采用一种方式增加字号即可。如果你想加粗，让标题的字号与正文一致然后加粗即可。你很快就会发现，视觉对比只需一个小小的改变。

1. 斜体

斜体之所以吸引眼球是因为它与正文的字形对比。或者将斜体用在正文中强调字与词，抑或强调外文。做网站提醒大家不要将大段的文字设为斜体，因为斜体字的可读性要远远低于同等大小的罗马文字。

2. 加粗

粗体之所以能用来强调是因为它与正文有粗细的区别。将小节子标題设置为粗体的效果特别好。尽管大段地采用粗体，其对比性不好、效果也不佳，但是粗体是可通过屏幕阅读的。

3.下划线

下划线是打字机时代用来代替诸如斜体和粗体这些无法表示的功能的替代表示方式。除了下划线在美学上的不足外，它在Web文档中还有一个特殊的功能含义，大多数浏览者都会将自己的浏览器首选项设置成下划线链接。默认浏览器设置可确保单色显示器或者色盲能判断文本块中的哪些文字是链接。做网站提醒大家如果你在网页中使用下划线文字，肯定会跟超链接发生混淆。

4.色彩

尽管色彩也是一种用来区分文字的选择，但是彩色文字与下划线一样，在Web文档中还有一种特殊的功能含义。需要尽量避免对文本块中的文字添加色彩，这是因为读者会误以为着色的文字是超链接，并且会单击它。不过，带色彩的文本对小节标题的区分效用有限。做网站提醒您选择与页面背景对比强烈的深色，并且不要使用与Web链接默认的蓝色和紫色相近的色彩。

SS(Cascading Style Sheets) ，层叠样式表（级联样式表），用于设置HTML页面中的文本内容的字体、大小、对齐方式等，图片的宽高、边框样式、边距等以及页面的布局排版等各种外观显示样式。

CSS以HTML为基础，可以针对不同的浏览器设置不同的样式。CSS的出现可以说拯救了我们的页面，让HTML 专注去做结构呈现， 而样式全部交给 CSS来美化。

CSS样式规则，具体格式如下：

CSS语法由两部分组成：选择器和声明。 声明包括：属性和属性值
选择符 {属性: 属性值 ; 属性:属性值}

规则：

1. 每个CSS样式由两部分组成，即选择器和声明。选择器用于指定CSS样式作用的HTML对象，声明又分为属性和属性值；
2. 属性是对选择器选定的对象设置的样式属性，例如字体大小、文本颜色等。必须放在花括号中，属性与属性值用英文冒号连接，以“键值对”的形式出现。
3. 每条声明用英文分号结束。当一个属性有多个属性值的时候，属性值与属性值不分先后顺序。在书写样式过程中，空格、换行等操作不影响属性显示。

注释规则

• 注释规则
• /* 需要注释的内容 */
• 示例
• p { color: red; /* 所有段落标签字体颜色是红色*/ }

三、CSS样式表引入方法

CSS放到什么位置呢？ 怎么让它跟我们的HTML文件关联起来呢？

内联样式（行内式）

内联样式，又称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式。

• 语法

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

<h2 style="color:red;">
    红色标题
</h2>

• 说明
• （1）style是标签的属性，任何HTML标签都有style属性，用来设置行内样式。
• （2）属性和值的书写规范与CSS样式规则相同。
• 注意
• 行内样式只对其所在的标签及嵌套在其中的子标签起作用。

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义

• 语法
• <head> <style type="text/CSS"> 选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;} p{ color:#000;font-size:14px;} </style> </head>
• 说明
• （1）style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
• （2）type=“text/CSS” 在html5中可以省略， 写上也比较符合规范， 所以这个地方可以写也可以省略。

外部样式表（外链式）

当我们页面比较复杂，大量的内部样式，会导致页面看上去不美观，而且不利于维护。这时我们通常将所有的样式放在一个或多个以 .CSS 为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中。

• 格式
• <head> <link rel="stylesheet" type="text/CSS" href="CSS文件的路径" /> </head>
• 说明
• （1）rel：用于定义文档关联（当前文档与被链接文档之间的关系），在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件，表示关联样式表。
• （2）type：用于定义文档类型，通常指定为“text/css”，表示链接的外部文件为CSS样式表。
• （3）href：用于定义所链接外部样式表文件的URL，通常是相对路径。
• 注意
• link 是单标签哦 _！
• 使用link元素导入外部样式表时，需将该元素写在文 档头部，即与之间。

三种样式表总结

四、标签的类型(显示模式)

网页中的标签很多，为了更好的完成我们的网页布局，我们需要在不同地方会放不同类型的标签。

根据标签在网页中的显示模式，可以将HTML标签一般分为块级标签和行内标签两种类型，即块元素和行内元素。

块级元素(block-level)

• 说明
• 每个块元素通常都会独自占据一行或多行，可以设置其宽度、高度、对齐方式等属性，常用于网页布局和网页结构的搭建。
• 举例
• 常见的块元素有：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素，非常适合布局，所以我们常称之为 “CSS+DIV布局”。
• 特点

1. 块元素总是从新行开始，宽度是容器的100%。
2. 块状元素都可以定义自己的宽度、高度、外边距以及内边距。
3. 两个相邻块元素不会出现并列显示的现象；默认，块元素会按自上而下顺序排列。
4. 块级元素一般可以容纳内联元素和其他块元素，故将其比喻为一个盒子。

• 注意
• 文字类块级标签，里面不能放其他块级元素。比如，只有文字才能组成段落 因此 p 里面不能放块级元素，同理还有这些标签h1,h2,h3,h4,h5,h6,dt。

行内元素(inline-level 或内联元素)

• 说明
• 行内元素（内联元素）不占独立的区域，仅靠自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽度、高度、对齐等属性，常用于控制页面中文本的样式。
• 举例
• 常见的行内元素有<a>、<b>、<span>、<strong>、<em>、<i>、<del>、<s>、<ins>、<u>等，其中<span>标签最典型的行内元素。
• 特点

1. 和相邻行内元素在一行上显示
2. 设置宽、高无效，可设置水平方向的padding和margin，但垂直方向的无效。
3. 默认宽度就是它本身内容的宽度。
4. 行内元素只能容纳文本或其他行内元素。（a除外）

• 注意

链接里面不能再放链接！

行内块元素（inline-block）

• 说明
• 在行内元素中有几个特殊的标签，比如<img />、<input />、<td>，可以设置它们的宽、高和对齐方式，故称之为行内块元素。
• 特点
• 可同相邻行内元素（行内块）显示在一行上，但之间会有空白缝隙
• 默认宽度就是它本身内容的宽度
• 可设置高度，行高、外边距以及内边距

元素显示模式转变（display）

通过设置display的值，改变元素的显示模式。

• 属性值
• block、inline、inline-block、none
• 说明

1. 行内转块：display:block;
2. 将元素转为块状元素，使该元素拥有块状元素的特点；
3. 显示：
4. 类似在元素后面添加换行符，也就是说其他元素不能在其后面并列显示。
5. 块转行内：display:inline;
6. 将元素转换为内联元素，使该元素拥有行内元素的特点；
7. 显示：
8. 在元素后面删除换行符，多个元素可以在一行内并列显示。
9. 块、行内元素转换为行内块： display: inline-block;
10. 只有这一个元素类型支持vertical-align属性，img,input（行内块元素）。
11. 显示：
12. 元素的内容以块状显示，行内的其他元素显示在同一行。
13. none 此元素不会被显示