维亿CMS资源网,免费分享和下载
当前位置: 首页 > CMS建站 > Html是什么意思?详解Html的特点、结构、标签及编辑工具

Html是什么意思?详解Html的特点、结构、标签及编辑工具

匿名站长 CMS建站
扫码手机访问

Html是什么意思

一、Html是什么意思

Html是Hyper Text Markup Language英文首字母的缩写,中文翻译为超文本标记语言, 是一种标记语言。HTML是一种基础技术,常与CSS、Javascript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。HTML描述了一个网站的结构语义随着线索的呈现,使之成为一种标记语言而非编程语言。

HTML元素是构建网站的基石。HTML允许嵌入图像与对象,并且可以用于创建交互式表单,它被用来结构化信息——例如标题、段落和列表等等,也可用来在一定程度上描述文档的外观和语义。HTML的语言形式为尖括号包围的HTML元素(如),浏览器使用HTML标签和脚本来诠释网页内容,但不会将它们显示在页面上。

HTML可以嵌入如JavaScript的脚本语言,它们会影响HTML网页的行为。网页浏览器也可以引用层叠样式表(CSS)来定义文本和其它元素的外观与布局。维护HTML和CSS标准的组织万维网联盟(W3C)鼓励人们使用CSS替代一些用于表现的HTML元素。

二、Html的特点

Html包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等,其主要特点如下:

1、简易性:超文本标记语言版本升级采用超集方式,从而更加灵活方便。

2、可扩展性:超文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超文本标记语言采取子类元素的方式,为系统扩展带来保证。

3、平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因。

4、通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

三、Html的结构

标准的超文本标记语言文件都具有一个基本的整体结构,标记一般都是成对出现(部分标记除外例如:
),即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。

1、标记符,说明该文件是用超文本标记语言(本标签的中文全称)来描述的,它是文件的开头;而,则表示该文件的结尾,它们是超文本标记语言文件的开始标记和结尾标记。

2、头部内容

这2个标记符分别表示头部信息的开始和结尾。头部中包含的标记是页面的标题、序言、说明等内容,它本身不作为内容来显示,但影响网页显示的效果。

3、主体内容

网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。

下面是一个典型的网页源码的结构划分:

                // Html 开始标示

                // Html 头标示

Hello  // 设置网页标题

               // 头结束标示

                // 主体开始标示

Hello world!!!

// 放置Hello word!!!文本

               // 主体结束标示

               // Html结束标示

注意:写完代码记得将格式保存为.html(推荐)、.htm、.xhtml。

四、Html标签及作用

