保姆级教程HTML两万字笔记大总结【建议收藏】（上篇）

paulli3 发布于2021-10-13 09:40 / 1719人阅读

摘要：标签不区分大小写，但推荐小写。标签可以嵌套，但不能交叉嵌套。标签也称为元素。比如行内标签亦可成行内元素。

?
??直接跳到末尾?? ——>领取专属粉丝福利?
☝️

?上一篇博文两万字博文教你python爬虫requests库，看完还不会我把我女朋友都给你【❤️熬夜整理&建议收藏❤️】被众多爬虫爱好者/想要学习爬虫的小伙伴们阅读之后，很多小伙伴私信我说——爬是会爬了，但是爬下来的都是网页源码数据，真心看不懂鸭！该怎么办？?

?（苦笑）为了能让小伙伴们对日后所学的页面解析库理解更深，所以本博主又连夜加班加点，苦苦熬制本文（分上下两篇哦！），为大家深入全面的讲解一下常见的前端知识——学啥技术都是从底层抓起，万丈高楼平地起，它也是基于地基稳！ 所以本文（共分上下两篇哦！）是比页面解析库要先一步总结给小伙伴们哦！?

?在这两篇博文中，本博主就带领小伙伴们认真地学习一下HTML（超文本标记语言）相关的必备知识（爬虫爬到数据之后解析页面数据你得多少能看懂页面结构！）——HTML是一门标记语言，标记语言由一套标记标签组成，学习HTML，就是学习标签。！?

重点来啦！重点来啦！！???

相信有不少小伙伴已经通过我的上篇博文完全地学费了requests库，而本篇（以及下篇）文讲解的HTML知识，将会使你日后解析爬取到的页面数据信手拈来哦~

知识点补给站：

如果把网页比作一个人的话，HTML相当于骨架，JavaScript相当于肌肉，CSS相当于皮肤。三者结合起来才能形成一个完善的网页。首先要普及的一个概念是一个网页组成部分：	①HTML：用于定义网页里面有什么内容；	②CSS:对内容进行排版；		（1）找到要排版的内容————如何找到要排版的标签；		（2）设置样式————标签都能设置哪些样式。	③JavaScript:用于动态的控制页面。

第一部分：HTML框架简介

1.是什么&怎么学&用什么工具

（1）什么是HTML？

HTML:（HyperText Markup Language）【超文本标记语言】
狭义的HTML指的是网页；
广义的HTML指的是前端技术（html,css,js,以及各种框架）——网页，移动端网页，小程序，公众号，移动端的app，快应用等。
详细介绍：
HypertText：超文本——超出文本的范畴，简单地说，不仅仅是文本，还可以是图像，音频，视频，flash等等；
Markup：标记——网页中会有很多标记，不同的标记有不同的含义和功能，标记也叫标签，Html会包含各种各样的标签，这些标签不能乱写，必须写w3c规范中包含的标签。
标签的举例：
① -- 双标签
②-- 单标签

（2）怎么学HTML？

HTML是一门标记语言，标记语言由一套标记标签组成，学习HTML，就是学习标签。

（3）使用的工具：

编辑器：pycharm（搞python的肯定得用pycharm！）
浏览器：Firefox，Chrome（建议使用这俩哦！）

2.HTML的基本结构

3.HTML文件的规范

html文件以开始，以结尾，其他任何标签，需要写在和之间；
Html标签只包含两个子标签：head和body；
和网页设置相关的内容都写在head标签里；
需要显示的内容都写在body标签里；

4.HTML的基本模板

如果你再pycharm里新建一个html文件就会像下面这样！

