HTML 實例

TML 基礎

非常簡單的HTML文檔

HTML 標題

HTML 段落

HTML 鏈接

HTML 圖片

實例解析

HTML 標題

HTML 標題

在html源碼中插入注釋

插入水平線

實例解析

HTML 段落

HTML 段落

更多段落

本例演示在 HTML 文檔中折行的使用。

HTML 格式化的某些問題。

實例解析

HTML 文本格式化

文本格式化

此例演示如何使用 pre 標簽對空行和空格進行控制。

此例演示不同的"計算機輸出"標簽的顯示效果。

此例演示如何在 HTML 文件中寫地址。

此例演示如何實現縮寫或首字母縮寫。

此例演示如何改變文字的方向。

此例演示如何實現長短不一的引用語。

文本下劃線與刪除線

實例解析

HTML 樣式

HTML Style 元素

背景色樣式

字體樣式，顏色，大小

文本對齊樣式

設置文本字體

設置文本字體大小

設置文本字體顏色

設置文本字體，字體大小，字體顏色

HTML使用不同樣式

沒有下劃線的鏈接

鏈接到一個外部樣式表

實例解析

HTML 鏈接

創建超級鏈接

將圖像作為鏈接

在新的瀏覽器窗口打開鏈接

鏈接到同一個頁面的不同位置

跳出框架

創建電子郵件鏈接

創建電子郵件鏈接 2

實例解析

HTML 圖像

插入圖像

從不同的位置插入圖片

排列圖片

本例演示如何使圖片浮動至段落的左邊或右邊。

制作圖像鏈接

創建圖像映射

實例解析

HTML 表格

簡單的表格

沒有邊框的表格

表格中的表頭

帶有標題的表格

跨行或跨列的表格單元格

表格內的標簽

單元格邊距(Cell padding)

單元格間距(Cell spacing)

實例解析

HTML 列表

無序列表

有序列表

不同類型的有序列表

不同類型的無序列表

嵌套列表

嵌套列表 2

定義列表

實例解析

HTML Forms 和 Input

創建文本域(Text fields)

創建密碼域

復選框

單選按鈕

簡單的下拉列表

預選下拉列表

本例演示如何創建一個文本域（多行文本輸入控件）。

創建一個按鈕

本例演示如何在數據周圍繪制一個帶標題的框。

帶有文本域與輸入域的表單

帶有復選框與提交按鈕的form表單

帶有單選框與提交按鈕的表單

發送郵件表單

實例解析

HTML iframe

內聯框架 (HTML頁面中插入框架)

實例解析

HTML 頭部元素

描述了文檔標題

HTML頁面中默認的URL鏈接

提供文檔元數據

實例解析

HTML 腳本

插入一個腳本

使用 <noscript> 標簽

實例解析

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

篇文章深入討論了在CSS中裁剪多行文本的方法，以提高網頁的外觀和用戶體驗。作者首先介紹了常見的CSS文本裁剪技術，例如使用text-overflow和overflow屬性。然后，他引入了新的CSS屬性line-clamp，它可以更輕松地裁剪多行文本并添加省略號。作者解釋了如何使用line-clamp屬性設置最大行數，并指出了一些需要注意的注意事項。

接下來，作者提供了一些使用line-clamp屬性時可能遇到的限制和兼容性問題，并分享了一種使用JavaScript 庫進行文本裁剪的替代方法。他詳細介紹了如何使用該庫來自動裁剪多行文本，并為讀者提供了示例代碼和演示。

下面是正文~~~

在Web 開發中，CSS中的文本裁剪一直是一個問題。直到幾年前，裁剪文本只能通過服務器端語言或JavaScript來完成，因為CSS沒有文本裁剪功能。

單行裁剪

在2007年，第一個支持使用CSS 裁剪文本的瀏覽器是Internet Explorer 7（當時IE是主流瀏覽器），它使用了 text-overflow: ellipsis; 屬性。該屬性使得文本的一行可以被修剪，這在修剪網頁文本方面是一個小的改進。

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

