[编程基础] 常用html标签使用介绍

用html标签使用介绍

本文主要记录常用的html标签使用说明，用起来的时候偶尔查查。

常用html标签列表

标签	英文全拼	作用	特点
<html></html>	html	网页的根标签	所有的标签都要写在这一对根标签里面
<head></head>	head	网页的头标签	包括完档的属性和信息
<body></body>	body	网页的主题	包含文档的所有内容
<div></div>	division	定义一个区域	浏览器通常会在<div>前后放置一个换行符
<!-- 注释 -->	-	注释	单标签
<br>或<br/>	break	换行	单标签，不会在其前后创建空白行
<hr>或<hr/>	horizontal rule	添加水平线	单标签
<img src="">	image	添加图片	单标签
<embed src="">	embed	嵌入外部应用	单标签
<meta>	meta	提供有关页面的元信息	单标签，<meta>标签通常位于<head>区域内
<link>	link	定义文档与外部资源的关系	单标签，<link>标签只能存在于<head>区域内，不过它可出现任何次数。
<p></p>	paragraph	定义段落	自动在其前后创建空白行
<h1> to <h6>	Header 1 to Header 6	定义标题	h1在一个页面里只能出现一次
<strong></strong>	strong	文本加粗	加粗标记该文本
<b></b>	bold	文本加粗	加粗显示文本，不推荐使用
<em></em>	emphasize	文本倾斜	倾斜标记文本
<i></i>	italic	文本倾斜	倾斜显示文本，不推荐使用
<del></del>	delete	文本添加删除线	-
<s></s>	strike	文本添加删除线	不推荐使用
<ins></ins>	insert	文本添加下划线	-
<u></u>	underline	文本添加下划线	不推荐使用
<a href="">填写内容</a>	anchor	添加超链接	最好使用CSS来改变链接的样式
<ul></ul>	unordered list	定义无序列表	通常与<li>标签一起使用
<ol></ol>	ordered list	定义有序列表	通常与<li>标签一起使用
<li></li>	list item	创建列表项	可与各种列表定义标签一起使用
<dl></dl>	definition list	定义描述列表	通常与<dt>和<dd>一起使用
<dt></dt>	definition term	定义条目	定义描述列表的项目
<dd></dd>	definition description	定义描述	对描述列表中的项目进行描述
<table></table>	table	定义HTML表格	尽可能通过样式改变表格外观
<tr></tr>	table row	定义表格的行	一个<tr>标签包含一个或多个<th>或<td>标签
<th></th>	table headline	定义表格每一列的标题	该标签的文本通常呈现为粗体且居中
<td></td>	table data	定义表格中的单元格数据	该标签的文本呈现为普通且左对齐
<caption>表格标题</caption>	caption	定义整个表格的标题	<caption>标签必须直接放在<table>标签后
<input type="">	input	定义输入控件	输入字段可通过多种方式改变，取决于type属性
select	select	定义下拉列表	<select>中的<option>标签定义了列表中的可用选项
<option></option>	option	定义下拉列表中的可用项	<option>标签不可自由定义宽高
<optgroup></optgroup>	options group	定义选项组	<optgroup>标签用于把相关的选项组合在一起
<textarea></textarea>	textarea	定义多行的文本输入控件	文本的默认字体是等宽字体
<form></form>	form	定义表单	<form>可以包含多个元素
<fieldset></fieldset>	field set	定义围绕表单中元素的边框	<legend>为<fieldset>定义标题
<legend></legend>	legend	为<fieldset>定义标题	<legend>通过css设定样式
<progress></progress>	progress	定义运行中的任务进度	<progress>是HTML5中的新标签，<progress>标签不适合用来表示度量衡
<meter></meter>	meter	度量衡	<meter>是HTML5的新标签，<meter>标签不适合用来表示进度条
<audio></audio>	audio	添加音频	<audio>标签是HTML5的新标签
<video></video>	video	添加视频	<video>标签是HTML5的新标签
<source>	source	定义媒介资源	<source>标签是HTML5中的新标签

常用标签使用说明

常用写法：<img src="" alt="" title=""width="" height="">
src：图片的来源（必写属性）
alt：图像不显示时的替代文本
title：鼠标在移动到元素上的文本提示
width/height：图片宽高，没有定义宽高的时候，图片按照百分之百比例显示，更改图片的宽度或者高度，图片等比例缩放

普通用法

常用写法：<a href="" title="" target="">填写内容</a>
href：去往的路径（必写属性）
title：鼠标在移动到元素上的文本提示
target：规定在何处打开路径

_blank：新页面打开
_parent：在父窗口中打开链接
_self：当前页面跳转（默认值）
_top：在当前窗体打开链接，并替换当前的整个窗体

当href的值为javascript：void(0); 或 javascript：; ，表示超链接不做任何事情，不做任何跳转
当href的值为#，表示超链接为空链接，点击此链接时会跳转到页首的位置

锚点链接

锚点链接通过点击超链接，自动跳转到我们设置锚点的位置，类似于word的目录导航。建立锚点的元素必须要有id或name属性，最好两个都有。这里只跳转本页面元素，其他页面跳转自行搜索。
具体做法如下：

