文章目录
一、
vscode的安装与插件安装二、html 文件结构三、文本四、图片五、音频和视频六、超链接七、表单八、列表九、表格十、语义标签
一、vscode的安装与插件安装
Live Server 插件。Auto Rename Tag 插件，当修改开始标签时，结束标签也随着修改。设置自动格式化，保存会自动格式化代码。
二、html 文件结构
html的所有标签为树型结构，每个标签都是一个 节点 ，起始标签 和 结束标签 中的所有部分都是其的 子节点，同一级标签是兄弟节点，有些特殊标签是没有起始标签和结束标签的，例如
meta标签，即叶子节点。
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web应用课title>
head>
<body>
<h1>第一讲h1>
body>
html>
：存配置信息，例如， 样式文件（CSS），js 文件，标题，meta 信息
</code>：网页标题。搜索引擎显示的标题 <code><body></code>：承载网站内所有内容的地方<code><meta></code>：不能放到 中的放到 meta 中。meta 一般存 charset，description（搜索引擎中标题下方的描述），keywords。<code>icon</code>: 网页 logo
三、文本
绝大部分标签都可以看作是 <code>div</code>和 <code>span</code>标签扩展过来的。<code></code>：块状元素，默认带一个回车，长度默认 100%。用来定义一堆代码块的，将一堆代码放到一个 div 中，这一堆代码就相当于一个整体，这样就可以对整体进行 *** 作 ，逻辑上将其归到一类打包到一起，方便 css 和 js 的 *** 作。 <br /> 快捷写法：<code>div>div>div</code> 嵌套多层 div，<code>div*5</code> 搞5个同级的 div。<br /> <code><p></code>会将空格和回车删掉，<code><p></code>中间的内容中如果有空格和回车不会显示出来<br /> <code><pre></code>会保留空格和回车、字体是等宽字体。<code><span></code>：行内元素，默认不带回车。
四、图片
<code></code><code>src</code>：图片路径，可以是绝对路径也可以是一个网址链接。<code>alt</code>：当图片无法显示时则会显示 alt 里面的内容， 一般写这个图片表示的含义。<code>width</code>，<code>height</code>。如果只设置其中的一个，另一个未设置的属性则会等比例压缩显示。
五、音频和视频
<code>audio</code>音频标签。<br /> src：音频路径<br /> source：用于播放多个视频<code>video</code>视频标签，用法同音频标签
六、超链接
<code></code>
可以跳转到站内也可以跳转到站外target = “_blank”：跳转时打开新的标签页<code></code>标签中可以嵌套其它标签
七、表单
<code><form></code>作用是和后端服务器进行交互，例如登录一个页面需要提交用户名密码等信息，需要将这些数据传给服务器，表单就是方便向服务器传送信息的功能。label 和 input是绑定在一起的，label 是用于标识 input 是干嘛用的。一个 url 会接若干个参数，分割点是 ?，? 后面的都是参数，每一个参数的形式为：参数名称 = 参数值。
八、列表
<code>ul</code>无序列表，<code>ol</code>有序列表列表里的每一个选项用 <code></code>括起来每一个列表里都可以嵌套列表
九、表格
<code><table></code><code><canvas></code>定义表格名称表格分为两个区域，一个是表头 <code><thead></code>，另一个是数据区 <code><tbody></code>每一行用 <code><tr></code>表头每行的每一个单元格用 <code><th></code>数据区每行的每一个单元格用 <code><td></code>
十、语义标签
作用：替代 <code></code>，因为 <code></code>只有语法是上的作用无实际意义。语义标签让写代码的时候更加简洁，让标签更具有实际意义，只看标签不用看 <code>class</code>即可知道这部分的作用。例如，<code><header></header></code>等价于 <code></code><code><header></code>标题区，<code><nav></code>导航区，<code><section></code>一块，<code></code>文章区，<code><figure></code>图片区，<code><footer></code>页脚
<div class="entry-copyright">
<p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址: <a href="http://outofmemory.cn/web/1299053.html" title="Web 基础 - html">http://outofmemory.cn/web/1299053.html</a></p>
</div>
</div>
<div class="entry-tag">
<a href="/tag/19.html" rel="tag">vscode</a>
<a href="/tag/16632.html" rel="tag">web</a>
<a href="/tag/64.html" rel="tag">前端</a>
<a href="/tag/140.html" rel="tag">html</a>
</div>
<div class="entry-action">
<a id="thread-like" class="btn-zan" href="javascript:;" tid="1299053">
<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="82858" target="_blank" href="/user/82858.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="1299053" 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/%E5%AD%A6%E4%B9%A0Vue-%E5%85%A5%E9%97%A8%E7%BA%A7%E5%88%AB.png">
<a href="/web/1299052.html" title="学习Vue-入门级别" rel="prev">
<span>学习Vue-入门级别</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/Vue%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0%EF%BC%88%E4%BA%94%EF%BC%89.png">
<a href="/web/1299054.html" title="Vue学习笔记（五）" rel="next">
<span>Vue学习笔记（五）</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/82858.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/82858.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>213</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/82858.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/5802114.html" title="一颗永流传上一句话是什么？">
一颗永流传上一句话是什么？ </a>
</li>
<li>
<a href="/zaji/5789715.html" title="农业指的是什么？">
农业指的是什么？ </a>
</li>
<li>
<a href="/bake/5773260.html" title="两个字的游戏名字简单吸引人">
两个字的游戏名字简单吸引人 </a>
</li>
<li>
<a href="/bake/5746489.html" title="没有开封的椰果保存方法 没有开封的椰果怎么保存">
没有开封的椰果保存方法 没有开封的椰果怎么保存 </a>
</li>
<li>
<a href="/zaji/5689226.html" title="2 0 2 0 年 第 十 一 届 蓝 桥 杯 - 省赛 - Python大学组 - B.寻找2020">
2 0 2 0 年 第 十 一 届 蓝 桥 杯 - 省赛 - Python大学组 - B.寻找2020 </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/618168.html" title="Web前端开发css基础样式总结">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web前端开发css基础样式总结" data-original="/aiimages/Web%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91css%E5%9F%BA%E7%A1%80%E6%A0%B7%E5%BC%8F%E6%80%BB%E7%BB%93.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/618168.html" title="Web前端开发css基础样式总结">
Web前端开发css基础样式总结 </a>
</p>
<p class="item-date">2022-4-15</p>
</div>
</li>
<li class="item">
<div class="item-img">
<a class="item-img-inner" href="/web/615507.html" title="使用css3和javascript开发web拾色器实例代码">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="使用css3和javascript开发web拾色器实例代码" data-original="/aiimages/%E4%BD%BF%E7%94%A8css3%E5%92%8Cjavascript%E5%BC%80%E5%8F%91web%E6%8B%BE%E8%89%B2%E5%99%A8%E5%AE%9E%E4%BE%8B%E4%BB%A3%E7%A0%81.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/615507.html" title="使用css3和javascript开发web拾色器实例代码">
使用css3和javascript开发web拾色器实例代码 </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/615233.html" title="HTML5 Web 存储详解">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5 Web 存储详解" data-original="/aiimages/HTML5+Web+%E5%AD%98%E5%82%A8%E8%AF%A6%E8%A7%A3.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/615233.html" title="HTML5 Web 存储详解">
HTML5 Web 存储详解 </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/615064.html" title="HTML5之web workers_动力节点Java学院整理">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5之web workers_动力节点Java学院整理" data-original="/aiimages/HTML5%E4%B9%8Bweb+workers_%E5%8A%A8%E5%8A%9B%E8%8A%82%E7%82%B9Java%E5%AD%A6%E9%99%A2%E6%95%B4%E7%90%86.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/615064.html" title="HTML5之web workers_动力节点Java学院整理">
HTML5之web workers_动力节点Java学院整理 </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/614315.html" title="突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述" data-original="/aiimages/%E7%AA%81%E8%A2%ADHTML5%E4%B9%8BJavascript+API%E6%89%A9%E5%B1%951%E2%80%94Web+Worker%E5%BC%82%E6%AD%A5%E6%89%A7%E8%A1%8C%E5%8F%8A%E7%9B%B8%E5%85%B3%E6%A6%82%E8%BF%B0.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/614315.html" title="突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述">
突袭HTML5之Javascript API扩展1—Web Worker异步执行及相关概述 </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/614240.html" title="HTML5 Web Workers之网站也能多线程的实现">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5 Web Workers之网站也能多线程的实现" data-original="/aiimages/HTML5+Web+Workers%E4%B9%8B%E7%BD%91%E7%AB%99%E4%B9%9F%E8%83%BD%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%9A%84%E5%AE%9E%E7%8E%B0.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/614240.html" title="HTML5 Web Workers之网站也能多线程的实现">
HTML5 Web Workers之网站也能多线程的实现 </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/613343.html" title="HTML5本地存储之Web Storage详解">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5本地存储之Web Storage详解" data-original="/aiimages/HTML5%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E4%B9%8BWeb+Storage%E8%AF%A6%E8%A7%A3.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/613343.html" title="HTML5本地存储之Web Storage详解">
HTML5本地存储之Web Storage详解 </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/613311.html" title="Html5 web本地存储实例详解">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Html5 web本地存储实例详解" data-original="/aiimages/Html5+web%E6%9C%AC%E5%9C%B0%E5%AD%98%E5%82%A8%E5%AE%9E%E4%BE%8B%E8%AF%A6%E8%A7%A3.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/613311.html" title="Html5 web本地存储实例详解">
Html5 web本地存储实例详解 </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/613175.html" title="Web前端页面跳转并取到值">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web前端页面跳转并取到值" data-original="/aiimages/Web%E5%89%8D%E7%AB%AF%E9%A1%B5%E9%9D%A2%E8%B7%B3%E8%BD%AC%E5%B9%B6%E5%8F%96%E5%88%B0%E5%80%BC.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/613175.html" title="Web前端页面跳转并取到值">
Web前端页面跳转并取到值 </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/612972.html" title="浅谈HTML5 Web Worker的使用">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="浅谈HTML5 Web Worker的使用" data-original="/aiimages/%E6%B5%85%E8%B0%88HTML5+Web+Worker%E7%9A%84%E4%BD%BF%E7%94%A8.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/612972.html" title="浅谈HTML5 Web Worker的使用">
浅谈HTML5 Web Worker的使用 </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/612826.html" title="HTML5中的Web Notification桌面右下角通知功能的实现">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5中的Web Notification桌面右下角通知功能的实现" data-original="/aiimages/HTML5%E4%B8%AD%E7%9A%84Web+Notification%E6%A1%8C%E9%9D%A2%E5%8F%B3%E4%B8%8B%E8%A7%92%E9%80%9A%E7%9F%A5%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/612826.html" title="HTML5中的Web Notification桌面右下角通知功能的实现">
HTML5中的Web Notification桌面右下角通知功能的实现 </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/612494.html" title="HTML5中的Web Notification桌面通知功能的实现方法">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML5中的Web Notification桌面通知功能的实现方法" data-original="/aiimages/HTML5%E4%B8%AD%E7%9A%84Web+Notification%E6%A1%8C%E9%9D%A2%E9%80%9A%E7%9F%A5%E5%8A%9F%E8%83%BD%E7%9A%84%E5%AE%9E%E7%8E%B0%E6%96%B9%E6%B3%95.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/612494.html" title="HTML5中的Web Notification桌面通知功能的实现方法">
HTML5中的Web Notification桌面通知功能的实现方法 </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/612277.html" title="web字体加载方案优化小结">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="web字体加载方案优化小结" data-original="/aiimages/web%E5%AD%97%E4%BD%93%E5%8A%A0%E8%BD%BD%E6%96%B9%E6%A1%88%E4%BC%98%E5%8C%96%E5%B0%8F%E7%BB%93.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/612277.html" title="web字体加载方案优化小结">
web字体加载方案优化小结 </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/610626.html" title="Web分页打印 细线表格+分页打印之终极攻略">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web分页打印 细线表格+分页打印之终极攻略" data-original="/aiimages/Web%E5%88%86%E9%A1%B5%E6%89%93%E5%8D%B0+%E7%BB%86%E7%BA%BF%E8%A1%A8%E6%A0%BC%2B%E5%88%86%E9%A1%B5%E6%89%93%E5%8D%B0%E4%B9%8B%E7%BB%88%E6%9E%81%E6%94%BB%E7%95%A5.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/610626.html" title="Web分页打印 细线表格+分页打印之终极攻略">
Web分页打印 细线表格+分页打印之终极攻略 </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/610437.html" title="Web 标准学习 理解结构和表现相分离">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web 标准学习 理解结构和表现相分离" data-original="/aiimages/Web+%E6%A0%87%E5%87%86%E5%AD%A6%E4%B9%A0+%E7%90%86%E8%A7%A3%E7%BB%93%E6%9E%84%E5%92%8C%E8%A1%A8%E7%8E%B0%E7%9B%B8%E5%88%86%E7%A6%BB.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/610437.html" title="Web 标准学习 理解结构和表现相分离">
Web 标准学习 理解结构和表现相分离 </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/610410.html" title="Web页面 自定义选择框Select">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web页面 自定义选择框Select" data-original="/aiimages/Web%E9%A1%B5%E9%9D%A2+%E8%87%AA%E5%AE%9A%E4%B9%89%E9%80%89%E6%8B%A9%E6%A1%86Select.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/610410.html" title="Web页面 自定义选择框Select">
Web页面 自定义选择框Select </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/609345.html" title="Web开发中的基本概念和用到的技术简介">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Web开发中的基本概念和用到的技术简介" data-original="/aiimages/Web%E5%BC%80%E5%8F%91%E4%B8%AD%E7%9A%84%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5%E5%92%8C%E7%94%A8%E5%88%B0%E7%9A%84%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/609345.html" title="Web开发中的基本概念和用到的技术简介">
Web开发中的基本概念和用到的技术简介 </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/608980.html" title="web响应式布局中iframe自适应的方法">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="web响应式布局中iframe自适应的方法" data-original="/aiimages/web%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80%E4%B8%ADiframe%E8%87%AA%E9%80%82%E5%BA%94%E7%9A%84%E6%96%B9%E6%B3%95.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/web/608980.html" title="web响应式布局中iframe自适应的方法">
web响应式布局中iframe自适应的方法 </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="/langs/606975.html" title="PHP">
<img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="PHP" data-original="/aiimages/PHP.png" />
</a>
</div>
<div class="item-content">
<p class="item-title">
<a href="/langs/606975.html" title="PHP">
PHP </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>
</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/605710.html" rel="tag">劳伦</a>
<a href="/tag/605682.html" rel="tag">南口</a>
<a href="/tag/605678.html" rel="tag">哪知</a>
<a href="/tag/605637.html" rel="tag">稀里糊涂</a>
<a href="/tag/605625.html" rel="tag">初二年级</a>
<a href="/tag/605613.html" rel="tag">兵燹</a>
<a href="/tag/605603.html" rel="tag">失败率</a>
<a href="/tag/605543.html" rel="tag">RowsCount</a>
<a href="/tag/605530.html" rel="tag">oh</a>
<a href="/tag/605527.html" rel="tag">dkeys</a>
<a href="/tag/605484.html" rel="tag">索夫</a>
<a href="/tag/605445.html" rel="tag">神恩</a>
<a href="/tag/605420.html" rel="tag">老年病</a>
<a href="/tag/605389.html" rel="tag">拉迪</a>
<a href="/tag/605362.html" rel="tag">手拉葫芦</a>
<a href="/tag/605324.html" rel="tag">兑美元</a>
<a href="/tag/605276.html" rel="tag">暖气费</a>
<a href="/tag/605242.html" rel="tag">现住</a>
<a href="/tag/605241.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/1299053.html",
"title": "Web 基础 - html",
"images": ["http://outofmemory.cn/aiimages/Web+%E5%9F%BA%E7%A1%80+-+html.png"],
"description": "文章目录 一、vscode的安装与插件安装二、html 文件结构三、文本四、图片五、音频和视频六、超链接七、表单八、列表九、表格十、语义标签 一、vscode的安装与插件安装 Live Server 插件。Auto Rename Tag 插",
"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 = '_2Fj_2F_2B95h3anWRRKv9EVBwRfaqhT9vn9QjtKvp7RUkMnRAWIh7aHr5NCNsxfSBh3l1p9bCSg9d2xklfLMcYj6Zmw_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 = '1299053';
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 : 'Web 基础 - html',
logo_pure : '/view/img/logo.png',
att_img : '/aiimages/Web+%E5%9F%BA%E7%A1%80+-+html.png',
excerpt : '文章目录 一、vscode的安装与插件安装二、html 文件结构三、文本四、图片五、音频和视频六、超链接七、表单八、列表九、表格十、语义标签 一、vscode的安装与插件安装 Live Server 插件。Auto Rename Tag 插',
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>
