HTML格式化标记

格式化

>格式化标记通常只能是产生几种不同文本的样式，但在语义上它们各自有着自己的特点

>如果你只是想有着一些自己的文本样式，可以尝试使用“常用html标记”里格式化的内容或css样式表

>但是这样会对搜索引擎不友好

>所以我们强调使用语义化标签，提供给浏览器的语义信息越多，浏览器就可以越好地把这些信息展示给用户。

## `<abbr></abbr>`

作用：用于指示该标签内的内容是一个缩写

注意点：

1. 常与全局属性title配合使用，这样可以在鼠标移动到该处时显示全称

`The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.`

2. 在浏览器内渲染会使其在内容底部加上短虚线

## `<address></address>`

作用：用于定义文档或文章作者/拥有者的联系信息

>如果 `<address>` 元素位于 `<body>` 元素内，则它表示文档联系信息。

>如果 `<address>` 元素位于 `<article>` 元素内，则是它表示文章的联系信息。

注意点：

1. address元素中的文本通常呈现为斜体，大多数浏览器会在address元素前后换行

2. address元素不应该用于描述通讯地址，除非它是练习信息的一部分

3. address元素元素通常连同其他信息被包含在footer元素中

```

Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>

Visit us at:<br>

Example.com<br>

Box 564, Disneyland<br>

USA

</address>

```

## `<b></b>`

作用：定义粗体文本

## `<bdi></bdi>`

作用：定义文本的文本方向，使其脱离周围文本的方向设置

注意点：

1. bdi指的是bidi隔离

2. 在发布用户评论或其它难以控制的内容时，可以使用

3. 需要与全局属性dir配合使用

## `<bdo></bdo>`

作用：定义文字方向

注意点：

1. 请与全局属性dir配合使用

```

<p>

如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；

</p>

Here is some Hebrew text

</bdo>

```

## `<blockquote></blockquote>`

作用：`<blockquote>`标签用于定义块引用

注意点：

1. 标签内的所有文本都会从常规文本中分离出来，一般会上下换行，左右增加外边距，有时也会使用斜体

2. 换而言之，块引用拥有它们自己的空间

3. 可选属性：

`cite=url`规定引用来源

```

WWF's ultimate goal is to build a future where people live in harmony with nature.

</blockquote>

```

主流浏览器均不支持cite属性，但是搜索引擎可以因此获得更多的信息

## `<q></q>`

作用：用于定义短引用

注意点：

1. 浏览器经常在引用内容的人左右添加引号

2. `<q>` 与 `<blockquote>` 的区别:

- `<q>` 标签在本质上与 `<blockquote>` 是一样的。不同之处在于它们的显示和应用。`<q>` 标签用于简短的行内引用。如果需要从周围内容分离出来比较长的部分（通常显示为缩进地块），请使用 `<blockquote>` 标签。

3. 在html4中，firefox和opera中q元素包含的文本必须以引号来开始和结束，但是IE却不支持这个规定，如果我们为了满足其它浏览器而添加了引号，那么在IE中就会显示两组引号。

4. 尽管如此，我们还是推荐使用q元素，因为它在文档处理和信息提取方面将会有很强的效果

5. 可选属性：

`cite=citation`定义引用的出处或来源（citation）

## `<cite></cite>`

作用：表示所含文本是对某个参考文献的引用

注意点：

1. 在显示上与blockquote元素类似，均是斜体

2. 但是它不会有上下左右的外边距

3. 通常情况下还要把引用包裹在一对`<a></a>`标签中，然后把超链接指向引用

`<cite><a href=URL>引用名</a></cite>`

>`<cite>` 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。`<cite>` 标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。

## `<code></code>`

作用：定义计算机代码文本

注意点：

1. code元素并不能将元素内的内容以原样显示，浏览器仍然会解析内容而不跳过

2. code只是给内容的字体改为等宽字体，即它只是将内容转变为暗示这是计算机代码的内容

## `<var></var>`

作用：`<var>` 标签表示变量的名称，或者由用户提供的值。

注意点：

1. 用 `<var>` 标签标记的文本通常显示为斜体。