给目标元素设置id值，如<p id="id1"></p>
设置锚点超链接，锚点的超链接路径一定包含"#"，后面紧跟元素的id或者name，如<a href="#id1"></a>

示例如下。为了显示效果，通过使用lorem自动生成随机文本（具体使用方法搜索，一般直接输入就行），lorem*50表示重复lorem15次。

<a href="#id2">a</a>

  <p id="id1">
    (lorem*15)
  </p>

     (lorem*15)

  <p id="id2">
     (lorem*15)
  </p>

超链接全局设置

在页面head中写入代码可以设置超链接的全局跳转设置

<head>
  <!-- 让页面所有的超链接新页面打开 -->
  <base target="_blank">  
</head>

charset编码

常用写法： <meta charset="UTF-8">
charset：定义文档的字符编码

ASCII/ANSI/Unicode：英语
GBK：亚洲通用字符集
GB2312：中文简体
Big5：台澳港繁体
UTF-8：世界通用字符集

name

关键字

常用写法： <meta name="keywords" content="">
描述：告诉搜索引擎网页的关键字，尽量将重要的关键词放在前面

网页描述

常用写法： <meta name="keywords" content="">
描述：告诉搜索引擎网页的主要内容

作者

常用写法： <meta name="author" content="">
描述：告诉搜索引擎网页的作者

文件检索

常用写法： <meta name="robots" content="all | none | index | noindex | follow | nofollow">
描述：有时候会有一些站点内容，不希望被ROBOTS抓取而公开。为了解决这个问题，ROBOTS开发界提供了两个办法：一个是robots.txt，另一个是The Robots META标签。
content: 文件检索方式

all：文件将被检索，且页面上的链接可以被查询（默认值）
none：文件将不被检索，且页面上的链接不可以被查询
index：文件将被检索；
noindex：文件将不被检索，但页面上的链接可以被查询
follow：页面上的链接可以被查询
nofollow：文件将不被检索，页面上的链接可以被查询

网页自动跳转

常用写法： <meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />
描述：网页5秒后自动跳转到谷歌主页
url：为空则刷新本页
常用写法：
描述：规定当前文档与被链接文档/资源之间的关系
rel：定义当前文档与被链接文档之间的关系。rel 是 relationship的英文缩写（必写属性）
type：规定被链接文档的类型
href：链接的文件路径
示例：

链接外部样式表：<link rel="stylesheet" type="text/css" href="a.css">
设置网页icon图标：<link rel="icon" href="a.ico">

列表

无序列表

无序列表使用粗体圆点进行标记。简单示例如下。

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        ...
    </ul>

有序列表

有序列表使用数字进行标记，我们可以通过整数值start指定列表编号的起始值。简单示例如下。

<ol start="2">
        <li>a</li>
        <li>b</li>
        <li>c</li>
        ...
    </ol>

描述列表

通过描述列表自定义列表，列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。简单示例如下。

<dl>
        <dt>A</dt> <!-- 小标题 -->
            <dd>A1</dd> <!-- 解释标题 -->
            <dd>A2</dd> <!-- 解释标题 -->
        <dt>B</dt> <!-- 小标题 -->
            <dd>B1</dd> <!-- 解释标题 -->
            <dd>B2</dd> <!-- 解释标题 -->
    </dl>

表格

基础表格

常用写法：<table width="" height="" border="" cellspacing="" cellpadding=""></table>
width：表格宽度
height：表格高度
border：边框宽度
cellspacing：单元格间距
cellpadding：内容与边框间距

简单示例如下。

<table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
<caption>表格标题</caption> <!-- 定义表格标题 -->

<tr>
    <!-- 定义表格的行 -->
    <td>A1</td> <!-- 定义表格该行第一列中的数据 -->
    <td>B1</td>
    <td>C1</td>
</tr>
<tr>
    <!-- 定义表格的行 -->
    <th>A</th> <!-- 定义表格每一列的标题 -->
    <th>B</th>
    <th>C</th>
</tr>
<tr>
    <td>A2</td>
    <td>B2</td>
    <td>C2</td>
</tr>
</table>

单元格合并

常用写法：<td colspan=“” rowspan=“”></td>
描述：告诉表格该单元格可以横跨colspan列，纵跨rowspan行

简单示例如下。

<table border="2" cellspacing="1px" width="400px" height="100px">
<caption><strong>表格标题</strong></caption> <!-- 定义表格标题 -->
<tr height="100">
    <!-- 定义表格的行 -->
    <td colspan="2">A1</td> <!-- 定义该行可以横跨两列 -->
    <td>B1</td>
</tr>

<tr height="100">
    <td>A2</td>
    <td>B2</td>
    <td rowspan="2">C</td> <!-- 定义该行可以横跨两行 -->
</tr>

<tr height="100">
    <td>A3</td>
    <td>B3</td>
</tr>
</table>

对于<input>不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。

文本输入框

