投稿
  1. 首页
  2. html-js-css

一文搞懂【Web 前端】HTML 与 CSS 基础知识

大唐御医下载•27天前•html-js-css•阅读6

一文搞懂【Web 前端】HTML 与 CSS 基础知识,第1张

摘要

一个 Web 页面是如何在浏览器上展示的？我们在浏览器上查看网页源代码，可看到众多的标签、符号和文字，这就是一个 HTML 文件，而浏览器可以将这个文件解析成一个 Web 页面。一个 Web 页面如何设计样式、呈现出精美的视觉效果？则需要通过 CSS 对 HTML 进行加工美化。

文章目录 摘要HTML简介基本架构HTML 标签基本标签文本格式化特殊标签 CSS简介CSS 语法基本形式文本属性结构属性

HTML 简介

HTML(HyperText Markup Language) 超文本标记语言，何谓超文本？简单来说，超文本指具有超链接功能的文本，即一个超文本可以由若干个超链接构成，最常见的应用场景便是 Web 页面，也用于其他领域，譬如 Markdown 文档。

基本架构

标签：表明是一个 HTML 文档。
</code> 标签：定义文档的标题。<br /> <code><body></code> 标签：定义文档的内容主体。<br /> <code><p></code> 标签：定义一个段落。<br /> <code><br /></code> 标签：换行标签。</p> <p>注：莫要忘记加上结束标签！</p> <pre><code ><span ><span ><span ><</span><strong class="superseo"><a href="/tag/140.html" class="superseo">html</a></strong></span><span >></span></span> <span ><span ><span ><</span>title</span><span >></span></span>demo<span ><span ><span ></</span>title</span><span >></span></span> <span ><span ><span ><</span>body</span><span >></span></span> <span ><span ><span ><</span>p</span><span >></span></span> Hello World!<span ><span ><span ><</span>br</span> <span >/></span></span>Hello Web! <span ><span ><span ></</span>p</span><span >></span></span> <span ><span ><span ></</span>body</span><span >></span></span> <span ><span ><span ></</span>html</span><span >></span></span> </code></pre> <p>这段代码在浏览器中的效果：</p> <title> demo

Hello World!
Hello Web!

HTML 标签 基本标签

