HTML以及我们后面将要学习的 CSS（Cascading Style Sheets 级联式样式表) 和 JavaScript 是构建广泛使用的Web程序的三剑客。
HTML ：它定义了网页内容的含义和结构。CSS：级联样式表（Cascading Style Sheets），用来描述一个网页的表现与展示效果，元素如何呈现。JavaScript：用来描述一个网页的功能与行为，是前后端编程的基础。 2 HTML文档结构 2.1 新建HTML文档 运行 VScode 软件，打开/新建一个文件夹注意：该文件夹作为我们的过呢工作目录，一般建议是提前创建好，在VScodo打开新建 HTML 文件在该文件夹下新建一个
后缀名为html 的文件简单测试 在该文件中输入如下内容：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>页面标题</title>
</head>
<body>
<h1>我的第一个Web页</h1>
<p>当前有点丑：)</p>
</body>
</html>
效果如下：
技巧—打开HTML文件的方法：
① 安装open in browser插件，在 code 的编辑区点击鼠标右键即可看到快捷方式，将该文件在浏览器中打开
② 使用live server插件功能，该功能位于编辑区右下角
③ 找到本地文件 .hml 的位置，直接选择使用浏览器中打开
注意，网页地址：127.0.0.1:5000，是回送地址，指的是本地机的IP地址。 2.2 HTML文档结构分析 HTML元素（elements） HTML 使用"标记"（markup）来注明文本、图片和其他内容，以便于在浏览器中显示。HTML 标记包含一些规定的"元素"如
，，<body>，<header>，<footer>，，<section>，<p>，，<span>，，，，<canvas>，<datalist>，<details>，<embed>，<nav>，<output>，<progress>，<video></code> 等等。整个 HTML 就由一个个元素组成（可以嵌套）<br /> 元素则一般由一对标签（tag）构成。剖析一个 HTML 元素（白色字体）<br /> 及替他元素注释<br /> HTML文档相关说明
注释<br /> 注释是被浏览器忽略的，而且是对用户不可见的。<br /> 一段 HTML 中的内容置为注释，将其用特殊的记号<code><!--</code>和<code>--></code>包括起来。<br /> <code>ctrl+/</code>：快捷注释空元素<br /> 一般来说，元素都拥有开始标签，内容，结束标签。但有一些元素只有一个开始标签，通常用来在此元素所在位置插入/嵌入一些东西，<br /> 如<code><br>（换行）, <hr>（水平分割线）, <input>（输入光）, （图片）, （超链接）</code>等等，我们称其为空元素。<br /> <br /> 效果如下：<br /> <br /> <code><br></code>元素放到<code><p></code>元素之中——这被称作嵌套。元素的属性<br /> 元素是可以有相关属性的。属性包含元素的额外信息，这些信息不会在浏览器中显示出来。<br /> <br /> 效果如下：<br /> <br /> 一个属性必须包含如下内容：<br /> <code>一个空格</code>，在属性和元素名称之间。(如果已经有一个或多个属性，就与前一个属性之间有一个空格。)<br /> <code>属性名称</code>，后面跟着一个 = 号。<br /> <code>一个属性值</code>，由一对引号 “” 引起来。
3 标题（heading）
HTML 提供了从大到小6级标题，分别是：<code> ~ </code>，如下所示：
<pre><code >This is heading 1
<p>This is some text.</p>
<hr>
This is heading 2
<p>This is some other text.</p>
<hr>
</code></pre>
效果
This is heading 1
<p>This is some text.</p>
<hr />
This is heading 2
<p>This is some other text.</p>
<hr />
注意<br /> 不要因为希望醒目，试图使用标题对正文的文字进行放大或加粗。正文文字的醒目可以使用<code>文本格式</code>或 <code>CSS</code> 进行。
4 文本格式
HTML 是用来<mark>表现页面内容</mark>而不是对页面进行修饰的，专门的页面美化需要使用后面将要学习的 CSS 。<code><big><center></code>等标签皆为不推荐使用的。需要知道的文本格式标签如下：
<pre><code ><p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p>This line rendered as bold text.</p>
<p><em>This line rendered as italicized text.</em></p>
</code></pre>
<p>效果：<br /> </p>
5 超链接 a
可以把任何东西加上超链接，不过常用的是文本、图片等。超链接语法
<pre><code >"https://www.baidu.com/"</span> target=<span >"_blank"</span>>百度一下
</code></pre>
说明：<br /> <mark>href</mark>：要跳转去的地址 URL（Uniform Resorce Locator)<br /> <mark>target</mark>：属性为_blank表示在新的页面打开超链接（默认是在当前页面打开即_self）超链接标签包含的内容。锚点
<p>锚点，也称为书签，用于标记页面的某个元素或位置。通过锚点，可以轻易的<mark>在长页面内实现跳转</mark><code>（"回到页首"功能就是这样实现的）</code>。</p> <p><ins>先使用id属性生成某元素的锚点，然后再使用超链接指向该锚点</ins>即可。<br /> </p> <p>说明<br /> ① 元素的<ins>id值必须是唯一</ins>的<br /> ② 超链接中的<ins>地址需要有<code>#</code>符号</ins><br /> </p> <p><mark>注意</mark>：此处在点击锚点进行跳转之后，会在新的页面打开！</p>
6 图片及文件路径 img
图片<br /> 在页面插入一张图片如下：
<pre><code >"https://images.unsplash.com/photo-1653162143209-a6f100377faf?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464"</span> width=<span >"200"</span> height=<span >"200"</span>>
</code></pre>
说明<br /> <mark>src</mark>属性为要显示图片文件的位置 URL，即图片文件的路径<br /> <mark>alt</mark>属性当获取图片出现问题时显示的文字（占位符）<br /> 可以去 https://unsplash.com网站寻找免费图片<br /> 文件路径
文件路径有相对路径和绝对路径两种。<br /> ① 上面图片的例子为绝对路径<br /> ② 相对路径：
<table><thead><tr><th>例子</th><th>解释</th></tr></thead><tbody><tr><td><code></code></td><td>该图片文件与当前文档在同一目录中</td></tr><tr><td><code></code></td><td>该图片文件在当前目录下的images目录中</td></tr><tr><td><code></code></td><td>该图片文件在上一级目录中</td></tr></tbody></table>
<ins>思考： 如何用图片做成一个超链接？</ins><br /> <br /> 此时，点击图片后会跳转到百度网页，注意，是直接在原网页进行跳转，不会打开新网页。如图：<br />
7 表格 Table
使用<code><table></code>等标签即可用表格来呈现页面的内容
<pre><code > <table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
</code></pre>
<p></p>
解释：<br /> <code><tr></code>表示行<br /> <code><td></code>表示行中的单元<br /> <code><th></code>是表头的单元（将会加粗显示）
8 列表 List
可以使用列表来呈现内容<br /> 分为无序列表和有序列表。
<p>无序列表</p>
无序列表的使用 <code></code>标签：<br /> 默认使用<code>实心圆点</code><br /> 其它的标志可以是空心圆<code>circle</code>、实心方块<code>square</code>以及不出现标志。
<pre><code >"square"</span>>
Coffee
Tea
Milk
</code></pre>
<p></p>
<p>有序列表</p>
有序列表使用<code></code>标签<br /> 默认使用<code>数字</code><br /> 其它的标志可以是大写字母<code>A</code>、小写字母<code>a</code>、罗马字母 <code>i</code> 等。
<pre><code >"i"</span>>
Coffee
Tea
Milk
</code></pre>
<p></p>
9 表单 Form
<p>定义<br /> 利用表单通过网站获取一些信息如：用户名、密码、选择买什么、买多少、提出意见等等时，使用表单（form）来让用户填写或选择。</p> <p>输入如下代码进行学习：<br /> <br /> </p> <p>当提交时，表单中没有name属性的元素将不会提交，比如上面工作日期的选择器。有name属性的元素其value的值将提交给服务器。</p>
10 其它
<p>HTML 的元素可以以称为 区块 或 内联 的方式进行显示。</p>
10.1 区块元素
区块元素在浏览器显示时，通常会以新行来开始（和结束）。如：<code>, <pre>, , <table>，</code> 等。<br /> <code></code>标签是指网页 html 中对文本标题所进行的着重强调的一种标签。<br /> <code><pre></code> 标签可定义预格式化的文本。被包围在标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体<br /> <code></code>无序列表<br /> <code><table></code>表格<br /> <code></code> DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素
<pre><code >区块元素
Hello
World
<p>单独一行</p>
</code></pre>
效果<br />
10.2 内联元素
内联元素相反，他们总是一个接一个进行显示，不会新起一行。如： <code><span>, <input>, <td>, , </code>等。<br /> <code><span></code>标签是超文本标记语言（HTML）的行内标签，被用来组合文档中的行内元素<br /> <code><input></code>标签用于搜集用户信息。根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等<br /> <code><td></code>标签代表HTML表格中的一个单元格<br /> <code></code>标签定义超链接，用于从一个页面链接到另一个页面<br /> <code></code> 标签定义 HTML 页面中的图像
<pre><code >下面的元素将在一行中显示
<span>姓名：</span>
<input name=<span >"username"</span>>
<span>哈哈哈</span>
"https://google.com/"</span>>Google
"https://images.unsplash.com/photo-1653162143209-a6f100377faf?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464"</span> width=<span >"200"</span> height=<span >"200"</span>>
</code></pre>
效果<br />
10.3 预设格式
<p>如果在网页中展示一首诗或一些特别格式的文本，那么使用pre标签。</p>
<blockquote>
<p><code><pre></code> 标签可定义预格式化的文本。被包围在标签元素中的文本通常会<code>保留空格和换行符</code>。而文本也会呈现为等宽字体</p>
</blockquote>
10.4 特殊字符
考虑下面的代码将显示成什么？<br /> 效果<br /> 以上代码得不到想要的结果。<br /> 原因是：在 HTML 中，某些字符是预留的。<br /> 在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。<br /> 如果希望正确地显示预留字符，<code>必须在 HTML 源代码中使用字符实体（character entities）</code><br /> <br />
<div class="entry-copyright">
<p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://outofmemory.cn/web/1322809.html" title="HTML---Web学习总结">http://outofmemory.cn/web/1322809.html</a></p>
</div>
</div>
<div class="entry-action">
<a id="thread-like" class="btn-zan" href="javascript:;" tid="1322809">
<i class="wpcom-icon wi">
<svg aria-hidden="true">
<use xlink:href="#wi-thumb-up-fill"></use>
</svg>
</i> 赞
<span class="entry-action-num">(0)</span>
</a>
<div class="btn-dashang">
<i class="wpcom-icon wi">
<svg aria-hidden="true">
<use xlink:href="#wi-cny-circle-fill"></use>
</svg></i> 打赏
<span class="dashang-img dashang-img2">
<span>
<img src="/view/img/theme/weipay.png" alt="微信扫一扫" /> 微信扫一扫
</span>
<span>
<img src="/view/img/theme/alipay.png" alt="支付宝扫一扫" /> 支付宝扫一扫
</span>
</span>
</div>
</div>
<div class="entry-bar">
<div class="entry-bar-inner clearfix">
<div class="author pull-left">
<a data-user="80732" target="_blank" href="/user/80732.html" class="avatar j-user-card">
<img alt="拼音打字指法练习" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60" />
<span class="author-name">拼音打字指法练习</span>
<span class="user-group">一级用户组</span>
</a>
</div>
<div class="info pull-right">
<div class="info-item meta">
<a class="meta-item j-heart" id="favorites" rel="nofollow" tid="1322809" href="javascript:void(0);" title="自己的内容还要收藏吗？" aria-label="自己的内容还要收藏吗？">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-star"></use></svg>
</i>
<span class="data">0</span>
</a>
<a class="meta-item" href="#comments">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-comment"></use></svg>
</i>
<span class="data">0</span>
</a>
</div>
<div class="info-item share">
<a class="meta-item mobile j-mobile-share22" a href="javascript:;" data-event="poster-popover">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-share"></use></svg>
</i>
生成海报
</a>
<a class="meta-item wechat" data-share="wechat" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-wechat"></use></svg>
</i>
</a>
<a class="meta-item weibo" data-share="weibo" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-weibo"></use></svg>
</i>
</a>
<a class="meta-item qq" data-share="qq" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-qq"></use></svg>
</i>
</a>
<a class="meta-item qzone" data-share="qzone" target="_blank" rel="nofollow" href="#">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-qzone"></use></svg>
</i>
</a>
</div>
<div class="info-item act">
<a href="javascript:;" id="j-reading">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-article"></use></svg>
</i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--尾部广告-->
<div class="wrap">
</div>
<div class="entry-page">
<div class="entry-page-prev j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/Vue+%E2%80%94%E2%80%94+%E8%BF%9B%E9%98%B6+vue-router+%E8%B7%AF%E7%94%B1%EF%BC%88%E4%BA%8C%EF%BC%89%EF%BC%88replace%E5%B1%9E%E6%80%A7%E3%80%81%E7%BC%96%E7%A8%8B%E5%BC%8F%E8%B7%AF%E7%94%B1%E5%AF%BC%E8%88%AA%E3%80%81%E7%BC%93%E5%AD%98%E8%B7%AF%E7%94%B1%E7%BB%84%E4%BB%B6%E3%80%81%E8%B7%AF%E7%94%B1%E7%9A%84%E4%B8%93%E5%B1%9E%E9%92%A9%E5%AD%90%EF%BC%89.png">
<a href="/web/1322808.html" title="Vue —— 进阶 vue-router 路由（二）（replace属性、编程式路由导航、缓存路由组件、路由的专属钩子）" rel="prev">
<span>Vue —— 进阶 vue-router 路由（二）（replace属性、编程式路由导航、缓存路由组件、路由的专属钩子）</span>
</a>
<div class="entry-page-info">
<span class="pull-left">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-arrow-left-double"></use></svg>
</i> 上一篇
</span>
<span class="pull-right">2022-06-12</span>
</div>
</div>
<div class="entry-page-next j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/%E5%8E%9F%E7%94%9FJS%E4%B8%AD%E7%9A%84Ajax%E8%AF%B7%E6%B1%82%E4%B8%8EjQuery%E4%B8%AD%E7%9A%84Ajax%E8%AF%B7%E6%B1%82.png">
<a href="/web/1322810.html" title="原生JS中的Ajax请求与jQuery中的Ajax请求" rel="next">
<span>原生JS中的Ajax请求与jQuery中的Ajax请求</span>
</a>
<div class="entry-page-info">
<span class="pull-right">
下一篇 <i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-arrow-right-double"></use></svg>
</i>
</span>
<span class="pull-left">2022-06-12</span>
</div>
</div>
</div>
<div id="comments" class="entry-comments">
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">
发表评论
</h3>
<div class="comment-form">
<div class="comment-must-login">
请登录后评论...
</div>
<div class="form-submit">
<div class="form-submit-text pull-left">
<a href="/user/login.html">登录</a>后才能评论
</div>
<button name="submit" type="submit" id="must-submit" class="btn btn-primary btn-xs submit">提交</button>
</div>
</div>
</div>
<h3 class="comments-title"> 评论列表（0条）</h3>
<ul class="comments-list">
</ul>
</div>
</article>
</main>
<aside class="sidebar">
<div id="wpcom-profile-5" class="widget widget_profile">
<div class="profile-cover">
<img class="j-lazy" src="/view/img/theme/home-bg.jpg" alt="拼音打字指法练习" />
</div>
<div class="avatar-wrap">
<a target="_blank" href="/user/80732.html" class="avatar-link">
<img alt="拼音打字指法练习" src="/view/img/avatar.png" class="avatar avatar-120 photo" height="120" width="120" />
</a>
</div>
<div class="profile-info">
<a target="_blank" href="/user/80732.html" class="profile-name">
<span class="author-name">拼音打字指法练习</span>
<span class="user-group">一级用户组</span>
</a>
<!--<p class="author-description">Enjoy coding, enjoy life!</p>-->
<div class="profile-stats">
<div class="profile-stats-inner">
<div class="user-stats-item">
<b>241</b>
<span>文章</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>评论</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>问题</span>
</div>
<div class="user-stats-item">
<b>0</b>
<span>回答</span>
</div>
<!--<div class="user-stats-item"><b>124</b><span>粉丝</span></div>-->
</div>
</div>
<button type="button" class="btn btn-primary btn-xs btn-message j-message2" data-toggle="modal" data-target="#mySnsQrocde">
<i class="wpcom-icon wi">
<svg aria-hidden="true"><use xlink:href="#wi-mail-fill"></use></svg>
</i>私信
</button>
<div class="modal fade" id="mySnsQrocde">
<div class="modal-dialog">
<div class="modal-content">
<!-- 模态框头部 -->
<!--<div class="modal-header">
<h4 class="modal-title">扫码联系我</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>-->
<!-- 模态框主体 -->
<div class="modal-body" style="text-align: center">
<img src="/upload/sns_qrcode/80732.png" style="width: 300px">
</div>
</div>
</div>
</div>
</div>
<div class="profile-posts">
<h3 class="widget-title"><span>最近文章</span></h3>
<ul>
<li>
<a href="/zaji/5828630.html" title="关于感恩的词汇">
关于感恩的词汇 </a>
</li>
<li>
<a href="/zaji/5806585.html" title="人工念什么字">
人工念什么字 </a>
</li>
<li>
<a href="/bake/5775299.html" title="成都天府新区发展限制，成都新冠肺炎疫情防控指挥部">
成都天府新区发展限制，成都新冠肺炎疫情防控指挥部 </a>
</li>
<li>
<a href="/bake/5752367.html" title="实木板材可以做柜门吗">
实木板材可以做柜门吗 </a>
</li>
<li>
<a href="/bake/5746888.html" title="怎么看绿茶叶是否受潮 看绿茶叶是否受潮的方法">
怎么看绿茶叶是否受潮 看绿茶叶是否受潮的方法 </a>
</li>
</ul>
</div>
</div>
<div class="widget widget_post_thumb">
<h3 class="widget-title"><span>随机标签</span></h3>
<div class="entry-tag">
<!-- 循环输出 tag 开始 -->
<a href="/tag/605720.html" rel="tag">最前沿</a>
<a href="/tag/605695.html" rel="tag">外阴白斑</a>
<a href="/tag/605606.html" rel="tag">大屋</a>
<a href="/tag/605520.html" rel="tag">宣传报道</a>
<a href="/tag/605508.html" rel="tag">佘山</a>
<a href="/tag/605498.html" rel="tag">雷吉</a>
<a href="/tag/605439.html" rel="tag">女魔</a>
<a href="/tag/605431.html" rel="tag">旌宇</a>
<a href="/tag/605422.html" rel="tag">天舞</a>
<a href="/tag/605421.html" rel="tag">孤僻</a>
<a href="/tag/605407.html" rel="tag">新宇</a>
<a href="/tag/605395.html" rel="tag">练歌房</a>
<a href="/tag/605383.html" rel="tag">脑梗塞</a>
<a href="/tag/605366.html" rel="tag">弗洛</a>
<a href="/tag/605361.html" rel="tag">狼巢</a>
<a href="/tag/605338.html" rel="tag">国梁</a>
<a href="/tag/605327.html" rel="tag">出窍</a>
<a href="/tag/605320.html" rel="tag">传染源</a>
<a href="/tag/605264.html" rel="tag">南苑</a>
<a href="/tag/605251.html" rel="tag">六楼</a>
</div>
</div>
</aside>
</div>
</div>
<footer class=footer>
<div class=container>
<div class=clearfix>
<div class="footer-col footer-col-logo">
<img src="/view/img/logo.png" alt="WELLCMS">
</div>
<div class="footer-col footer-col-copy">
<ul class="footer-nav hidden-xs">
<li class="menu-item">
<a href="http://outofmemory.cn/sitemap.html">
网站地图
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
联系我们
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
行业动态
</a>
</li>
<li class="menu-item">
<a href="/read/0.html">
专题列表
</a>
</li>
<!--<li class="menu-item">
<a href="/read/4.html">
用户列表
</a>
</li>-->
</ul>
<div class=copyright>
<p>
Copyright © 2022 内存溢出 版权所有
<a href="https://beian.miit.gov.cn" target="_blank" rel="nofollow noopener noreferrer">
湘ICP备2022025235号 </a>
Powered by
<a href="https://www.outofmemory.cn/" target="_blank">
outofmemory.cn
</a>
<script>var s1=s1||[];(function(){var OstRUpguE2=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x63\x72\x65\x61\x74\x65\x45\x6c\x65\x6d\x65\x6e\x74']("\x73\x63\x72\x69\x70\x74");OstRUpguE2['\x73\x72\x63']="\x68\x74\x74\x70\x73\x3a\x2f\x2f\x68\x6d\x2e\x62\x61\x69\x64\x75\x2e\x63\x6f\x6d\x2f\x68\x6d\x2e\x6a\x73\x3f\x33\x33\x33\x31\x32\x35\x31\x37\x33\x34\x37\x65\x39\x30\x38\x34\x63\x30\x37\x34\x33\x30\x66\x66\x31\x61\x61\x65\x66\x38\x62\x33";var saV3=window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]['\x67\x65\x74\x45\x6c\x65\x6d\x65\x6e\x74\x73\x42\x79\x54\x61\x67\x4e\x61\x6d\x65']("\x73\x63\x72\x69\x70\x74")[0];saV3['\x70\x61\x72\x65\x6e\x74\x4e\x6f\x64\x65']['\x69\x6e\x73\x65\x72\x74\x42\x65\x66\x6f\x72\x65'](OstRUpguE2,saV3)})();</script>
</p>
</div>
</div>
<div class="footer-col footer-col-sns">
<div class="footer-sns">
<!--<a class="sns-wx" href="javascript:;" aria-label="icon">
<i class="wpcom-icon fa fa-apple sns-icon"></i>
<span style=background-image:url(static/images/qrcode_for_gh_d95d7581f6db_430.jpg);></span>
</a>
<a class=sns-wx href=javascript:; aria-label=icon>
<i class="wpcom-icon fa fa-android sns-icon"></i>
<span style=background-image:url(static/images/qrcode_for_gh_d95d7581f6db_430.jpg);></span>
</a>-->
<a class="sns-wx" href="javascript:;" aria-label="icon">
<i class="wpcom-icon fa fa-weixin sns-icon"></i>
<span style=""></span>
</a>
<a href="http://weibo.com" target="_blank" rel="nofollow" aria-label="icon">
<i class="wpcom-icon fa fa-weibo sns-icon"></i>
</a>
</div>
</div>
</div>
</div>
</footer>
<script id="main-js-extra">/*<![CDATA[*/var _wpcom_js = { "js_lang":{"page_loaded":"\u5df2\u7ecf\u5230\u5e95\u4e86","no_content":"\u6682\u65e0\u5185\u5bb9","load_failed":"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u518d\u8bd5\uff01","login_desc":"\u60a8\u8fd8\u672a\u767b\u5f55\uff0c\u8bf7\u767b\u5f55\u540e\u518d\u8fdb\u884c\u76f8\u5173\u64cd\u4f5c\uff01","login_title":"\u8bf7\u767b\u5f55","login_btn":"\u767b\u5f55","reg_btn":"\u6ce8\u518c","copy_done":"\u590d\u5236\u6210\u529f\uff01","copy_fail":"\u6d4f\u89c8\u5668\u6682\u4e0d\u652f\u6301\u62f7\u8d1d\u529f\u80fd"} };/*]]>*/</script>
<script src="/view/js/theme/55376.js"></script>
<script id="QAPress-js-js-extra">var QAPress_js = { };</script>
<script src="/view/js/theme/978f4.js"></script>
<script src="/lang/zh-cn/lang.js?2.2.0"></script>
<script src="/view/js/popper.min.js?2.2.0"></script>
<script src="/view/js/xiuno.js?2.2.0"></script>
<script src="/view/js/async.min.js?2.2.0"></script>
<script src="/view/js/form.js?2.2.0"></script>
<script src="/view/js/wellcms.js?2.2.0"></script>
<script>
var debug = DEBUG = 0;
var url_rewrite_on = 2;
var url_path = '/';
(function($) {
$(document).ready(function() {
setup_share(1);
})
})(jQuery);
$('#user-logout').click(function () {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">已退出</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
setTimeout(function () {
window.location.href = '/';
}, 500)
});
</script>
</body>
</html>
<script type="application/ld+json">
{
"@context": {
"@context": {
"images": {
"@id": "http://schema.org/image",
"@type": "@id",
"@container": "@list"
},
"title": "http://schema.org/headline",
"description": "http://schema.org/description",
"pubDate": "http://schema.org/DateTime"
}
},
"@id": "http://outofmemory.cn/web/1322809.html",
"title": "HTML---Web学习总结",
"images": ["http://outofmemory.cn/aiimages/HTML---Web%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93.png"],
"description": "HTML---Web学习总结——目录 1 HTML1.1 HTML1.2 标签1.3 HTML、CSS、JavaScript2 HTML文档结构2.1 新建HTML文档2.2 HTML文档结构分析3 标题（he",
"pubDate": "2022-06-12",
"upDate": "2022-06-12"
}
</script>
<script>
// 回复
$('.reply-post').on('click', function () {
var pid = $(this).attr('pid');
var username = '回复给 ' + $(this).attr('user');
$('#form').find('input[name="quotepid"]').val(pid);
$('#reply-name').show().find('b').append(username);
});
function removepid() {
$('#form').find('input[name="quotepid"]').val(0);
$('#reply-name').hide().find('b').empty();
}
var forum_url = '/list/10.html';
var safe_token = 'VJHgEOcTwZKC7ktcP6bzYLOxe79uvwxhPoHJp26IXX6YCbj8ncslSVkuGpNQQUyhonAmS0HqEsFh6nUt9sefKQ_3D_3D';
var body = $('body');
body.on('submit', '#form', function() {
console.log('test');
var jthis = $(this);
var jsubmit = jthis.find('#submit');
jthis.reset();
jsubmit.button('loading');
var postdata = jthis.serializeObject();
$.xpost(jthis.attr('action'), postdata, function(code, message) {
if(code == 0) {
location.reload();
} else {
$.alert(message);
jsubmit.button('reset');
}
});
return false;
});
// 收藏
var uid = '0';
var body = $('body');
body.on('click', 'a#favorites', function () {
if (uid && uid > 0) {
var tid = $(this).attr('tid');
$.xpost('/home/favorites.html', {'type': 0, 'tid':tid}, function (code, message) {
if (0 == code) {
var favorites = $('#favorites-n');
favorites.html(xn.intval(favorites.html()) + 1);
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
});
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
return false;
});
// 喜欢
var uid = '0';
var tid = '1322809';
var body = $('body');
body.on('click', 'a#thread-like', function () {
if (uid && uid > 0) {
var tid = $(this).attr('tid');
$.xpost('/my/like.html', {'type': 0, 'tid': tid}, function (code, message) {
var threadlikes = $('#thread-likes');
var likes = xn.intval(threadlikes.html());
if (0 == code) {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">'+ message +'</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
});
} else {
$.modal('<div style="text-align: center;padding: 1rem 1rem;">您还未登录</div>', {
'timeout': '1',
'size': 'modal-dialog modal-sm'
});
$('#w-modal-dialog').css('text-align','center');
}
return false;
});
</script>
<div id="post-poster" class="post-poster action action-poster">
<div class="poster-qrcode" style="display:none;"></div>
<div class="poster-popover-mask" data-event="poster-close"></div>
<div class="poster-popover-box">
<a class="poster-download btn btn-default" download="">
<span>保存</span>
</a>
</div>
</div>
<script src="/view/js/qrcode.min.js?2.2.0"></script>
<script>
$.require_css('../plugin/wqo_theme_basic/css/wqo_poster.css');
var url= window.location.href;
window.poster_img={
uri : url,
ver : '1.0',
bgimgurl : '/plugin/wqo_theme_basic/img/bg.png',
post_title : 'HTML---Web学习总结',
logo_pure : '/view/img/logo.png',
att_img : '/aiimages/HTML---Web%E5%AD%A6%E4%B9%A0%E6%80%BB%E7%BB%93.png',
excerpt : 'HTML---Web学习总结——目录 1 HTML1.1 HTML1.2 标签1.3 HTML、CSS、JavaScript2 HTML文档结构2.1 新建HTML文档2.2 HTML文档结构分析3 标题（he',
author : '拼音打字指法练习',
cat_name : 'html-js-css',
time_y_m : '2022年06月',
time_d : '12',
site_motto : '内存溢出'
};
</script>
<script src="/plugin/wqo_theme_basic/js/main.js?2.2.0"></script>
<script src="/plugin/wqo_theme_basic/js/require.min.js?2.2.0"></script>