2. `<var>` 标签是计算机文档中应用的另一个小窍门，这个标签经常与 `<code>` 和 `<pre>` 标签一起使用，用来显示计算机编程代码范例及类似方面的特定元素。

## `<smap></smap>`

作用：用于从一段上下文中抽取一些字符

例子：

`字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。`

效果：

`字符序列 ae 可能会被转换为 æ 连字字符。`

## `<ins></ins>`

作用：定义一个插入文本

注意点：

1. 显示效果是加入下划线

## `<dfn></dfn>`

作用：用于标记特殊术语或短语

注意点：

1. 浏览器通常会将dfn元素内的内容显示为斜体

2. 应当尽量少的使用，比如在技术性的文档中，在第一次提到一个术语时，可以加上dfn元素，而在相同文档的后续中，对于同一个术语，应避免使用dfn

## `<em></em>`

作用：定义一个强调文本

注意点：

1. 在显示结果上，它依然是斜体

2. 如果你只是为了定义一个斜体的内容，可以考虑使用`<i></i>`或css样式表

3. 对于强调的内容应当不宜过多，否则无法突出想要表达的内容

## `<strong></strong>`

作用：定义一个语气更加强烈地强调文本

注意点：

1. 常识告诉我们应较少使用em元素的话，那么strong元素出现的次数应该更少，限制其使用可以让这个标记更加的引人注意和有效

## `<i></i>`

作用：定义一个斜体文本或倾斜的文本

## `<kbd></kbd>`

作用：定义键盘文本

注意点：

1. 显示效果为等宽字体

## `<mark></mark>`(HTML5)

作用：定义带有记号的文本

注意点：

1. 与加粗不同，它会将文字加上背景色

## `<meter></meter>`(HTML5)

作用：定义已知范围或分数值内的标量测量，也被称为gauge（尺度）

注意点：

1. 这是一个html5的新标签，假如你把文档类型声明为html4或以下和xhtml，标签本身的效果将会受到影响

2. `<meter>`标签不应用于指示进度条的进度，如果标记进度，请使用`<progress></progress>`标签

可用属性：

1. form=form_id-->规定meter元素所属的一个或多个表单

2. high=number-->规定被视作高的值的范围

3. low=number-->规定被视作高的值的范围

4. max=number-->规定范围的最大值

5. min=number-->规定范围的最小值

6. optimum=number-->规定度量的优化值

7. value=number-->必须。规定度量的当前值

```

```

## `<progress></progress>`(HTML5)

作用：标示任务的进度（进程）

`<progress value="22" max="100"></progress> `

注意点：

1. 需要与js结合使用，来显示任务的进度

2. progress标签不适合使用来表示度量衡，这种情况请使用meter元素来替代

可用属性：

max=number-->规定任务一共需要多少工作

value=number-->规定任务已经完成多少工作

## `<pre></pre>`

作用：用于定义预格式化的文本，即通常会保留空格和换行，文本会呈现为等宽字体

注意点：

1. pre元素常用于表示计算机的源代码，但是计算机的源代码（html）直接放入浏览器仍会解析（需要使用`<`和`>`等符号实体）

2. 会导致内容截断的标签绝不能包含在pre元素中，如标题、p元素、address元素

3. 可选的属性：

`width=number`定义每行的最大字符数

## `<ruby></ruby>`

作用：可用于定义一个ruby注释（中文注音或字符）

注意点：

1. ruby元素与rt元素一同使用

2. ruby元素由需要一组字符和一个提供信息的rt元素组成

3. 还包括一个可选的rp元素，定义浏览器不支持ruby元素时显示的内容

## `<rt></rt>`

作用：定义字符的解释或发音

## `<rp></rp>`

作用：定义浏览器不支持ruby元素时显示的内容

## `<s></s>`

作用：定义加删除线的文本

注意点：

1. `<s>`标签是`<strike>`标签的缩写版本，但html4和xhtml中已经不再赞成使用它了，就是说，它早晚有一天会消失

2. 请使用`<del></del>`替代它

## `<del></del>`