<!DOCTYPE html>						#文档类型的声明"en">					#根标签,即文档的开始。 lang（language），en(english)。声明语言类型是英语								#网页头部    "UTF-8">			#国际编码     meta配置  字符集编码的类型     Title<<span class="token operator">/</span>title>			<span class="token comment">#网页标题</span><<span class="token operator">/</span>head><body>								<span class="token comment">#网页的主体，可视化区域</span><<span class="token operator">/</span>body><<span class="token operator">/</span>html></code></pre> <p><font color="Blue">知识点补给站：</font></p> <ol><li><code><!DOCTYPE html> 标签：作用：在html文件最前面进行声明，定义文档类型，告知浏览器用html规范去解析文档。</code></li><li><code>在pycharm中编写HTML文件时，<!-- 要注释的内容--> 为注释，快捷键是Ctrl+/。</code></li><li><code>在pycharm中编写HTML文件时，打标签时可直接打标签名，再Tab即可实现自动补全。 如：输入p,再Tab会自动补全为：<p></p></code></li></ol> <p></p> <h1><a id="_127"></a>第二部分：标签</h1> <ol><li>什么是标签？</li></ol> <pre><code class="prism language-html">	由尖括号包裹单词构成，如：<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span>，所以标签不可能以数字开头。</code></pre> <ol start="2"><li>标签不区分大小写，但推荐小写。</li><li>标签可以嵌套，但不能交叉嵌套。</li><li>标签也称为元素。比如：行内标签亦可成行内元素。</li></ol> <pre><code class="prism language-powershell">错误示例：<a><b><<span class="token operator">/</span>a><<span class="token operator">/</span>b>正确示例：<a><b><<span class="token operator">/</span>b><<span class="token operator">/</span>a></code></pre> <p></p> <h2><a id="1_144"></a>1.标签的使用样式及属性</h2> <h3><a id="1_145"></a>（1）标签的使用样式：</h3> <ol><li><code>开始标签又称开放标签<a>标签体</a>结束标签又称闭合标签或关标签</code></li><li><code>自闭合标签/单标签，如：<meta charset="UTF-8">，<br>等</code></li></ol> <pre><code class="prism language-html">	单标签有两种写法：			写法一：只写开标签即可<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>			写法二：在开标签的结尾写一个/，如<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span></code></pre> <h3><a id="2_156"></a>（2）标签属性：</h3> <ul><li><code>通常为键值对形式出现，比如：<meta charset="UTF-8"> 里面的charset为标签的属性，对应的单引号或者双引号里的称为属性值；</code></li><li>属性只能出现在开始标签和自闭合标签内，但不能出现在结束标签里；</li><li>属性名字全部小写，属性值必须用单引号或者双引号包裹；</li><li>如果属性名和属性值完全一样，直接写属性名即可，如：“readonly”(input标签属性)</li></ul> <p></p> <h3><a id="3_165"></a>（3）块状标签</h3> <p></p> <h4><a id="_168"></a>第一部分知识点——块状标签的特点：</h4> <pre><code class="prism language-python"><span class="token operator"><</span>!DOCTYPE html<span class="token operator">></span><span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span><span class="token operator"><</span>head<span class="token operator">></span>    <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>    <span class="token operator"><</span>title<span class="token operator">></span>块状标签的特点<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span><span class="token operator"><</span>body<span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span>块状标签的特点<span class="token punctuation">:</span><span class="token punctuation">(</span>通过段落标签p进行说明<span class="token punctuation">)</span><span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">.</span>设置宽高有效，以及外边距和内边距都可控制<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">.</span>在不设置宽度的情况下，宽度始终与父标签保持一致，与内容无关。是父标签容器的<span class="token number">100</span><span class="token operator">%</span>；<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">.</span>可以独占一行，实现自动换行。一个段落标签不管多少内容都占一行<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">.</span>当多个块状标签写一起时，默认排列方式是从上向下<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">.</span>可以容纳内联元素和其他块元素<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>p style<span class="token operator">=</span><span class="token string">"width:100px; height:100px"</span><span class="token operator">></span>这是个段落标签，我是块状标签<span class="token operator"><</span><span class="token operator">/</span>p<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span></code></pre> <table><tbody><tr><td bgcolor="yellow">知识点补给站： 1.px是像素，是长度单位； 2.在网页查看元素（ELements）显示的是宽度*高度。</td></tr></tbody></table> <h4><a id="_195"></a>第二部分知识点——常用的块状标签：</h4> <p><font color="#008000">小知识点：网页的默认字号是1em（1em=16px）！</font></p> <p>总共有四个：</p> <ol><li>标题标签；</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第一个：标题标签。h1到h6  （一般放在文章的标题）  字体会加粗！--></span>	<span class="token comment"><!-- h1字号是2em--32px；h2字号是1.5em--24px；h3字号是1.17em--18.72px;h4字号是默认字号16px;		h5字号是0.83em--13.28px；h6字号是0.67em--换算应该是10.72px，但是网页有最小字号限制，所以会变为12px！   --></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span><span class="token punctuation">></span></span>我是一级标签，一个网页只能有一个，别的可以有多个<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h2</span><span class="token punctuation">></span></span>我是二级标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h2</span><span class="token punctuation">></span></span></code></pre> <ol start="2"><li>段落标签；</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第二个：段落标签。  大小跟四级标题标签一样 （会把HTML文档分割成若干个段落）--></span>	<span class="token comment"><!-- p标签默认有段前段后间距--16px；但是段落标签并不会首行缩进！ --></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>我是段落标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span></code></pre> <ol start="3"><li>列表标签：分为有序列表，无序列表和定义列表三大类；</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第三个：列表标签--></span>			<span class="token comment"><!--（1）有序列表--></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ol</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>A<span class="token punctuation">"</span></span> <span class="token attr-name">start</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>        <span class="token comment"><!--ol是order list的缩写。本行是有序列表的开始   		type有五个选择——1:按1,2,3,4...显示序号（默认）；					  A:按A,B,C,D..显示序号；					  a：按a,b,c,d..显示序号；					  I：按I,II,III,IV，V..显示序号（罗马数字）；					  i：按i,ii,iii,iv,v..显示序号（罗马数字小写）。									  start规定从第几个开始排--></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是有序列表1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是有序列表2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是有序列表3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ol</span><span class="token punctuation">></span></span>				<span class="token comment"><!--（2）无序列表--></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>circle<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>             <span class="token comment"><!--ul是unorder list的缩写。本行是无序列表的开始		可以设置none（空的）,circle（空心圆）,square（实心方块），disc（实心圆）[默认值]等样式--></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是无序列表1<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>	   <span class="token comment"><!-- 一个li代表一个列表项。 --></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是无序列表2<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是无序列表3<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span>这是无序列表4<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>				<span class="token comment"><!--(3)定义列表--></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dl</span><span class="token punctuation">></span></span>       					 <span class="token comment"><!--本行是定义列表的开始--></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>水果<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>        	 <span class="token comment"><!--代表一个大的列项--></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>葡萄<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>             <span class="token comment"><!--代表对上面列项的解释，即细分。--></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>榴莲<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>			 <span class="token comment"><!-- dd有缩进，dt没有缩进 --></span>				    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dt</span><span class="token punctuation">></span></span>蔬菜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dt</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>花菜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>		    <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>dd</span><span class="token punctuation">></span></span>包菜<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dd</span><span class="token punctuation">></span></span>		<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>dl</span><span class="token punctuation">></span></span></code></pre> <ol start="4"><li>div标签。</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第四个：div标签：用来分划一个一个的区域			         （width和height来规定区域大小；background-color是设置区域背景色）--></span>	<span class="token comment"><!--div是一个纯净的块元素——所谓纯净意思是没有任何的默认样式。不宜过多使用。后期维护不好--></span>	<span class="token comment"><!-- div最大的优势：布局，作为容器，承载其他标签，因为div没有默认样式，所以尽管用div包裹了标签，					  但不影响标签的展示。 --></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token style-attr"><span class="token attr-name">style</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token style language-css"><span class="token property">width</span><span class="token punctuation">:</span>500px<span class="token punctuation">;</span><span class="token property">height</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span><span class="token property">background-color</span><span class="token punctuation">:</span> #66a9fe<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span>我是一个div<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span></code></pre> <table><tbody><tr><td bgcolor="yellow">知识点补给站：</td></tr></tbody></table> <p>  如果嫌打列表标签太麻烦，可使用快捷方法:（n表示相应的标签的个数，直接输入下面语句Tab一下即可生成！）<br /> </p> <h4><a id="font_colorredemmetfont_273"></a>深入讲解：<font color="red">emmet语法</font>————快速敲代码小技巧之快速敲标签语法！</h4> <ol><li> <p><code>*是乘的作用，后面跟一个数字，数字是几，就会生成几个标签！</code><br /> 举例：<br /> <br /> 实现：<br /> </p> </li><li> <p><code>$可以代表一个数字，这个数字从1开始，逐步增大，通常和*连用。</code><br /> 举例：<br /> <br /> 实现：<br /> </p> </li><li> <p><code>{}里面用于书写标签的文本内容。</code><br /> 举例：<br /> <br /> 实现：<br /> </p> </li><li> <p><code>[]里面用于书写属性名和属性值（如果不加属性值，则创建属性值为空的属性）</code><br /> 举例①：<br /> <br /> 举例②：<br /> </p> <p>实现①：<br /> <br /> 实现②：<br /> </p> </li><li> <p><code>>用于指示下一级标签，他们构成父子关系（包含关系）</code><br /> 举例：<br /> </p> <p>说明：<br /> </p> </li><li> <p><code>+在当前标签的后面生成一个平级的标签（兄弟关系）</code><br /> 举例：<br /> <br /> 实现：<br /> </p> </li><li> <p><code>#a生成一个id位a的div标签</code></p> <p>举例：<br /> <br /> 实现：<br /> </p> </li><li> <p>综合使用：<br /> 举例①：<br /> </p> <p>实现①：<br /> <br /> 举例②：<br /> <br /> 实现②：<br /> <br /> 举例③：<br /> <br /> 实现③：<br /> <br /> 举例④：<br /> <br /> 实现④：<br /> <br /> 举例⑤：<br /> <br /> 实现⑤：<br /> </p> </li></ol> <h3><a id="4_354"></a>（4）内联标签（行内标签）</h3> <p></p> <h4><a id="_357"></a>第一部分知识点——内联标签的特点：</h4> <pre><code class="prism language-python"><span class="token operator"><</span>!DOCTYPE html<span class="token operator">></span><span class="token operator"><</span>html lang<span class="token operator">=</span><span class="token string">"en"</span><span class="token operator">></span><span class="token operator"><</span>head<span class="token operator">></span>    <span class="token operator"><</span>meta charset<span class="token operator">=</span><span class="token string">"UTF-8"</span><span class="token operator">></span>    <span class="token operator"><</span>title<span class="token operator">></span>内联标签，又称行内标签的特点<span class="token operator"><</span><span class="token operator">/</span>title<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>head<span class="token operator">></span><span class="token operator"><</span>body<span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span>内联标签的特点（通过文本标签span说明）<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">.</span>设置宽高无效，以及外边距和内边距都无法控制<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">2</span><span class="token punctuation">.</span>宽度就是其文字或者图片宽度，无法控制<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">3</span><span class="token punctuation">.</span>不会进行自动换行，只有本行放满才会放下一行<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">4</span><span class="token punctuation">.</span>当多个内联标签写在一起时，默认排列方式是从左往右<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>!<span class="token operator">-</span><span class="token operator">-</span><span class="token number">5</span><span class="token punctuation">.</span>内联元素只能容纳文本或者其他内联元素<span class="token operator">-</span><span class="token operator">-</span><span class="token operator">></span>	<span class="token operator"><</span>span<span class="token operator">></span>我是个文本标签<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>body<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>html<span class="token operator">></span></code></pre> <h4><a id="_380"></a>第二部分知识点——常用的内联标签：</h4> <p>总共有四种：</p> <ol><li>图片标签</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第一个：图片标签  img + Tab--></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">height</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>   <span class="token comment"><!--src是图片的地址，可以直接是网页里的图片地址，											也可以是本地图片的地址（推荐使用相对路径——相对的含义：图片相对于Html文件的位置，参照物是html文件！--></span>		                      <span class="token comment"><!-- alt是当图片加载失败时显示的内容--></span>							  <span class="token comment"><!-- width是图片宽度；height是图片高度。不指定按原图大小显示注意。：如果二者只指定一个，另外一个会等比例缩放 --></span>		                      <span class="token comment"><!-- img不是块元素(block)，也不算行元素(inline)，它是行级块元素（inline-block）  --></span></code></pre> <ol start="2"><li>粗体/斜体标签</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第二个：粗体/斜体标签   b+ Tab  i+ Tab --></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>b</span><span class="token punctuation">></span></span>我是粗体<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>b</span><span class="token punctuation">></span></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>i</span><span class="token punctuation">></span></span>我是斜体<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>i</span><span class="token punctuation">></span></span></code></pre> <ol start="3"><li>超链接标签</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第三个：超链接标签     _self本身网页上打开；_blank打开一个新网页--></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>超链接的一个说明（鼠标放上会显示的文本）<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_self<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我是超链接<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span>   											   <span class="token comment"><!--href里可以写网址，可以写文件路径--></span>						   <span class="token comment"><!-- 如果href="" 那么点击后会刷新当前网页，而且会回到顶部 --></span>						   <span class="token comment"><!-- 如果href="#" 那么点击后，会回到顶部，但不会刷新页面 --></span>						   <span class="token comment"><!-- 如果href="#锚点" 那么点击后，会跳到指定的锚点处（锚点其实就是一个id值）！ --></span></code></pre> <ol start="4"><li>文本标签</li></ol> <pre><code class="prism language-html">	<span class="token comment"><!--第四个：文字标签   和css配合使用才有用哦！--></span>	<span class="token comment"><!-- span是一个纯净的行元素；所谓的纯净——没有任何默认样式； --></span>	<span class="token comment"><!-- span最大的优势：设定样式，主要作用于行元素或者文字等 --></span>	<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>我是文本标签<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span></code></pre> <table><tbody><tr><td bgcolor="yellow">知识点补给站第一站点：</td></tr></tbody></table> <p>如果图片标签里填的是本地图片的地址（相对路径）：<br />   1.如果图片在同级目录下，直接： 当前目录名/图片名<br /> 或者： ./当前目录名/图片名<br />   2.如果图片在上级目录下，直接： . ./图片名</p> <table><tbody><tr><td bgcolor="yellow">知识点补给站第二站点：</td></tr></tbody></table> <p><br /> 至于为什么要实现行内标签和块状标签的相互转换，小伙伴们在设置css样式时会get到这个点哦。<br />   <font color="Blue">比如：块状标签是不能放在一行了，但我们可以通过先转换为行内标签就可以了！！！<br /> </font></p> <p></p> <h1><a id="In_The_End_446"></a>In The End！</h1> <p></p> <table><tbody><tr><td bgcolor="yellow">从现在做起，坚持下去，一天进步一小点，不久的将来，你会感谢曾经努力的你！</td></tr></tbody></table> <p> <strong>本博主会持续更新爬虫基础分栏及爬虫实战分栏（为了小伙伴们更好的进行页面解析，也会更新部分前端必备知识点博文！），认真仔细看完本文的小伙伴们，可以点赞收藏并评论出你们的读后感。并可关注本博主，在今后的日子里阅读更多爬虫文！</strong></p> <pre><code class="prism language-powershell">	如有错误或者言语不恰当的地方可在评论区指出，谢谢！	如转载此文请联系我说明用以意并标注出处及本博主名，谢谢！</code></pre> <p> </p> <p><span id="jump99"></span></p><center>  ??可通过点击下面——>关注本人运营 <strong>公众号</strong>??</center><p></p> <center> <font size="1">【可以公众号里私聊并标明来自CSDN，会拉你进入技术交流群（群内涉及各个领域大佬级人物，任何问题都可讨论~）--->互相学习&&共同进步（非诚勿扰）】</font></center>                </div>                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet">                <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-49037e4d27.css" rel="stylesheet">        </div>        <div id="blogExtensionBox" style="width:400px;margin:auto;margin-top:12px" class="blog-extension-box"></div>               
               
                                           
                       
                 </div>
            
                     <div class="mt-64 tags-seach" >
                 <div class="tags-info">
                                                                                                                    
                         <a style="width:120px;" title="专线服务" href="https://www.ucloud.cn/site/active/network.html?ytag=seo">专线服务</a>
                                             
                         <a style="width:120px;" title="服务器托管" href="https://www.ucloud.cn/site/product/uhybrid.html">服务器托管</a>
                                                                                                                                                 
                                      
                     
                    
                                                                                               <a style="width:120px;" title="html收藏" href="https://www.ucloud.cn/yun/tag/htmlshoucang/">html收藏</a>
                                                                                                           <a style="width:120px;" title="大数据平台部署 建议" href="https://www.ucloud.cn/yun/tag/dashujupingtaibushu jianyi/">大数据平台部署 建议</a>
                                                                                                           <a style="width:120px;" title="html收藏夹代码" href="https://www.ucloud.cn/yun/tag/htmlshoucangjiadaima/">html收藏夹代码</a>
                                                                                                           <a style="width:120px;" title="html字" href="https://www.ucloud.cn/yun/tag/htmlzi/">html字</a>
                                                         
                 </div>
               
              </div>
             
               <div class="entry-copyright mb-30">
                   <p class="mb-15"> 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。</p>
                 
                   <p>转载请注明本文地址：https://www.ucloud.cn/yun/122442.html</p>
               </div>
                      
               <ul class="pre-next-page">
                 
                                  <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/122441.html">上一篇：【Python爬虫】手把手带你爬下肯德基官网（ajax的post请求）</a></li>  
                                                
                                       <li class="ellipsis"><a class="hpf" href="https://www.ucloud.cn/yun/122443.html">下一篇：我用Python逆向登录世界上最大的游戏平台，steam加密手段有多高明【内附源码】</a></li>
                                  </ul>
              </div>
              <div class="about_topicone-mid">
                <h3 class="top-com-title mb-0"><span data-id="0">相关文章</span></h3>
                <ul class="com_white-left-mid atricle-list-box">
                             
                                                                                                    <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/121429.html"><b>糊涂算法之「八<em>大</em>排序」<em>总结</em>——用<em>两万</em><em>字</em>，8张动图，450行代码跨过排序这道坎（<em>建议</em><em>收藏</em>）</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：今天，一条就带大家彻底跨过排序算法这道坎，保姆级教程建议收藏。利用递归算法，对分治后的子数组进行排序。基本思想堆排序是利用堆这种数据结构而设计的一种排序算法，堆排序是一种选择排序，它的最坏，最好，平均时间复杂度均为，它也是不稳定排序。                                                                                ...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-392.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/03/small_000000392.jpg" alt=""><span class="layui-hide64">greatwhole</span></a>
                                    <time datetime="">2021-09-28 09:36</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/119824.html"><b><em>保姆</em><em>级</em><em>教程</em>带你开发优质的Python库之<em>上篇</em>【<em>建议</em><em>收藏</em>】</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：正式的专栏第篇，同学站住，别错过这个从开始的文章前面学委的入门到精通专栏积累了篇文章，当然学委博客还有几十篇应用的文章。                                                                                                                      正式的Python专栏第9篇，同学站住...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-1164.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/11/small_000001164.jpg" alt=""><span class="layui-hide64">hyuan</span></a>
                                    <time datetime="">2021-09-10 10:51</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/120967.html"><b>13 万<em>字</em> C 语言从入门到精通<em>保姆</em><em>级</em><em>教程</em>2021 年版 （<em>建议</em><em>收藏</em>）</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：友情提示先关注收藏，再查看，万字保姆级语言从入门到精通教程。及大牛出天地开始有随之乃有万种语年英国剑桥大学推出了语言。                                                                                                                     友情提示：先关注收藏，再查看，13 万字保...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-1432.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/14/small_000001432.jpg" alt=""><span class="layui-hide64">zombieda</span></a>
                                    <time datetime="">2021-09-24 09:48</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/121531.html"><b>从小白程序员一路晋升为<em>大</em>厂高<em>级</em>技术专家我看过哪些书籍？（<em>建议</em><em>收藏</em>）</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：大家好，我是冰河有句话叫做投资啥都不如投资自己的回报率高。马上就十一国庆假期了，给小伙伴们分享下，从小白程序员到大厂高级技术专家我看过哪些技术类书籍。                                                                                                                    大家好，我是...</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-986.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/09/small_000000986.jpg" alt=""><span class="layui-hide64">sf_wangchong</span></a>
                                    <time datetime="">2021-09-29 09:35</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                                       <li>
                                                <div class="atricle-list-right">
                          <h2 class="ellipsis2"><a class="hpf" href="https://www.ucloud.cn/yun/118774.html"><b>【<em>保姆</em><em>级</em><em>教程</em>】从零到精通Git，CodeChina实战</b></a></h2>
                                                     <p class="ellipsis2 good">摘要：因为是全中文的，对一些英语不好的人来说确实是福利。二下载安装下载官网下载地址进去之后，点击点击后就会自动下载了。                                                                                                                     文章目录 推荐系列教程，推荐的一定是精选的！一....</p>
                                                   
                          <div class="com_white-left-info">
                                <div class="com_white-left-infol">
                                    <a href="https://www.ucloud.cn/yun/u-206.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/02/small_000000206.jpg" alt=""><span class="layui-hide64">lyning</span></a>
                                    <time datetime="">2021-09-02 15:11</time>
                                    <span><i class="fa fa-commenting"></i>评论0</span> 
                                    <span><i class="fa fa-star"></i>收藏0</span> 
                                </div>
                          </div>
                      </div>
                    </li> 
                                                                           
                </ul>
              </div>
              
               <div class="topicone-box-wangeditor">
                  
                  <h3 class="top-com-title mb-64"><span>发表评论</span></h3>
                   <div class="xcp-publish-main flex_box_zd">
                                      
                      <div class="unlogin-pinglun-box">
                        <a href="javascript:login()" class="grad">登陆后可评论</a>
                      </div>                   </div>
               </div>
              <div class="site-box-content">
                <div class="site-content-title">
                  <h3 class="top-com-title mb-64"><span>0条评论</span></h3>   
                </div> 
                      <div class="pages"></ul></div>
              </div>
           </div>
           <div class="layui-col-md4 layui-col-lg3 com_white-right site-wrap-right">
              <div class=""> 
                <div class="com_layuiright-box user-msgbox">
                    <a href="https://www.ucloud.cn/yun/u-668.html"><img src="https://www.ucloud.cn/yun/data/avatar/000/00/06/small_000000668.jpg" alt=""></a>
                    <h3><a href="https://www.ucloud.cn/yun/u-668.html" rel="nofollow">paulli3</a></h3>
                    <h6>男<span>|</span>高级讲师</h6>
                    <div class="flex_box_zd user-msgbox-atten">
                     
                                                                      <a href="javascript:attentto_user(668)" id="attenttouser_668" class="grad follow-btn notfollow attention">我要关注</a>
      
                                                                                        <a href="javascript:login()" title="发私信" >我要私信</a>
                     
                                            
                    </div>
                    <div class="user-msgbox-list flex_box_zd">
                          <h3 class="hpf">TA的文章</h3>
                          <a href="https://www.ucloud.cn/yun/ut-668.html" class="box_hxjz">阅读更多</a>
                    </div>
                      <ul class="user-msgbox-ul">
                                                  <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/123686.html">【STM32+cubemx】0011 HAL库开发：I2C总线访问加速度传感器ADXL345</a></h3>
                            <p>阅读 2029<span>·</span>2021-11-18 10:02</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/122442.html">保姆级教程HTML两万字笔记大总结【建议收藏】（上篇）</a></h3>
                            <p>阅读 1720<span>·</span>2021-10-13 09:40</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119444.html">DediPath九月4折：洛杉矶VPS月付1.4美元起;美国独立服务器月付39美元起</a></h3>
                            <p>阅读 2821<span>·</span>2021-09-07 10:07</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/119169.html">TOB主題2.7版本更新：重做文章主列表、新增菜單圖標支持、麵包屑、彩色標籤、縮略圖圓角</a></h3>
                            <p>阅读 1921<span>·</span>2021-09-04 16:48</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/115456.html">前端开源项目周报0103</a></h3>
                            <p>阅读 857<span>·</span>2019-08-30 13:18</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112894.html">CSS盒子模型以及外边框合并的问题</a></h3>
                            <p>阅读 2346<span>·</span>2019-08-29 14:03</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/112231.html">CSS display属性</a></h3>
                            <p>阅读 2760<span>·</span>2019-08-29 12:54</p></li>
                                                       <li><h3 class="ellipsis"><a href="https://www.ucloud.cn/yun/107383.html">可拖动table表头的实现</a></h3>
                            <p>阅读 3025<span>·</span>2019-08-26 11:41</p></li>
                                                
                      </ul>
                </div>
                <!-- 云社区相关服务 -->
                 
