整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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 有以下优点和缺点:

优点:

  1. 不会脱离文档流,因此不会影响其他元素的布局和位置;
  2. 可以在页面滚动到指定位置时自动固定,无需手动计算位置;
  3. 可以在滚动到指定位置后自动取消固定,不会一直占据屏幕空间,避免了 position: fixed 的潜在问题;
  4. 可以在固定元素上设置 z-index 属性,与其他元素进行层级控制。

缺点:

  1. 兼容性问题:position: sticky 不是所有浏览器都支持,特别是在 IE11 及以下版本中不支持;
  2. 在某些情况下可能会存在性能问题,尤其是在滚动时固定的元素较多时,可能会导致卡顿和性能下降;
  3. 在某些情况下可能会存在滚动到指定位置时出现抖动的问题,需要通过对元素和容器的尺寸、位置等进行调整来解决。

综上所述,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 有以下优点和缺点:

优点:

  1. 可以精确控制元素的位置,可以在任何位置放置元素;
  2. 可以与其他元素重叠,实现复杂的布局效果;
  3. 可以让元素脱离文档流,不会影响其他元素的布局和位置;
  4. 可以通过设置 z-index 属性进行层级控制。

缺点:

  1. 不会占据原来的空间,可能会导致其他元素填补其位置,影响页面布局;
  2. 定位时需要手动指定位置,不如其他定位方式使用方便;
  3. 在某些情况下,可能会出现元素位置计算错误的问题,需要仔细调整位置和尺寸。

综上所述,position: absolute 是一种灵活且强大的定位方式,可以实现很多独特的布局效果,但需要注意它可能会对页面布局和元素位置产生影响。在使用时,需要根据具体情况进行综合考虑,并在保证页面布局和元素位置正确的前提下,尽可能地利用其优点实现更好的页面效果。

有天老板找我到办公室跟我说要做一个商城,商城卖出去东西就有佣金可以拿。我听着就头大。老板打开电脑给我看了网站:你看一下这个网站,照着它的流程就可以拥有一个商城了。我靠过去一看,大概了解一下:原来是利用第三方工具就可以构建一个导购网站,只要消费者在网站领取优惠券就会自动跳转到某bao的购买页面,购买成功后就可以有佣金了。我看了一下觉得可以,只要不让我敲代码一切好说。于是我照着流程构建了一个网站,然后勾选了很多零食进行推广,然后我就发现了一个问题:我只勾选了一些零食啊,商城怎么还有其它类型的商品?我思索了一下就明白了,这网站还是挺流氓的,还掺杂着其他人的推广链接,我一想这样不行,转化率肯定低啊。果不其然,试用了一天就只有5个单子,因为公司的网站还是挺有流量的,所以这转化率不可能这么低。老板看了一下,觉得没什么用让我把商城入口给关了,我只好照做,但是我心里对这流氓网站不服啊,于是我打算自己做一个导购网站。(最后还是要敲代码(。・_・)/~~~)

想法

  1. 在推广平台上下载一个商品清单的excel文档,文档的内容包含:商品的名称、商品的主图链接、商品分类、商品价格、商品推广链接.....。
  2. 利用python读取excel,获得分类、商品信息的json文件。
  3. 创建一个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比较卡)

遗留问题

  1. 导购页面没有样式,不够美观。
  2. 没有显示商品图片,由于excel文档中有1万条商品信息,把一万张图片显示出来太卡了。