常用写法：<input type="text" name="" maxlength="" readonly="" disabled="" value="">
type：规定输入字段的类型
name：输入框的名字
maxlength：输入文本长度
readonly：输入框是否只读
disabled：输入框是否未激活
value：输入框默认值

简单示例如下。

<input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用户名">

密码输入框

常用写法：<input type="password" name="">
type：规定输入字段的类型
name：输入框的名字
密码输入框的其他参数和文本输入框一样

简单示例如下。

<input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密码">

单选框

常用写法：<input type="radio" name="" checked="checked">
type：规定输入字段的类型
name：输入框的名字
checked：设定该输入框被预先选定
想要多个单选框只能有一个被选中，设置所有单选框的name值相同即可实现

示例一，两个单选框都可以被选中

<div>
    <input type="radio" name="man" checked="checked">男
</div>
<div>
    <input type="radio" name="woman">女
</div>

示例二，两个单选框只能有一个被选中

<div>
    <input type="radio" name="gender" checked="checked">男
  </div>
  <div>
    <input type="radio" name="gender">女
  </div>

下拉列表

常用写法：<select multiple=""></select>
multiple：当该属性为true时，可选择多个选项。

常用写法：<optgroup label=""></optgroup>
label：设定选项组的描述。

常用写法：<option value="" selected="">选项值</option>
value：定义送往服务器的选项值。
selected：当该属性为true时，该选项被默认选择。

示例一，单选下拉列表

<select>
    <option value="a">a</option>
    <option value="b">b</option>
    <option value="c" selected='selected'>c</option>  <!-- 默认选中 -->
  </select>

示例二，带组合的单选下拉列表

<select>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1">b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

示例三，带组合的多选下拉列表

<select multiple=”multiple”>
    <optgroup label="A">
      <option value="a1">a1</option>
      <option value="a2" selected='selected'>a2</option>
    </optgroup>
    <optgroup label="B">
      <option value="b1" selected='selected'>b1</option>
      <option value="b2">b2</option>
    </optgroup>
  </select>

多选框

常用写法：<input type="checkbox" checked="">
type：规定输入字段的类型
checked：设定该输入框被预先选定

简单示例如下。

<input type="checkbox"  checked="checked">A
  <input type="checkbox">B

文本框

常用写法：<textarea cols="" rows="" placeholder=""></textarea>
cols：控制可见文本的列数
rows：控制可见文本的行数
placeholder：提示字符

简单示例如下。

<textarea cols="5" rows="2" placeholder="text"></textarea>

文本上传控件

常用写法：<input type="file" accept=""/>
accept：规定提交的文件的类型

简单示例如下。

<input type="file" accept="image/gif, image/jpeg"/>

其他类型按钮

<input type="submit">文件提交按钮
  <input type="button" value="">普通按钮
  <input type="image" src="">图片按钮
  <input type="reset">重置按钮
  <input type="url">网址控件
  <input type="date">日期控件 
  <input type="time">时间控件
  <!--email提供了邮箱的完整验证，必须包含@和后缀，如果不满足验证，会阻止表单提交-->
  <input type="email">邮件控件
  <input type="number" step="3">数字控件
  <input type="range" step="100">滑块控件
  <input type="color">颜色控件

表单

示例一，普通表单

<form>
    First name: <input type="text" name="fname"><br>
    Last name: <input type="text" name="lname"><br>
    <input type="submit" value="提交">
  </form>

示例二，带分组信息表单

<form>
    <fieldset>
      <legend>Personalia:</legend>
      First name: <input type="text" name="fname"><br>
      Last name: <input type="text" name="lname"><br>
      <input type="submit" value="提交">
    </fieldset>

    First nameA: <input type="text" name="fname"><br>
    Last nameB: <input type="text" name="lname"><br>
  </form>

与

<progress>与<meter>主要区别和用法见HTML5 progress和meter控件

常用写法：<progress value="" max=""></progress>
value：规定进程的当前值
max：规定需要完成的值

简单示例如下。

<progress value="60" max="100"></progress>

<meter>

常用写法：<meter min="" low="" high="" max="" value="" optimum=""></meter>
value：规定度量的当前值
max：规定被界定为高的值的范围
min：规定被界定为低的值的范围
low：规定被界定为低的值的范围
high：规定被界定为高的值的范围
optimum：规定度量的最优值
具体使用见meter标签改变颜色规则

简单示例如下

<meter min="0" low="40" high="90" max="100" value="91"></meter>
<meter min="0" low="40" high="90" max="100" value="90"></meter>

多媒体资源

<audio>

常用写法：<audio src="" controls autoplay loop></audio>
src：规定音频文件的url
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<audio src="demo.mp3" controls autoplay></audio>

<video>

常用写法：<video src="" width="" height="" poster="" controls autoplay loop></video>
src：规定视频文件的url
width：设置视频播放器的宽度（pixels）
height：设置视频播放器的高度（pixels）
poster：设置视频未播放时展示的画面
controls：如果出现该属性，显示音频播放器的控制面板（比如播放/暂停按钮）
autoplay：如果出现该属性，自动播放音频
loop：如果出现该属性，循环播放音频

