HTML加固2——文本

顺晟科技

2022-09-15 20:01:46

230

一个网站通过HTML（当然也包括css、js）向用户显示网页内容，学习html如何表示这些内容。

0x01 HTML元素

1.什么是HTML元素

在第一节中在介绍标签的时候为了避免概念的混乱，我们简单介绍了下HTML元素，这里我们就详细开始介绍HTML元素。

HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。 HTML网页实际上就是由许许多多各种各样的HTML元素构成的文本文件，并且任何网页浏览器都可以直接运行HTML文件。所以可以这样说，HTML元素就是构成HTML文件的基本对象，HTML元素可以说是一个统称而已。HTML元素就是通过使用HTML标签进行定义的。

<开始标签> 元素内容 <结束标签>

这就是一个元素：

<p>hacker</p>

2.HTML元素语法

HTML元素语法特点：

HTML 元素以开始标签起始
HTML 元素以结束标签终止
元素的内容是开始标签与结束标签之间的内容
某些 HTML 元素具有空内容（empty content）
空元素在开始标签中进行关闭（以开始标签的结束而结束）
大多数 HTML 元素可拥有属性(下面会讲)

3.HTML元素嵌套示例

再把前面的例子拿出来，大家先看看，下面这个例子中有几个元素

<html>
    <body>
        <p>hacker</p>
    </body>
</html>

答案当然是三个<html><body></body></html>，应该很好理解吧，这就是所谓的嵌套。

4.HTML空元素

HTML元素的内容是开始标签与结束标签之间的内容，而某些 HTML 元素具有空内容（empty content），这种元素被叫做空元素。比如说换行符 。但 是不规范的写法，早先发布的html规范中 、<hr>、<img>等标记元素是无需“封闭自身”的，这就造成了html规范本身的不严谨，所以后来参考了更规范的XML语言的语法推出了xhtml。在xhtml中所有类似 这样的孤立标签都需要自行封闭，具体的做法就是在标签名字的后面跟个“/”，例如 。从逻辑上讲 = ...，这样做的目的是为了尽量减少网页的代码量，同时保持逻辑严谨。

扯了这么多就是想说，请保持规范的写法，以后换行请用 。

前面我们从示例中看出，标签结束以后也有一个换行的动作，那标签和 标签有什么异同呢？

相同之处是 和都是有换行的属性及作用
区别 是只需一个单独使用，而和是一对使用
标签是小换行提行（相当于我们平时文本中输入一个回车），标签是大换行（分段，相当与两个回车）,各行作用。

下面看看两个标签的区别先来个 换行

再来个换行

0x02 HTML属性

某些标签要想按照作者的意愿来实现在网页上，就得需要一定信息的补充，这信息就叫属性，HTML标签可以加上属性的描述。属性提供了有关 HTML 元素的更多的信息。

关于属性有以下语法规则：

是在 HTML 元素的开始标签中定义。
总是以名称和值对应的形式出现，比如：name="value"。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。

我们先举例：

<a href="http://www.baidu.com">hacker</a>

href="http://www.baidu.com"，这一部分就叫做< a>标签的属性，是对< a>标签的补充说明，既指向的网页。这样的标签还有很多，下面我们就来动手做几个练习。

给网页增添背景颜色，也许你已经猜到，这个属性就是属于< body>标签

<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

这三种方式都可以设置背景颜色（上面为黑色），这个属性值可以是十六进制数、RGB 值或颜色名。这里就简单的选择最直观的方式：（颜色名支持aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。）

那么问题来了，既然大多数的标签都有各种各样的属性，那么我们需要全部背下来吗？

这个。。。在我看来，没有必要去特意的拿着所谓的HTML标签属性大全背，背完了说不定你也不会用或者一些属性根本就很难才用得到。在实践中积累才是好方法，在写的过程中你自然知道哪些属性是比较常用，是什么样的用法，多写才是硬道理。

0x03 HTML文本格式化

一般我们在网页中能看见有各种各样的字体、文本样式，这就是文本格式化标签的功劳。下面我们就来学习使用文本格式化标签（比较常用的）

（bold）粗体 < big> （big）大字体 （emphasized）强调字 （italic）斜体 （small）小字体 (strong)加重语气

标签	描述

是不是觉得每写完一句要想换行每次都要加一个换行标签 比较麻烦，下面我们就来介绍一下预格式文本（所谓预格式文本就是指代码页和网页展示是一样的格式，不用额外添加换行符标签就能换行）

< pre>....< /pre>标签的使用

我们就在刚才的文件修改，把后面的换行符都删掉，将其内容丢到<pre>标签中，就可以得到与之前差不多的格式（但是看起来还是有区别的）。

这个标签适用于代码的粘贴，你想过没有，要是没有这个标签，要想控制网页中显示的代码格式，是一件多么难的事。

0x04 HTML样式

上面我们用了各种各样的标签来使HTML文本格式符合我们的意愿，其实有一个属性能帮助我们减少不少的麻烦。

style 提供了一种改变所有 HTML 元素的样式的通用方法。这里可以将，背景颜色，字体样式，字体尺寸，字体颜色，对齐方式一并定义好。下面我们就再来动手写一个HTML文件

看了效果以后是不是有倍感亲切的感觉，以后就不用再单独使用这些标签了，在style中一气呵成。将大部分的文本格式全都处理掉了，想必你的印象会很深。

上一篇：HTML加固——基础下一篇：HTML加固5——汇总

网站建设

Html

HTML加固2——文本

0x01 HTML元素

0x02 HTML属性

0x03 HTML文本格式化

0x04 HTML样式