作用：给元素中的内容上加上删除线

注意点：

1. 请与`<ins></ins>`标签配合使用，来描述文档中的更新与修正

2. 可选的属性：

- cite=URL

- datetime=YYYMMDD （定义文本被删除的日期和时间）

## `<small></small>`

作用：标签内的元素呈现小号字体的效果

注意点：

1. 如果被包裹字体已经是最小号的字体了，那这个标签将不起任何作用

2. `<small></small>`是可以嵌套的，从而把文字连续的缩小，直到到达最小的一号字

## `<sup></sup>`

作用：标签中的内容会以当前文本流中字符高度的一般来显示（上标）

注意点：

1. 虽然显示效果与文本流中其他元素不一样，但是它们的字体字号都是一样的

2. 这个标签在向文档添加注脚以及表示方程式中的指数时非常有效，如果与`<a></a>`标签结合使用可以创建出很好的超链接注脚

## `<sub></sub>`

作用：标签中的内容会以当前文本流中字符高度的一般来显示（下标）

## `<template></template>`

作用：可以作为一个容器，但是它并不会存在于DOM树中

注意点：

1. 多用于包裹一段代码，对其绑定事件，使其可以控制是否隐藏

2. 一个检查方法：

```

if (document.createElement("template").content) {

document.write("Your browser supports template!");

} else {

document.write("您的浏览器不支持 template！");

}

```

## `<u></u>`

作用：定义下划线文本

注意点：

1. 应尽量避免使用，用户可能会把它混淆为一个超链接

## `<time></time>`(HTML5)

作用：定义一个公历的时间或日期，时间和时区偏移是可选的

可选的属性：

1. datetime=datetime-->规定日期/时间。否则由元素内容给定日期时间

2. pubdate=pubdate-->指示 `<time>` 元素中的日期 / 时间是文档（或 `<article>` 元素）的发布日期。

## `<wbr>`(HTML5)

一段带有 Word Break Opportunity 的文本：

```

<p>

如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request 对象。

</p>

```

作用：Word Break Opportunity (`<wbr>`) 规定在文本中的何处适合添加换行符。

注意点：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 `<wbr>` 元素来添加 Word Break Opportunity（单词换行时机）。

种反爬虫手段被广泛应用在一线互联网企业的产品中，例如汽车资讯类网站、小说类网站等文字密度较大的站点。在开始学习之前，我们先来看看具体的现象。打开网址：

https://implicit-style-css_0.crawler-lab.com
复制代码

呈现在我们眼前的是这样一个界面：

这次的任务，就是拿到页面上所呈现的内容的文本。在编写爬虫代码之前，我们要做几件事：

确定目标内容的来源，也就是找到响应目标内容的那次请求
确定目标内容在网页中的位置

其实就是最基本的观察和分析。

网络请求方面，打开浏览器调试工具并切换到 Network 面板后，看到页面只加载了 2 个资源：

一个 html 文档和一个 js 文件，想必我们要的内容就在 html 文档中。点击该请求，浏览器开发者工具就会分成两栏，左侧依然是请求记录列表，右侧显示的是指定请求的详情。右侧面板切换到 Response，就可以看到服务器响应的内容：

看样子，我们要的东西就在这次响应正文中。咋一看，我们直接取 class 为 rdtext 的 div 标签下的 p 标签中的文本内容即可。然而事情并没有那么简单，细心的读者可能发现了，响应正文中显示的内容和页面中呈现的文字并不完全相同——响应正文中少了一些标点符号和文字，多了一些 span 标签。例如页面中显示的是：

夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立，团队由爬虫领域中实力强劲的多名开发者组成：崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东。
复制代码

而响应正文中看到的是：

<p>夜幕团队 NightTeam 于 2019 年 9 月 9 日正式成立<span class="context_kw0"></span>团队由爬虫领域中实力强劲<span class="context_kw1"></span>多<span class="context_kw21"></span>开发者组成：崔庆才、周子淇、陈祥安、唐轶飞、冯威、蔡晋、戴煌金、张冶青和韦世东<span class="context_kw2"></span>
</p>
复制代码