html 标签：表示是一个 HTML 文档。
</code> 标签：定义文档的标题。<br /> <code><body></code> 标签：定义文档的内容主体。<br /> <code><p></code> 标签：定义一个段落。<br /> <code><br /></code> 标签：表示换行。<br /> <code><h></code> 标签：定义文本中的标题。<br /> <code><hr></code> 标签：表示一条水平分割线。<br /> <code><!-- --></code> 标签：定义注释。</p> 文本格式化 <pre><code ><span ><span ><span ><</span>b</span><span >></span></span>粗体<span ><span ><span ></</span>b</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>i</span><span >></span></span>斜体<span ><span ><span ></</span>i</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>em</span><span >></span></span>强调文字<span ><span ><span ></</span>em</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>small</span><span >></span></span>小号文字<span ><span ><span ></</span>small</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>strong</span><span >></span></span>加重视觉效果<span ><span ><span ></</span>strong</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>sub</span><span >></span></span>上标<span ><span ><span ></</span>sub</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>sup</span><span >></span></span>下标<span ><span ><span ></</span>sup</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>ins</span><span >></span></span>插入字<span ><span ><span ></</span>ins</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>del</span><span >></span></span>删除字<span ><span ><span ></</span>del</span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> </code></pre> <p>这段代码解析后为：</p> <p>粗体<br /><br /> <i>斜体</i><br /><br /> <em>强调文字</em><br /><br /> <small>小号文字</small><br /><br /> 加重视觉效果<br /><br /> <sub>上标</sub><br /><br /> <sup>下标</sup><br /><br /> <ins>插入字</ins><br /><br /> <del>删除字</del><br /></p> 特殊标签 <p>链接</p> <pre><code ><span ><span ><span ><</span>a</span> <span >href</span><span ><span >=</span><span >"</span>http://cohanbb.github.io/<span >"</span></span><span >></span></span>这是一条链接<span ><span ><span ></</span>a</span><span >></span></span> </code></pre> <p>这是一条链接</p> <p>图像</p> <pre><code ><span ><span ><span ><</span>img</span> <span >src</span><span ><span >=</span><span >"</span>http://www.kaotop.com/file/tupian/20220523/b87c8e05-344a-48d1-869f-ef6929fc8b17.jpg?imageView2/2/w/1024/<span >"</span></span> <span >alt</span><span ><span >=</span><span >"</span>图片加载失败<span >"</span></span> <span >width</span><span ><span >=</span><span >"</span>300<span >"</span></span> <span >height</span><span ><span >=</span><span >"</span>300<span >"</span></span><span >/></span></span> </code></pre> <p>预格式文本</p> <pre><code ><span ><span ><span ><</span>pre</span><span >></span></span> 预格式文本 文本会保留换行和空格 文本换为等线体，常用于表示代码块 <span ><span ><span ></</span>pre</span><span >></span></span> </code></pre> <pre> 预格式文本 文本会保留换行和空格 文本换为等线体，常用于表示代码块 </pre> <p>代码和代码块</p> <pre><code ><span ><span ><span ><</span>code</span><span >></span></span>printf('代码')<span ><span ><span ></</span>code</span><span >></span></span> <span ><span ><span ><</span>pre</span><span >></span></span> <span ><span ><span ><</span>code</span><span >></span></span>printf('代码块');<span ><span ><span ></</span>code</span><span >></span></span> <span ><span ><span ><</span>code</span><span >></span></span>return;<span ><span ><span ></</span>code</span><span >></span></span> <span ><span ><span ></</span>pre</span><span >></span></span> </code></pre> <p><code>printf(‘代码’)</code></p> <pre><code>printf('代码块'); return; </code></pre> <p>表格</p> <pre><code ><span ><span ><span ><</span>table</span> <span >border</span><span ><span >=</span><span >"</span>1<span >"</span></span><span >></span></span> <span ><span ><span ><</span>tr</span><span >></span></span> <span ><span ><span ><</span>th</span><span >></span></span>标题1<span ><span ><span ></</span>th</span><span >></span></span> <span ><span ><span ><</span>th</span><span >></span></span>标题2<span ><span ><span ></</span>th</span><span >></span></span> <span ><span ><span ></</span>tr</span><span >></span></span> <span ><span ><span ><</span>tr</span><span >></span></span> <span ><span ><span ><</span>td</span><span >></span></span>row 1, cell 1<span ><span ><span ></</span>td</span><span >></span></span> <span ><span ><span ><</span>td</span><span >></span></span>row 1, cell 2<span ><span ><span ></</span>td</span><span >></span></span> <span ><span ><span ></</span>tr</span><span >></span></span> <span ><span ><span ><</span>tr</span><span >></span></span> <span ><span ><span ><</span>td</span><span >></span></span>row 2, cell 1<span ><span ><span ></</span>td</span><span >></span></span> <span ><span ><span ><</span>td</span><span >></span></span>row 2, cell 2<span ><span ><span ></</span>td</span><span >></span></span> <span ><span ><span ></</span>tr</span><span >></span></span> <span ><span ><span ></</span>table</span><span >></span></span> </code></pre> <table border="1"><tbody><tr><th>标题1</th><th>标题2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></tbody></table> <p>列表</p> <pre><code >有序列表 <span ><span ><span ><</span>ol</span><span >></span></span> <span ><span ><span ><</span>li</span><span >></span></span>YES<span ><span ><span ></</span>li</span><span >></span></span> <span ><span ><span ><</span>li</span><span >></span></span>NO<span ><span ><span ></</span>li</span><span >></span></span> <span ><span ><span ></</span>ol</span><span >></span></span> 无序列表 <span ><span ><span ><</span>ul</span><span >></span></span> <span ><span ><span ><</span>li</span><span >></span></span>yes<span ><span ><span ></</span>li</span><span >></span></span> <span ><span ><span ><</span>li</span><span >></span></span>no<span ><span ><span ></</span>li</span><span >></span></span> <span ><span ><span ></</span>ul</span><span >></span></span> 自定义列表 <span ><span ><span ><</span>dl</span><span >></span></span> <span ><span ><span ><</span>dt</span><span >></span></span>YES<span ><span ><span ></</span>dt</span><span >></span></span> <span ><span ><span ><</span>dd</span><span >></span></span>yes<span ><span ><span ></</span>dd</span><span >></span></span> <span ><span ><span ><</span>dt</span><span >></span></span>NO<span ><span ><span ></</span>dt</span><span >></span></span> <span ><span ><span ><</span>dd</span><span >></span></span>no<span ><span ><span ></</span>dd</span><span >></span></span> <span ><span ><span ></</span>dl</span><span >></span></span> </code></pre> <p>有序列表</p> YESNO <p>无序列表</p> yesno <p>自定义列表</p> YES yes NO no <p>引用</p> <pre><code ><span ><span ><span ><</span>blockquote</span><span >></span></span> 一级引用 <span ><span ><span ><</span>blockquote</span><span >></span></span> 二级引用 <span ><span ><span ></</span>blockquote</span><span >></span></span> <span ><span ><span ></</span>blockquote</span><span >></span></span> </code></pre> <blockquote> 一级引用 <blockquote> 二级引用 </blockquote> </blockquote> <p>块级元素和内联元素</p> <pre><code >1.这是一个<span ><span ><span ><</span>div</span><span >></span></span> 块级元素<span ><span ><span ><</span>br</span> <span >/></span></span>从新的一行出现以及结束 <span ><span ><span ></</span>div</span><span >></span></span> 2.这是一个<span ><span ><span ><</span>span</span><span >></span></span> 内联元素，不会以新行开始 <span ><span ><span ></</span>span</span><span >></span></span> </code></pre> <p>1.这是一个</p> <br /> 块级元素 <br />从新的一行出现以及结束 <p></p> <p>2.这是一个<br /> 内联元素，不会以新行开始<br /> </p> <p>表单</p> <pre><code ><span ><span ><span ><</span>form</span> <span >action</span><span ><span >=</span><span >"</span>URL<span >"</span></span> <span >method</span><span ><span >=</span><span >"</span>get or post<span >"</span></span><span >></span></span> username: <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>text<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>username<span >"</span></span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> password: <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>password<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>password<span >"</span></span><span >></span></span><span ><span ><span ><</span>br</span> <span >/></span></span> 单选框<span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>radio<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>sex<span >"</span></span> <span >value</span><span ><span >=</span><span >"</span>male<span >"</span></span><span >></span></span>男<span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>radio<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>sex<span >"</span></span> <span >value</span><span ><span >=</span><span >"</span>female<span >"</span></span><span >></span></span>女<span ><span ><span ><</span>br</span> <span >/></span></span> 复选框<span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>checkbox<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>number<span >"</span></span> <span >value</span><span ><span >=</span><span >"</span>1<span >"</span></span><span >></span></span>1<span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>checkbox<span >"</span></span> <span >name</span><span ><span >=</span><span >"</span>number<span >"</span></span> <span >value</span><span ><span >=</span><span >"</span>2<span >"</span></span><span >></span></span>2<span ><span ><span ><</span>br</span> <span >/></span></span> 提交表单<span ><span ><span ><</span>br</span> <span >/></span></span> <span ><span ><span ><</span>input</span> <span >type</span><span ><span >=</span><span >"</span>submit<span >"</span></span> <span >value</span><span ><span >=</span><span >"</span>submit<span >"</span></span><span >/></span></span> <span ><span ><span ></</span>form</span><span >></span></span> </code></pre> <p>脚本</p> <pre><code ><span ><span ><span ><</span>script</span><span >></span></span><span > script code<span >,</span> such <span >as</span> JavaScript<span >.</span> </span><span ><span ><span ></</span>script</span><span >></span></span> </code></pre> <p>样式</p> <pre><code ><span ><span ><span ><</span>style</span> <span >type</span><span ><span >=</span><span >"</span>text/<strong class="superseo"><a href="/tag/141.html" class="superseo">css</a></strong><span >"</span></span><span >></span></span><span > css code </span><span ><span ><span ></</span>style</span><span >></span></span> </code></pre> CSS 简介 <p>CSS(Cascading Style Sheets) 层叠样式表，用以定义 HTML 中元素的样式，HTML 使用 CSS 的方式有三种：</p> <p>内联样式：在 HTML 元素标签中使用 “style” 属性。</p> <pre><code ><span ><span ><span ><</span>p</span><span ><span > <span >style</span></span><span >="</span><span ><span >color</span><span >:</span>blue<span >;</span><span >font-family</span><span >:</span>consolas<span >;</span></span><span >"</span></span><span >></span></span> inline <span ><span ><span ></</span>p</span><span >></span></span> </code></pre> <p>内部样式表：在 HTML 文档 <code><header></code> 区域使用 <code><style></code> 包含 CSS。</p> <pre><code ><span ><span ><span ><</span>head</span><span >></span></span> <span ><span ><span ><</span>style</span> <span >type</span><span ><span >=</span><span >"</span>text/css<span >"</span></span><span >></span></span><span > CSS code </span><span ><span ><span ></</span>style</span><span >></span></span> <span ><span ><span ></</span>head</span><span >></span></span> </code></pre> <p>外部引用：使用外部 CSS 文件定义样式。</p> <pre><code ><span ><span ><span ><</span>head</span><span >></span></span> <span ><span ><span ><</span>link</span> <span >rel</span><span ><span >=</span><span >"</span>stylesheet<span >"</span></span> <span >type</span><span ><span >=</span><span >"</span>text/css<span >"</span></span> <span >href</span><span ><span >=</span><span >"</span>xxx.css<span >"</span></span><span >></span></span> <span ><span ><span ></</span>head</span><span >></span></span> </code></pre> CSS 语法 基本形式 <pre><code ><span >[选择器]</span> <span >{<!-- --></span> [属性]<span >:</span> [描述]<span >;</span> ...... <span >}</span> </code></pre> <p>选择器可以是 HTML 标签，也可以是 id 或 class。</p> id 选择器只能定义标有特定 id 的元素的样式，形式为 <code>#[id]</code>。class 选择器可以定义一类元素的样式，形式为 <code>.[class]</code>。 文本属性 <p>background</p> <p>background-color:</p> <blockquote> <p>三种定义方式：RGB “rgb(x,x,x)”，十六进制 “#H H H”， name “black”。</p> </blockquote> <p>background-image:</p> <blockquote> <p>url(‘pic-url’)</p> </blockquote> <p>background-repeat：背景图像在哪个方向重复。</p> <blockquote> <p>repeat, repeats-x, repeat-y, no-repeat</p> </blockquote> <p>background-attachment：背景图像是否跟随页面滚动。</p> <p>background-position：背景图像的位置。</p> <p>text</p> <p>color：文本颜色。</p> <p>direction：文本方向。</p> <p>letter-spacing：字符间隔。</p> <p>word-spacing：单词间隔。</p> <p>line-height：行高。</p> <p>text-align：对齐方式。</p> <blockquote> <p>left, right, center, justify, inherit</p> </blockquote> <p>text-indent：首行缩紧。</p> <p>text-shadow：文本阴影。</p> <p>text-decoration：文本画线修饰。</p> <p>white-space：空白元素的处理方式。</p> <blockquote> <p>默认 normal，即空白元素会被浏览器忽略。<br /> nowrap 文本不会换行，一直到 <code><br></code> 标签。<br /> pre 保留空白，pre-wrap 保留空白，但是正常换行。<br /> pre-line 合并空白元素，但是保留一个空格，正常换行。</p> </blockquote> <p>word-wrap：单词的换行方式，一般用 break-word。</p> <p>word-break：是否允许单词内断开，若用 break-all，则会在单词内部断开。</p> <p>font</p> <p>font-family：</p> <table><thead><tr><th>说明</th><th>Generic-family</th><th>特定系列</th><th>具体字体</th></tr></thead><tbody><tr><td>有衬线体</td><td>Serif</td><td>Times, Georgia</td><td>“Times New Roman”, “Geogria”, “宋体”, “仿宋”</td></tr><tr><td>无衬线体</td><td>Sans-serif</td><td>Sans-serif</td><td>“Arial”, “Helvetica”, Verdana", “黑体” 等</td></tr><tr><td>等宽体</td><td>Monospace</td><td>Consolas</td><td>“Courier”, “Courier New”, "Lucinda Console"等</td></tr></tbody></table> <p>font-size：</p> <blockquote> <p>CSS 中表示字体大小有多种形式：</p> px 像素值。pt 磅(= 0.75px)。em 相对父元素的大小。rem 相对于 html 标签中 font-size 的大小，默认 1rem = 16px。percentage 同 em。使用绝对大小和相对大小值。 </blockquote> <p>font-style：斜体样式。</p> <p>font-weight：字体粗细。</p> <p>链接</p> a:link：未访问过的链接。a:visited：已访问过的链接。a:hover：鼠标放置的链接。a:active：鼠标点击的链接。 <pre><code ><span >a:link or visited or hover or active</span> <span >{<!-- --></span> <span >background-color</span><span >:</span><span >;</span> <span >/*链接背景颜色*/</span> <span >color</span><span >:</span><span >;</span> <span >/*链接字体颜色*/</span> <span >text-decoration</span><span >:</span><span >;</span> <span >/*链接文本画线修饰*/</span> <span >}</span> </code></pre> 结构属性 <p>盒子模型<br /> 所有的 HTML 元素都可以看成一个盒子模型，包括外边距(margin)、边框(border)、内边距(padding)、内容(content)，内容指的是文本或图像等。</p> <p></p> <p>margin</p> <table><thead><tr><th>属性</th><th>说明</th><th>描述</th></tr></thead><tbody><tr><td>margin-top</td><td>上边距</td><td>auto, length, percentage</td></tr><tr><td>margin-right</td><td>右边距</td><td>auto, length, percentage</td></tr><tr><td>margin-bottom</td><td>下边距</td><td>auto, length, percentage</td></tr><tr><td>margin-left</td><td>左边距</td><td>auto, length, percentage</td></tr><tr><td>margin</td><td>以上四个可简写为 margin</td><td>按个数 4，3，2，1 依次表示：<br /> 上，右，下，左；上，左右，下；上下，左右；全部外边距。</td></tr></tbody></table> <p>border</p> <p>border-width：边框的宽度。</p> <blockquote> 可以用 thin, medium, thick, length, inherit 表示。按个数 4，3，2，1 依次表示：上，右，下，左；上，左右，下；上下，左右；全部边框的宽度。 </blockquote> <p>border-color：边框的颜色。</p> <blockquote> RGB 十六进制 name 三种表示法。按个数 4，3，2，1 依次表示：上，右，下，左；上，左右，下；上下，左右；全部边框的颜色。 </blockquote> <p>border-style：边框的风格。</p> <blockquote> 无边框 none，点线边框 dotted，虚线边框 dashed，实线边框 solid，两个实线边框 double，3D沟槽边框 groove，3D脊边框 ridge，3D嵌入边框 inset，3D突出边框 outset。按个数 4，3，2，1 依次表示： 上，右，下，左；上，左右，下；上下，左右；全部边框的风格。 </blockquote> <p>border-[none/top/right/bottom/left]：以上三个简写。</p> <blockquote> <p>参数依次为：[width],[style],[color]</p> </blockquote> <p>border-radius：设置圆角边框。</p> <blockquote> <p>length 或 percentage。</p> </blockquote> <p>border-[top/right/bottom/left]-[width/style/color]：设置某一边的某一个属性。</p> <p>padding<br /> 使用方法与 margin 类似。</p> <p>display<br /> 典型的块元素：<code><p></code> <code></code> <code><pre></code> <code><h></code>，典型的内联元素：<code></code> <code><span></code> <code><code></code>，display 可以更改元素的显示方式。</p> inline： 内联元素。block：块元素。 <p>overflow</p> visible：默认值，超出的内容会呈现在边框外面。hidden：溢出内容被修剪，且被隐藏。scroll：溢出内容被修剪，显示滚动条。auto：浏览器根据情况自动添加滚动条。inherit：继承父元素的 overflow 属性值。<div class="entry-copyright"><p>欢迎分享，转载请注明来源：<a href="http://outofmemory.cn" title="内存溢出">内存溢出</a></p><p>原文地址:<a href="http://outofmemory.cn/web/1298756.html" title="一文搞懂【Web 前端】HTML 与 CSS 基础知识">http://outofmemory.cn/web/1298756.html</a></p></div></div><div class="readall_box"><div class="read_more_mask"></div><a class="read_more_btn" target="_self">阅读全文</a></div><div class="entry-tag"><a href="/tag/140.html" rel="tag">html</a><a href="/tag/141.html" rel="tag">css</a><a href="/tag/64.html" rel="tag">前端</a></div><div class="entry-action"><a id="thread-like" class="btn-zan" href="javascript:;" tid="1298756"><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="88713" target="_blank" href="/user/88713.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="1298756" 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="https://www.outofmemory.cn/aiimages/Typora+%2B+Gitee+%E9%85%8D%E7%BD%AE%E5%9B%BE%E5%BA%8A.png"><a href="/web/1298749.html" title="Typora + Gitee 配置图床" rel="prev"><span>Typora + Gitee 配置图床</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="https://www.outofmemory.cn/aiimages/%E4%BD%A0%E7%9C%9F%E7%9A%84%E4%BA%86%E8%A7%A3Es6%E5%90%97%EF%BC%9F.png"><a href="/web/1298760.html" title="你真的了解Es6吗？" rel="next"><span>你真的了解Es6吗？</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 class="entry-related-posts"><h3 class="entry-related-title">随机推荐</h3><ul class="entry-related cols-3 post-loop post-loop-default"><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679625.html" title="贝尔法斯特女王大学专业排名" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="贝尔法斯特女王大学专业排名" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E8%B4%9D%E5%B0%94%E6%B3%95%E6%96%AF%E7%89%B9%E5%A5%B3%E7%8E%8B%E5%A4%A7%E5%AD%A6%E4%B8%93%E4%B8%9A%E6%8E%92%E5%90%8D.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679625.html" target="_blank" rel="bookmark">贝尔法斯特女王大学专业排名</a></h2><div class="item-excerpt"><p>立思辰留学360介绍说，贝尔法斯特女王大学（Queen‘s University Belfast）于1845年由维多利亚女王建校，因此称之为女王大学。为英国顶尖名校，全球百强名校。是一所享誉欧洲的公立</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="79915" target="_blank" href="/user/79915.html" class="avatar j-user-card"><img alt="网络广告的发布" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>网络广告的发布</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="/bake/1679625.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679529.html" title="2017年新加坡科技设计大学设有博士课程吗" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="2017年新加坡科技设计大学设有博士课程吗" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/2017%E5%B9%B4%E6%96%B0%E5%8A%A0%E5%9D%A1%E7%A7%91%E6%8A%80%E8%AE%BE%E8%AE%A1%E5%A4%A7%E5%AD%A6%E8%AE%BE%E6%9C%89%E5%8D%9A%E5%A3%AB%E8%AF%BE%E7%A8%8B%E5%90%97.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679529.html" target="_blank" rel="bookmark">2017年新加坡科技设计大学设有博士课程吗</a></h2><div class="item-excerpt"><p>立思辰留学360介绍，新加坡科技设计大学（Singapore University of Technology and Design，简称SUTD），是继新加坡国立大学，新加坡南洋理工大学， 新加坡管</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="79259" target="_blank" href="/user/79259.html" class="avatar j-user-card"><img alt="猫眼论坛" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>猫眼论坛</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="/bake/1679529.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679514.html" title="新加坡淡马锡理工学院学费信息" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="新加坡淡马锡理工学院学费信息" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E6%96%B0%E5%8A%A0%E5%9D%A1%E6%B7%A1%E9%A9%AC%E9%94%A1%E7%90%86%E5%B7%A5%E5%AD%A6%E9%99%A2%E5%AD%A6%E8%B4%B9%E4%BF%A1%E6%81%AF.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679514.html" target="_blank" rel="bookmark">新加坡淡马锡理工学院学费信息</a></h2><div class="item-excerpt"><p>立思辰留学360介绍，新加坡淡马锡理工学院成立于1990年，直属新加坡教育部，是新加坡最广泛的综合性学院之一。学院位于新加坡东部，占地30公顷，开设商学院、应用科学学院、信息技术学院、设计学院和工程学</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="89349" target="_blank" href="/user/89349.html" class="avatar j-user-card"><img alt="仔羊计划" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>仔羊计划</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="/bake/1679514.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679458.html" title="SHRM College什么时候开学" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="SHRM College什么时候开学" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/SHRM+College%E4%BB%80%E4%B9%88%E6%97%B6%E5%80%99%E5%BC%80%E5%AD%A6.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679458.html" target="_blank" rel="bookmark">SHRM College什么时候开学</a></h2><div class="item-excerpt"><p>立思辰留学360介绍：新加坡SHRM莎瑞管理学院，成立于2007年，前身为马来西亚云顶集团在新加坡开办的唯一一所酒店管理学院，现为酒店管理和商业管理的综合性高等学院。其在2010年即获得首批新加坡私立</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="81974" target="_blank" href="/user/81974.html" class="avatar j-user-card"><img alt="电脑瘦身" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>电脑瘦身</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>1</span><a class="item-meta-li comments" href="/bake/1679458.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679372.html" title="清迈大学学年" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="清迈大学学年" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E6%B8%85%E8%BF%88%E5%A4%A7%E5%AD%A6%E5%AD%A6%E5%B9%B4.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679372.html" target="_blank" rel="bookmark">清迈大学学年</a></h2><div class="item-excerpt"><p>清迈大学据立思辰留学360介绍，泰国清迈大学成立于1964年。包含三个校区，总面积约14平方公里，学生人数超过3万人。主校区位于泰国清迈市西郊的素贴山脚下。清迈大学是全市唯一一所国立大学，也是泰国北部</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="83737" target="_blank" href="/user/83737.html" class="avatar j-user-card"><img alt="pizi" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>pizi</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>3</span><a class="item-meta-li comments" href="/bake/1679372.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1679260.html" title="2017年美国诺门大学地理位置" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="2017年美国诺门大学地理位置" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/2017%E5%B9%B4%E7%BE%8E%E5%9B%BD%E8%AF%BA%E9%97%A8%E5%A4%A7%E5%AD%A6%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1679260.html" target="_blank" rel="bookmark">2017年美国诺门大学地理位置</a></h2><div class="item-excerpt"><p>诺门大学世界上最专业的计算机软件研发学校。课程主要在最新的计算机软件研发方面、企业流程、数据库管理和系统整合。教授顾问均为计算机软件产业中顶尖的人士，会耐心细心回答学生所有问题。立思辰留学360介绍，</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="40090" target="_blank" href="/user/40090.html" class="avatar j-user-card"><img alt="声发射" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>声发射</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="/bake/1679260.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1678925.html" title="新加坡管理大学奖学金信息全览" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="新加坡管理大学奖学金信息全览" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E6%96%B0%E5%8A%A0%E5%9D%A1%E7%AE%A1%E7%90%86%E5%A4%A7%E5%AD%A6%E5%A5%96%E5%AD%A6%E9%87%91%E4%BF%A1%E6%81%AF%E5%85%A8%E8%A7%88.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1678925.html" target="_blank" rel="bookmark">新加坡管理大学奖学金信息全览</a></h2><div class="item-excerpt"><p>立思辰留学360介绍，新加坡管理大学 (Singapore Management University),简称新大 (SMU)，是新加坡五所公立大学之一，是亚洲顶级的财经类院校。与美国精英大学相同，新</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="78344" target="_blank" href="/user/78344.html" class="avatar j-user-card"><img alt="n75" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>n75</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>3</span><a class="item-meta-li comments" href="/bake/1678925.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1678842.html" title="埃克塞特大学如何" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="埃克塞特大学如何" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E5%9F%83%E5%85%8B%E5%A1%9E%E7%89%B9%E5%A4%A7%E5%AD%A6%E5%A6%82%E4%BD%95.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1678842.html" target="_blank" rel="bookmark">埃克塞特大学如何</a></h2><div class="item-excerpt"><p>　　埃克塞特大学自英国“全国学生调查”（National Student Survey）2005年开创以来，埃克塞特大学始终保持着全英前10的位置。2013年，埃克塞特大学在全英所有高等教育机构学生满</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="87074" target="_blank" href="/user/87074.html" class="avatar j-user-card"><img alt="接近开关接线图" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>接近开关接线图</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>0</span><a class="item-meta-li comments" href="/bake/1678842.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/bake/1678778.html" title="新加坡东亚管理学院金融硕士" target="_blank" rel="bookmark"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="新加坡东亚管理学院金融硕士" loading="lazy" data-original="https://www.outofmemory.cn/aiimages/%E6%96%B0%E5%8A%A0%E5%9D%A1%E4%B8%9C%E4%BA%9A%E7%AE%A1%E7%90%86%E5%AD%A6%E9%99%A2%E9%87%91%E8%9E%8D%E7%A1%95%E5%A3%AB.png"></a><a class="item-category" href="/list/37.html" target="_blank">学校百科</a></div><div class="item-content"><h2 class="item-title"><a href="/bake/1678778.html" target="_blank" rel="bookmark">新加坡东亚管理学院金融硕士</a></h2><div class="item-excerpt"><p>立思辰留学介绍：新加坡东亚管理学院（原东亚商学院）是经新加坡教育部注册并经中国政府资格认证的高等教育学院。学院自1984年建校，自2001年提供高等教育以来已吸引了全球超过20个国家的3000多名在校</p></div><div class="item-meta"><div class="item-meta-li author"><a data-user="78121" target="_blank" href="/user/78121.html" class="avatar j-user-card"><img alt="最好的主板" src="/view/img/avatar.png" class="avatar avatar-60 photo" height="60" width="60"><span>最好的主板</span></a></div><span class="item-meta-li date">2022-07-07</span><div class="item-meta-right"><span class="item-meta-li views" title="阅读数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-eye"></use></svg></i>4</span><a class="item-meta-li comments" href="/bake/1678778.html#comments" target="_blank" title="评论数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-comment></use></svg></i>0</a><span class="item-meta-li stars" title="收藏数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href=#wi-star></use></svg></i>0</span><span class="item-meta-li likes" title="点赞数"><i class="wpcom-icon wi"><svg aria-hidden="true"><use xlink:href="#wi-thumb-up"></use></svg></i>0</span></div></div></div></li></ul></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/88713.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/88713.html" class="profile-name"><span class="author-name">大唐御医下载</span><span class="user-group">一级用户组</span></a><div class="profile-stats"><div class="profile-stats-inner"><div class="user-stats-item"><b>41</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></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-body" style="text-align: center"><img src="/upload/sns_qrcode/88713.png" style="width: 300px"></div></div></div></div></div><div class="profile-posts"><h3 class="widget-title"><span>最近文章</span></h3><ul><li><a href="/bake/1604240.html" title="考上诺斯伍德大学要多少分">考上诺斯伍德大学要多少分</a></li><li><a href="/bake/1576370.html" title="2018年剑智学院介绍及其特色介绍">2018年剑智学院介绍及其特色介绍</a></li><li><a href="/bake/1520752.html" title="最详细的爱丁堡玛格丽特女王大学介绍">最详细的爱丁堡玛格丽特女王大学介绍</a></li><li><a href="/bake/1506492.html" title="想申请里海大学本科，不知道哪家留学机构做的好">想申请里海大学本科，不知道哪家留学机构做的好</a></li><li><a href="/bake/1502323.html" title="2018年limkokwing林国荣创意科技大学校区解读">2018年limkokwing林国荣创意科技大学校区解读</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="/langs/1499240.html" title="Javascript入门（二）"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="Javascript入门（二）" data-original="https://www.outofmemory.cn/aiimages/Javascript%E5%85%A5%E9%97%A8%EF%BC%88%E4%BA%8C%EF%BC%89.png" /></a></div><div class="item-content"><p class="item-title"><a href="/langs/1499240.html" title="Javascript入门（二）">Javascript入门（二）</a></p><p class="item-date">12天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/zaji/1498836.html" title="HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素" data-original="https://www.outofmemory.cn/aiimages/HTML%E5%9F%BA%E7%A1%80-01-%E5%A4%B4%E9%83%A8%EF%BC%88%EF%BC%9Chead%EF%BC%9E%EF%BC%9Ctitle%EF%BC%9E%EF%BC%9C+base%EF%BC%9E%EF%BC%9Clink%EF%BC%9E%EF%BC%9Cstyle%EF%BC%9E%EF%BC%9Cmeta%EF%BC%9E%EF%BC%9Cscript%EF%BC%9E%EF%BC%89%EF%BC%8C%E5%8C%BA%E5%9D%97%E5%85%83%E7%B4%A0%E5%92%8C%E5%86%85%E8%81%94%E5%85%83%E7%B4%A0.png" /></a></div><div class="item-content"><p class="item-title"><a href="/zaji/1498836.html" title="HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素">HTML基础-01-头部（＜head＞＜title＞＜ base＞＜link＞＜style＞＜meta＞＜script＞），区块元素和内联元素</a></p><p class="item-date">12天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/zaji/1498503.html" title="去中心化的前端构建工具 — Vite"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="去中心化的前端构建工具 — Vite" data-original="https://www.outofmemory.cn/aiimages/%E5%8E%BB%E4%B8%AD%E5%BF%83%E5%8C%96%E7%9A%84%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7+%E2%80%94+Vite.png" /></a></div><div class="item-content"><p class="item-title"><a href="/zaji/1498503.html" title="去中心化的前端构建工具 — Vite">去中心化的前端构建工具 — Vite</a></p><p class="item-date">12天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/langs/1498213.html" title="AMIS + httplib 快速搭建前后端"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="AMIS + httplib 快速搭建前后端" data-original="https://www.outofmemory.cn/aiimages/AMIS+%2B+httplib+%E5%BF%AB%E9%80%9F%E6%90%AD%E5%BB%BA%E5%89%8D%E5%90%8E%E7%AB%AF.png" /></a></div><div class="item-content"><p class="item-title"><a href="/langs/1498213.html" title="AMIS + httplib 快速搭建前后端">AMIS + httplib 快速搭建前后端</a></p><p class="item-date">12天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372641.html" title="css3中calc怎么设置除法"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="css3中calc怎么设置除法" data-original="https://www.outofmemory.cn/aiimages/css3%E4%B8%ADcalc%E6%80%8E%E4%B9%88%E8%AE%BE%E7%BD%AE%E9%99%A4%E6%B3%95.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372641.html" title="css3中calc怎么设置除法">css3中calc怎么设置除法</a></p><p class="item-date">21天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372640.html" title="css样式中font是什么"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="css样式中font是什么" data-original="https://www.outofmemory.cn/aiimages/css%E6%A0%B7%E5%BC%8F%E4%B8%ADfont%E6%98%AF%E4%BB%80%E4%B9%88.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372640.html" title="css样式中font是什么">css样式中font是什么</a></p><p class="item-date">21天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372638.html" title="css里面能用var变量吗"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="css里面能用var变量吗" data-original="https://www.outofmemory.cn/aiimages/css%E9%87%8C%E9%9D%A2%E8%83%BD%E7%94%A8var%E5%8F%98%E9%87%8F%E5%90%97.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372638.html" title="css里面能用var变量吗">css里面能用var变量吗</a></p><p class="item-date">21天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372635.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="https://www.outofmemory.cn/aiimages/css%E4%B8%AD%E7%9A%84%E4%BC%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E4%BB%80%E4%B9%88.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372635.html" title="css中的伪对象是什么">css中的伪对象是什么</a></p><p class="item-date">21天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372597.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="https://www.outofmemory.cn/aiimages/css%E4%B8%AD%E4%B8%8A%E8%BE%B9%E8%B7%9D%E6%98%AF%E4%BB%80%E4%B9%88%E5%B1%9E%E6%80%A7.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372597.html" title="css中上边距是什么属性">css中上边距是什么属性</a></p><p class="item-date">21天前</p></div></li><li class="item"><div class="item-img"><a class="item-img-inner" href="/web/1372564.html" title="在css3中可以实现缩放效果的属性是什么"><img width="480" height="300" src="/view/img/theme/lazy.png" class="attachment-default size-default wp-post-image j-lazy" alt="在css3中可以实现缩放效果的属性是什么" data-original="https://www.outofmemory.cn/aiimages/%E5%9C%A8css3%E4%B8%AD%E5%8F%AF%E4%BB%A5%E5%AE%9E%E7%8E%B0%E7%BC%A9%E6%94%BE%E6%95%88%E6%9E%9C%E7%9A%84%E5%B1%9E%E6%80%A7%E6%98%AF%E4%BB%80%E4%B9%88.png" /></a></div><div class="item-content"><p class="item-title"><a href="/web/1372564.html" title="在css3中可以实现缩放效果的属性是什么">在css3中可以实现缩放效果的属性是什么</a></p><p class="item-date">21天前</p></div></li></ul></div><div class="widget widget_post_thumb"><h3 class="widget-title"><span>随机标签</span></h3><div class="entry-tag"><a href="/tag/196373.html" rel="tag">定居</a><a href="/tag/196355.html" rel="tag">水利水电</a><a href="/tag/196347.html" rel="tag">推辞</a><a href="/tag/196329.html" rel="tag">用房</a><a href="/tag/196297.html" rel="tag">招生人数</a><a href="/tag/196267.html" rel="tag">碧瑶</a><a href="/tag/196227.html" rel="tag">高等职业</a><a href="/tag/196211.html" rel="tag">得奖</a><a href="/tag/196168.html" rel="tag">长官</a><a href="/tag/196167.html" rel="tag">军歌</a><a href="/tag/196137.html" rel="tag">高中部</a><a href="/tag/196117.html" rel="tag">顿河</a><a href="/tag/196115.html" rel="tag">罗拉</a><a href="/tag/196034.html" rel="tag">建筑艺术</a><a href="/tag/195977.html" rel="tag">现代化教学</a><a href="/tag/195958.html" rel="tag">伯利兹</a><a href="/tag/195937.html" rel="tag">所罗门</a><a href="/tag/195914.html" rel="tag">华盛顿州</a><a href="/tag/195906.html" rel="tag">火种</a><a href="/tag/195887.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备8888888号 </a>--> Powered by <a href="https://www.outofmemory.cn/" target="_blank"> outofmemory.cn </a> <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script> <script>LA.init({id: "Jed07ogpjvkVJFtk",ck: "Jed07ogpjvkVJFtk"})</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/1298756.html", "title":"一文搞懂【Web 前端】HTML 与 CSS 基础知识", "images": ["https://www.outofmemory.cn/aiimages/%E4%B8%80%E6%96%87%E6%90%9E%E6%87%82%E3%80%90Web+%E5%89%8D%E7%AB%AF%E3%80%91HTML+%E4%B8%8E+CSS+%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.png"], "description":"摘要 一个 Web 页面是如何在浏览器上展示的&#xff1f;我们在浏览器上查看网页源代码&#xff0c;可看到众多的标签、符号和文字&#xff0c;这就是一个 HTML 文件&#xff0c;而浏览器可以将这", "pubDate":"2022-06-10", "upDate":"2022-06-10" } </script><script> $(function(){ var widHeight = $(window).height(); var artHeight = $('.entry-content').height(); if(artHeight>widHeight){ $('.entry-content').height(widHeight*0.8).css({'overflow':'hidden'}); var article_show = true; $('.read_more_btn').on('click',bindRead_more); }else{ article_show = true; $('.readall_box').hide().addClass('readall_box_nobg'); } function bindRead_more(){ if(!article_show){ $('.entry-content').css({'overflow':'hidden',height: 'auto'}); $('.readall_box').show().removeClass('readall_box_nobg'); article_show = true; }else{ $('.entry-content').height("").css({'overflow':'hidden'}); $('.readall_box').show().addClass('readall_box_nobg'); $('.readall_box').hide().addClass('readall_box_nobg'); article_show = false; } } }); // 回复 $('.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 = 'sShlkqkXOAcYxFxFw9swypnPnOLAw0HqZsK52fh5tUyKeUNFhJCR3tgm3ojESF7pa5Re_2BZI5tW7ECh8TUI4Faw_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 = '1298756'; 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 与 CSS 基础知识', logo_pure : '/view/img/logo.png', att_img : 'https://www.outofmemory.cn/aiimages/%E4%B8%80%E6%96%87%E6%90%9E%E6%87%82%E3%80%90Web+%E5%89%8D%E7%AB%AF%E3%80%91HTML+%E4%B8%8E+CSS+%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86.png', excerpt : '摘要 一个 Web 页面是如何在浏览器上展示的&#xff1f;我们在浏览器上查看网页源代码&#xff0c;可看到众多的标签、符号和文字&#xff0c;这就是一个 HTML 文件&#xff0c;而浏览器可以将这', 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>