使用 Flexbox 模塊的第一個版本進行多行裁剪

2012年，隨著Chrome中第一次實現CSS Flexbox，第一次支持多行文本修剪。它看起來很有前途，我們網頁開發人員認為這是不再需要服務器端或JavaScript操作來修剪多行段落的開始。

.line-clamp {   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

但是這種喜悅很快就消失了。CSS Flexbox 模塊更新了兩次，之后就沒有留下任何多行特性的痕跡，這個特性是在 CSS Flexbox 的第一次實現中引入的。

對于許多開發者 - 包括我在內 - 他們正在使用這個功能，這個功能只被一個舊的非官方CSS模塊支持，這些更新感覺就像是多行修剪功能的死亡。

CSS flexbox版本的歷史：

display: box; /* old syntax from 2009 */
display: flexbox; /* unofficial syntax from 2011 */
display: flex; /* official 2013 syntax*/

Line-Clamp 重獲新生

在2015年7月，Edge瀏覽器決定支持 line-clamp 功能，使用 -webkit 前綴，這是舊的CSS Flexbox模塊中的語法。非常不尋常的是，微軟瀏覽器使用了 -webkit 前綴，這通常只用于Webkit瀏覽器，如Chrome / Safari和Opera。

2019年7月，它再次發生了！這次是Firefox瀏覽器決定支持此功能。同樣，以同樣不尋常的方式。

IE，Firefox使用了舊的Flexbox模塊和 -webkit 前綴。

這兩個主要的瀏覽器，使用兩個不同的瀏覽器引擎——Mozilla的Moz和Microsoft的Edge，決定使用一個Webkit瀏覽器的舊功能。

絕望的時刻需要不擇手段，由于使用 –webkit 前綴是支持此功能的官方方式最接近的方式，因此他們做出了這個激動人心的決定。

非官方的行數限制現在成為官方的了

主流瀏覽器如Firefox和Edge開始支持非官方的 line-clamp 功能，這意味著這個功能已經成為常態。

使用 line-clamp 非常簡單：

在文本容器上定義舊的 CSS Flexbox 屬性 display: -webkit-box;
使用以下方法定義要顯示的文本行數 -webkit-line-clamp: 3;
將舊的 flex-direction 屬性從舊的 flexbox 添加 -webkit-box-orient: vertical;
使用 overflow: hidden; 屬性定義元素

.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

使用 Sass Mixin 結合舊方法和新方法

現在我們有兩種通過CSS修剪文本的方法：省略號方法僅適用于單行文本，而line-clamp屬性適用于多行文本修剪。

如果可能的話，我更喜歡使用省略號這種舊的方式，因為它更接近 CSS 中的官方方式。

鑒于此，我創建了一個 @mixin ，它通過接受一個整數的可選參數來同時針對單行修剪和多行修剪。

如果mixin傳遞了一個數字，它將使用多行clamp方法。如果它沒有收到任何參數，它將使用帶省略號的單行trim方法。這是一個重載函數:

@mixin trim($numLines: null){
   @if $numLines != null {
      display:-webkit-box;
      -webkit-line-clamp:$numLines;
      -webkit-box-orient:vertical; 
      overflow:hidden;
   }
   @else{
      text-overflow:ellipsis;
      white-space:nowrap;
      overflow:hidden;
      display:block;
   }
}

我們可以以兩種不同的方式使用這個mixin：

.foo{ 
    @include trim; /*will use the ellipsis = else result*/
}
.bar{
    @include trim(3); /*will use the line-clamp = if result*/
}

事例地址：https://codepen.io/elad2412/pen/Poovzzb

.foo 和 .bar 類的示例結果：

行數限制的瀏覽器支持

瀏覽器支持非常廣泛，幾乎覆蓋了全球95%的瀏覽器。如果在瀏覽器中 line-clamp 不起作用，它只是不會修剪文本。這種回退對于不支持的瀏覽器已經足夠好了。

網頁設計中，標題、段落和文本格式是構成頁面內容的基石。它們不僅有助于傳達信息，還能通過組織和強調內容來提升用戶體驗。本文將詳細介紹這些元素的使用方法，并提供實際例子。

標題（Headings）

標題是用來定義網頁中不同部分的標題。在HTML中，標題標簽從<h1>到<h6>，其中<h1>表示最高的層級，通常用于主標題，而<h6>表示最低的層級。為了保證良好的SEO實踐和無障礙訪問，應保證標題層級的邏輯順序。

使用實例：

<h1>歡迎來到我的博客</h1>
<h2>最新文章</h2>
<h3>Web開發的未來趨勢</h3>
<h4>前言</h4>
<h4>主要內容</h4>
<h4>結論</h4>
<h3>如何提高JavaScript技能</h3>

在這個例子中，<h1>用于最主要的標題，<h2>用于區分頁面中的主要部分，<h3>用于文章標題，<h4>用于文章內部的小節。

段落（Paragraphs）

段落是文本的基本單元，用于組織和展示連續的文本內容。在HTML中，<p>標簽用于定義段落。合理的段落分割有助于讀者更好地理解和吸收信息。

使用實例：

<p>在今天的數字時代，網頁開發已經成為了一個不斷演變的領域。隨著新技術的出現，開發者需要不斷學習和適應。</p>

<p>JavaScript是構建現代網頁不可或缺的一部分。為了成為一名更優秀的前端開發者，提高JavaScript技能是非常重要的。</p>

在這個例子中，兩個<p>標簽分別定義了兩個獨立的段落，每個段落都是一個完整的思想單元。

文本格式

文本格式用于強調或區分網頁中的文本內容。HTML提供了多種標簽來改變文本的樣式和意義，包括但不限于加粗、斜體、下劃線、上標和下標等。

加粗（Bold）

<strong>和<b>標簽用于加粗文本，但<strong>通常表示重要性，而<b>僅用于視覺上的加粗。

使用實例：

<p>重要提示：<strong>請不要在任何情況下泄露您的密碼。</strong></p>
<p>這是一個<b>加粗</b>的文本示例。</p>

斜體（Italic）

<em>和<i>標簽用于斜體文本，<em>表示強調，而<i>僅用于斜體樣式。

使用實例：

<p>當我們談論<em>用戶體驗</em>時，我們指的是用戶與產品交互的整體感受。</p>
<p>這是一個<i>斜體</i>的文本示例。</p>

下劃線和刪除線

``標簽用于下劃線文本，而<del>標簽用于顯示文本已被刪除或更改。

使用實例：

<p>請閱讀使用條款了解更多信息。</p>
<p>原價<del>99.99美元</del> 現價69.99美元。</p>

上標和下標

<sup>和<sub>標簽用于創建上標和下標文本，常用于科學公式和腳注。

使用實例：

<p>水的化學式是H<sub>2</sub>O。</p>
<p>愛因斯坦的質能方程式E=mc<sup>2</sup>。</p>

結論

合理使用標題、段落和文本格式可以極大地提升網頁內容的可讀性和專業性。通過明確的層級結構和強調重要內容，你可以幫助用戶快速找到他們需要的信息。記住正確使用這些基本元素，你的網頁將更加吸引人且功能強大。

在線咨詢

上一篇：前端入門-html 文字格式、標題與段落
下一篇：簡單小程序：登錄頁面（html）

您的項目需求

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

整合營銷服務商

HTML 實例

單行裁剪

使用 Flexbox 模塊的第一個版本進行多行裁剪

Line-Clamp 重獲新生

非官方的行數限制現在成為官方的了

使用 Sass Mixin 結合舊方法和新方法

行數限制的瀏覽器支持

標題（Headings）

使用實例：

段落（Paragraphs）

使用實例：

文本格式

加粗（Bold）

使用實例：

斜體（Italic）

使用實例：

下劃線和刪除線

使用實例：

上標和下標

使用實例：

結論

您的項目需求