这句话中，被 span 标签替代的有逗号、的字、名字。整体看一遍，发现这些 span 标签都带有 class 属性。

明眼人一看就知道，又是利用了浏览器渲染原理做的反爬虫措施。不明所以的读者请去翻阅《Python3 反爬虫原理与绕过实战》。

既然跟 span 和 class 有关，那我们来看一下 class 属性到底设置了什么。class 名为 context_kw0 的 span 标签样式如下：

.context_kw0::before {
    content: "，";
}
复制代码

再看看其他的，class 属性为 context_kw21 的 span 标签样式如下：

.context_kw21::before {
    content: "名";
}
复制代码

原来被替换掉的文字出现在这里！看到这里，想必聪明的你也知道是怎么回事了！

解决这个问题的办法很简单，只需要提取出 span 标签 class 属性名称对应的 content 值，然后将其恢复到文本中即可。

属性名有个规律：context_kw + 数字。也就是说 context_kw 有可能是固定的，数字是循环出来的，或者是数组中的下标？大胆猜想一下，假设有这么一个字典：

{0: "，", 1: "的",  21: "名"}
复制代码

那么将 context_kw 与字典的键组合，就得到了 class 的名称，对应的值就作为 content，这好像很接近了。中高级爬虫工程师心中都明白：在网页中，能干出如此之事唯有借助 JavaScript。不明白的读者请去翻阅《Python3 反爬虫原理与绕过实战》。

那就搜一下吧！

唤起浏览器调试工具的全局搜索功能，输入 context_kw 并会车。然后在搜索结果中寻找看上去有用的信息，例如：

发现 JavaScript 代码中出现了 context_kw，关键的信息是 .context_kw + i + _0xea12('0x2c')。代码还混淆了一下！看不出的读者可以找作者韦世东报名《JavaScript 逆向系列课》，学完就能够很快找到看上去有用的代码，并且看懂代码的逻辑。

这里手把手带读一下这些 JavaScript 代码。第一段，也就是 977 行代码原文如下：

