HTML 文本格式化

HTML文本格式化通常使用一系列特定的標簽來改變文本的外觀或結構。這些標簽可以控制文本的字體、大小、顏色、對齊方式等，也可以用來標記文本的邏輯結構（如段落、標題、列表等）。除了這些基本的格式化標簽，HTML還支持通過CSS（級聯樣式表）來更精細和靈活地控制文本的格式和樣式。

參考文檔：https://www.cjavapy.com/article/3306/

1、標題

HTML中，文本格式化和結構化主要通過一系列標簽來完成，其中標題（Headings）標簽是最常用于定義文本格式的元素之一。HTML提供了六級標題標簽，從 <h1> 到 <h6>，<h1> 表示最高級別的標題，而 <h6> 表示最低級別的標題。這些標題標簽不僅幫助改善網頁的結構和可讀性，還對搜索引擎優化（SEO）至關重要，因為搜索引擎使用這些標簽來識別網頁上的不同部分和內容的層次結構。每個級別的標題都有默認的樣式，通常是不同的大小和加粗，以顯示它們的層次結構

<h1>這是一個 H1 標題</h1>
<h2>這是一個 H2 標題</h2>
<h3>這是一個 H3 標題</h3>
<h4>這是一個 H4 標題</h4>
<h5>這是一個 H5 標題</h5>
<h6>這是一個 H6 標題</h6>

2、段落與換行

HTML中，文本格式化通常涉及使用特定的標簽來控制文本的顯示方式。段落和換行是兩個基本但非常重要的文本格式化概念。用<p>創建段落，<br>插入換行。

1）段落 (<p> 標簽)

<p> 標簽自帶上下邊距，用以區分不同的段落。
<p>這是一個段落。</p>
<p>這是另一個段落。</p>

2）換行 (<br> 標簽)

<br> 標簽只是簡單地添加一個換行點，不添加任何額外的空間或邊距，并且通常用于詩歌或地址等需要精確控制換行位置的文本。

這是文本行的開始。<br>這是新的一行，但在同一個段落內。

3、強調文本

使用<em>和<strong>強調文本。HTML中，強調文本通常使用 <em> 和 <strong> 標簽來實現。這兩個標簽既有語義意義，也影響文本的表現形式。

<em> 標簽用于表示強調文本，通常表現為斜體，用以表示文本的輕度強調。

<strong> 標簽用于表示更強烈的強調，通常表現為加粗，表示文本的高度強調。

<p>This is <em>emphasized</em> text.</p>
<p>This is <strong>strongly emphasized</strong> text.</p>

4、列表

HTML 提供了兩種主要的列表類型：有序列表（<ol>）和無序列表（<ul>）。兩種類型都使用列表項（<li>）來定義列表中的實際項。

1）有序列表

有序列表以 <ol> 標簽開始。每個列表項都放在 <li> 標簽內。列表是有序的，也就是每個項目都是編號的。這適用于項目順序很重要的列表，如食譜或待辦事項列表。

<ol>
  <li>第一項</li>
  <li>第二項</li>
  <li>第三項</li>
</ol>

2）無序列表

無序列表以 <ul> 標簽開始。像有序列表一樣，每個項都放在 <li> 標簽內。然而，無序列表中的項目不是編號的。使用圓點符號進行表示。這適用于項目順序不重要的列表，如購物清單。

<ul>
  <li>蘋果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

5、使用示例

<!DOCTYPE html>
<html>
<head>
<title>文本格式化示例</title>
</head>
<body>

<h1>HTML 文本格式化</h1>
<p>這是一個<em>斜體</em>和<strong>加粗</strong>的示例。</p>
<p><u>這段文本下劃線</u>和<s>這段文本是刪除線</s>。</p>
<p>化學水分子公式為H<sub>2</sub>O，E=mc<sup>2</sup>。</p>

<pre>
這是預格式化文本，
保留了空格和
換行符。
</pre>

<blockquote>這是一個長引用的示例，可能包含多個段落。</blockquote>
<p>這是一個<q>短引用</q>的示例。</p>

<p>使用<code>HTML</code>和<code>CSS</code>進行網頁設計。</p>
<p>按<kbd>Ctrl</kbd> + <kbd>C</kbd>復制文本。</p>
<p><samp>這是計算機程序的輸出。</samp></p>
<p>在JavaScript中，<var>x</var>可以作為變量。</p>