<div class="com_layuiright-box">
                  <h3 class="top-com-title"><span>云社区相关服务</span></h3> 
                    <div class="community-box flex_box flex_wrap community-box1">
                        <a href="https://www.ucloud.cn/yun/question/add.html" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon1.png" alt="提问">
                            <span>提问</span>
                        </a>
                        <a href="https://www.ucloud.cn/yun/article"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon2.png" alt="学习">
                            <span>学习</span>
                        </a>
                        
                        <a href="https://www.ucloud.cn/yun/user/vertify.html" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon4.png" alt="认证">
                            <span>认证</span>
                        </a>
                      
                        <a href="https://www.ucloud.cn/site/product/uhost.html?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon5.png" alt="产品">
                            <span>产品</span>
                        </a>
                        
                        <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon6.png" alt="技术服务">
                            <span>技术服务</span>
                        </a>
                          <a href="https://spt.ucloud.cn/30001?ytag=seo" rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/static/theme/ukd/images/topicone-icon3.png" alt="售前咨询">
                            <span>售前咨询</span>
                        </a>
                    </div>   
                </div>                   <!-- 文章详情右侧广告-->
              
  <div class="com_layuiright-box">
                  <h6 class="top-com-title"><span>最新活动</span></h6> 
           
         <div class="com_adbox">
                    <div class="layui-carousel" id="right-item">
                      <div carousel-item>
                                                                                                                       <div>
                          <a href="https://www.ucloud.cn/site/product/uhost.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/Z7TLrpAi.png" alt="云服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/MWraMsBh.png" alt="混合云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/ucloudstack.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/ifzOxvjW.png" alt="私有云">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/utrion.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220620/VDqwC1iN.png" alt="超融合服务器">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uhybrid.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/pJwnviKN.png" alt="服务器托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/product/uxzone.html"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/220630/CDb5uXxp.jpeg" alt="idc机房托管">                                 
                          </a>
                        </div>
                                                <div>
                          <a href="https://www.ucloud.cn/site/active/network.html?ytag=seo"  rel="nofollow">
                            <img src="https://www.ucloud.cn/yun/data/attach/230227/XWsSXmvm.png" alt="专线服务">                                 
                          </a>
                        </div>
                                                                   
                    
                        
                      </div>
                    </div>
                      
                    </div>                    <!-- banner结束 -->
              