简单示例如下

<video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

常用写法：<source src="" type="">
src：规定媒体文件的url
type：规定媒体文件的类型
因为不同浏览器支持的媒体格式不同，当添加媒体文件时，需要考虑浏览器是否支持它们。我们可以准备多种不同格式的媒体文件，然后使用source 标签，让浏览器从上到下选择支持的媒体格式

简单示例如下

<video controls>
    <source src="demo.mp3" type="audio/mp3">
    <source src="demo.mp4" type="video/mp4">
    您的浏览器不支持video元素。
  </video>

特殊字符

HTML特殊字符编码对照表

参考

HTML基础
HTML 参考手册
HTML中标签对应的英文
meter标签改变颜色规则
HTML5 progress和meter控件

述

说起富文本编辑器，我们大都遇到过，甚至使用过，这种所见即所得的书写方式，以及它灵活的排版，让我们的创作更加流畅和美观。其实你可以把它理解成是把word等软件的功能转成在浏览器里面使用，这样就能通过其他的一些手段进行管理，并融入到相应系统中。但是由于实现方式和语言等的不同，存在着一些出入。

比如我现在正在使用的，也就是此刻我写这篇文章的工具，就是一个富文本编辑器。其实富文本编辑器有很多种，它们的功能类似、产出目的类似、使用方式也类似，只不过在丰富程度上稍有差别，今天的CKEditor5就是其中的一款。

示意图

可以看到，还是很好看的，美而不失实用。它的功能特别多，只不过有一些功能是要收费的，也就是说它只开源了一部分，或者说对于一些更高级的吊吊的功能你需要少买一点零食或者玩具。不过这些基础功能已经足够用了，它的可插拔式插件集成功能非常强大。

示意图

就像上面所示，你可以随意的添加或删除一个扩展功能，下面有非常多的待继承插件供你选择。

示意图

但是像上面这种的，带有premium的插件，那你就需要支付一定的费用才可以使用啦。

细心的你相信一眼就看出来了，这就是我们今天要讲的内容：从word中导入。

这是一个高级功能，虽然不是很常用，但是有一些特殊的场景或者需求，我们可能希望从编辑好的word中，通过导入的方式来让用户在网页中继续编辑它，并尽可能的保留内容和格式。

一个是自己资金不是很充裕，再一个是想自己去动手做做，因此就决定独立实现这样一个功能。自己做的，当然可以随便免费用。

示例

在开始之前，我们先看下做这个功能在完成之后需要满足的效果，虽然这个功能官网是收费的，但是为了给大家演示，官网也提供了示例，我们先看下官网的成品：

效果图

我们先根据提示，在官网示例上面下载了它提供的一个word，然后用CKEditor5的导入word功能，把这个word导入到编辑器中，解析完成之后就看到了效果，它的还原度很高了，官网应该是特意制作的示例word文件，里边包含了段落、列表、图片、表格等等多个技术点。这些都是我们接下来要实现的内容，官网这复杂程度，钱花的挺值。

为了能让大家有一个对比，这里我把原版word也展示出来给你们看一下：

效果图

可以对比着感受下，不过还是有一些地方不太一样的，比如我对这个原文档做一点点更改。体现就稍微有一点略微的不同，但是这个不是毛病，只是看着有点别扭，我给两张图，先来原word的图，这是我改过的列表：

示意图

再来一张官网导入之后渲染的效果图：

示意图

主要有：1.列表距左边的距离。2.列表项之间多出空白。3.不能显示中文序号。

实现

我们要想实现这样一个插件，首先想到有没有现成的word转html的前端或者后端插件，因为富文本编辑器是可以设置内容的，并且这个内容实质就是html代码，然后再在这个基础上进行集成开发。

因为我有自己的node后端，所以如果用后端做的话就找了一些关于node的word转html插件，一共找到了docx2html、mammoth、word2html等，但是经过测试都不太理想，于是决定放弃，换一个思路，我们可以解析word，然后根据word规范，自己生成出html。

word是流式文件，能任意编辑并且回显，那么肯定有一套约定在里边，能够保存格式并重新读取，就看它有没有开放给我们，幸好，docx这个x就是告诉我们，可以的，因为它就是xml的意思，符合xml规范。

好了，我们可以找出两个辅助插件：

第一个就是用来解压缩用的adm-zip包。

第二个就是用来解析xml文件的xml-js包。

为什么这样呢？这是因为一个docx文件，就是一个压缩包，我们把docx文件重命名为zip格式。然后就可以解压看下里面的内容：

示意图

这就是解压之后的目录，里面包含着所有的word内容，我们一会揭开它的面纱。其中一个关键目录就是word文件夹：

示意图

可以看到有很多的xml文件，它们就规定了word的回显机制和渲染逻辑。

还有一个media文件夹，我们看下它里面有什么：

示意图

可以明显的看到有两张图片，这两张图片就是我们在原word中使用的图片，它就隐藏在这里。

另外，其中document.xml文件存储了整个word的结构和内容，numbering.xml文件规定了列表如何渲染，styles.xml告诉了需要应用哪些样式。