</body>
</html>

參考文檔：https://www.cjavapy.com/article/3306/

果

方法一：sticky 方式

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }

解釋

.pure-table-wrapper-div:
這個類名應用于包裹表格的 div 元素。它的樣式規則如下：
overflow-x: scroll;: 當內容寬度超出容器寬度時，顯示水平滾動條。這允許用戶在需要時水平滾動查看表格的所有列。

示例 HTML 結構：

<div class="pure-table-wrapper-div"> <table class="pure-table">  </table> </div>

table.pure-table th:first-child, table.pure-table td:first-child: 這兩個選擇器分別針對 .pure-table 類的表格中的第一個表頭單元格（<th>）和第一個數據單元格（<td>）。

它們定義的樣式規則如下：

position: sticky;: 使用黏性定位。黏性定位元素在滾動時會根據設置的 top、bottom、left 或 right 屬性值在特定位置 "粘附"。在本例中，由于定義了 left: 0;，這些元素會在左側邊緣粘附。 left: 0;: 在元素滾動到視口左側邊緣時使其粘附。與 position: sticky; 結合使用。

z-index: 1;: 設置元素的堆疊順序。值越大，元素越靠前。在這種情況下，將第一個單元格設置為 z-index: 1 可確保它在其他表格單元格之上。

background-color: aliceblue;: 為匹配的單元格設置背景顏色。這可以增強視覺效果，使粘附的單元格與其他單元格區分開。
這段 CSS 代碼的主要目的是實現表格的水平滾動，并固定第一列，使其在水平滾動時保持可見。同時，為第一列的單元格設置了背景顏色以增強視覺效果。

總的來說是：

使用 position: sticky; 來固定第一列。在 table.pure-table th:first-child 中設置了 position: sticky; 和 left: 0;，并將 z-index 設為 1，以確保第一列在滾動時會固定在屏幕上方。

完整代碼

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文檔</title>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
        }
    
        table.pure-table th:first-child,
        table.pure-table td:first-child {
            position: sticky;
            left: 0;
            z-index: 1;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>品牌</th>
                    <th>型號</th>
                    <th>隨機字符串</th>
                    <th>說明</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>本田</td>
                    <td>雅閣</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>豐田</td>
                    <td>凱美瑞</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>現代</td>
                    <td>領動</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                    <td>這是一段中文說明文字。</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

中文不換行

要去除表格中最后一列中文的換行效果，可以使用 CSS 的 white-space 屬性，將其設置為 nowrap，這樣文字就不會自動換行了。

添加了以下 CSS 樣式：

table.pure-table td:last-child,
table.pure-table th:last-child {
    white-space: nowrap;
}

這樣，最后一列中文就不會自動換行了。其中 table.pure-table td:last-child 和 table.pure-table th:last-child 選擇器用于指定表格中的最后一列單元格，white-space: nowrap; 則是將 white-space 屬性設置為 nowrap，禁止其自動換行。

小結

position: sticky 是 CSS 中的一種定位方式，可以實現元素在滾動時固定在屏幕上，直到其滾動到指定位置。相對于 position: fixed，position: sticky 有以下優點和缺點：

優點：

不會脫離文檔流，因此不會影響其他元素的布局和位置；
可以在頁面滾動到指定位置時自動固定，無需手動計算位置；
可以在滾動到指定位置后自動取消固定，不會一直占據屏幕空間，避免了 position: fixed 的潛在問題；
可以在固定元素上設置 z-index 屬性，與其他元素進行層級控制。

缺點：

兼容性問題：position: sticky 不是所有瀏覽器都支持，特別是在 IE11 及以下版本中不支持；
在某些情況下可能會存在性能問題，尤其是在滾動時固定的元素較多時，可能會導致卡頓和性能下降；
在某些情況下可能會存在滾動到指定位置時出現抖動的問題，需要通過對元素和容器的尺寸、位置等進行調整來解決。

綜上所述，position: sticky 是一種靈活且易用的定位方式，具有很多優點，但在兼容性和性能方面有一些缺點需要注意。如果要在項目中使用 position: sticky，需要在兼容性和性能方面進行綜合考慮，以確保其正常運行和良好的用戶體驗。

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }

解釋

這段 CSS 代碼主要是為了實現固定表格首列和橫向滾動效果，并且在表格首列添加了固定的寬度。

