覽在線網站的體驗并不總是流暢的。

曾經有一段時間，你在網上沖浪時，可能會聽到你不愿意聽的音樂，并在配色奇怪的網頁上瀏覽用呆板字體（通常是 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 此元素不會被顯示