<div class="adhtml">

</div>
                <script>
                $(function(){
                    $.ajax({
                        type: "GET",
                                url:"https://www.ucloud.cn/yun/ad/getad/1.html",
                                cache: false,
                                success: function(text){
                                  $(".adhtml").html(text);
                                }
                        });
                    })
                </script>                </div>              </div>
           </div>
        </div>
      </div> 
    </section>
    <!-- wap拉出按钮 -->
     <div class="site-tree-mobile layui-hide">
      <i class="layui-icon layui-icon-spread-left"></i>
    </div>
    <!-- wap遮罩层 -->
    <div class="site-mobile-shade"></div>
    
       <!--付费阅读 -->
       <div id="payread">
         <div class="layui-form-item">阅读需要支付1元查看</div>  
         <div class="layui-form-item"><button class="btn-right">支付并查看</button></div>     
       </div>
      <script>
      var prei=0;

       
       $(".site-seo-depict pre").each(function(){
          var html=$(this).html().replace("<code>","").replace("</code>","").replace('<code class="javascript hljs" codemark="1">','');
          $(this).attr('data-clipboard-text',html).attr("id","pre"+prei);
          $(this).html("").append("<code>"+html+"</code>");
         prei++;
       })
           $(".site-seo-depict img").each(function(){
             
            if($(this).attr("src").indexOf('data:image/svg+xml')!= -1){
                $(this).remove();
            }
       })
     $("LINK[href*='style-49037e4d27.css']").remove();
       $("LINK[href*='markdown_views-d7a94ec6ab.css']").remove();