我们就以document.xml文件做一个简单的说明，其余不做过多展开：

示意图

文件前面是对该xml的一些声明，body中包含了一个个的段落，也就是w:p。其中又包含了多个系列w:r，系列中就存储着我们的文本，比如上图红框中我圈出的部分。

而且里面还存储着段落属性w:pPr和系列属性w:rPr。我们就是通过对这些一对对的xml标签，来对word进行解析，找出它的渲染规则。

首先使用上面提到的两个包，非常简单：

const dir = join(process.cwd(), 'public/temp/word/' + fn)
const zip = new AdmZip(dir)
let contentXml = zip.readAsText('word/document.xml')
const documentData = xml2js(contentXml)
contentXml = zip.readAsText('word/numbering.xml')
const numberingData = contentXml ? xml2js(contentXml) : {
  elements: ''
}
contentXml = zip.readAsText('word/_rels/document.xml.rels')
const relsData = xml2js(contentXml)
contentXml = zip.readAsText('word/styles.xml')
const styleData = xml2js(contentXml)
let ent = zip.getEntries()
let ind = fn.lastIndexOf('.')
let flag = false
for(let i = 0; i < ent.length; i++) {
  let n = ent[i].entryName
  if(n.substring(0, 11) === 'word/media/') {
    flag = true
    zip.extractEntryTo(n, join(process.cwd(), 'public/temp/word/' + fn.substring(0, ind)), false, true)
  }
}
return {
  documentXML: documentData?.elements[0]?.elements[0]?.elements,
  numberingXML: numberingData?.elements[0]?.elements,
  relsXML: relsData?.elements[0]?.elements,
  styleXML: styleData?.elements[0]?.elements.slice(2),
  imagePath: fn.substring(0, ind),
}

简单对上面的代码做一下说明：

先说返回值，由于我们解析完word之后，需要将xml文件读取出来，根据语义再转成html，因此我们需要整个document.xml中的内容，因此返回documentXML，而且还要知道列表的渲染机制，因此也需要返回numberingXML，同样我们需要获取到文档中用了哪些图片，以及它们的位置，所以要返回relsXML，并且我要把对应的图片放到另一个地方存储起来以供使用，所以也要返回imagePath，最后整个文档的样式，也就是styleXML也要返回。
第1行就是获取到上传的word路径，这里是我自己做了一个上传方法。
第2行通过adm-zip插件对文件进行解压和读取。
第3行就是指定获取document.xml文件的内容。
第4行就是用xml-js对读取到的内容进行解析，之后的代码同理，只是去解析不同的文件而已。
第13行读取该压缩文件中的目录结构。
第16行至第22行就是找出word里面用到的所有图片，并将它们存储在其他位置。

至此，我们看一下目前解析完成之后，形成的数据结构。

示意图

很好，现在开始集成：

import { Editor } from '/lib/ckeditor5/ckeditor'
import loadConfig from './config'
import filePlugin from './file'
import './style.scss'
loadConfig(Editor)
const container: any = ref(null)
let richEditor: any = null
onMounted(() => {
  Editor.create(container.value, {
    extraPlugins: [filePlugin]
  }).then((editor: any) => {
    richEditor = editor
  }).catch((error: any) => {
    console.log(error.stack)
  })
})

第1行，导入Editor，也就是我们一会要用的富文本编辑器，然后第9行通过create方法创建它，接收的两个参数分别表示：渲染的容器与配置的插件。

因为CKEditor5填入图片的时候，需要自己手动实现一个插件方法，因此我们要把它配置进来，因为跟咱们要讲的内容无关，就不展开了，官方文档说的很清楚了。

第5行，我在初始化编辑器之前，先去加载了一些配置，其中一个就是引入word转pdf的功能，由于CKEditor5插件扩展很容易，直接在Editor的builtinPlugins属性数据里面加上我们实现的插件就可以，所以我们直接讲插件的开发：

import { ButtonView, Plugin } from '/lib/ckeditor5/ckeditor'
import { postData } from '@/request'
import { DocumentWordProcessorReference } from '@/common/svg'
import { serverUrl } from '@/company'
import { ElMessage } from 'element-plus'
import { arrayToMapByKey } from '@/utils'
let numberingList: any = null
let relsList: any = null
let styleList: any = null
let imageUrl: any = null
let docInfo: any = {
  author: {},
  currentAuthor: '',
  currentIndex: -1
}
const colorList = ['#d13438', '#0078d4', '#5c2e91', 'chocolate', 'aquamarine', 'lawngreen', 'hotpink', 'darkblue', 'darkslateblue', 'blueviolet', 'firebrick', 'coral', 'darkcyan', 'indigo', 'greenyellow', 'deeppink', 'indianred', 'blue', 'darkgray', 'darkmagenta', 'darkgreen', 'chartreuse', 'darksalmon', 'dimgray', 'crimson', 'darkolivegreen', 'gold', 'aqua', 'lightcoral', 'goldenrod', 'burlywood', 'green', 'darkkhaki', 'forestgreen', 'fushcia', 'darkorchid', 'deepskyblue', 'darkgoldenrod', 'cyan', 'cornflowerblue', 'brown', 'cadetblue', 'darkviolet', 'dodgerblue', 'darkred', 'gray', 'khaki', 'bisque', 'darkorange', 'darkslategray', 'lightblue', 'darkturquoise', 'darkseagreen']
let BlockType = ''

