Html 结构标准： 决定你是否有个好天然身体
CSS 表现标准： 决定你是否打扮的美丽外观
JavaScript 行为标准： 决定你是否有吸引人的行为
建议： 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位。如果是并列关系，最好上下对齐
HTML和CSS是两种完全不同的语言，目前学的是结构，就只写HTML标签。
了解字符编码格式字符集
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312。gb2312 简单中文 包括6763个汉字BIG5 繁体中文 港澳台等用GBK包含全部中文字符 是GB2312的扩展，加入对繁体字BIG5的支持，兼容GB2312UTF-8则包含全世界所有国家需要用到的字符
一、简介记住一点，以后统统使用UTF-8 字符集, 这样就避免出现字符集不统一而引起乱码的情况了。
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言，您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
二、HTML 的注意要点 1、 HTML文档的后缀名 和 Html文档内一切标签都不区分大小写 - 推荐小写标签 .html.htm注意：对于中文网页需要使用
声明编码，否则会出现乱码。有些浏览器(如 360 浏览器)会设置 GBK 为默认编码，则你需要设置为。
以上两种后缀名没有区别，都可以使用。
HTML文件内容是不区分大小写的，除非特别设置了相关配置，但是强烈推荐必须必须使用小写的标签，这是以后万维网联盟（W3C）要强制要求的。
2、 HTML 文件的标签布局 声明 - 全身 - 头 - 身 - 尾特别特别注意，笔者这里提到的尾部是 HTML 5 加入的内容，HTML 是没有尾部的标签
DOCTYPE html>
<html>
<head>
<title>
屏幕最上面的标题
title>
head>
<body>
body>
html>
声明为 HTML5 文档
元素是 HTML 页面的根元素
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。
元素描述了文档的标题
<body> 元素包含了可见的页面内容 - 收藏栏下面的可见内容
</code></pre>
3、 什么是HTML?
<p>HTML 是用来描述网页的一种语言。</p>
<input type="checkbox" disabled="disabled" /> HTML 指的是超文本标记语言: <code>HyperText Markup Language</code><input type="checkbox" disabled="disabled" /> HTML 不是一种编程语言，而是一种<mark>标记语言</mark><input type="checkbox" disabled="disabled" /> 标记语言是一套标记标签 (<code>markup tag</code>)<input type="checkbox" disabled="disabled" /> HTML 使用标记标签来描述网页<input type="checkbox" disabled="disabled" /> HTML 文档包含了HTML 标签及文本内容<input type="checkbox" disabled="disabled" /> HTML文档也叫做 <mark>web 页面</mark>
4、HTML 标签 - 开放标签< > - 闭合标签</ > - 空元素 (没有闭合标签) < >
<p>HTML 标记标签通常被称为 HTML 标签 (HTML tag)。</p>
<p>HTML 标签是由尖括号包围的关键词，比如 </p>
<pre><code>HTML 标签通常是成对出现的，比如 和
标签对中的第一个标签是开始标签 < >，第二个标签是结束标签 </ >
</code></pre>
<p>开始和结束标签也被称为开放标签和闭合标签</p>
<p>但是也还有一种<mark>空元素</mark>，那就是<mark>没有闭合标签，只有开放标签</mark>的 HTML元素 <code>< ></code></p>
4.1、什么组成了HTML 元素 - 三部分（正常元素） / 一部分 （空元素）
<table><thead><tr><th align="center">开始标签</th><th>元素内容</th><th>结束标签</th></tr></thead><tbody><tr><td align="center"><code><p></code></td><td>这是一个段落</td><td><code></p></code></td></tr><tr><td align="center"><code></code></td><td>这是一个链接</td><td><code></code></td></tr><tr><td align="center"><code><br></code></td><td>换行，<mark>空元素</mark></td><td>没有结束标签</td></tr></tbody></table>
<p>想要空元素结束，只能在开始标签就在后面加斜杠 <code>/</code> 如<code><br/></code>，而且长远考虑，空元素最好要加斜杠 <code>/</code></p>
<p><mark>空元素在开始标签 <code>< ></code>中进行关闭（以开始标签的结束<code>< /></code>而结束）</mark></p>
<blockquote></blockquote>
5、 Web 浏览器 - 不是编译器或解释器，而是标记器
<p>Web浏览器（如谷歌、火狐浏览器等，<mark>Internet Explorer</mark>，<mark>Firefox</mark>，<mark>Safari</mark>）是用于读取HTML文件，并将其作为网页显示。</p>
<p><mark>浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户。</mark></p>
<p>浏览器控制像素点，使其在某个像素点位置进行渲染，渲染引擎也是如此，所以我们可以将浏览器看作是一种渲染引擎，不过我们需要类似调动渲染引擎的手段 —— HTML 标记语言、CSS、JavaScript</p>
6、HTML 版本
<table><thead><tr><th>版本</th><th>发布时间</th></tr></thead><tbody><tr><td><mark>HTML</mark></td><td><mark>1991</mark></td></tr><tr><td>HTML+</td><td>1993</td></tr><tr><td>HTML 2.0</td><td>1995</td></tr><tr><td>HTML 3.2</td><td>1997</td></tr><tr><td><mark>HTML 4.01</mark></td><td><mark>1999</mark></td></tr><tr><td>XHTML 1.0</td><td>2000</td></tr><tr><td><mark>HTML5</mark></td><td><mark>2012</mark></td></tr><tr><td>XHTML5</td><td>2013</td></tr></tbody></table>
7、HTML文件的通用声明
<mark>HTML 4.01</mark>
<pre><code ><span ><span ><!</span><span >DOCTYPE</span> <span >HTML</span> <span >PUBLIC</span> <span >"-//W3C//DTD HTML 4.01 Transitional//EN"</span>
<span >"http://www.w3.org/TR/html4/loose.dtd"</span><span >></span></span>
</code></pre>
<mark>XHTML 1.0</mark>
<pre><code ><span ><span ><!</span><span >DOCTYPE</span> <span >html</span> <span >PUBLIC</span> <span >"-//W3C//DTD XHTML 1.0 Transitional//EN"</span>
<span >"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</span><span >></span></span>
</code></pre>
<mark>HTML5</mark>
<pre><code ><span ><span ><!</span><span >DOCTYPE</span> <span >html</span><span >></span></span>
</code></pre>
8、Html 5 中文编码插入
<p>在头部位置<code><head> </head></code> 标签内插入元数据</p>
<pre><code ><span ><span ><!</span><span >DOCTYPE</span> <span >html</span><span >></span></span>
<span ><span ><span ><</span>html</span><span >></span></span>
<span ><span ><span ><</span>head</span><span >></span></span>
<span ><span ><span ><</span>meta</span> <span >charset</span><span ><span >=</span><span >"</span>UTF-8<span >"</span></span><span >></span></span>
<span ><span ><span ><</span>title</span><span >></span></span>页面标题<span ><span ><span ></</span>title</span><span >></span></span>
<span ><span ><span ></</span>head</span><span >></span></span>
<span ><span ><span ><</span>body</span><span >></span></span>
<span ><span ><span ></</span>body</span><span >></span></span>
<span ><span ><span ></</span>html</span><span >></span></span>
</code></pre>
9、关于 HTML 编辑器的选择 - Vs Code
<p>VS Code 下载链接：https://code.visualstudio.com/</p>
VS Code 怎样改成中文版？
<blockquote>
首先点击扩展（也就是四个小方格），在搜索栏内输入 Chinese。点击 install ，下载安装简体中文，在右下方会出现 restart 点击就好。再重启 vs 后就会变成简体中文。
</blockquote>
10、HTML标签的语义化
<p>有时候你学习 HTML 时，会发觉怎么感觉好像有好多重复作用的标签，比如 <code></code> 和 <code></code> 标签，这两个标签在页面上显示的效果都一样，但是为什么还要弄一个同样效果的标签出来，这就是HTML标签的语义化的意义。</p>
10.1、为什么要有语义化标签
方便代码的阅读和维护同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容使用语义化标签会具有更好地搜索引擎优化
<p><mark>核心：合适的地方给一个最为合理的标签。</mark></p>
<p><mark>语义是否良好： 当我们去掉 CSS 之后，网页结构依然组织有序，并且有良好的可读性。</mark></p>
<p><mark>通俗点讲，就是一眼看去，就知道那个是重点，结构是什么，知道每块的内容是干啥的。</mark></p>
<p><mark>遵循的原则：先确定语义的 HTML ，再选合适的 CSS。</mark></p>
<blockquote></blockquote>
三、对常用 Html 标签进行记录
理解结构化标签 与 CSS 渲染的分工合作
<p><mark>其实 Html 作为结构标签，最好的做法是将渲染交给 CSS 来做，而 Html 只要做好网页布局，就行了。</mark></p>
没( 熟记)的随机认识一下就行了
1、标题 h 标签( 熟记)
<blockquote>
<p>单词缩写： <code>head</code> 头部. 标题 title 文档标题</p>
</blockquote>
<p>为了使网页更具有语义化，我们经常会在页面中用到标题标签，HTML提供了6个等级的标题。</p>
<pre><code ><span ><span ><span ><</span>h1</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h1</span><span >></span></span>
<span ><span ><span ><</span>h2</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h2</span><span >></span></span>
<span ><span ><span ><</span>h3</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h3</span><span >></span></span>
<span ><span ><span ><</span>h4</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h4</span><span >></span></span>
<span ><span ><span ><</span>h5</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h5</span><span >></span></span>
<span ><span ><span ><</span>h6</span><span >></span></span> 标题文本 <span ><span ><span ></</span>h6</span><span >></span></span>
</code></pre>
2、段落 p 标签( 熟记)
<blockquote>
<p>单词缩写： <code>paragraph</code> 段落 [ˈpærəgræf] 无须记这个单词</p>
</blockquote>
<p>在网页中要把文字有条理地显示出来，离不开段落标签，就如同我们平常写文章一样，整个网页也可以分为若干个段落，而段落的标签就是<br /> <mark>是HTML文档中最常见的标签，默认情况下，文本在一个段落中会根据浏览器窗口的大小自动换行。</mark></p>
<pre><code ><span ><span ><span ><</span>p</span><span >></span></span> <span ><span ><span ></</span>p</span><span >></span></span>
</code></pre>
3、换行 br 标签(熟记)
<blockquote>
<p>单词缩写： <code>break</code> 打断 ,换行</p>
</blockquote>
<p>在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后自动换行。如果希望某段文本强制换行显示，就需要使用换行标签</p>
<pre><code ><span ><span ><span ><</span>br</span> <span >/></span></span>
</code></pre>
4、排版标签 div、span (核心熟记)
<p><code></code> 、<code><span></code>、<code><table></code><br /> 排版标签主要和 CSS 搭配使用，显示网页结构的标签，是网页布局最常用的标签。<code><table></code>标签是古老的排版方式，现在已经不用了。</p>
div span 是没有语义的 是我们网页布局主要的2个盒子 css+divdiv 就是 <code>division</code> 的缩写 分割， 分区的意思 其实有很多div 来组合网页。span, 跨度，跨距；范围
<p><mark>这个 <code>span</code> 有时会作为属性，赋予一个跨越的作用，比如跨越多少列多少行，这几行几列的样式，会被 CSS 渲染。</mark></p>
5、文本格式化标签(熟记)
<p><code>b</code> <code>i</code> <code>s</code> <code>u</code> 只有使用，没有<mark>强调</mark>的意思 <code>strong</code> <code>em</code> <code>del</code> <code>ins</code> 语义更强烈</p>
b 粗体标签(熟记)
<pre><code ><span ><span ><span ><</span>b</span><span >></span></span>
</code></pre>
i 斜体标签(熟记)
<p><code><i></code> 定义与文本中其余部分不同的部分，并把这部分文本呈现为<mark>斜体文本</mark>。<br /> <code><i></code> 标签被用来表示科技术语、其他语种的成语俗语、想法、宇宙飞船的名字等等。</p>
<p><mark>在没有其他适当语义的元素可以使用时，请使用 <code><i></code> 元素，如果看到有些不懂的 HTML 文件内应用该标签，大致可以被理解为这种作用。</mark></p>
u 下划线标签
<p>注释：HTML5 规范建议开发者尽量使用其他元素替代 <code><u></code> 元素。</p>
6、图像标签img (重点)
<blockquote>
<p>单词缩写： <code>image</code> 图像</p>
</blockquote>
<pre><code ><span ><span ><span ><</span>img</span> <span >src</span><span ><span >=</span><span >"</span>图像URL<span >"</span></span> <span >/></span></span>
</code></pre>
<p>标签属性参数</p>
<code>alt</code> （alternation 可替换文本）<code>src</code> （source 图片源）
7、超链接标签(重点)
<blockquote>
<p>单词缩写： <code>anchor</code> 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的</p>
</blockquote>
水平线标签(认识)
<blockquote>
<p>单词缩写： <code>horizontal</code> 横线 [ˌhɔrəˈzɑntl] 同上</p>
</blockquote>
<p>在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。这些水平线可以通过插入图片实现，也可以简单地通过标签来完成，</p>
<pre><code ><span ><span ><span ><</span>hr</span><span >/></span></span>
</code></pre>
<p><code><hr/></code>是空元素，只有开始标签，没有闭合标签。</p>
四、标签属性
<p>使用HTML制作网页时，如果想让HTML标签提供更多的信息，可以使用HTML标签的属性加以设置。其基本语法格式如下：</p>
<pre><code ><span ><span ><span ><</span>标签名</span> <span >属性1</span><span ><span >=</span><span >"</span>属性值1<span >"</span></span> <span >属性2</span><span ><span >=</span><span >"</span>属性值2<span >"</span></span> <span >…</span><span >></span></span> 内容 <span ><span ><span ></</span>标签名</span><span >></span></span>
</code></pre>
<p><mark>注意</mark>：</p>
<p>标签可以拥有多个属性，必须写在开始标签中，位于标签名后面。</p> <p><mark>属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。</mark></p> <p><mark>任何标签的属性都有默认值，省略该属性则取默认值。</mark></p>
<p><mark>建议</mark>： 尽量不使用 CSS的样式属性，使用<mark>外部链接样式</mark>，方便以后修改。</p>
<blockquote></blockquote>
参考链接
<p>学习链接</p>
<div class="entry-copyright">
<p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://outofmemory.cn/web/1297012.html" title="初级篇 1 - HTML（HyperText Markup Language）超文本标记语言 - 注意要点 - 标签 - 空元素 - Html、CSS 与 JavaScript 的关系介绍">http://outofmemory.cn/web/1297012.html</a></p>
</div>
</div>
<div class="entry-tag">
<a href="/tag/140.html" rel="tag">html</a>
<a href="/tag/64.html" rel="tag">前端</a>
<a href="/tag/40.html" rel="tag">经验分享</a>
<a href="/tag/29.html" rel="tag">学习</a>
</div>
<div class="entry-action">
<a id="thread-like" class="btn-zan" href="javascript:;" tid="1297012">
<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="88759" target="_blank" href="/user/88759.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="1297012" 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/js%E5%B0%8F%E9%A1%B9%E7%9B%AE.png">
<a href="/web/1297011.html" title="js小项目" rel="prev">
<span>js小项目</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-10</span>
</div>
</div>
<div class="entry-page-next j-lazy" style="background-image: url(/view/img/theme/lazy.png);" data-original="/aiimages/uniapp+%E8%B7%B3%E8%BD%AC%E4%BC%A0%E5%8F%82+%5B%E2%80%98object%E2%80%98%5D+%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%2C+%E9%81%87%E5%9D%91%E8%A7%A3%E5%86%B3.png">
<a href="/web/1297013.html" title="uniapp 跳转传参 [‘object‘] 问题解决, 遇坑解决" rel="next">
<span>uniapp 跳转传参 [‘object‘] 问题解决, 遇坑解决</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-10</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/88759.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/88759.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>243</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/88759.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/5828979.html" title="三字经有多少字呀？">
三字经有多少字呀？ </a>
</li>
<li>
<a href="/bake/5753993.html" title="散养孩子什么意思">
散养孩子什么意思 </a>
</li>
<li>
<a href="/bake/5745895.html" title="新买的保温杯第一次如何处理 新买的保温杯第一次用的清洗方法">
新买的保温杯第一次如何处理 新买的保温杯第一次用的清洗方法 </a>
</li>
<li>
<a href="/bake/5740883.html" title="陨石是被哪个星球吸引的_阿连德陨石密度和硬度">
陨石是被哪个星球吸引的_阿连德陨石密度和硬度 </a>
</li>
<li>
<a href="/bake/5736742.html" title="二手车平台_网上卖二手车平台哪家好">
二手车平台_网上卖二手车平台哪家好 </a>
</li>
</ul>
</div>
</div>
<div id="wpcom-post-thumb-5" class="widget widget_post_thumb">
<h3 class="widget-title"><span>相关文章</span></h3>
<ul>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608713.html" title="HTML+CSS 实现顶部导航栏菜单制作">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML+CSS 实现顶部导航栏菜单制作" data-original="/aiimages/HTML%2BCSS+%E5%AE%9E%E7%8E%B0%E9%A1%B6%E9%83%A8%E5%AF%BC%E8%88%AA%E6%A0%8F%E8%8F%9C%E5%8D%95%E5%88%B6%E4%BD%9C.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608713.html" title="HTML+CSS 实现顶部导航栏菜单制作">
HTML+CSS 实现顶部导航栏菜单制作 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608712.html" title="关于html选择框创建占位符的问题">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="关于html选择框创建占位符的问题" data-original="/aiimages/%E5%85%B3%E4%BA%8Ehtml%E9%80%89%E6%8B%A9%E6%A1%86%E5%88%9B%E5%BB%BA%E5%8D%A0%E4%BD%8D%E7%AC%A6%E7%9A%84%E9%97%AE%E9%A2%98.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608712.html" title="关于html选择框创建占位符的问题">
关于html选择框创建占位符的问题 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608711.html" title="html css3不拉伸图片显示效果">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="html css3不拉伸图片显示效果" data-original="/aiimages/html+css3%E4%B8%8D%E6%8B%89%E4%BC%B8%E5%9B%BE%E7%89%87%E6%98%BE%E7%A4%BA%E6%95%88%E6%9E%9C.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608711.html" title="html css3不拉伸图片显示效果">
html css3不拉伸图片显示效果 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608710.html" title="html中显示特殊符号">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="html中显示特殊符号" data-original="/aiimages/html%E4%B8%AD%E6%98%BE%E7%A4%BA%E7%89%B9%E6%AE%8A%E7%AC%A6%E5%8F%B7.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608710.html" title="html中显示特殊符号">
html中显示特殊符号 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608709.html" title="纯html+css实现打字效果">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="纯html+css实现打字效果" data-original="/aiimages/%E7%BA%AFhtml%2Bcss%E5%AE%9E%E7%8E%B0%E6%89%93%E5%AD%97%E6%95%88%E6%9E%9C.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608709.html" title="纯html+css实现打字效果">
纯html+css实现打字效果 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608708.html" title="html+css实现环绕倒影加载特效">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="html+css实现环绕倒影加载特效" data-original="/aiimages/html%2Bcss%E5%AE%9E%E7%8E%B0%E7%8E%AF%E7%BB%95%E5%80%92%E5%BD%B1%E5%8A%A0%E8%BD%BD%E7%89%B9%E6%95%88.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608708.html" title="html+css实现环绕倒影加载特效">
html+css实现环绕倒影加载特效 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608707.html" title="HTML+CSS实现导航条下拉菜单的示例代码">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML+CSS实现导航条下拉菜单的示例代码" data-original="/aiimages/HTML%2BCSS%E5%AE%9E%E7%8E%B0%E5%AF%BC%E8%88%AA%E6%9D%A1%E4%B8%8B%E6%8B%89%E8%8F%9C%E5%8D%95%E7%9A%84%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608707.html" title="HTML+CSS实现导航条下拉菜单的示例代码">
HTML+CSS实现导航条下拉菜单的示例代码 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608706.html" title="纯html+css实现奥运五环的示例代码">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="纯html+css实现奥运五环的示例代码" data-original="/aiimages/%E7%BA%AFhtml%2Bcss%E5%AE%9E%E7%8E%B0%E5%A5%A5%E8%BF%90%E4%BA%94%E7%8E%AF%E7%9A%84%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608706.html" title="纯html+css实现奥运五环的示例代码">
纯html+css实现奥运五环的示例代码 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608705.html" title="纯html+css实现Element loading效果">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="纯html+css实现Element loading效果" data-original="/aiimages/%E7%BA%AFhtml%2Bcss%E5%AE%9E%E7%8E%B0Element+loading%E6%95%88%E6%9E%9C.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608705.html" title="纯html+css实现Element loading效果">
纯html+css实现Element loading效果 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608703.html" title="HTML基础详解">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML基础详解" data-original="/aiimages/HTML%E5%9F%BA%E7%A1%80%E8%AF%A6%E8%A7%A3.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608703.html" title="HTML基础详解">
HTML基础详解 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608702.html" title="HTML基础详解（下）">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML基础详解（下）" data-original="/aiimages/HTML%E5%9F%BA%E7%A1%80%E8%AF%A6%E8%A7%A3%EF%BC%88%E4%B8%8B%EF%BC%89.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608702.html" title="HTML基础详解（下）">
HTML基础详解（下） </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608698.html" title="html网页中使用希腊字母的方法">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="html网页中使用希腊字母的方法" data-original="/aiimages/html%E7%BD%91%E9%A1%B5%E4%B8%AD%E4%BD%BF%E7%94%A8%E5%B8%8C%E8%85%8A%E5%AD%97%E6%AF%8D%E7%9A%84%E6%96%B9%E6%B3%95.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608698.html" title="html网页中使用希腊字母的方法">
html网页中使用希腊字母的方法 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/608696.html" title="HTML汉字编码标准介绍">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML汉字编码标准介绍" data-original="/aiimages/HTML%E6%B1%89%E5%AD%97%E7%BC%96%E7%A0%81%E6%A0%87%E5%87%86%E4%BB%8B%E7%BB%8D.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608696.html" title="HTML汉字编码标准介绍">
HTML汉字编码标准介绍 </a>
</p>
<p class="item-date">2022-4-14</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/587635.html" title="css背景图片加载失败，页面部分图标无法显示">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="css背景图片加载失败，页面部分图标无法显示" data-original="/aiimages/css%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%E5%8A%A0%E8%BD%BD%E5%A4%B1%E8%B4%A5%EF%BC%8C%E9%A1%B5%E9%9D%A2%E9%83%A8%E5%88%86%E5%9B%BE%E6%A0%87%E6%97%A0%E6%B3%95%E6%98%BE%E7%A4%BA.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/587635.html" title="css背景图片加载失败，页面部分图标无法显示">
css背景图片加载失败，页面部分图标无法显示 </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/587172.html" title="若依管理系统RuoYi-Vue（一）：项目启动和菜单创建">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="若依管理系统RuoYi-Vue（一）：项目启动和菜单创建" data-original="/aiimages/%E8%8B%A5%E4%BE%9D%E7%AE%A1%E7%90%86%E7%B3%BB%E7%BB%9FRuoYi-Vue%EF%BC%88%E4%B8%80%EF%BC%89%EF%BC%9A%E9%A1%B9%E7%9B%AE%E5%90%AF%E5%8A%A8%E5%92%8C%E8%8F%9C%E5%8D%95%E5%88%9B%E5%BB%BA.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/587172.html" title="若依管理系统RuoYi-Vue（一）：项目启动和菜单创建">
若依管理系统RuoYi-Vue（一）：项目启动和菜单创建 </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/587084.html" title="Hello！GitHub 好用好玩值得收藏的开源项目集合~">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Hello！GitHub 好用好玩值得收藏的开源项目集合~" data-original="/aiimages/Hello%EF%BC%81GitHub+%E5%A5%BD%E7%94%A8%E5%A5%BD%E7%8E%A9%E5%80%BC%E5%BE%97%E6%94%B6%E8%97%8F%E7%9A%84%E5%BC%80%E6%BA%90%E9%A1%B9%E7%9B%AE%E9%9B%86%E5%90%88%7E.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/587084.html" title="Hello！GitHub 好用好玩值得收藏的开源项目集合~">
Hello！GitHub 好用好玩值得收藏的开源项目集合~ </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/587025.html" title="springboot 使用freemarker自定义标签">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="springboot 使用freemarker自定义标签" data-original="/aiimages/springboot+%E4%BD%BF%E7%94%A8freemarker%E8%87%AA%E5%AE%9A%E4%B9%89%E6%A0%87%E7%AD%BE.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/587025.html" title="springboot 使用freemarker自定义标签">
springboot 使用freemarker自定义标签 </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/586879.html" title="移动Web UI库（H5框架）">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="移动Web UI库（H5框架）" data-original="/aiimages/%E7%A7%BB%E5%8A%A8Web+UI%E5%BA%93%EF%BC%88H5%E6%A1%86%E6%9E%B6%EF%BC%89.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/586879.html" title="移动Web UI库（H5框架）">
移动Web UI库（H5框架） </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/586836.html" title="经典网页设计：20个华丽的 iPhone 应用程序演示网站">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="经典网页设计：20个华丽的 iPhone 应用程序演示网站" data-original="/aiimages/%E7%BB%8F%E5%85%B8%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1%EF%BC%9A20%E4%B8%AA%E5%8D%8E%E4%B8%BD%E7%9A%84+iPhone+%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F%E6%BC%94%E7%A4%BA%E7%BD%91%E7%AB%99.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/586836.html" title="经典网页设计：20个华丽的 iPhone 应用程序演示网站">
经典网页设计：20个华丽的 iPhone 应用程序演示网站 </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/zaji/585482.html" title="Nanui 教程">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Nanui 教程" data-original="/aiimages/Nanui+%E6%95%99%E7%A8%8B.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/zaji/585482.html" title="Nanui 教程">
Nanui 教程 </a>
</p>
<p class="item-date">2022-4-12</p>
</div>
</li>
</ul>
</div>
<div class="widget widget_post_thumb">
<h3 class="widget-title"><span>随机标签</span></h3>
<div class="entry-tag">
<!-- 循环输出 tag 开始 -->
<a href="/tag/605714.html" rel="tag">连凯</a>
<a href="/tag/605672.html" rel="tag">大韩</a>
<a href="/tag/605664.html" rel="tag">汽车运输</a>
<a href="/tag/605659.html" rel="tag">王村</a>
<a href="/tag/605637.html" rel="tag">稀里糊涂</a>
<a href="/tag/605613.html" rel="tag">兵燹</a>
<a href="/tag/605600.html" rel="tag">黄禹锡</a>
<a href="/tag/605597.html" rel="tag">神奇四侠</a>
<a href="/tag/605535.html" rel="tag">性观念</a>
<a href="/tag/605504.html" rel="tag">克森</a>
<a href="/tag/605486.html" rel="tag">strjson</a>
<a href="/tag/605472.html" rel="tag">献爱心</a>
<a href="/tag/605441.html" rel="tag">弓手</a>
<a href="/tag/605399.html" rel="tag">尽管如此</a>
<a href="/tag/605396.html" rel="tag">售楼部</a>
<a href="/tag/605384.html" rel="tag">手画</a>
<a href="/tag/605349.html" rel="tag">电梯配件</a>
<a href="/tag/605294.html" rel="tag">床下</a>
<a href="/tag/605278.html" rel="tag">御林</a>
<a href="/tag/605257.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 = 1;
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/1297012.html",
"title": "初级篇 1 - HTML（HyperText Markup Language）超文本标记语言 - 注意要点 - 标签 - 空元素 - Html、CSS 与 JavaScript 的关系介绍",
"images": ["http://outofmemory.cn/aiimages/%E5%88%9D%E7%BA%A7%E7%AF%87+1+-+HTML%EF%BC%88HyperText+Markup+Language%EF%BC%89%E8%B6%85%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80+-+%E6%B3%A8%E6%84%8F%E8%A6%81%E7%82%B9+-+%E6%A0%87%E7%AD%BE+-+%E7%A9%BA%E5%85%83%E7%B4%A0+-+Html%E3%80%81CSS+%E4%B8%8E+JavaScript+%E7%9A%84%E5%85%B3%E7%B3%BB%E4%BB%8B%E7%BB%8D.png"],
"description": "目录 学习目标补充说明：了解字符编码格式一、简介二、HTML 的注意要点1、 HTML文档的后缀名 和 Html文档内一切标签都不区分大小写 - 推荐小写标签2、 HTML 文件的标签布局 声明 - 全身 - 头",
"pubDate": "2022-06-10",
"upDate": "2022-06-10"
}
</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 = 'UMnrzl3hcRJkNZUGENRhCPwVDcsmLwnlMhqhPK_2BkvDkFwFMhuH7BRKYkDQQQ78DF1wciKXQvdV_2FfGcfHo2S7nQ_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 = '1297012';
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 : '初级篇 1 - HTML（HyperText Markup Language）超文本标记语言 - 注意要点 - 标签 - 空元素 - Html、CSS 与 JavaScript 的关系介绍',
logo_pure : '/view/img/logo.png',
att_img : '/aiimages/%E5%88%9D%E7%BA%A7%E7%AF%87+1+-+HTML%EF%BC%88HyperText+Markup+Language%EF%BC%89%E8%B6%85%E6%96%87%E6%9C%AC%E6%A0%87%E8%AE%B0%E8%AF%AD%E8%A8%80+-+%E6%B3%A8%E6%84%8F%E8%A6%81%E7%82%B9+-+%E6%A0%87%E7%AD%BE+-+%E7%A9%BA%E5%85%83%E7%B4%A0+-+Html%E3%80%81CSS+%E4%B8%8E+JavaScript+%E7%9A%84%E5%85%B3%E7%B3%BB%E4%BB%8B%E7%BB%8D.png',
excerpt : '目录 学习目标补充说明：了解字符编码格式一、简介二、HTML 的注意要点1、 HTML文档的后缀名 和 Html文档内一切标签都不区分大小写 - 推荐小写标签2、 HTML 文件的标签布局 声明 - 全身 - 头',
author : '重生舒眉',
cat_name : 'html-js-css',
time_y_m : '2022年06月',
time_d : '10',
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>