标记类型译名或意义作用备注
文件标记
文件声明让浏览器知道这是 HTML 文件
开头提供文件整体资讯
</td><td>●</td><td>标题</td><td>定义文件标题,将显示于浏览顶</td><td></td></tr><tr><td width="114" valign="top"><body></td><td>●</td><td>本文</td><td>设计文件格式及内文所在</td><td></td></tr><tr><td width="114" valign="top">排版标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><!--注解--></td><td>○</td><td>说明标记</td><td>为文件加上说明,但不被显示</td><td></td></tr><tr><td width="114" valign="top"><p></td><td>○</td><td>段落标记</td><td>为字、画、表格等之间留一空白行</td><td></td></tr><tr><td width="114" valign="top"><br></td><td>○</td><td>换行标记</td><td>令字、画、表格等显示于下一行</td><td></td></tr><tr><td width="114" valign="top"><hr></td><td>○</td><td>水平线</td><td>插入一条水平线</td><td></td></tr><tr><td width="114" valign="top"><center></td><td>●</td><td>居中</td><td>令字、画、表格等显示于中间</td><td>反对</td></tr><tr><td width="114" valign="top"><pre></td><td>●</td><td>预设格式</td><td>令文件按照原始码的排列方式显示</td><td></td></tr><tr><td width="114" valign="top"><p></td><td>●</td><td>区隔标记</td><td>设定字、画、表格等的摆放位置</td><td></td></tr><tr><td width="114" valign="top"><nobr></td><td>●</td><td>不折行</td><td>令文字不因太长而绕行</td><td></td></tr><tr><td width="114" valign="top"><wbr></td><td>●</td><td>建议折行</td><td>预设折行部位</td><td></td></tr><tr><td width="114" valign="top">字体标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><strong></td><td>●</td><td>加重语气</td><td>产生字体加粗,bold的效果</td><td></td></tr><tr><td width="114" valign="top"><b></td><td>●</td><td>粗体标记</td><td>产生字体加粗的效果</td><td></td></tr><tr><td width="114" valign="top"><em></td><td>●</td><td>强调标记</td><td>字体出现斜体效果</td><td></td></tr><tr><td width="114" valign="top"><i></td><td>●</td><td>斜体标记</td><td>字体出现斜体效果</td><td></td></tr><tr><td width="114" valign="top"><tt></td><td>●</td><td>打字字体</td><td>courier字体,字母宽度相同</td><td></td></tr><tr><td width="114" valign="top"><u></td><td>●</td><td>加上底线</td><td>加上底线</td><td>反对</td></tr><tr><td width="114" valign="top"><h1></td><td>●</td><td>一级标题标记</td><td>变粗变大加宽,程度与级数反比</td><td></td></tr><tr><td width="114" valign="top"><h2></td><td>●</td><td>二级标题标记</td><td>将字体变粗变大加宽</td><td></td></tr><tr><td width="114" valign="top"><h3></td><td>●</td><td>三级标题标记</td><td>将字体变粗变大加宽</td><td></td></tr><tr><td width="114" valign="top"><h4></td><td>●</td><td>四级标题标记</td><td>将字体变粗变大加宽</td><td></td></tr><tr><td width="114" valign="top"><h5></td><td>●</td><td>五级标题标记</td><td>将字体变粗变大加宽</td><td></td></tr><tr><td width="114" valign="top"><h6></td><td>●</td><td>六级标题标记</td><td>将字体变粗变大加宽</td><td></td></tr><tr><td width="114" valign="top"><font></td><td>●</td><td>字形标记</td><td>设定字形、大小、颜色</td><td>反对</td></tr><tr><td width="114" valign="top"><basefont></td><td>○</td><td>基准字形标记</td><td>设定所有字形、大小、颜色</td><td>反对</td></tr><tr><td width="114" valign="top"><big></td><td>●</td><td>字体加大</td><td>令字体稍为加大</td><td></td></tr><tr><td width="114" valign="top"><small></td><td>●</td><td>字体缩细</td><td>令字体稍为缩细</td><td></td></tr><tr><td width="114" valign="top"><strike></td><td>●</td><td>画线删除</td><td>为字体加一删除线</td><td>反对</td></tr><tr><td width="114" valign="top"><code></td><td>●</td><td>程式码</td><td>字体稍为加宽如<tt></td><td></td></tr><tr><td width="114" valign="top"><kbd></td><td>●</td><td>键盘字</td><td>字体稍为加宽,单一空白</td><td></td></tr><tr><td width="114" valign="top"><samp></td><td>●</td><td>范例</td><td>字体稍为加宽如<tt></td><td></td></tr><tr><td width="114" valign="top"><var></td><td>●</td><td>变数</td><td>斜体效果</td><td></td></tr><tr><td width="114" valign="top"><cite></td><td>●</td><td>传记引述</td><td>斜体效果</td><td></td></tr><tr><td width="114" valign="top"><blockquote></td><td>●</td><td>引述文字区块</td><td>缩排字体</td><td></td></tr><tr><td width="114" valign="top"><dfn></td><td>●</td><td>述语定义</td><td>斜体效果</td><td></td></tr><tr><td width="114" valign="top"><address></td><td>●</td><td>地址标记</td><td>斜体效果</td><td></td></tr><tr><td width="114" valign="top"><sub></td><td>●</td><td>下标字</td><td>下标字</td><td></td></tr><tr><td width="114" valign="top"><sup></td><td>●</td><td>上标字</td><td>指数(平方、立方等)</td><td></td></tr><tr><td width="114" valign="top">清单标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><ol></td><td>●</td><td>顺序清单</td><td>清单项目将以数字、字母顺序排列</td><td></td></tr><tr><td width="114" valign="top"><ul></td><td>●</td><td>无序清单</td><td>清单项目将以圆点排列</td><td></td></tr><tr><td width="114" valign="top"><li></td><td>○</td><td>清单项目</td><td>每一标记标示一项清单项目</td><td></td></tr><tr><td width="114" valign="top"><menu></td><td>●</td><td>选单清单</td><td>清单项目将以圆点排列,如<ul></td><td>反对</td></tr><tr><td width="114" valign="top"><dir></td><td>●</td><td>目录清单</td><td>清单项目将以圆点排列,如<ul></td><td>反对</td></tr><tr><td width="114" valign="top"><dl></td><td>●</td><td>定义清单</td><td>清单分两层出现</td><td></td></tr><tr><td width="114" valign="top"><dt></td><td>○</td><td>定义条目</td><td>标示该项定义的标题</td><td></td></tr><tr><td width="114" valign="top"><dd></td><td>○</td><td>定义内容</td><td>标示定义内容</td><td></td></tr><tr><td width="114" valign="top">表格标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><table></td><td>●</td><td>表格标记</td><td>设定该表格的各项参数</td><td></td></tr><tr><td width="114" valign="top"><caption></td><td>●</td><td>表格标题</td><td>做成一打通列以填入表格标题</td><td></td></tr><tr><td width="114" valign="top"><tr></td><td>●</td><td>表格列</td><td>设定该表格的列</td><td></td></tr><tr><td width="114" valign="top"><td></td><td>●</td><td>表格栏</td><td>设定该表格的栏</td><td></td></tr><tr><td width="114" valign="top"><th></td><td>●</td><td>表格标头</td><td>相等于<td>,但其内之字体会变粗</td><td></td></tr><tr><td width="114" valign="top">表单标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><form></td><td>●</td><td>表单标记</td><td>决定单一表单的运作模式</td><td></td></tr><tr><td width="114" valign="top"><textarea></td><td>●</td><td>文字区块</td><td>提供文字方盒以输入较大量文字</td><td></td></tr><tr><td width="114" valign="top"><input></td><td>○</td><td>输入标记</td><td>决定输入形式</td><td></td></tr><tr><td width="114" valign="top"><select></td><td>●</td><td>选择标记</td><td>建立pop-up卷动清单</td><td></td></tr><tr><td width="114" valign="top"><option></td><td>○</td><td>选项</td><td>每一标记标示一个选项</td><td></td></tr><tr><td width="114" valign="top">图形标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><img></td><td>○</td><td>图形标记</td><td>用以插入图形及设定图形属性</td><td></td></tr><tr><td width="114" valign="top">连结标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><a></td><td>●</td><td>连结标记</td><td>加入连结</td><td></td></tr><tr><td width="114" valign="top"><base></td><td>○</td><td>基准标记</td><td>可将相对url转绝对及指定连结目标</td><td></td></tr><tr><td width="114" valign="top">框架标记</td><td></td><td></td><td></td><td></td></tr><tr><td width="114" valign="top"><frameset></td><td>●</td><td>框架设定</td><td>设定框架</td><td></td></tr></tbody></table><p> </p><h2><strong>五、Html的编辑工具</strong></h2><p>HTML其实是文本,它需要浏览器的解释,它的编辑器大体可以分为以下几种:</p> <p><strong>1、基本文本、文档编辑软件</strong>,使用微软自带的记事本或写字板都可以编写,当然,如果你用WPS或Word来编写也可以,不过保存时请使用.htm或.html作为扩展名,这样就方便浏览器认出直接解释执行了。</p> <p><strong>2、半所见即所得软件</strong>,如:FCK-Editer、E-webediter等在线网页编辑器;尤其推荐:Sublime Text代码编辑器(由Jon Skinner开发,Sublime Text2收费但可以无限期试用)。</p> <p><strong>3、所见即所得软件</strong>,使用最广泛的编辑器,完全可以一点不懂HTML的知识就可以做出网页,如:AMAYA(出品单位:万维网联盟);FRONTPAGE(出品单位:微软);Dreamweaver(出品单位Adobe)。Microsoft Visual Studio(出品公司:微软):其中所见即所得软件与半所见即所得的软件相比,开发速度更快,效率更高,且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂,不利于大型网站的多人协作和精准定位等高级功能的实现。</p><h2><strong>六、Html的作用</strong></h2><p>HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。</p> <p>HTML通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便。</p><h2><strong>七、Html常见问题</strong></h2><p><strong>1、html文件如何打开?</strong></p> <p>可以使用记事本或者文本文件打开,但是这种打开方式是代码形式的。也可以使用浏览器(IE、360、火狐、谷歌)打开,这样显示的就是图形化界面。</p> <p><strong>2、HTML 元素和标签有什么区别?</strong></p> <p>元素代表某种结构或语义,通常由开始标签、内容和结束标签组成。</p> <p>标签就是<head>、<body>、<table>等被尖括号 < 和 > 包起来的对象,绝大部分的标签都是成对出现的,如<p></p>、<h1></h1>。</p> <p><strong>3、什么是语义 HTML?</strong></p> <p>语义 HTML 是一种编码风格,它是使用 HTML 标记来加强内容的语义或含义。在语义 HTML 中 <b> </b> 标签不用于粗体语句而是 <strong></strong> ,斜体语句不是用 <i> </i>,而是用 <em></em>。</p> <p><strong>4、p 和 span 的区别?</strong></p> <p>span和p的区别在于span元素是内联的,通常用于一行内的一小块,例如段落内。而 p 是块级,相当于在其前后有一个换行符,用于对较大的代码块进行分组。</p> <p><strong>5、<!DOCTYPE html> 标签是否为 HTML 标签?</strong></p> <p>不是,<!DOCTYPE html> 声明不是 HTML 标签。<!DOCTYPE>声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在 HTML 文档的第一行。</p><h4><strong>总结</strong></h4><p>优化猩SEO:Html是一种标记语言,一种基础技术,上网浏览的网页都是Html制作的,一般网站开发都会将设计好的图形界面采用Html格式制作静态网页,然后再由技术人员进行开发。</p> <p>参考链接:</p> <p>HTML_百度百科</p> <p>https://baike.baidu.com/item/HTML/97049</p> <p>前端面试 18个常见HTML问题与答案_html_devpoint_InfoQ写作社区</p> <p>https://xie.infoq.cn/article/50a240e46c9db63a0ed541175</p> <p>什么是HTML标签?HTML标签有什么作用?_w3cschool</p> <p>https://www.w3cschool.cn/html/question-10231661.html</p> <p>修改于2023-09-03</p> </div> <div class="article-end"> <div class="tag"> <p>标签:</p> <a>详解</a> </div> </div> <div class="mzsm"> <p><strong>免责声明:</strong></p> <p>本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 123456@qq.com </p> </div> <div class="c-title"> 同类推荐 </div> <ul class="list_1"> <li><i class="iconfont icon-dot"></i><a href="/jz/28874.html" title="网站建设中的数据安全保护措施详解">网站建设中的数据安全保护措施详解</a><span class="date">12-17</span></li> <li><i class="iconfont icon-dot"></i><a href="/jz/26462.html" title="个人域名备案流程详解">个人域名备案流程详解</a><span class="date">12-08</span></li> <li><i class="iconfont icon-dot"></i><a href="/seozs/25497.html" title="如何提高网站排名?内部链接优化策略详解">如何提高网站排名?内部链接优化策略详解</a><span class="date">12-05</span></li> <li><i class="iconfont icon-dot"></i><a href="/seozs/25027.html" title="详解百度沙盒 百度沙盒效应的时间是多久?">详解百度沙盒 百度沙盒效应的时间是多久?</a><span class="date">12-03</span></li> <li><i class="iconfont icon-dot"></i><a href="/seozs/24353.html" title="百度:网站质量与搜索效果不匹配 详解!">百度:网站质量与搜索效果不匹配 详解!</a><span class="date">12-01</span></li> <li><i class="iconfont icon-dot"></i><a href="/seozs/24245.html" title="详解影响网站收录的一些因素所在">详解影响网站收录的一些因素所在</a><span class="date">11-30</span></li> <li><i class="iconfont icon-dot"></i><a href="/jz/22736.html" title="黑帽SEO是什么意思?详解18种新型黑帽SEO技术及其危害">黑帽SEO是什么意思?详解18种新型黑帽SEO技术及其危害</a><span class="date">11-25</span></li> <li><i class="iconfont icon-dot"></i><a href="/jz/22728.html" title="内链是什么意思?详解网站内链的形式、优化技巧、作用及注意事项">内链是什么意思?详解网站内链的形式、优化技巧、作用及注意事项</a><span class="date">11-25</span></li> </ul> </div> <div class="right"> <div class="list-right nav"> <section class="_135editor" data-tools="135编辑器" data-id="102361"> <section style="background:#fff;margin:10px auto;"> <section style="margin:0px auto;text-align:center;"> <section style="display:inline-block;"> <section style="display:flex;justify-content:center;align-items:flex-end;transform:rotate(0deg);"> <section style="display:flex;justify-content:center;align-items:center;"> <section style="box-sizing:border-box;width:50px;margin-right:-5px;"> <img class="assistant" style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;" src="/class/newapptheme/static/images/laba_zuo.gif" data-ratio="0.68" data-w="252" data-width="100%" _src="/class/newapptheme/static/images/laba_zuo.gif" draggable="false"> </section> <section class="135brush" data-brushtype="text" style="font-size:16px;letter-spacing:1.5px;padding:7px 1em;color:#fff;background:#fc6238;"> <strong>关注我们</strong> </section> <section style="box-sizing:border-box;width:50px;margin-left:-5px;"> <img class="assistant" style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;" src="/class/newapptheme/static/images/laba_you.gif" data-ratio="0.68" data-w="252" data-width="100%" _src="/class/newapptheme/static/images/laba_you.gif" draggable="false"> </section> </section> </section> </section> </section> <section style="background:#ffefeb;padding:2em 0px 1em 0px;margin-top:-20px;"> <section style="display:flex;justify-content:space-around;align-items:center;" hm_fix="381:483"> <section style="box-sizing:border-box;width:130px;"><img style="vertical-align:inherit;box-sizing:border-box;width:100%;display:block;" src="/class/newapptheme/static/images/gzh.jpg" data-ratio="1" data-width="100%" _src="/class/newapptheme/static/images/gzh.jpg" draggable="false" data-op="change" title="维亿CMS资源网" alt="" data-w="156"></section> <section style="display:inline-block;"> <section style="display:flex;justify-content:flex-start;align-items:center;"> <section> <section class="135brush" data-brushtype="text" style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:10px;">  扫码点个关注吧~ </section> <section class="135brush" data-brushtype="text" style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:4px;">  维亿CMS资源网 </section> <section class="135brush" data-brushtype="text" style="font-size:14px;color:#fc6238;word-break:break-all;margin-top:4px;"> 关注获取更多精彩资讯 </section> </section> </section> </section> </section> </section> </section> </section> </div> <div class="list-right nav"> <div class="c-title"> 栏目分类 </div> <ul> <ol class=""><a href="/jz" class="target">CMS建站</a></ol> </ul> </div> <div class="article-right"> <div class="c-title"> 热门文章 </div> <ul class="list"> <li><a href="/seozs/13823.html" target="_blank"><i>1</i>网站URL结构错误的解决方法</a></li> <li><a href="/jz/1.html" target="_blank"><i>2</i>网站建设需要的3个思维 ,仅少数建站人员知道</a></li> <li><a href="/jz/18.html" target="_blank"><i>3</i>深圳网站建设哪家设计好?深圳网站建设品牌;深圳网站建设方案策划</a></li> <li><a href="/cjjc/3.html" target="_blank"><i>4</i>老站长教你如何用cms建站</a></li> <li><a href="/zyjc/4.html" target="_blank"><i>5</i>内容管理系统(CMS)是什么意思? CMS的含义</a></li> <li><a href="/jz/5.html" target="_blank"><i>6</i>天津seo怎么优化(天津seo排名优化公司)</a></li> <li><a href="/jz/7.html" target="_blank"><i>7</i>仪表seo优化(seo高级优化方法)</a></li> <li><a href="/jz/8.html" target="_blank"><i>8</i>小说seo关键字优化(沈阳seo关键字优化)</a></li> <li><a href="/jz/9.html" target="_blank"><i>9</i>seo网络优化技术(SEO网络优化)</a></li> <li><a href="/jz/10.html" target="_blank"><i>10</i>关键词seo优化哪家有(江门抖音SEo关键词优化)</a></li> </ul> </div> <div class="article-right"> <div class="c-title"> 随机推荐 </div> <ul class="list"> <li><a href="/mianfei/79.html" target="_blank"><i>1</i>织梦DEDE</a></li> <li><a href="/caijigj/105.html" target="_blank"><i>2</i>万能采集</a></li> <li><a href="/caijigj/102.html" target="_blank"><i>3</i>水淼软件 </a></li> <li><a href="/qiye/96.html" target="_blank"><i>4</i>人人站CMS</a></li> <li><a href="/mianfei/93.html" target="_blank"><i>5</i>sitesCMS</a></li> <li><a href="/mianfei/80.html" target="_blank"><i>6</i>帝国网站管理系统(</a></li> <li><a href="/mianfei/78.html" target="_blank"><i>7</i>迅睿CMS</a></li> <li><a href="/mianfei/84.html" target="_blank"><i>8</i>WordPress</a></li> <li><a href="/qiye/91.html" target="_blank"><i>9</i>PageAdmin </a></li> <li><a href="/qiye/94.html" target="_blank"><i>10</i>YouDianCMS</a></li> </ul> </div> </div> </div> </div> <style> footer { display: block } .row9 { margin-left: auto; margin-right: auto; margin-bottom: 20px } .row9:after { content: ""; display: table; clear: both } .row9 .col { float: left; box-sizing: border-box; padding: 0 0.75rem; min-height: 1px } .row9 .col[class*="push-"], .row9 .col[class*="pull-"] { position: relative } .row9 .col.s1 { width: 8.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.s2 { width: 16.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.s3 { width: 25%; margin-left: auto; left: auto; right: auto } .row9 .col.s4 { width: 33.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.s5 { width: 41.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.s6 { width: 50%; margin-left: auto; left: auto; right: auto } .row9 .col.s7 { width: 58.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.s8 { width: 66.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.s9 { width: 75%; margin-left: auto; left: auto; right: auto } .row9 .col.s10 { width: 83.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.s11 { width: 91.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.s12 { width: 100%; margin-left: auto; left: auto; right: auto } .row9 .col.offset-s1 { margin-left: 8.33333% } .row9 .col.pull-s1 { right: 8.33333% } .row9 .col.push-s1 { left: 8.33333% } .row9 .col.offset-s2 { margin-left: 16.66667% } .row9 .col.pull-s2 { right: 16.66667% } .row9 .col.push-s2 { left: 16.66667% } .row9 .col.offset-s3 { margin-left: 25% } .row9 .col.pull-s3 { right: 25% } .row9 .col.push-s3 { left: 25% } .row9 .col.offset-s4 { margin-left: 33.33333% } .row9 .col.pull-s4 { right: 33.33333% } .row9 .col.push-s4 { left: 33.33333% } .row9 .col.offset-s5 { margin-left: 41.66667% } .row9 .col.pull-s5 { right: 41.66667% } .row9 .col.push-s5 { left: 41.66667% } .row9 .col.offset-s6 { margin-left: 50% } .row9 .col.pull-s6 { right: 50% } .row9 .col.push-s6 { left: 50% } .row9 .col.offset-s7 { margin-left: 58.33333% } .row9 .col.pull-s7 { right: 58.33333% } .row9 .col.push-s7 { left: 58.33333% } .row9 .col.offset-s8 { margin-left: 66.66667% } .row9 .col.pull-s8 { right: 66.66667% } .row9 .col.push-s8 { left: 66.66667% } .row9 .col.offset-s9 { margin-left: 75% } .row9 .col.pull-s9 { right: 75% } .row9 .col.push-s9 { left: 75% } .row9 .col.offset-s10 { margin-left: 83.33333% } .row9 .col.pull-s10 { right: 83.33333% } .row9 .col.push-s10 { left: 83.33333% } .row9 .col.offset-s11 { margin-left: 91.66667% } .row9 .col.pull-s11 { right: 91.66667% } .row9 .col.push-s11 { left: 91.66667% } .row9 .col.offset-s12 { margin-left: 100% } .row9 .col.pull-s12 { right: 100% } .row9 .col.push-s12 { left: 100% } @media only screen and (min-width: 544px) { .row9 .col.m1 { width: 8.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.m2 { width: 16.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.m3 { width: 25%; margin-left: auto; left: auto; right: auto } .row9 .col.m4 { width: 33.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.m5 { width: 41.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.m6 { width: 50%; margin-left: auto; left: auto; right: auto } .row9 .col.m7 { width: 58.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.m8 { width: 66.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.m9 { width: 75%; margin-left: auto; left: auto; right: auto } .row9 .col.m10 { width: 83.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.m11 { width: 91.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.m12 { width: 100%; margin-left: auto; left: auto; right: auto } .row9 .col.offset-m1 { margin-left: 8.33333% } .row9 .col.pull-m1 { right: 8.33333% } .row9 .col.push-m1 { left: 8.33333% } .row9 .col.offset-m2 { margin-left: 16.66667% } .row9 .col.pull-m2 { right: 16.66667% } .row9 .col.push-m2 { left: 16.66667% } .row9 .col.offset-m3 { margin-left: 25% } .row9 .col.pull-m3 { right: 25% } .row9 .col.push-m3 { left: 25% } .row9 .col.offset-m4 { margin-left: 33.33333% } .row9 .col.pull-m4 { right: 33.33333% } .row9 .col.push-m4 { left: 33.33333% } .row9 .col.offset-m5 { margin-left: 41.66667% } .row9 .col.pull-m5 { right: 41.66667% } .row9 .col.push-m5 { left: 41.66667% } .row9 .col.offset-m6 { margin-left: 50% } .row9 .col.pull-m6 { right: 50% } .row9 .col.push-m6 { left: 50% } .row9 .col.offset-m7 { margin-left: 58.33333% } .row9 .col.pull-m7 { right: 58.33333% } .row9 .col.push-m7 { left: 58.33333% } .row9 .col.offset-m8 { margin-left: 66.66667% } .row9 .col.pull-m8 { right: 66.66667% } .row9 .col.push-m8 { left: 66.66667% } .row9 .col.offset-m9 { margin-left: 75% } .row9 .col.pull-m9 { right: 75% } .row9 .col.push-m9 { left: 75% } .row9 .col.offset-m10 { margin-left: 83.33333% } .row9 .col.pull-m10 { right: 83.33333% } .row9 .col.push-m10 { left: 83.33333% } .row9 .col.offset-m11 { margin-left: 91.66667% } .row9 .col.pull-m11 { right: 91.66667% } .row9 .col.push-m11 { left: 91.66667% } .row9 .col.offset-m12 { margin-left: 100% } .row9 .col.pull-m12 { right: 100% } .row9 .col.push-m12 { left: 100% } } @media only screen and (min-width: 1024px) { .row9 .col.l1 { width: 8.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.l2 { width: 16.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.l3 { width: 25%; margin-left: auto; left: auto; right: auto } .row9 .col.l4 { width: 33.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.l5 { width: 41.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.l6 { width: 50%; margin-left: auto; left: auto; right: auto } .row9 .col.l7 { width: 58.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.l8 { width: 66.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.l9 { width: 75%; margin-left: auto; left: auto; right: auto } .row9 .col.l10 { width: 83.33333%; margin-left: auto; left: auto; right: auto } .row9 .col.l11 { width: 91.66667%; margin-left: auto; left: auto; right: auto } .row9 .col.l12 { width: 100%; margin-left: auto; left: auto; right: auto } .row9 .col.offset-l1 { margin-left: 8.33333% } .row9 .col.pull-l1 { right: 8.33333% } .row9 .col.push-l1 { left: 8.33333% } .row9 .col.offset-l2 { margin-left: 16.66667% } .row9 .col.pull-l2 { right: 16.66667% } .row9 .col.push-l2 { left: 16.66667% } .row9 .col.offset-l3 { margin-left: 25% } .row9 .col.pull-l3 { right: 25% } .row9 .col.push-l3 { left: 25% } .row9 .col.offset-l4 { margin-left: 33.33333% } .row9 .col.pull-l4 { right: 33.33333% } .row9 .col.push-l4 { left: 33.33333% } .row9 .col.offset-l5 { margin-left: 41.66667% } .row9 .col.pull-l5 { right: 41.66667% } .row9 .col.push-l5 { left: 41.66667% } .row9 .col.offset-l6 { margin-left: 50% } .row9 .col.pull-l6 { right: 50% } .row9 .col.push-l6 { left: 50% } .row9 .col.offset-l7 { margin-left: 58.33333% } .row9 .col.pull-l7 { right: 58.33333% } .row9 .col.push-l7 { left: 58.33333% } .row9 .col.offset-l8 { margin-left: 66.66667% } .row9 .col.pull-l8 { right: 66.66667% } .row9 .col.push-l8 { left: 66.66667% } .row9 .col.offset-l9 { margin-left: 75% } .row9 .col.pull-l9 { right: 75% } .row9 .col.push-l9 { left: 75% } .row9 .col.offset-l10 { margin-left: 83.33333% } .row9 .col.pull-l10 { right: 83.33333% } .row9 .col.push-l10 { left: 83.33333% } .row9 .col.offset-l11 { margin-left: 91.66667% } .row9 .col.pull-l11 { right: 91.66667% } .row9 .col.push-l11 { left: 91.66667% } .row9 .col.offset-l12 { margin-left: 100% } .row9 .col.pull-l12 { right: 100% } .row9 .col.push-l12 { left: 100% } } .container9 { position: relative; margin: 0 auto; padding-right: 15px; padding-left: 15px; max-width: 1280px } .row9 { position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 0; margin-left: 0; width: 100%; height: auto; zoom: 1 } .row9:after, .row9:before { display: table; content: '' } .row10 ul li { float: left; font-size: 14px; margin: 0 10px; overflow: hidden; } .footer { clear: both; height: 100%; margin-top: 10px; padding-bottom: 0px; /*border-top: 1px solid #eee;*/ } .footer a { color: #bbb } .footer a:hover { color: #166df1; transition: .3s all; } .footer h2.logos { margin: 1rem auto; max-width: 160px; color: #ccc; text-align: center } .footer-head { color: #aaaaaa; font-size: 14px; font-weight: 700; margin-top: 0; margin-bottom: 10px } .cs-footer-links { margin: 10px 0 } .cs-footer-links li { display: block; padding-bottom: 10px; -moz-transition: all 0.15s ease; -o-transition: all 0.15s ease; -webkit-transition: all 0.15s ease; transition: all 0.15s ease } .cs-footer-logo img { max-width: 180px } .footer .footer-qrimg { width: 80px; height: 80px; padding: 0; border: #f5f6f8 3px solid } .cs-footer-text { max-width: 523px; margin: 20px auto } .cs-moble-true, .cs-moble-false { padding-top: 30px; display: block } .footer-copyright { padding-top: 20px; /* border-top: 1px solid rgba(172, 172, 172, 0.1); */ font-size: 13px; text-align: center; color: #acacac } @media (min-width: 544px) { .copyright-links { text-align: right } .copy-text { text-align: center } } .copyright-links>li { display: inline-block } .copyright-links>li+li { margin-left: 12px } .copyright-links>li>a { color: #acacac; letter-spacing: 0.14px } @keyframes move { 0% { transform: translate(-175px, 0px) scale(1, 1) } 50% { transform: translate(-87px, 0px) scale(1, 0.5) } 100% { transform: translate(0px, 0px) scale(1, 1) } } </style> <style> .footer-cus { padding: 15px 20px; background: #fff; overflow: hidden; margin-bottom: 15px; } { .dingbulan { display: none; } } .dingbulan { width: 100%; text-align: center; font-size: 14px; font-weight: 400; color: #bbb6b6; line-height: 80px; letter-spacing: 0.8px; } .dingbulan h1 { font-size: 14px !important; display: inline; color: #bbb6b6; } .dingbulan span { padding: 5px 10px; background: #4387fd; border-radius: 5px; color: #ffffff; margin: 0 5px; } </style> <footer class="footer footer-cus" id="footer"> <div class="footer-copyright"> <div class="container9"> <div class="row9"> <div class="copy-text" style="text-align: center"> <a rel="nofollow" href="/dq" target="_blank"> <font style="color: #A9A9A9;">CMS大全</font> </a><i>|</i> <a href="/wz">CMS文章</a><i>|</i> <a href="/seozs">SEO知识</a><i>|</i> <a href="#">关于本站</a> </div> <div class="copy-text" style="text-align: center"> <p class="tex_cent">CopyRight©2024-2025 <a href="/" target="_blank">维亿CMS资源网</a> All Right Reserved   <img src="/class/newapptheme/static/images/beian.png" style="height:20px;vertical-align:middle;" /> <a href="https://beian.miit.gov.cn/#/Integrated/index" rel="nofollow" target="_blank">互联网ICP备案信息:渝ICP备2022000613号</a> </p> </div> <div class="copy-text" style="text-align: center"> 本站收集的信息若侵害到您的利益,请联系我们删除处理,侵权处理邮箱 37381315@qq.com </div> </div> </div> </div> <div id="toolbar" class="toolbar "> <div id="totop" class="btn hidden br transition"><i class="iconfont icon-totop"></i></div> <div class="seting btn active transition"> <i class="layui-icon layui-icon-set-fill" id="openStylePick"></i> <div class="set-style" id="set-style"> <div class="plant"> <div class="layui-card"> <div class="layui-card-header">风格切换</div> <div class="layui-card-body"> <div class="layui-form"> <div class="layui-form-item"><label class="layui-form-label">暗夜模式</label><input type="checkbox" lay-filter="setstyle" name="style" lay-skin="switch" lay-text="关闭|开启"></div> </div> </div> </div> </div> </div> </div> </div> </footer> <script src="/class/newapptheme/static/js/layui.all.js"></script> <script src="/class/newapptheme/static/js/common.js"></script> <script src="/class/newapptheme/static/js/index.js"></script> <script> if (getCookie('setnight') == '') { layer.msg('夜深了,您可以打开护眼模式~'); setCookie("setnight", "1", "h12"); } </script> <script> // 添加水印方法 function TpWatermark(CON,H,W,R,C,S,O) { // 判断水印是否存在,如果存在,那么不执行 if (document.getElementById('tp-watermark') != null) { return } var TpLine = parseInt(document.body.clientWidth/W) * 2; // 一行显示几列 var StrLine = ''; for(var i = 0; i < TpLine; i++){ StrLine += '<span style="display: inline-block; line-height:' + H + 'px; width:' + W + 'px; text-align: center; transform:rotate(' + R + 'deg); color:' + C + '; font-size:'+ S + 'px; opacity:' + O + ';">'+ CON +'</span>' } var DivLine = document.createElement("div"); DivLine.innerHTML = StrLine; var TpColumn = parseInt(document.body.clientHeight/H) * 2; // 一列显示几行 var StrColumn = ''; for(var i = 0; i < TpColumn; i++){ StrColumn += '<div style="white-space: nowrap;">' + DivLine.innerHTML + '</div>'; } var DivLayer = document.createElement("div"); DivLayer.innerHTML = StrColumn; DivLayer.id = "tp-watermark"; // 给水印盒子添加类名 DivLayer.style.position = "fixed"; DivLayer.style.top = "10px"; // 整体水印距离顶部距离 DivLayer.style.left = "-100px"; // 改变整体水印的left值 DivLayer.style.zIndex = "99999"; // 水印页面层级 DivLayer.style.pointerEvents = "none"; document.body.appendChild(DivLayer); // 到页面中 } // 移除水印方法 function RemoveTpWatermark(){ // 判断水印是否存在,如果存在,那么执行 if (document.getElementById('tp-watermark') == null) { return } document.body.removeChild(document.getElementById('tp-watermark')); } // 执行添加 TpWatermark('维亿CMS资源网','200','400','-20','red','30','.15'); // TpWatermark(CON,H,W,R,C,S,O); // 值一一对应 // 执行移除 // RemoveTpWatermark(); // 参考文档 // http://sharedblog.cn/post/200.html </script> <script> if (document.getElementsByClassName("article-content").length > 0) { var newContent = document.getElementsByClassName("article-content")[0].innerHTML.replace( /<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) { //capture,返回每个匹配的字符串 var newStr = '<a class="kuake" href="' + capture + '" target="_blank" data-fancybox="gallery"> <img src="' + capture + '" alt="" /></a>'; return newStr; }); document.getElementsByClassName("article-content")[0].innerHTML = newContent; } </script> </body> </html>