整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
想要在一个页面引入CSS，共有以下3种方式
1、外部样式表
2、内部样式表
3、行内样式表
一、外部样式表
外部样式表是最理想的CSS引入方式，指的是CSS代码和HTML代码都单独放在不同文件种，然后在HTML文档中使用link标签引用CSS样式表
语法：
<link rel="stylesheet" type="text/css" href="文件路径" />
rel表示引入的是一样样式文件（即CSS文件）
type属性取值也是固定的，即"text/css"，表示这是标准的CSS
href属性表示CSS文件的路径，
举例：
说起富文本编辑器，我们大都遇到过，甚至使用过，这种所见即所得的书写方式，以及它灵活的排版，让我们的创作更加流畅和美观。其实你可以把它理解成是把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),
}简单对上面的代码做一下说明：
至此，我们看一下目前解析完成之后，形成的数据结构。
示意图
很好，现在开始集成：
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，并导入富文本编辑器的开发过程，希望能给大家带来启发。
每一次创作都是快乐的，每一次分享也都是有益的，希望能够帮助到你！
谢谢
天说完了css的全部引入方式，今天根据一个综合案例来编写代码。
案例: 新闻页面
制作页面，整体可以分为两步:
1.搭建HTML结构页面
2.修改CSS样式
我们来看下具体的样式:
这就是一个普通的网页展示，对应的代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS样式-综合案例</title>
<style>
body {
/* 字号大小和字体，必须要写 */
font: 16px/28px 'Microsoft YaHei';
}
h1 {
/* 标题文字不加粗，正常展示 */
font-weight: 400;
/* 标题中的文字水平居中 */
text-align: center;
}
.gray {
/* 颜色为淡灰色，整体居中，字体大小小一些，为12px */
color: #888888;
font-size: 12px;
text-align: center;
}
/* 取消下划线 */
a {
text-decoration: none;
}
/* 搜索按钮中搜索两个字的颜色和宽度 */
.search {
color: #666;
width: 170px;
}
/* 按钮样式 */
.btn {
font-weight: 700;
}
/* 对图片的设置 */
.pic {
text-align: center;
}
/* 想要图片居中对齐，需要对图片的父标签<p>添加水平居中的代码 */
.footer {
color: blue;
font-size: 12px;
font-weight: 700;
}
/* 底部展示样式，也是使用class属性 */
</style>
</head>
<body>
<!-- 先写一个标题，建议使用h1 -->
<h1>男子嫌银行服务态度差取走500万，被银行证实</h1>
<!-- 独自一行展示，可以使用div,单独使用class属性来修改 -->
<div class="gray">来源: <a href="htttps://www.baidu.com">北京日报</a> 2021.10.15
<input type="text" value="请输入查询条件..." class="search"> <button class="btn">搜索</button>
</div>
<!-- 还需要将北京日报下面的下划线去掉 -->
<!-- 下面是水平线，现在还没有讲，可以使用<hr>来展示水平线。-->
<hr>
<p>微博大V@sunwear发文炮轰上海银行，声称由于该行服务态度不好，他准备分批将存在该行的几千万元全部取现转移，目前已取500万元带走，所取现金搬上了一辆劳斯莱斯。
上海银行工作人员回复称，的确有这样的事情发生，但也是个别现象。具体情况不是很清楚，已反馈专员跟进处理。</p>
<p>对于事件的经过，一位网友发文称，“该大V疫情期间去网点不愿意戴口罩，所以被保安阻拦。
网点负责人解释了很久，没有用，并且要网点负责人下跪道歉。”sunwear发布回应，否认自己不愿意戴口罩、逼负责人下跪道歉，并建议银行拿出监控看看保安是如何表现的。</p>
<p class="pic">
<img src="011.jpeg" alt="">
</p>
<h4>观察者网表示很赞</h4>
<p>sunwear表示，自己全程一共三句话：忘带了，你们这有么？哪有卖的？“我乖乖的去旁边买了一个口罩回来了。保安全程一句话没有，第一个手势指着我嘴，第二个手势扭着脑袋摆手让我出去，第三个手势挥手一指外面。
我以为他是个哑巴，我没有任何不愿意戴口罩的表现。</p>
<p class="footer">明天会有一个好天气</p>
</body>
</html>
对每一个段落都进行了标注，通过这个案例，将之前学到的HTML和CSS样式都用了一遍。
明天就要上班了，时间过的飞快。
*请认真填写需求信息，我们会在24小时内与您取得联系。