首先，.pure-table-wrapper-div 是一個包裹表格的 div 元素，通過設置 overflow-x: scroll，實現了橫向滾動的效果。同時，通過設置 margin-left: 5em，在左側添加了 5em 的空白，使得表格不會緊貼在頁面最左側，美觀性更好。

接著，table.pure-table tr td:first-child 和 table.pure-table tr th:first-child 選擇器用于選中表格中的第一列單元格，使用 position: absolute 將其從文檔流中脫離，并使用 width: 5em 指定其寬度為 5em，然后通過 left: 0 將其固定在表格最左側。

這樣，表格的首列就被固定在了左側，不會隨著表格的滾動而移動，同時也添加了固定的寬度，使得表格整體更加美觀和易讀。

總的來說，這段 CSS 代碼實現了表格的固定首列和橫向滾動效果，同時也為表格首列添加了固定的寬度，提高了表格的可讀性和美觀性。

完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./purecss@3.0.0.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        .pure-table-wrapper-div {
            overflow-x: scroll;
            margin-left: 5em;
        }
      
        table.pure-table tr td:first-child,
        table.pure-table tr th:first-child {
            position: absolute;
            width: 5em;
            left: 0;
        }
    </style>
    <div class="pure-table-wrapper-div">
        <table class="pure-table">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>隨機數</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>Honda</td>
                    <td>Accord</td>
                    <td>2009-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Toyota</td>
                    <td>Camry</td>
                    <td>2012-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>Hyundai</td>
                    <td>Elantra</td>
                    <td>2010-QWERTYUIOPASDFGHJKLZXCVBNM</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

小結

CSS 中的 position: absolute 定位方式可以讓元素脫離文檔流，并相對于它的最近的非 static 定位祖先元素進行定位。相對于其他定位方式，position: absolute 有以下優點和缺點：

優點：

可以精確控制元素的位置，可以在任何位置放置元素；
可以與其他元素重疊，實現復雜的布局效果；
可以讓元素脫離文檔流，不會影響其他元素的布局和位置；
可以通過設置 z-index 屬性進行層級控制。

缺點：

不會占據原來的空間，可能會導致其他元素填補其位置，影響頁面布局；
定位時需要手動指定位置，不如其他定位方式使用方便；
在某些情況下，可能會出現元素位置計算錯誤的問題，需要仔細調整位置和尺寸。

綜上所述，position: absolute 是一種靈活且強大的定位方式，可以實現很多獨特的布局效果，但需要注意它可能會對頁面布局和元素位置產生影響。在使用時，需要根據具體情況進行綜合考慮，并在保證頁面布局和元素位置正確的前提下，盡可能地利用其優點實現更好的頁面效果。

言

有天老板找我到辦公室跟我說要做一個商城，商城賣出去東西就有傭金可以拿。我聽著就頭大。老板打開電腦給我看了網站：你看一下這個網站，照著它的流程就可以擁有一個商城了。我靠過去一看，大概了解一下：原來是利用第三方工具就可以構建一個導購網站，只要消費者在網站領取優惠券就會自動跳轉到某bao的購買頁面，購買成功后就可以有傭金了。我看了一下覺得可以，只要不讓我敲代碼一切好說。于是我照著流程構建了一個網站，然后勾選了很多零食進行推廣，然后我就發現了一個問題：我只勾選了一些零食啊，商城怎么還有其它類型的商品?我思索了一下就明白了，這網站還是挺流氓的，還摻雜著其他人的推廣鏈接，我一想這樣不行，轉化率肯定低啊。果不其然，試用了一天就只有5個單子，因為公司的網站還是挺有流量的，所以這轉化率不可能這么低。老板看了一下，覺得沒什么用讓我把商城入口給關了，我只好照做，但是我心里對這流氓網站不服啊，于是我打算自己做一個導購網站。（最后還是要敲代碼(。?_?)/~~~）

想法

在推廣平臺上下載一個商品清單的excel文檔，文檔的內容包含：商品的名稱、商品的主圖鏈接、商品分類、商品價格、商品推廣鏈接.....。
利用python讀取excel，獲得分類、商品信息的json文件。
創建一個html頁面讀取json文件，把分類和商品顯示出來，利用html中的錨點定位，點擊就會滾動到對應的分類商品，就可以選擇心儀的商品下單，從而達到推廣商品的作用了。