layui.use(['jquery', 'layer','code'], function(){
  $("pre").attr("class","layui-code");
      $("pre").attr("lay-title","");
       $("pre").attr("lay-skin","");
  layui.code(); 
       $(".layui-code-h3 a").attr("class","copycode").html("复制代码 ").attr("onclick","copycode(this)");
      
});
function copycode(target){
    var id=$(target).parent().parent().attr("id");
  
                  var clipboard = new ClipboardJS("#"+id);

clipboard.on('success', function(e) {


    e.clearSelection();
    alert("复制成功")
});

clipboard.on('error', function(e) {
    alert("复制失败")
});
}
//$(".site-seo-depict").html($(".site-seo-depict").html().slice(0, -5));
</script>
  <link rel="stylesheet" type="text/css" href="https://www.ucloud.cn/yun/static/js/neweditor/code/styles/tomorrow-night-eighties.css">
    <script src="https://www.ucloud.cn/yun/static/js/neweditor/code/highlight.pack.js" type="text/javascript"></script>
    <script src="https://www.ucloud.cn/yun/static/js/clipboard.js"></script>

<script>hljs.initHighlightingOnLoad();</script>

<script>
    function setcode(){
        var _html='';
    	  document.querySelectorAll('pre code').forEach((block) => {
        	  var _tmptext=$.trim($(block).text());
        	  if(_tmptext!=''){
        		  _html=_html+_tmptext;
        		  console.log(_html);
        	  }
    		 
    		  
    		 
      	  });
    	 

    }

