整合营销服务商

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

免费咨询热线:

HTML 基础的<table> 标签

一个简单的 HTML 表格,包含两列两行:

<table border="1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>0</td>

</tr>

</table>


浏览器支持

所有主流浏览器都支持 <table> 标签。


标签定义及使用说明

<table> 标签定义 HTML 表格

一个 HTML 表格包括 <table> 元素,一个或多个 <tr>、<th> 以及 <td> 元素。

<tr> 元素定义表格行,<th> 元素定义表头,<td> 元素定义表格单元。

更复杂的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。


HTML 4.01 与 HTML5之间的差异

在 HTML5 中,仅支持 "border" 属性,并且只允许使用值 "1" 或 ""。


属性

属性描述
alignleftcenterrightHTML5 不支持。HTML 4.01 已废弃。 规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)#xxxxxxcolornameHTML5 不支持。HTML 4.01 已废弃。 规定表格的背景颜色。
border1""规定表格单元是否拥有边框。
cellpaddingpixelsHTML5 不支持。规定单元边沿与其内容之间的空白。
cellspacingpixelsHTML5 不支持。规定单元格之间的空白。
framevoidabovebelowhsideslhsrhsvsidesboxborderHTML5 不支持。规定外侧边框的哪个部分是可见的。
rulesnonegroupsrowscolsallHTML5 不支持。规定内侧边框的哪个部分是可见的。
summarytextHTML5 不支持。规定表格的摘要。
widthpixels%HTML5 不支持。规定表格的宽度。

全局属性

<table> 标签支持 HTML 的全局属性。


事件属性

<table> 标签支持 HTML 的事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

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/

SS:

{

word-break: keep-all;

word-wrap: break-word; // 只对英文起作用,以单词作为换行依据。

white-space: pre-wrap; //只对中文起作用,强制换行。

text-align:justify; //css英文语句的两端对齐:

text-justify:inter-ideograph;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

禁止换行:

{

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis; //让多出的内容以省略号...来表达。但是这个属性主要用于IE等浏览器,Opera浏览器用-o-text-

white-space:nowrap;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

单行文字如果超出2行用省略号表示:

.text {

width:220px;

word-break:break-all;

display:-webkit-box;

-webkit-line-clamp:2;

-webkit-box-orient:vertical;

overflow:hidden;

}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

word-break 属性规定自动换行的处理方法。

normal 使用浏览器默认的换行规则。

break-all 允许在单词内换行。

keep-all 只能在半角空格或连字符处换行。

word-break 当行尾放不下一个单词时,决定单词内部该怎么摆放。

break-all: 强行上,挤不下的话剩下的就换下一行显示呗。

keep-all: 放不下了,那就另起一行展示,再放不下,也不退缩。

word-wrap 当行尾放不下时,决定单词内是否允许换行

normal: 单词太长,换行显示,再超过一行就溢出显示。

break-word: 当单词太长时,先尝试换行,换行后还是太长,单词内还可以换行。

white-space: normal | nowrap | pre | pre-wrap | pre-line

  • 1

pre: 保留所有的空格和回车,且不允许折行。

pre-wrap: 保留所有的空格和回车,但是允许折行。

pre-line: 会合并空格,且允许折行


text-align:justify 是专门为英文设计的,用来实现英文语句的两端对齐

text-justify :

auto | distribute |distribute-all-lines | distribute-center-last | inter-cluster | inter-ideograph | inter-word | kashida | newspaper

  • 1
  • 2

auto :

默认值。允许浏览器代理用户确定使用的两端对齐法则。

distribute :

处理空格很像newspaper ,适用于东亚文档。尤其是泰文。

distribute-all-lines :

两端对齐行的方式与distribute 相同,也同样不包含两段对齐段落的最后一行。适用于表意字文档

distribute-center-last :

未实现。

inter-cluster :

调整文本无词间空格的行。这种模式的调整是用于优化亚洲语言文档的。

inter-ideograph :

为表意字文本提供完全两端对齐。他增加或减少表意字和词间的空格

inter-word :

通过增加字之间的空格对齐文本。该行为是对齐所有文本行最快的方法。它的两端对齐行为对段落的最后一行无效

kashida :

通过拉长选定点的字符调整文本。这种调整模式是特别为阿拉伯脚本语言提供的。需要IE5.5+支持

newspaper :

通过增加或减少字或字母之间的空格对齐文本。是用于拉丁文字母表两端对齐的最精确格式

说明:设置或检索对象内调整文本使用的对齐方式。因为这个属性影响文本布局,所以text-align 属性必须被设置为justify 。此属性只作用于块对象。此属性对于currentStyle 对象而言是只读的。对于其他对象而言是可读写的。对应的脚本特性为textJustify 。

以上方法对chrome(360也是chrome内核)无效,还需再加上下面代码:

word-break:break-all