行動

1. 安裝xlrd

cmd窗口： pip install xlrd

2.創建index.py，導入模塊

import xlrd

3.打開Excel文件讀取數據

wb= xlrd.open_workbook('文件路徑')

4.獲取表格

sheet1 = wb.sheet_by_index(0) #這里的excel文檔內只有一個表格，0代表第一個

5.獲取表格的行數

rows = sheet1.nrows

6.獲取表格中的類目

商品一級類目

住宅家具

影音電器

美容護膚

廚房電器

運動服/休閑服裝

餐飲具

category0 = sheet1.col_values(4) #獲取列內容(類目)，這里excel文檔的第四列是類目
del category0[0] #刪除列表中的 "商品一級類目"
category = sorted(set(category0),key=category0.index) #類目列表->去除重復

7.整理數據

[ 
 [
 分類名，
 [商品信息]
 ],
 [
 分類名，
 [商品信息]
 ]
]
data = []
for i,v in enumerate(category):
 data.append([v,[]])
for i,v in enumerate(data):
 for x in range(rows):
 if v[0] == sheet1.cell(x,4).value:
 data[i][1].append(sheet1.row_values(x))

8.導出json文件

jsonData = json.dumps(data, ensure_ascii=False)
with open('results.json', 'w',encoding="utf-8") as f:
 f.write(jsonData)

9.運行index.py,獲得json文件

cmd窗口：python index.py

10.創建html頁面，并引用json文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script>//引用jquery
 $(function(){
function color16(){//十六進制顏色隨機
 var r = Math.floor(Math.random()*256);
 var g = Math.floor(Math.random()*256);
 var b = Math.floor(Math.random()*256);
 var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
 return color;
 }
var navo = '';//類目導航
var info = '';//商品內容
$.get('./results.json', function(data) {//請求json文件
 
 $.each(data, function(index, val) {
 navo+="<a href='#"+val[0]+"''>"+val[0]+"</a>　"
 });//把json文件中的類目數組遍歷出來,并用錨定位
 $.each(data, function(index, val) {
 var div_title = "<div id='"+val[0]+"' style='float:left;'>";
 var div_content = "";
 $.each(val[1], function(index, val) {
 div_content+="<div style='background:"+color16()+"' onclick=\"location.href=\'"+val[21]+"\'\" class='pro_img'>"+val[1]+"<span class='money'>￥"+val[6]+"</span><\/div>"
 });
 var div_footer ="</div><br>";
 info+=div_title+div_content+div_footer
 });
$('#nav').html(navo);//把導航顯示出來
$('#content').html(info);//把商品顯示出來
 },'json');
 })
 
 </script>
 <style>
 #content{
 margin-top: 10px
 }
 .money{
 position: absolute;
 left: 0;
 bottom: 0;
 height: 30px;
 line-height: 30px;
 color: #e22a40;
 font-weight: 700
 }
 .pro_img{
 position: relative;
 float: left;
 width: 220px;
 height: 220px;
 line-height: 220px;
 text-align: center;
 border: 1px solid #eee;
 cursor: pointer;
 font-size: 30px;
 white-space:normal; 
 overflow:hidden; /*超過部分不顯示*/
 　　　　　text-overflow:ellipsis; /*超過部分用點點表示*/
 　　　　　white-space:nowrap;*//*不換行
 }
 </style>
</head>
<body>
<div id="nav"></div>
<div id="content"></div>
</body>
</html>

效果

https://fjxasdf.github.io/daogou （github比較卡）

遺留問題

導購頁面沒有樣式，不夠美觀。
沒有顯示商品圖片，由于excel文檔中有1萬條商品信息，把一萬張圖片顯示出來太卡了。

在線咨詢

上一篇：CSS 帶搜索導航欄
下一篇：想學HTML該從何入手？web前端HTML終極指南

您的項目需求

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

整合營銷服務商

HTML 文本格式化

1、標題

2、段落與換行

3、強調文本

4、列表

5、使用示例

方法一：sticky 方式

核心樣式

解釋

完整代碼

中文不換行

小結

【兼容性好】postion 的 absolute 方式【需要指定首列寬度】

核心樣式

解釋

完整代碼

小結

言

想法

行動

效果

遺留問題

您的項目需求