</script>

<script>
function payread(){
  layer.open({
      type: 1,
      title:"付费阅读",
      shadeClose: true,
      content: $('#payread')
    });
}
// 举报
function jupao_tip(){
  layer.open({
      type: 1,
      title:false,
      shadeClose: true,
      content: $('#jubao')
    });

}
$(".getcommentlist").click(function(){
var _id=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
$("#articlecommentlist"+_id).toggleClass("hide");
var flag=$("#articlecommentlist"+_id).attr("dataflag");
if(flag==1){
flag=0;
}else{
flag=1;
//加载评论
loadarticlecommentlist(_id,_tid);
}
$("#articlecommentlist"+_id).attr("dataflag",flag);

})
$(".add-comment-btn").click(function(){
var _id=$(this).attr("dataid");
$(".formcomment"+_id).toggleClass("hide");
})
$(".btn-sendartcomment").click(function(){
var _aid=$(this).attr("dataid");
var _tid=$(this).attr("datatid");
var _content=$.trim($(".commenttext"+_aid).val());
if(_content==''){
alert("评论内容不能为空");
return false;
}
var touid=$("#btnsendcomment"+_aid).attr("touid");
if(touid==null){
touid=0;
}
addarticlecomment(_tid,_aid,_content,touid);
})
 $(".button_agree").click(function(){
 var supportobj = $(this);
         var tid = $(this).attr("id");
         $.ajax({
         type: "GET",
                 url:"https://www.ucloud.cn/yun/index.php?topic/ajaxhassupport/" + tid,
                 cache: false,
                 success: function(hassupport){
                 if (hassupport != '1'){






                         $.ajax({
                         type: "GET",
                                 cache:false,
                                 url: "https://www.ucloud.cn/yun/index.php?topic/ajaxaddsupport/" + tid,
                                 success: function(comments) {

                                 supportobj.find("span").html(comments+"人赞");
                                 }
                         });
                 }else{
                	 alert("您已经赞过");
                 }
                 }
         });
 });
 function attenquestion(_tid,_rs){
    	$.ajax({
    //提交数据的类型 POST GET
    type:"POST",
    //提交的网址
    url:"https://www.ucloud.cn/yun/favorite/topicadd.html",
    //提交的数据
    data:{tid:_tid,rs:_rs},
    //返回数据的格式
    datatype: "json",//"xml", "html", "script", "json", "jsonp", "text".
    //在请求之前调用的函数
    beforeSend:function(){},
    //成功返回之后调用的函数
    success:function(data){
    	var data=eval("("+data+")");
    	console.log(data)
       if(data.code==2000){
    	layer.msg(data.msg,function(){
    	  if(data.rs==1){
    	      //取消收藏
    	      $(".layui-layer-tips").attr("data-tips","收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart-o"></i>');
    	  }
    	   if(data.rs==0){
    	      //收藏成功
    	      $(".layui-layer-tips").attr("data-tips","已收藏文章");
    	      $(".layui-layer-tips").html('<i class="fa fa-heart"></i>')
    	  }
    	})
    	 
       }else{
    	layer.msg(data.msg)
       }


    }   ,
    //调用执行后调用的函数
    complete: function(XMLHttpRequest, textStatus){
     	postadopt=true;
    },
    //调用出错执行的函数
    error: function(){
        //请求出错处理
    	postadopt=false;
    }
 });
}
</script>
<footer>
        <div class="layui-container">
            <div class="flex_box_zd">
              <div class="left-footer">
                    <h6><a href="https://www.ucloud.cn/"><img src="https://www.ucloud.cn/yun/static/theme/ukd//images/logo.png" alt="UCloud （优刻得科技股份有限公司）"></a></h6>
                    <p>UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。</p>
              </div>
              <div class="right-footer layui-hidemd">
                  <ul class="flex_box_zd">
                      <li>
                        <h6>UCloud与云服务</h6>
                         <p><a href="https://www.ucloud.cn/site/about/intro/">公司介绍</a></p>
                         <p><a href="https://zhaopin.ucloud.cn/" >加入我们</a></p>
                         <p><a href="https://www.ucloud.cn/site/ucan/onlineclass/">UCan线上公开课</a></p>
                         <p><a href="https://www.ucloud.cn/site/solutions.html" >行业解决方案</a></p>                                                  <p><a href="https://www.ucloud.cn/site/pro-notice/">产品动态</a></p>
                      </li>
                      <li>
                        <h6>友情链接</h6>
                                             <p><a href="https://www.surfercloud.com/">SurferCloud</a></p>
                         <p><a href="https://ucloudstack.com/" >私有云</a></p><p><a href="https://pinex.it" >pinex</a></p> <p><a href="https://www.renyucloud.com/" ></a></p>                                                                                                     <p><a href="https://www.picpik.ai" >AI Art Generator</a></p>  <p><a href="https://www.uwin-link.com" >工厂仿真软件</a></p>                           
                      </li>
                      <li>
                        <h6>社区栏目</h6>
                         <p><a href="https://www.ucloud.cn/yun/column/index.html">专栏文章</a></p>
                         <p><a href="https://www.ucloud.cn/yun/ask/">专业问答</a></p>
                         <p><a href="https://www.ucloud.cn/yun/kc.html">云学院</a></p>
                     <p><a href="https://www.ucloud.cn/yun/udata/">专题地图</a></p>                      </li>
                      <li>
                        <h6>常见问题</h6>
                         <p><a href="https://www.ucloud.cn/site/ucsafe/notice.html" >安全中心</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/recent/" >新闻动态</a></p>
                         <p><a href="https://www.ucloud.cn/site/about/news/report/">媒体动态</a></p>                                                  <p><a href="https://www.ucloud.cn/site/cases.html">客户案例</a></p>                                                
                         <p><a href="https://www.ucloud.cn/site/notice/">公告</a></p>
                      </li>
                      <li>
                          <span><img src="https://static.ucloud.cn/7a4b6983f4b94bcb97380adc5d073865.png" alt="优刻得"></span>
                          <p>扫扫了解更多</p></div>
            </div>
            <div class="copyright">Copyright © 2012-2023 UCloud 优刻得科技股份有限公司<i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/">沪公网安备 31011002000058号</a><i>｜</i><a rel="nofollow" href="http://beian.miit.gov.cn/"></a> 沪ICP备12020087号-3</a><i>｜</i> <script type="text/javascript" src="https://gyfk12.kuaishang.cn/bs/ks.j?cI=197688&fI=125915" charset="utf-8"></script>
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?290c2650b305fc9fff0dbdcafe48b59d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DZSMXQ3P9N"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-DZSMXQ3P9N');
</script>
<script>
(function(){
var el = document.createElement("script");
el.src = "https://lf1-cdn-tos.bytegoofy.com/goofy/ttzz/push.js?99f50ea166557aed914eb4a66a7a70a4709cbb98a54ecb576877d99556fb4bfc3d72cd14f8a76432df3935ab77ec54f830517b3cb210f7fd334f50ccb772134a";
el.id = "ttzz";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(el, s);
})(window)
</script></div> 
        </div>
    </footer>
</body>
<script src="https://www.ucloud.cn/yun/static/theme/ukd/js/common.js"></script>
<<script type="text/javascript">
$(".site-seo-depict *,.site-content-answer-body *,.site-body-depict *").css("max-width","100%");
</script>
</html>

资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折