var _0xa12e = ['appendChild', 'fromCharCode', 'ifLSL', 'undefined', 'mPDrG', 'DWwdv', 'styleSheets', 'addRule', '::before', '.context_kw', '::before{content:\x20\x22', 'cssRules', 'pad', 'clamp', 'sigBytes', 'YEawH', 'yUSXm', 'PwMPi', 'pLCFG', 'ErKUI', 'OtZki', 'prototype', 'endWith', 'test', '8RHz0u9wbbrXYJjUcstWoRU1SmEIvQZQJtdHeU9/KpK/nBtFWIzLveG63e81APFLLiBBbevCCbRPdingQfzOAFPNPBw4UJCsqrDmVXFe6+LK2CSp26aUL4S+AgWjtrByjZqnYm9H3XEWW+gLx763OGfifuNUB8AgXB7/pnNTwoLjeKDrLKzomC+pXHMGYgQJegLVezvshTGgyVrDXfw4eGSVDa3c/FpDtban34QpS3I=', 'enc', 'Latin1', 'parse', 'window', 'location', 'href', '146385F634C9CB00', 'decrypt', 'ZeroPadding', 'toString', 'split', 'length', 'style', 'type', 'setAttribute', 'async', 'getElementsByTagName', 'NOyra', 'fgQCW', 'nCjZv', 'parentNode', 'insertBefore', 'head'];
        (function (_0x4db306, _0x3b5c31) {
            var _0x24d797 = function (_0x1ebd20) {
                while (--_0x1ebd20) {
                    _0x4db306['push'](_0x4db306['shift']());
                }
            };
复制代码

往下延伸阅读，还能看到 CryptoJS 这个词，看到它就应该晓得代码中使用了一些加密解密的操作。

第二段，1133 行代码原文如下：

for (var i = 0x0; i < words[_0xea12('0x18')]; i++) {
            try {
                document[_0xea12('0x2a')][0x0][_0xea12('0x2b')]('.context_kw' + i + _0xea12('0x2c'), 'content:\x20\x22' + words[i] + '\x22');
            } catch (_0x527f83) {
                document['styleSheets'][0x0]['insertRule'](_0xea12('0x2d') + i + _0xea12('0x2e') + words[i] + '\x22}', document[_0xea12('0x2a')][0x0][_0xea12('0x2f')][_0xea12('0x18')]);
            }
        }
复制代码

这里循环的是 words，然后将 words 元素的下标和对应元素组合，这和我们猜想的是非常接近的，现在要找到 words。

怎么找？

又不会吗？

搜索就可以了，顺着搜索结果看，找到了定义 words 的代码：

var secWords = decrypted[_0xea12('0x16')](CryptoJS['enc']['Utf8'])[_0xea12('0x17')](',');
var words = new Array(secWords[_0xea12('0x18')]);
复制代码

按照这个方法，我们最后发现 CSS 的 content 的内容都是数组 _0xa12e 中一个经过加密的元素先经过 AES 解密再经过一定处理后得到的值。

捋清楚逻辑之后，就可以开始抠出我们需要的 JS 代码了。

这个代码虽然经过混淆，但还是比较简单的，所以具体的抠代码步骤就不演示了，这里提示一下在抠出代码之后两个需要改写的点。

第一个是下图中的异常捕获，这里判断了当前的 URL 是否为原网站的，但调试时，在 Node 环境下执行是没有 window 对象、document 对象的，如果不做修改会出现异常，所以需要把带有这些对象的代码注释掉，例如下面 if 判断语句：

try {
	if (top[_0xea12('0x10')][_0xea12('0x11')][_0xea12('0x12')] != window[_0xea12('0x11')]['href']) {
	top['window'][_0xea12('0x11')]['href'] = window[_0xea12('0x11')][_0xea12('0x12')];
}
复制代码

其他的地方还需要自己踩坑。

修改完后就可以获取到所有被替换过的字符了，接下来只需要把它们替换进 HTML 里就可以还原出正常的页面，replace 就不演示了噢。

反爬虫原理

例子中用到的是 ::before，下方文字描述了它的作用：

在 CSS 中，::before 用于创建一个伪元素，其将成为匹配选中的元素的第一个子元素。常通过 content 属性来为一个元素添加修饰性的内容。
引用自：developer.mozilla.org/zh-CN/docs/…

举个例子，新建一个 HTML 文档，并在里面写上如下内容：

<q>大家好，我是咸鱼</q>，<q>我是 程序员中的一员</q>
复制代码

然后为 q 标签设置样式：

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}
复制代码

完整代码如下（写给没有 HTML 基础的朋友）：

<style>

q::before { 
  content: "«";
  color: blue;
}
q::after { 
  content: "»";
  color: red;
}

</style>
<q>大家好，我是咸鱼</q>，<q>我是 程序员中的一员</q>
复制代码

我们在样式中，为 q 标签加上了 ::before 和 ::after 属性，并设置了 content 和对应的颜色。于是乎，在被q 标签包裹着的内容前会出现蓝色的《符号，而后面会出现红色的》符号。

简单易懂吧！

小结

本文简单介绍了隐式 Style–CSS 在反爬虫中的应用，并通过一个简单的实例学习了如何应对这种情况，相信尝试过的你已经清楚地知道下次碰到这种反爬的时候该如何破解了。

当然呢，这个例子还不够完善，没有完全覆盖到隐式 Style–CSS 在反爬虫中的所有应用方式，如果读者朋友对这类反爬虫有兴趣的话，不妨多找几个例子自己动手试试，也欢迎通过留言区与我交流讨论。

最后，小编想说：我是一名python开发工程师，

整理了一套最新的python系统学习教程，

想要这些资料的可以关注私信小编“01”即可（免费分享哦）希望能对你有所帮助

lt;marquee>...</marquee>普通卷动

<marquee behavior=slide>...</marquee>滑动

<marquee behavior=scroll>...</marquee>预设卷动

<marquee behavior=alternate>...</marquee>来回卷动

<marquee direction=down>...</marquee>向下卷动

<marquee direction=up>...</marquee>向上卷动

<marquee direction=right></marquee>向右卷动

<marquee direction=left></marquee>向左卷动

<marquee loop=2>...</marquee>卷动次数

<marquee width=180>...</marquee>设定宽度

<marquee height=30>...</marquee>设定高度

<marquee bgcolor=FF0000>...</marquee>设定背景颜色

<marquee scrollamount=30>...</marquee>设定卷动距离

<marquee scrolldelay=300>...</marquee>设定卷动时间

<!>字体效果

<h1>...</h1>标题字(最大)

<h6>...</h6>标题字(最小)

<b>...</b>粗体字

<strong>...</strong>粗体字(强调)

<i>...</i>斜体字

<em>...</em>斜体字(强调)

<dfn>...</dfn>斜体字(表示定义)

<u>...</u>底线

<ins>...</ins>底线(表示插入文字)

<strike>...</strike>横线

<s>...</s>删除线

<del>...</del>删除线(表示删除)

<kbd>...</kbd>键盘文字

<tt>...</tt> 打字体

<xmp>...</xmp>固定宽度字体(在文件中空白、换行、定位功能有效)

<plaintext>...</plaintext>固定宽度字体(不执行标记符号)

<listing>...</listing> 固定宽度小字体

<font color=00ff00>...</font>字体颜色

<font size=1>...</font>最小字体

<font style =font-size:100 px>...</font>无限增大

<!>区断标记

<hr>水平线

<hr size=9>水平线(设定大小)

<hr width=80%>水平线(设定宽度)

<hr color=ff0000>水平线(设定颜色)

<br>(换行)

<nobr>...</nobr>水域(不换行)

<p>...</p>水域(段落)

<center>...</center>置中

<!>连结格式

<base href=位址>(预设好连结路径)

<a href=位址></a>外部连结

<a href=位址 target=_blank></a>外部连结(另开新视窗)

<a href=位址 target=_top></a>外部连结(全视窗连结)

<a href=位址 target=页框名></a>外部连结(在指定页框连结)

<!>贴图/音乐

<img src=图片位址>贴图

<img src=图片位址 width=180>设定图片宽度

<img src=图片位址 height=30>设定图片高度

<img src=图片位址 alt=提示文字>设定图片提示文字

<img src=图片位址 border=1>设定图片边框

<bgsound src=MID音乐档位址>背景音乐设定

<!>表格语法

<table aling=left>...</table>表格位置,置左

<table aling=center>...</table>表格位置,置中

<table background=图片路径>...</table>背景图片的URL=就是路径网址

<table border=边框大小>...</table>设定表格边框大小(使用数字)

<table bgcolor=颜色码>...</table>设定表格的背景颜色

<table borderclor=颜色码>...</table>设定表格边框的颜色

<table borderclordark=颜色码>...</table>设定表格暗边框的颜色

<table borderclorlight=颜色码>...</table>设定表格亮边框的颜色

<table cellpadding=参数>...</table>指定内容与格线之间的间距(使用数字)

<table cellspacing=参数>...</table>指定格线与格线之间的距离(使用数字)

<table cols=参数>...</table>指定表格的栏数

<table frame=参数>...</table>设定表格外框线的显示方式

<table width=宽度>...</table>指定表格的宽度大小(使用数字)

<table height=高度>...</table>指定表格的高度大小(使用数字)

<td colspan=参数>...</td>指定储存格合并栏的栏数(使用数字)

<td rowspan=参数>...</td>指定储存格合并列的列数(使用数字)

<!>分割视窗

<frameset cols="20%,*">左右分割,将左边框架分割大小为20%右边框架的大小浏览器会自动调整

<frameset rows="20%,*">上下分割,将上面框架分割大小为20%下面框架的大小浏览器会自动调整

<frameset cols="20%,*">分割左右两个框架

<frameset cols="20%,*,20%">分割左中右三个框架

<分割上下两个框架

<frameset rows="20%,*,20%">分割上中下三个框架

<! - - ... - -> 注解

<a href target> 指定超连结的分割视窗

<a href=#锚的名称> 指定锚名称的超连结

<a href> 指定超连结

<a name=锚的名称> 被连结点的名称

<address>....</address> 用来显示电子邮箱地址

<b> 粗体字

<base target> 指定超连结的分割视窗

<basefont size> 更改预设字形大小

<bgsound src> 加入背景音乐

<big> 显示大字体

<blink> 闪烁的文字

<body text link vlink> 设定文字颜色

<body> 显示本文

<br> 换行

<caption align> 设定表格标题位置

<caption>...</caption> 为表格加上标题

<center> 向中对齐

<cite>...<cite> 用於引经据典的文字

<code>...</code> 用於列出一段程式码

<comment>...</comment> 加上注解

<dd> 设定定义列表的项目解说

<dfn>...</dfn> 显示"定义"文字

<dir>...</dir> 列表文字标签

<dl>...</dl> 设定定义列表的标签

<dt> 设定定义列表的项目

<em> 强调之用

<font face> 任意指定所用的字形

<font size> 设定字体大小

<form action> 设定户动式表单的处理方式

<form method> 设定户动式表单之资料传送方式

<frame marginheight> 设定视窗的上下边界

<frame marginwidth> 设定视窗的左右边界

<frame name> 为分割视窗命名

<frame noresize> 锁住分割视窗的大小

<frame scrolling> 设定分割视窗的卷轴

<frame src> 将html档加入视窗

<frameset cols> 将视窗分割成左右的子视窗

<frameset rows> 将视窗分割成上下的子视窗

<frameset>...</frameset> 划分分割视窗

<h1>~<h6> 设定文字大小

<head> 标示文件资讯

<hr> 加上分格线

<html> 文件的开始与结束

<i> 斜体字

<img align> 调整图形影像的位置

<img alt> 为你的图形影像加注

<img dynsrc loop> 加入影片

<img height width> 插入图片并预设图形大小

<img hspace> 插入图片并预设图形的左右边界

<img lowsrc> 预载图片功能

<img src border> 设定图片边界

<img src> 插入图片

<img vspace> 插入图片并预设图形的上下边界

<input type name value> 在表单中加入输入栏位

<isindex> 定义查询用表单

<kbd>...</kbd> 表示使用者输入文字

<li type>...</li> 列表的项目 ( 可指定符号 )

<marquee> 跑马灯效果

<menu>...</menu> 条列文字标签

<multiple> 可同时选择多项的列表栏

<noframe> 定义不出现分割视窗的文字

<ol>...</ol> 有序号的列表

<option> 定义表单中列表栏的项目

<p align> 设定对齐方向

<p> 分段

<person>...</person> 显示人名

<pre> 使用原有排列

<samp>...</samp> 用於引用字

<select>...</select> 在表单中定义列表栏

<small> 显示小字体

<strike> 文字加横线

<strong> 用於加强语气

<sub> 下标字

<sup> 上标字

<table border=n> 调整表格的宽线高度

<table cellpadding> 调整资料栏位之边界

<table cellspacing> 调整表格线的宽度

<table height> 调整表格的高度

<table width> 调整表格的宽度

<table>...</table> 产生表格的标签

<td align> 调整表格栏位之左右对齐

<td bgcolor> 设定表格栏位之背景颜色

<td colspan rowspan> 表格栏位的合并

<td nowrap> 设定表格栏位不换行

<td valign> 调整表格栏位之上下对齐

<td width> 调整表格栏位宽度

<td>...</td> 定义表格的资料栏位

<textarea name rows cols> 表单中加入多少列的文字输入栏

<textarea wrap> 决定文字输入栏是自动否换行

<th>...</th> 定义表格的标头栏位

<title> 文件标题

<tr>...</tr> 定义表格美一行

<tt> 打字机字体

<u> 文字加底线

<ul type>...</ul> 无序号的列表 ( 可指定符号 )

<var>...</var> 用於显示变数

在线咨询

上一篇：静态网页爬虫①
下一篇：前端利器！让AI根据手绘原型生成HTML - 教程+代码

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

HTML格式化标记

反爬虫原理

小结

您的项目需求