引入一些必要的组件和方法等，然后定义我们的插件，一定要继承ckeditor5的Plugin：

export default class importFromWord extends Plugin {
}

然后首先在里面实现它的init方法，做一些初始化操作：

init() {
  const editor = this.editor
  editor.ui.componentFactory.add('importFromWord', () => {
    const button = new ButtonView()
    button.set({
      label: '从word导入',
      icon: DocumentWordProcessorReference,
      tooltip: true
    })
    button.on('execute', () => {
      this.input.click()
    })
    return button
  })
}

this.editor就是我们之前使用create创建好的编辑器，通过editor.ui.componentFactory.add给工具栏添加一个按钮，也就是我们要点击导入word的按钮。

示意图

这里面用到了ckeditor5的ButtonView按钮组件生成器，设置它的名称和图标，然后添加一个暴露出来的事件，当点击按钮的时候，触发选择文件弹窗，这个input是我自己写的一个文件上传输入框。

接下来，我们去构造函数中做一些事情，当实例化这个组件的时候，初始化好我们需要的东西：

constructor(editor: any) {
    super(editor)
    this.editor = editor
    this.input = document.createElement('input')
    this.input.type = 'file'
    this.input.style.opacity = 0
    this.input.style.display = 'none'
    this.input.addEventListener('change', (e: any) => {
      const formData: any = new FormData()
      formData.append("upload", this.input.files[0])
      formData.Headers = {'Content-Type':'multipart/form-data'}
      let ms = ElMessage({
        message: "正在解析...",
        type: "info",
      })
      postData({
        service: "lc",
        url: `file/word`,
        data: formData,
      }).then(res => {
        ms.close()
        if (res.data) {
          ElMessage({
            message: "上传文件成功",
            type: "success",
          })
          const { documentXML, numberingXML, relsXML, styleXML, imagePath } = res.data
          numberingList = numberingXML
          relsList = relsXML
          styleList = styleXML
          imageUrl = imagePath
          markList(documentXML)
          const html = listToHTML(documentXML)
          const ckC = this.editor.ui.view?.editable?.element
          const ckP = this.editor.ui.view?.stickyPanel?.element
          if(ckC) {
            let rt = ckC.parentNode.parentNode.parentNode
            rt.style.setProperty('--content-top', docInfo.paddingTop + 'px')
            rt.style.setProperty('--content-right', docInfo.paddingRight + 'px')
            rt.style.setProperty('--content-bottom', docInfo.paddingBottom + 'px')
            rt.style.setProperty('--content-left', docInfo.paddingLeft + 'px')
            rt.style.setProperty('--content-width', docInfo.pageWidth - docInfo.paddingLeft - docInfo.paddingRight + 'px')
          }
          if(ckP) {
            let rt = ckP.parentNode.parentNode.parentNode
            rt.style.setProperty('--sticky-width', docInfo.pageWidth + 'px')
          }
          const div = document.createElement('div')
          div.style.display = 'none'
          div.innerHTML = html
          splitList(div.firstElementChild)
          insertDivToList(div)
          document.body.appendChild(div)
          document.body.removeChild(div)
          this.editor.setData(div.innerHTML)
        } else {
          ElMessage({
            message: "上传文件失败",
            type: "error",
          })
        }
      })
    })
  }

在这里我们主要做了几件事：

首先第4行到第7行定义了一个文件选择器。

然后给这个输入框添加了一个事件。

第9行到第20行我们读取到选择的文件并上传到服务器进行解析。

对返回回来的文档数据，我们首先做一个标记，以方便我们接下来的操作：

function markList(list: any) {
  let cache: any = []
  list.forEach((item: any, index: number) => {
    let isList = false
    if(item.name === 'w:p') {
      let pPr = findByName(item.elements, 'w:pPr')
      if(pPr) {
        let numPr = findByName(pPr.elements, 'w:numPr')
        if(numPr) {
          isList = true
          let ilvl = numPr.elements[0].attributes['w:val']
          let numId = numPr.elements[1].attributes['w:val']
          let c =  cache.at(-1)
          numPr.level = ilvl
          if(c) {
            if(c.ilvl === ilvl && c.numId === numId) {
              cache.pop()
            }else if(c.ilvl === ilvl && c.numId !== numId) {
              numPr.start = true
              c.numPr.end = true
              cache.pop()
            }else if(c.ilvl < ilvl && c.numId === numId) {
              numPr.start = true
              cache.pop()
            }else if(c.ilvl > ilvl && c.numId === numId) {
              c.numPr.end = true
              cache.pop()
            }else if(c.numId !== numId) {
              while(c.ilvl >= ilvl) {
                c.numPr.end = true
                c = cache.pop()
                if(!c) {
                  break
                }
              }
            }
          }else {
            numPr.start = true
          }
          cache.push({
            ilvl,
            numId,
            index,
            numPr
          })
        }
      }
    }
  })
  cache.forEach((c: any) => {
    c.numPr.end = true
  })
}

