• Web前端开发之HTML_2


    • HTML5简介与基础骨架
    • 标题标签
    • 标签之段落、换行、水平线
    • 标签之图片
    • 标签之超文本链接
    • 标签之文本
    • 列表标签之有序列表
    • 列表标签之无序列表

    1. HTML5简介与基础骨架

    1.1 HTML5简介

            HTML5是用来描述网页的一种语言,被称为超文本标记语言。用HTML5编写的文件,后缀以 .html结尾。HTML是一种标记语言,标记语言是一套标记标签。标签是由尖括号包围的关键字,例如:,标签由两种表现形式:

    • 双标签,例如:
    • 单标签,例如:
    1.2 HTML5的DOCTYPE声明

            DOCTYPE 是document type 的缩写。H5的声明位于文档的最前面,处于标签之前。它是网页必备的组成部分,避免浏览器的怪异模式(指不同浏览器渲染出不同的效果)。

    1.3 HTML5基本骨架

    • html 标签:定义HTML文档,其他元素要包裹在它里面,标签限定了文档的开始点和结束点
    • head 标签:定义文档的头部,文档的头部描述了文档的各种属性和信息,包括文档的标题、在Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者
    • body 标签:定义文档的主体,body元素包含文档的所有内容(比如文本、超链接、图像、表格和列表等等),它会直接在页面中显示出来,也就是用户可以直观看到的内容
    • title 标签:定义文档的标题,显示在浏览器窗口的标题栏或状态栏上标签是<head>标签中唯一必须要求包含的东西</span></strong>,<title>的增加有利于<span style="color:#fe2c24;">SEO</span>(搜索引擎)优化</li><li><strong><span style="background-color:#ffd900;">meta 标签</span></strong>:<span style="color:#fe2c24;">描述一个HTML网页文档的属性,关键词等</span>,例如:charset="utf-8"是说当前使用的是utf-8编码格式。<strong><meta>标签是一个单标签,放在<head>标签中</strong></li></ul> <p class="img-center"><img alt="" height="256" src="https://1000bd.com/contentImg/2024/04/26/1a38f38fe110ba6d.png" ></p> <p class="img-center"><img alt="" height="158" src="https://1000bd.com/contentImg/2024/04/26/e817471d4c35a948.png" ></p> <h4><a name="t1"></a>2. 标签之标题</h4> <h5>2.1 标题介绍与应用(生成h1~h6快捷键:<span style="background-color:#ffd900;">h$*6</span>)</h5> <p>         标题是通过<h1> ~ <h6>标签进行定义的,<h1>定义最大的标题,<h6>定义最小的标题</p> <pre data-index="0" class="set-code-hide" name="code"><code class="language-html hljs language-xml"><ol class="hljs-ln" style="width:100%"><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="1"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-meta"><!DOCTYPE <span class="hljs-keyword">html</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="2"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"en"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="3"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="4"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">"UTF-8"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="5"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"viewport"</span> <span class="hljs-attr">content</span>=<span class="hljs-string">"width=device-width, initial-scale=1.0"</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="6"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-name">title</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="7"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">head</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="8"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"><<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="9"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="10"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>一级标题<span class="hljs-tag"></<span class="hljs-name">h1</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="11"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h2</span>></span>二级标题<span class="hljs-tag"></<span class="hljs-name">h2</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="12"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h3</span>></span>三级标题<span class="hljs-tag"></<span class="hljs-name">h3</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="13"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h4</span>></span>四级标题<span class="hljs-tag"></<span class="hljs-name">h4</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="14"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h5</span>></span>五级标题<span class="hljs-tag"></<span class="hljs-name">h5</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="15"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>六级标题<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="16"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"> </div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="17"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">body</span>></span></div></div></li><li><div class="hljs-ln-numbers"><div class="hljs-ln-line hljs-ln-n" data-line-number="18"></div></div><div class="hljs-ln-code"><div class="hljs-ln-line"><span class="hljs-tag"></<span class="hljs-name">html</span>></span></div></div></li></ol></code><div class="hide-preCode-box"><span class="hide-preCode-bt" data-report-view="{"spm":"1001.2101.3001.7365"}"><img class="look-more-preCode contentImg-no-view" src="https://1000bd.com/contentImg/2022/06/27/191644837.png" alt="" title=""></span></div><div class="hljs-button signin active" data-title="登录复制" data-report-click="{"spm":"1001.2101.3001.4334"}" onclick="hljs.signin(event)"></div></pre> <p class="img-center"><img alt="" height="285" src="https://1000bd.com/contentImg/2024/04/26/128425daaec03663.png" ></p> <h5>2.2 正确使用标题</h5> <p>        <span style="background-color:#ffd900;">确保将HTML标题标签只用于标题</span>,不要仅仅为了生成粗体或大号的文本而使用标题。正确使用标题有益于SEO,<strong>应该将<h1>用作主标题(最重要的),其后是<h2>(次要的)</strong>,以此类推</p> <h5>2.3 标题标签位置摆放</h5> <p>        标题标签默认居左,可在标签中添加属性:<span style="background-color:#ffd900;">align="left | center | right"</span></p> <blockquote> <p><h1 align="center">一级标题</h1></p> </blockquote> <h4><a name="t2"></a>3. 标签之段落、换行、水平线</h4> <h5>3.1 <span style="background-color:#ffd900;">段落 <p></p></span></h5> <p>        段落是通过<span style="color:#fe2c24;"><p></span>标签定义的。</p> <blockquote> <p><p>这是一个段落</p></p> <p><p>这是另一个段落</p></p> </blockquote> <h5>3.2 <span style="background-color:#ffd900;">换行 <br></span></h5> <p>        如果想在不产生一个新段落的情况下进行换行(新行),使用<span style="color:#fe2c24;"><br> </span><span style="color:#0d0016;">,或者写为</span><span style="color:#fe2c24;"><br /></span><span style="color:#0d0016;">,其中/表示标签结束,<br />元素是一个空的HTML元素(即单标签)</span></p> <blockquote> <p><span style="color:#0d0016;"><p>这个<br>段落<br>演示了分行的效果</p></span></p> </blockquote> <h5>3.3 <span style="background-color:#ffd900;">水平线 <hr/></span></h5> <p>        <hr/>标签在HTML页面中创建水平线</p> <blockquote> <p><hr color="" width="" size="" align=""/></p> </blockquote> <p>属性:</p> <ul><li><strong>color</strong>:设置水平线的颜色</li><li><strong>width</strong>:设置水平线的宽度</li><li><strong>size</strong>:设置水平线的高度</li><li><strong>align</strong>:设置水平线的对齐方式(默认居中),可取值left | right</li></ul> <h4><a name="t3"></a>4. 标签之图片</h4> <h5>4.1 图片<span style="background-color:#ffd900;"> <img></span></h5> <p>        <img>标签定义HTML页面中的图像,<img>是单标签,不需进行闭合操作</p> <blockquote> <p><img src="" alt="" title="" width="" height=""></p> </blockquote> <p>属性:</p> <ul><li><span style="background-color:#ffd900;">src:路径(图片地址与名字)</span></li><li><span style="background-color:#ffd900;">alt:规定图像的替代文本</span></li><li><strong>width</strong>:规定图像的宽度</li><li><strong>height</strong>:规定图像的高度</li><li><span style="background-color:#ffd900;">title:鼠标悬停在图片上给予提示</span></li></ul> <h5>4.2 图片路径详解</h5> <p><span style="color:#fe2c24;"><strong>绝对路径</strong></span>:电脑的盘符存储与访问的具体地址,<strong>E:\WEBCode\HTML5\1.jpg</strong></p> <blockquote> <p><img src="E:\WEBCode\HTML5\1.jpg" ></p> </blockquote> <p><span style="color:#fe2c24;"><strong>相对路径</strong></span>:两者相对关系,两者在同一路径下可直接访问</p> <ul><li><strong><span style="background-color:#ffd900;">子级关系</span></strong>:<strong><span style="background-color:#ffd900;">/    (先找到同级)</span></strong></li><li><strong><span style="background-color:#ffd900;">父级关系</span></strong>:<strong><span style="background-color:#ffd900;">../</span></strong></li><li><strong><span style="background-color:#ffd900;">同级关系</span></strong>:<strong><span style="background-color:#ffd900;">./  (可省略)</span></strong></li></ul> <p><strong>网络路径</strong>:具体网络地址  <a class="link-info" href="http://iwenwiki.com/api/newworld/images/n1.png" rel="nofollow" title="http://iwenwiki.com/api/newworld/images/n1.png">http://iwenwiki.com/api/newworld/images/n1.png</a></p> <h4><a name="t4"></a>5. 标签之超文本链接</h4> <h5>5.1 超链接 <span style="background-color:#ffd900;"><a></a></span></h5> <p>        HTML使用标签<a>来设置超文本链接。超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可以<span style="color:#fe2c24;">点击这些内容跳转到新的文档</span>。</p> <blockquote> <p><a href="url">链接文本</a></p> </blockquote> <p><strong>超链接属性</strong>:在标签<a>中使用<span style="background-color:#ffd900;">href属性</span>描述链接的地址</p> <p><strong>默认情况下</strong>,链接将以以下形式出现在浏览器页面中:</p> <ul><li>一个<span style="color:#fe2c24;">未访问过的链接显示为蓝色</span>字体并带有下划线</li><li><span style="color:#fe2c24;">访问过的链接显示为紫色</span>并带有下划线</li><li><span style="color:#fe2c24;">点击链接时,链接显示为红色</span>并带有下划线</li></ul> <p><strong>提示</strong>:以上只是默认形式,后期<span style="background-color:#ffd900;">可通过CSS样式修改这些效果</span></p> <h5>5.2 超链接表现</h5> <p>        当把鼠标指针移动到网页中的某个链接上时,箭头会变成一只小手</p> <h4><a name="t5"></a>6 常用文本标签(可嵌套在<p>标签中)</h4> <div class="table-box"><table border="1" cellpadding="1" cellspacing="1"><tbody><tr><td style="text-align:center;"><strong>标签</strong></td><td style="text-align:center;"><strong>描述</strong></td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><em></span></td><td style="text-align:center;">定义着重文字</td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><b></span></td><td style="text-align:center;">定义粗体文本</td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><i></span></td><td style="text-align:center;">定义斜体字</td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><strong></span></td><td style="text-align:center;">定义加重语气</td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><del></span></td><td style="text-align:center;">定义删除字</td></tr><tr><td style="text-align:center;"><span style="color:#fe2c24;"><span></span></td><td style="text-align:center;">元素没有特定的含义</td></tr></tbody></table></div> <p><strong>提示</strong>:常用文本标签和段落是不同的,段落代表一段文本,而文本标签一般表示文本词汇</p> <h4 style="background-color:transparent;"><a name="t6"></a>7. 列表标签之有序列表</h4> <h5>7.1 有序列表 <span style="background-color:#ffd900;"><ol> <li> </li> </ol></span></h5> <p>        有序列表是一列项目,列表项目使用<strong>数字</strong>进行标记。有序列表始于<span style="color:#fe2c24;"><ol>标签</span>。每个列表始于<span style="color:#fe2c24;"><li>标签</span>。</p> <blockquote> <p>    <ol></p> <p>        <li>苹果</li></p> <p>        <li>橘子</li></p> <p>        <li>香蕉</li></p> <p>    </ol></p> </blockquote> <p><strong><span style="background-color:#ffd900;">type属性</span></strong>,<span style="color:#fe2c24;"><strong><ol></strong>的属性type</span>拥有的选项:</p> <ul><li><span style="background-color:#ffd900;">1 </span>表示列表项目用数字标号<span style="color:#fe2c24;">(1,2,3...)</span></li><li><span style="background-color:#ffd900;">a </span>表示列表项目用小写字母标号<span style="color:#fe2c24;">(a,b,c...)</span></li><li><span style="background-color:#ffd900;">A</span> 表示列表项目用大写字母标号<span style="color:#fe2c24;">(A,B,C...)</span></li><li><span style="background-color:#ffd900;">i </span>表示列表项目用小写罗马数字标号<span style="color:#fe2c24;">(i,ii,iii...)</span></li><li><span style="background-color:#ffd900;">I </span>表示列表项目用大写罗马数字标号<span style="color:#fe2c24;">(I,II,III...)</span></li></ul> <h5>7.2 有序列表嵌套</h5> <blockquote> <p>    <ol type="A"></p> <p>        <li>水果</li></p> <p>        <li>蔬菜</p> <p>            <ol></p> <p>                <li>白菜</li></p> <p>                <li>辣椒</li></p> <p>            </ol></p> <p>        </li></p> <p>        <li>肉类</li></p> <p>    </ol></p> </blockquote> <p><img alt="" class="left" height="118" src="https://1000bd.com/contentImg/2024/04/26/2383950188494a6f.png" ></p> <h4><a name="t7"></a>8. 列表标签之无序列表(生成快捷键:<span style="background-color:#ffd900;">ul>li*3</span>)</h4> <h5>8.1 无序列表实现 <span style="background-color:#ffd900;"><ul><li></li></ul></span></h5> <p>        无序列表是一个项目的列表,此项目使用<strong>粗体圆点</strong>进行标记。无序列表始于<span style="color:#fe2c24;"><ul>标签</span>,每个列表项始于<span style="color:#fe2c24;"><li>标签</span>。</p> <blockquote> <p>    <ul></p> <p>        <li>苹果</li></p> <p>        <li>橘子</li></p> <p>        <li>香蕉</li></p> <p>    </ul></p> </blockquote> <p><strong><span style="background-color:#ffd900;">type属性</span></strong>,<span style="color:#fe2c24;"><strong><ul></strong>的属性type</span>拥有的选项:</p> <ul><li><span style="background-color:#ffd900;">disc 默认实心圆</span></li><li><span style="background-color:#ffd900;">circle 空心圆</span></li><li><span style="background-color:#ffd900;">square 小方块</span></li><li><span style="background-color:#ffd900;">none 不显示</span></li></ul> <h5>8.2 无序列表嵌套</h5> <blockquote> <p>    <ul></p> <p>        <li>蔬菜</li></p> <p>        <li></p> <p>            水果</p> <p>            <ul></p> <p>                <li>苹果</li></p> <p>                <li>橘子</li></p> <p>            </ul></p> <p>        </li></p> <p>        <li>肉类</li></p> <p>    </ul></p> </blockquote> <p><img alt="" height="115" src="https://1000bd.com/contentImg/2024/04/26/f425e98eb56d0e4a.png" ></p> <h5>8.3 常见应用场景</h5> <ul><li>无序的列表效果</li><li><strong><span style="background-color:#ffd900;">导航效果</span></strong></li></ul> <p><img alt="" height="178" src="https://1000bd.com/contentImg/2024/04/26/0f8241229aa149eb.png" ></p> </div> </div> </li> <li class="list-group-item ul-li"> <b>相关阅读:</b><br> <nobr> <a href="/Article/Index/1144694">android的三种动画</a> <br /> <a href="/Article/Index/1390943">C# 多线程</a> <br /> <a href="/Article/Index/1487613">算法项目(1)—— LSTM+CNN+四种注意力对比的股票预测</a> <br /> <a href="/Article/Index/887214">实时从 httpd 的asscess_log 日志 读取访问ip和根路径 不在白名单内就iptables封堵</a> <br /> <a href="/Article/Index/1259150">服务器数据恢复-Xen server虚拟机数据恢复案例</a> <br /> <a href="/Article/Index/1237930">【Azure K8S | AKS】在不丢失文件/不影响POD运行的情况下增加PVC的大小</a> <br /> <a href="/Article/Index/894525">SpringBoot学习_day7</a> <br /> <a href="/Article/Index/788905">Java FileWriter.write()方法具有什么功能呢?</a> <br /> <a href="/Article/Index/1095374">【SpringBoot笔记25】SpringBoot框架集成PageHelper分页插件以及自定义分页工具类</a> <br /> <a href="/Article/Index/1455273">简单理解Vue2的响应式原理</a> <br /> </nobr> </li> <li class="list-group-item from-a mb-2"> 原文地址:https://blog.csdn.net/zx1026409886/article/details/138001706 </li> </ul> </div> <div class="col-lg-4 col-sm-12"> <ul class="list-group" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 最新文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/1484446">攻防演习之三天拿下官网站群</a> <br /> <a href="/Article/Index/1515268">数据安全治理学习——前期安全规划和安全管理体系建设</a> <br /> <a href="/Article/Index/1759065">企业安全 | 企业内一次钓鱼演练准备过程</a> <br /> <a href="/Article/Index/1485036">内网渗透测试 | Kerberos协议及其部分攻击手法</a> <br /> <a href="/Article/Index/1877332">0day的产生 | 不懂代码的"代码审计"</a> <br /> <a href="/Article/Index/1887576">安装scrcpy-client模块av模块异常,环境问题解决方案</a> <br /> <a href="/Article/Index/1887578">leetcode hot100【LeetCode 279. 完全平方数】java实现</a> <br /> <a href="/Article/Index/1887512">OpenWrt下安装Mosquitto</a> <br /> <a href="/Article/Index/1887520">AnatoMask论文汇总</a> <br /> <a href="/Article/Index/1887496">【AI日记】24.11.01 LangChain、openai api和github copilot</a> <br /> </nobr> </li> </ul> <ul class="list-group pt-2" style="word-break:break-all;"> <li class="list-group-item ul-li-bg" aria-current="true"> 热门文章 </li> <li class="list-group-item ul-li"> <nobr> <a href="/Article/Index/888177">十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!</a> <br /> <a href="/Article/Index/797680">奉劝各位学弟学妹们,该打造你的技术影响力了!</a> <br /> <a href="/Article/Index/888183">五年了,我在 CSDN 的两个一百万。</a> <br /> <a href="/Article/Index/888179">Java俄罗斯方块,老程序员花了一个周末,连接中学年代!</a> <br /> <a href="/Article/Index/797730">面试官都震惊,你这网络基础可以啊!</a> <br /> <a href="/Article/Index/797725">你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法</a> <br /> <a href="/Article/Index/797702">心情不好的时候,用 Python 画棵樱花树送给自己吧</a> <br /> <a href="/Article/Index/797709">通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!</a> <br /> <a href="/Article/Index/797716">13 万字 C 语言从入门到精通保姆级教程2021 年版</a> <br /> <a href="/Article/Index/888192">10行代码集2000张美女图,Python爬虫120例,再上征途</a> <br /> </nobr> </li> </ul> </div> </div> </div> <!-- 主体 --> <!--body结束--> <!--这里是footer模板--> <!--footer--> <nav class="navbar navbar-inverse navbar-fixed-bottom"> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="text-muted center foot-height"> Copyright © 2022 侵权请联系<a href="mailto:2656653265@qq.com">2656653265@qq.com</a>    <a href="https://beian.miit.gov.cn/" target="_blank">京ICP备2022015340号-1</a> </div> <div style="width:300px;margin:0 auto; padding:0px 5px;"> <a href="/regex.html">正则表达式工具</a> <a href="/cron.html">cron表达式工具</a> <a href="/pwdcreator.html">密码生成工具</a> </div> <div style="width:300px;margin:0 auto; padding:5px 0;"> <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010502049817" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"> <img src="" style="float:left;" /><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502049817号</p></a> </div> </div> </div> </div> </nav> <!--footer--> <!--footer模板结束--> <script src="/js/plugins/jquery/jquery.js"></script> <script src="/js/bootstrap.min.js"></script> <!--这里是scripts模板--> <!--scripts模板结束--> </body> </html>