主要就是对列表进行标记，因为它要做一些特殊化的处理。

拿到数据之后，我们的核心逻辑都在第33行，实现listToHtml进行处理：

function listToHTML(list: any) {
  let html = ''
  list.forEach((item: any, index: number) => {
    let info = getContainer(item)
    html += info
  })
  return html
}

遍历每一项，然后把它们生成的html拼接起来：

function getContainer(item: any) {
  let html = ''
  if(item.name === 'w:p') {
    let n = findByName(item.elements, 'w:pPr')
    let el: any = null
    let pEl: any = null
    let attr: any = {}
    let style = null
    if(n) {
      let ps = findByName(n.elements, 'w:pStyle')
      if(ps) {
        let styleId = getAttributeVal(ps)
        let sy = styleList.find((item: any) => {
          return item.attributes['w:styleId'] === styleId
        })
        let ppr = findByName(sy.elements, 'w:pPr')
        let rpr = findByName(sy.elements, 'w:rPr')
        if(ppr) {
          ppr.elements.forEach((p: any) => {
            if(!findByName(n.elements, p.name)) {
              n.elements.push(p)
            }
          })
        }
        if(rpr) {
          let rs = findsByName(item.elements, 'w:r')
          rs.forEach((r: any) => {
            let rr = findByName(r.elements, 'w:rPr')
            rpr.elements.forEach((p: any) => {
              if(!findByName(rr.elements, p.name)) {
                rr.elements.push(p)
              }
            })
          })
        }
      }
      let info = getPAttribute(n.elements)
      attr = info.attr
      style = info.style
      if(attr.list) {
        let s1: any = {}
        let s2: any = {}
        for(let t in info.style) {
          if(t === 'list-style-type') {
            s1[t] = info.style[t]
          }else{
            s2[t] = info.style[t]
          }
        }
        for(let t in info.liStyle) {
          s1[t] = info.liStyle[t]
        }
        if(attr.order) {
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ol'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }else{
          if(attr.start) {
            if(attr.level !== '0') {
              html += '<li style="list-style-type:none;">'
            }
            html += '<ul'
            html += addStyle(s1)
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }else {
            html += '<li>'
            html += '<p'
            html += addStyle(s2)
          }
        }
      }else{
        html += '<p'
        html += addStyle(info.style)
      }
    }else{
      el = document.createElement('p')
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:ins') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((ins: any) => {
          html += dealWr(ins, 'ins')
        })
      }else if(r.name === 'w:hyperlink') {
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp)
        })
      }else if(r.name === 'w:r') {
        html += dealWr(r)
      }else if(r.name === 'w:commentRangeStart') {
        BlockType = 'comment'
      }else if(r.name === 'w:commentRangeEnd') {
        BlockType = ''
      }else if(r.name === 'w:del') {
        setAuthor(r.attributes['w:author'])
        r.elements.forEach((hyp: any) => {
          html += dealWr(hyp, 'del')
        })
      }
    })
    if(attr.list) {
      if(attr.order) {
        if(attr.end) {
          html += '</p></li></ol>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }else{
        if(attr.end) {
          html += '</p></li></ul>'
          if(attr.level !== '0') {
            html += '</li>'
          }
        }else {
          html += '</p></li>'
        }
      }
    }else {
      html += '</p>'
    }
  }else if(item.name === 'w:tbl') {
    let n = findByName(item.elements, 'w:tblPr')
    if(n) {
      let info = getTableAttribute(n.elements)
      html += '<figure class="table"'
      html += addStyle(info.figureStyle)
      html += '<table'
      html += addStyle(info.tableStyle)
      html += '<tbody>'
    }
    item.elements.forEach((r: any) => {
      if(r.name === 'w:tr') {
        html += dealWtr(r)
      }
    })
    html += '</tbody></table></figure>'
  }else if(item.name === 'w:sectPr') {
    let ps = findByName(item.elements, 'w:pgSz')
    let pm = findByName(item.elements, 'w:pgMar')
    if(ps) {
      docInfo.pageWidth = Math.ceil(ps.attributes['w:w'] / 20 * 96 / 72) + 1
    }
    if(pm) {
      docInfo.paddingTop = pm.attributes['w:top'] / 1440 * 96
      docInfo.paddingRight = pm.attributes['w:right'] / 1440 * 96
      docInfo.paddingBottom = pm.attributes['w:bottom'] / 1440 * 96
      docInfo.paddingLeft = pm.attributes['w:left'] / 1440 * 96
    }
  }
  return html
}

做了一些逻辑判断，和不同标签的特殊处理。

在刚才input事件中的第34行到47行，主要是做一些编辑器大小等外观设置，因为要配置成word中的宽度与边距。

还需要考虑到，列表可能不是连续的，中间可能被一些段落所隔开，因此到这里还需要对生成的html中的列表进行分割，并修复索引问题：

function splitList(el: any) {
  while(el) {
    if(el.tagName === 'OL' || el.tagName === 'UL') {
      let a = el.querySelectorAll('ol > p, ul > p')
      let path: any = []
      a.forEach((item: any) => {
        let p: any = []
        while(item) {
          p.push(item)
          item = item.parentNode
          if(item === el) {
            break
          }
        }
        path.push(p.reverse())
      })
      let cur = el
      let t: number = 0
      path.forEach((p: any) => {
        let list = cur.cloneNode(false)
        let list2 = list
        cur.parentNode.insertBefore(list, cur)
        p.forEach((l: any, ind: number) => {
          let chi = cur.children
          let t = 0
          for(let i = 0; i < chi.length; i++) {
            if(chi[i] !== l) {
              list.append(chi[i])
              t++
              i--
            }else{
              if(cur.tagName === 'OL') {
                let s = cur.getAttribute('start')
                cur.setAttribute('start', s ? (+s + t) : (t + 1))
              }
              if(ind === p.length - 1) {
                let par = chi[i].parentNode
                el.parentNode.insertBefore(chi[i], el)
                if(par.children.length === 0) {
                  par.remove()
                }
                cur = el
              }else{
                cur.setAttribute('start', cur.getAttribute('start') - 1)
                let cl = chi[i].cloneNode(false)
                list.append(cl)
                list = cl
                cur = chi[i]
              }
              break
            }
          }
        })
      })
    }
    el = el.nextElementSibling
  }
}

并且由于CKEditor5会对相邻的列表进行合并等处理，这不是我们想要的，可以在它们中间插入一些div：

function insertDivToList(div: any) {
  let f = div.firstElementChild
  let k = f.nextElementSibling
  while(k) {
    if(f.tagName === 'UL' && k.tagName === 'UL') {
      let d = document.createElement('div')
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else if(f.tagName === 'OL' && k.tagName === 'OL') {
      let d = document.createElement('p')
      d.setAttribute('list-separator', "true")
      f = k
      div.insertBefore(d, f)
      k = f.nextElementSibling
    }else {
      f = k
      k = f.nextElementSibling
    }
  }
}

最后我们用this.editor.setData方法，将刚才生成的html设置到编辑器中去。

到此我们基本就已经把需要的功能实现了。

效果

该来看一下我们所做的工作成果了，首先同样导入CKEditor5官网中的文档：

效果图

可以看到，内容与格式等，基本跟原word一样，与CKEditor5官网的示例也相同。然后我们再用另一个刚才修改过的文件测试一下：

效果图

这个是用咱们刚才开发的插件导入的word的效果图，几乎与原word一模一样，也没有了CKEditor官网中的那几个小问题。

至此，我们针对CKEditor5导入word的功能已经开发完毕，同时我又找了各种类型的word测试，均未发现问题，还原度都非常高。

结语

感谢docx的规范，使得我们自己解析word成为可能，虽然不可能100%还原word的格式，但是能够将它导入到我们的富文本编辑器中，以进行二次创作，这对我们来说是非常方便的。

本次word转html，并导入富文本编辑器的开发过程，希望能给大家带来启发。

每一次创作都是快乐的，每一次分享也都是有益的，希望能够帮助到你！

谢谢

标

文本标签的作用是什么？
有哪些常用的文本标签？
常用的文本标签的使用场合？（重点）
制作简单的文章

文本标签的作用是什么？

我们编写网页的内容都是在body里面。

对于这样子的文章，可以用word很轻松的实现出来。

一篇文章

但是如果直接将文字放到body里面，就会达不到排版的效果，因为浏览器会将他识别为一段话，所以我们需要给文字定义格式。

浏览器直接识别为一段话

常用的文本标签

1.标题标签

作用：定义一篇文章的标题；被搜索引擎收录

用法：通过 h1 、h2、h3、h4、h5、h6 标签进行定义

<h1>你才不是一个没有故事的女同学</h1>

注意：<h1> 定义最大的标题。 <h6> 定义最小的标题；请确保将 HTML 标题标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题

标题标签

2.段落标签

作用：定义一个段落

用法：通过 p标签进行定义

<p>我是一个段落</p>

段落标签

3.换行标签

作用：强制换行

用法：通过 br标签进行定义

<p>我是一个<br>段落</p>

换行标签

4.下划线标签

作用：分隔内容

用法：通过hr标签进行定义

<hr>

思维导图

文本标签

更多前端教程，敬请关注微信公众号：前端旺

在线咨询

上一篇：css实现小数点星级评分
下一篇：一小时教会你HTML5加js打造一个响应式炫酷动态的太阳系

您的项目需求

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

整合营销服务商

[编程基础] 常用html标签使用介绍

用html标签使用介绍

常用html标签列表

常用标签使用说明

列表

表格

与

多媒体资源

特殊字符

参考

述

示例

实现

效果

结语

文本标签的作用是什么？

常用的文本标签

思维导图

您的项目需求