runsly css知识 2022-04-15

HTML入门：HTML常用标签

什么是HTML？

HTML是超文本标记语言的缩写（HyperText Markup Language），作用是利用HTML标记，告诉浏览器被标记的内容要如何摆放及内容的含义，如：
这是个段落元素

，这里，被标记的内容是“这是个段落元素”这句话，而

则是HTML的标记；当浏览器读取到这个标记时，就会知道这里的内容是一个段落文本，然后用相应的格式显示。

HTML的语法规则：

要让页面正确的显示，就必须使用正确的HTML语法和HTML元素，如：对于标题应该使用

、

、

…等标题元素，而对于一整段的文字内容则应该使用

元素
一个规范的页面代码有利于维护和阅读，要想知道自己的HTML代码是否规范，可以使用w3school的HTML验证工具来检查，然后根据检查结果进行调整，直至通过验证为止。

用一个实际的例子来总结以上的内容：

左边是源代码，右边是运行结果

页面通过w3school验证工具的验证。

HTML常用标签

段落标签

：用来定义网页中的一段文本，段落与段落之间换行。属性：align ；定义段落中的文本水平方向的对齐方式。属性值：left（左对齐）、right（右对齐）、center（居中对齐）

2.
：换行标签，指行与行之间换行，他是一个单标签。

两者的区别：


：是单标签，小行换行提行；
 ：是双标签，大行换行分段；

—

：

：代表一级标题，级别高，字体也最大，其他依次递减。

：级别最小，字体最小属性：align ；定义标题中的文本水平方向的对齐方式。属性值：left（左对齐）、right（右对齐）、center（居中对齐）

文字段落缩进

：在标签中包含块级标签，而不是纯文本。


         自动缩进p标签内的文本

5.建立无序列表

 
         列表项 
         列表项

属性：type ；定义列表项的符号。

属性值：circle（空心圆）、disc（实心圆）、square（实心方块）

6.建立有序列表


        列表项
        列表项

属性：type ；定义列表项的符号。 start：用来设置列表编号的起始数值。

属性值：a、A、i、I

7.建立自定义列表

 
         列表标题 
         列表项
         列表项

8.文字特殊样式

加粗
倾斜
下划线
删除线
放大
缩小
加强强调
强调倾斜

9.图片标签

属性：src：指定图片源文件；alt ：图片未加载成功的提示文字；width：指定图片的宽度；height：指定图片的高度；border：指定图片的边框样式；alghr：top/bottom/middle；图片位于两端文字在垂直方向的一个上/中/下的对齐方式；

<imgsrc="http://img5.duitang.com/uploads/item/201610/31/20161031181100_TVEPU.jpeg"/>

9.：超链接

属性：href：连接地址；空连接可以用”#”代替；target ：_self/_blank;打开方式；_self在当前页面中打开，_blank在新的空白窗口打开。

10.div可定义文档中的分区或节（division/section）

是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是

固有的唯一格式表现。可以通过

的 class 或 id 应用额外的样式。

11. 标签被用来组合文档中的行内元素。

span标签和div标签是最常用的标签，主要对他们进行样式的应用来改变视觉上的变化。

我是span标签

12.

：表格基本结构


   表格标题
  	
       	    我是第一行的第一个单元格
            我是第一行的第二个单元格
    	
   	
       	    我是第二行的第一个单元格
       	    我是第二行的第二个单元格

表格标题
我是第一行的第一个单元格	我是第一行的第二个单元格
我是第二行的第一个单元格	我是第二行的第二个单元格

表格的表头
是
单元格的一种变体，实质上是一种单元格加粗和居中table的属性：width：表格的宽度height：表格的高度align：表格的对齐方式border：表格的边框bordercolor：边框的颜色cellspaning：单元格之前的距离csllpadding：单元格与内容之间的距离bgcolor：表格的背景颜色background：表格的背景图片tr的属性：height：行的高度bordercolor：边框的颜色bgcolor：表格的背景颜色background：背景图片align：文本水平对齐方式valign：文本垂直对齐方式tr的属性：width：单元格的宽height：单元格的高度bordercolor：边框的颜色bgcolor：背景颜色background：表格的背景图片align：文本水平对齐方式valign：文本垂直对齐方式colspan：水平合并单元格（跨列）rowspan：垂直合并单元格（跨行）完整的表格标记如果使用thead、tfoot、tbody元素，就必须使用全部的元素。

13.表单（form）输入类型

单选按钮（checked默认）

复选按钮（checked默认）

密码输入框

提交按钮

重置按钮

普通按钮

图片按钮（有提交功能）

多行文本框

<textarea></code></pre>
</div>
<p id="2af6bf1d-d175-45a8-b5d7-56fc5e0b517d" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">列表框</p>
<div id="d2eb296f-4bc1-4d84-aa11-ccb9c31f2aa9" style="font-size:18px;margin:20px 0px;text-align:left;">
<pre id="c663ae2d-8b40-4541-b997-4ff256de8b14" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="455f673e-3895-4e23-a072-ea37f2cc0f89" style="font-size:18px;margin:20px 0px;text-align:left;"><select size="一次显示多少个" multiple="可多选">
<option selected>默认的下拉菜单1</option>
<option>下拉菜单2</option>
</select></code></pre>
</div>
<p id="2b99ebd5-dd89-432e-bc9a-faf32812f51f" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">单行文本框</p>
<div id="3cd7db09-3e8e-49c5-a9a9-afc5a4d08c66" style="font-size:18px;margin:20px 0px;text-align:left;">
<pre id="3151d5f6-2800-4ea2-a08e-273ed13a1836" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="ff1845c9-7465-4662-bb16-a2875473e4c2" style="font-size:18px;margin:20px 0px;text-align:left;"><input type="text" size="文本框显示的长度" maxlength="最长字符数"/></code></pre>
</div>
<p id="691c7438-029e-4c6a-823f-abe1e68a8b20" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">隐藏域</p>
<div id="937ecf74-5b06-43ce-88a5-83f9af619c56" style="font-size:18px;margin:20px 0px;text-align:left;">
<pre id="90617e83-72de-4303-939a-f4ca6c58b9bf" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="08985224-18c1-49d2-88ca-71086503ca5d" style="font-size:18px;margin:20px 0px;text-align:left;"><input type="hidden"/></code></pre>
</div>
<p id="34938dd8-ef8b-4c14-bc06-ae66324b7c75" style="font-weight:400;text-align:left;line-height:1.667;margin:20px 0px;font-size:18px;">文件域</p>
<div id="923fa4d1-316a-408b-9cc8-3023d250be4e" style="font-size:18px;margin:20px 0px;text-align:left;">
<pre id="69b72cdb-029c-4a6a-af6f-c03747558697" style="font-size:18px;margin:20px 0px;text-align:left;"><code id="3477e979-c9d7-4c02-b37a-6fa79828ee3d" style="font-size:18px;margin:20px 0px;text-align:left;"><input type="file"/></code></pre>
</div>
<p></body></html></p>
      </div>
      <div id="pay-single-box"></div>
        <div class="ripro_gg_wrap pc"><fieldset><legend>2021服务器优惠</legend><p><strong><span style="color: #ff6600;">阿里云：</span></strong><a href="https://www.aliyun.com/daily-act/ecs/activity_selection?userCode=yl9oi3of" target="_blank" title="阿里云服务器优惠">2核2G5M服务器60元/年、2核4G 200元/年、4核8G服务器365元/年 更多...</a><br>
<span style="color: #006eff;">腾讯云：</span><a href="https://cloud.tencent.com/act/cps/redirect?redirect=1077&cps_key=a9dd15029bda048463f3605da38c5b6f&from=console" target="_blank" title="腾讯云服务器优惠">云产品限时秒杀，爆款1核2G云服务器，首年74元 更多...</a></p>
<div class="clear"></div></fieldset>
</div><div class="article-footer">
    <div class="author-box">
    <div class="author-image">
      <img alt='runsly' data-src='https://www.9502669.com/wp-content/uploads/avatar/avatar-1.jpg' class='lazyload avatar avatar-140 photo gravatar' height='140' width='140' />    </div>
    <div class="author-info">
      <h4 class="author-name">
        <a href="javascript:;">runsly</a>
        <span class="label label-warning"><i class="fa fa-diamond"></i> 钻石</span>      </h4>
    </div>
  </div>
     
</div>    </div>
  </div>
</article>


  <div class="entry-navigation">
    <nav class="article-nav">
        <span class="article-nav-prev">上一篇<br><a href="http://www.9502669.com/91051.html" rel="prev">不懂HTML？看这篇文章就够了</a></span>
        <span class="article-nav-next">下一篇<br><a href="http://www.9502669.com/91055.html" rel="next">给HTML初学者的30条最佳实践</a></span>
    </nav>
    
  </div>

      <!-- # 标准网格模式... -->
      <div class="related-posts-grid">
        <h4 class="u-border-title">相关推荐</h4>
        <div class="row">
                     <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
              <article class="post">
                      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/91368.html">
            <img class="lazyload" data-src="http://x0.ifengimg.com/res/2019/512A34E0402A2EAAE8893EC7AF82543853D0A478_size45_w600_h288.jpeg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="OpenJS基金会推出Node.js证书，JS开发者可以“考证”了">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="91368" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
                      <div class="entry-wrapper">
                  
  <header class="entry-header">    
    <h4 class="entry-title"><a href="http://www.9502669.com/91368.html" title="OpenJS基金会推出Node.js证书，JS开发者可以“考证”了" rel="bookmark">OpenJS基金会推出Node.js证书，JS开发者可以“考证”了</a></h4>  </header>                </div>
              </article>
            </div>
                      <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
              <article class="post">
                      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/92438.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2022/04/1650841192-fdee0e2ef09825a.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="如何写一份不错的CSS代码？">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="92438" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
                      <div class="entry-wrapper">
                  
  <header class="entry-header">    
    <h4 class="entry-title"><a href="http://www.9502669.com/92438.html" title="如何写一份不错的CSS代码？" rel="bookmark">如何写一份不错的CSS代码？</a></h4>  </header>                </div>
              </article>
            </div>
                      <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
              <article class="post">
                      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/89785.html">
            <img class="lazyload" data-src="https://src.9502669.com/wp-content/uploads/2020/05/1590650547-b351bb9b0af6e4f.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="css清除图片顶部空白缝隙代码">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="89785" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
                      <div class="entry-wrapper">
                  
  <header class="entry-header">    
    <h4 class="entry-title"><a href="http://www.9502669.com/89785.html" title="css清除图片顶部空白缝隙代码" rel="bookmark">css清除图片顶部空白缝隙代码</a></h4>  </header>                </div>
              </article>
            </div>
                      <div class="col-6 col-sm-3 col-md-3 mt-10 mb-10">
              <article class="post">
                      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/92907.html">
            <img class="lazyload" data-src="https://p0.ssl.img.360kuai.com/t01be50125df95b0d28.webp" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="关于CSS创建简介">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="92907" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
                      <div class="entry-wrapper">
                  
  <header class="entry-header">    
    <h4 class="entry-title"><a href="http://www.9502669.com/92907.html" title="关于CSS创建简介" rel="bookmark">关于CSS创建简介</a></h4>  </header>                </div>
              </article>
            </div>
                  </div>
      </div>
    
  
				</main>
			</div>
		</div>
					<div class="sidebar-column col-lg-3">
				
<aside class="widget-area">
	<div id="search-2" class="widget widget_search"><form method="get" class="search-form inline" action="http://www.9502669.com/">
  <input type="search" class="search-field inline-field" placeholder="输入关键词，回车..." autocomplete="off" value="" name="s" required="required">
  <button type="submit" class="search-submit"><i class="mdi mdi-magnify"></i></button>
</form></div><div id="cao_widget_post-2" class="widget cao-widget-posts"><h5 class="widget-title">最新动态</h5><div class="posts"><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126088.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2024/05/425a22841ff1410a964a54c68dc82790.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="Roaming是什么文件夹可以删除吗（电脑里面的roaming可以删除吗）">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126088" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126088.html" rel="bookmark" title="Roaming是什么文件夹可以删除吗（电脑里面的roaming可以删除吗）">Roaming是什么文件夹可以删除吗（电脑里面的roaming可以删除吗）</a></div><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126085.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2024/05/d4b16286dbcde4d23cfe397dc95732a7.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="4g网怎么生成5g网">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126085" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126085.html" rel="bookmark" title="4g网怎么生成5g网">4g网怎么生成5g网</a></div><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126082.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2024/05/ac40e1606ff3b6675393654426e7d0dd.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="win10我的电脑图标怎么调出来（win11我的电脑图标怎么调出来）">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126082" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126082.html" rel="bookmark" title="win10我的电脑图标怎么调出来（win11我的电脑图标怎么调出来）">win10我的电脑图标怎么调出来（win11我的电脑图标怎么调出来）</a></div><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126078.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="从零开始学习HTML编程的简单网页代码">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126078" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126078.html" rel="bookmark" title="从零开始学习HTML编程的简单网页代码">从零开始学习HTML编程的简单网页代码</a></div><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126076.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="CSS3D立体动画效果的实现方法和技巧">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126076" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126076.html" rel="bookmark" title="CSS3D立体动画效果的实现方法和技巧">CSS3D立体动画效果的实现方法和技巧</a></div><div class="left">      <div class="entry-media">
        <div class="placeholder" style="padding-bottom: 66.666666666667%;">
          <a  href="http://www.9502669.com/126073.html">
            <img class="lazyload" data-src="http://www.9502669.com/wp-content/uploads/2023/12/3dd57195710dd1cf6358891150dbc9ef.jpg" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="HTML中如何编写点击显示文字的代码片段">
          </a>
                  </div>
        <div class="entry-star"><a href="javascript:;" title="收藏文章" etap="star" data-postid="126073" class="ripro-star"><i class="fa fa-star-o"></i></a></div>      </div>
      <a href="http://www.9502669.com/126073.html" rel="bookmark" title="HTML中如何编写点击显示文字的代码片段">HTML中如何编写点击显示文字的代码片段</a></div></div></div><div id="tag_cloud-2" class="widget widget_tag_cloud"><h5 class="widget-title">标签</h5><div class="tagcloud"><a href="http://www.9502669.com/tag/cms%e7%b3%bb%e7%bb%9f" class="tag-cloud-link tag-link-4616 tag-link-position-1" style="font-size: 11.305555555556pt;" aria-label="cms系统 (128个项目)">cms系统</a>
<a href="http://www.9502669.com/tag/css" class="tag-cloud-link tag-link-3860 tag-link-position-2" style="font-size: 13.541666666667pt;" aria-label="css (368个项目)">css</a>
<a href="http://www.9502669.com/tag/css3" class="tag-cloud-link tag-link-3864 tag-link-position-3" style="font-size: 8.7291666666667pt;" aria-label="css3 (37个项目)">css3</a>
<a href="http://www.9502669.com/tag/css%e7%9f%a5%e8%af%86" class="tag-cloud-link tag-link-955 tag-link-position-4" style="font-size: 8.7291666666667pt;" aria-label="css知识 (37个项目)">css知识</a>
<a href="http://www.9502669.com/tag/html" class="tag-cloud-link tag-link-1390 tag-link-position-5" style="font-size: 12.8125pt;" aria-label="HTML (263个项目)">HTML</a>
<a href="http://www.9502669.com/tag/html5" class="tag-cloud-link tag-link-1072 tag-link-position-6" style="font-size: 9.0208333333333pt;" aria-label="HTML5 (43个项目)">HTML5</a>
<a href="http://www.9502669.com/tag/it%e6%95%99%e7%a8%8b%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-4445 tag-link-position-7" style="font-size: 17.479166666667pt;" aria-label="IT教程大全 (2,417个项目)">IT教程大全</a>
<a href="http://www.9502669.com/tag/it%e9%97%ae%e7%ad%94" class="tag-cloud-link tag-link-4620 tag-link-position-8" style="font-size: 10.673611111111pt;" aria-label="IT问答 (94个项目)">IT问答</a>
<a href="http://www.9502669.com/tag/java" class="tag-cloud-link tag-link-1017 tag-link-position-9" style="font-size: 9.9444444444444pt;" aria-label="java (67个项目)">java</a>
<a href="http://www.9502669.com/tag/javascript" class="tag-cloud-link tag-link-3854 tag-link-position-10" style="font-size: 13.930555555556pt;" aria-label="JavaScript (442个项目)">JavaScript</a>
<a href="http://www.9502669.com/tag/jquery" class="tag-cloud-link tag-link-689 tag-link-position-11" style="font-size: 10.479166666667pt;" aria-label="jQuery (87个项目)">jQuery</a>
<a href="http://www.9502669.com/tag/nodejs" class="tag-cloud-link tag-link-3952 tag-link-position-12" style="font-size: 9.5069444444444pt;" aria-label="nodejs (54个项目)">nodejs</a>
<a href="http://www.9502669.com/tag/ps" class="tag-cloud-link tag-link-1126 tag-link-position-13" style="font-size: 12.277777777778pt;" aria-label="PS (201个项目)">PS</a>
<a href="http://www.9502669.com/tag/ps%e6%8a%80%e5%b7%a7" class="tag-cloud-link tag-link-1087 tag-link-position-14" style="font-size: 12.375pt;" aria-label="ps技巧 (214个项目)">ps技巧</a>
<a href="http://www.9502669.com/tag/typecho" class="tag-cloud-link tag-link-4425 tag-link-position-15" style="font-size: 10.284722222222pt;" aria-label="Typecho (79个项目)">Typecho</a>
<a href="http://www.9502669.com/tag/vue" class="tag-cloud-link tag-link-3950 tag-link-position-16" style="font-size: 8.1458333333333pt;" aria-label="vue (28个项目)">vue</a>
<a href="http://www.9502669.com/tag/vuejs" class="tag-cloud-link tag-link-3953 tag-link-position-17" style="font-size: 8.7291666666667pt;" aria-label="vuejs (37个项目)">vuejs</a>
<a href="http://www.9502669.com/tag/web%e5%bc%80%e5%8f%91" class="tag-cloud-link tag-link-89 tag-link-position-18" style="font-size: 10.479166666667pt;" aria-label="Web开发 (87个项目)">Web开发</a>
<a href="http://www.9502669.com/tag/xunruicms" class="tag-cloud-link tag-link-4741 tag-link-position-19" style="font-size: 10.381944444444pt;" aria-label="XunRuiCMS (82个项目)">XunRuiCMS</a>
<a href="http://www.9502669.com/tag/%e5%88%9b%e6%84%8f%e6%96%87%e6%a1%88" class="tag-cloud-link tag-link-4457 tag-link-position-20" style="font-size: 8.2916666666667pt;" aria-label="创意文案 (30个项目)">创意文案</a>
<a href="http://www.9502669.com/tag/%e5%9b%be%e6%a1%88%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-1012 tag-link-position-21" style="font-size: 8.2916666666667pt;" aria-label="图案符号大全 (30个项目)">图案符号大全</a>
<a href="http://www.9502669.com/tag/%e5%ae%89%e5%8d%93" class="tag-cloud-link tag-link-1018 tag-link-position-22" style="font-size: 9.75pt;" aria-label="安卓 (60个项目)">安卓</a>
<a href="http://www.9502669.com/tag/%e5%b8%9d%e5%9b%bd" class="tag-cloud-link tag-link-4753 tag-link-position-23" style="font-size: 22pt;" aria-label="帝国 (20,322个项目)">帝国</a>
<a href="http://www.9502669.com/tag/%e5%b8%9d%e5%9b%bdcms%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-662 tag-link-position-24" style="font-size: 12.034722222222pt;" aria-label="帝国cms教程 (181个项目)">帝国cms教程</a>
<a href="http://www.9502669.com/tag/%e5%bc%80%e5%9c%ba%e7%99%bd" class="tag-cloud-link tag-link-990 tag-link-position-25" style="font-size: 8.6319444444444pt;" aria-label="开场白 (35个项目)">开场白</a>
<a href="http://www.9502669.com/tag/%e6%8a%80%e6%9c%af%e6%80%bb%e7%bb%93" class="tag-cloud-link tag-link-1231 tag-link-position-26" style="font-size: 12.131944444444pt;" aria-label="技术总结 (191个项目)">技术总结</a>
<a href="http://www.9502669.com/tag/%e6%8a%80%e6%9c%af%e7%ac%94%e8%ae%b0" class="tag-cloud-link tag-link-1232 tag-link-position-27" style="font-size: 12.131944444444pt;" aria-label="技术笔记 (191个项目)">技术笔记</a>
<a href="http://www.9502669.com/tag/%e6%b7%98%e5%ae%9d%e7%be%8e%e5%b7%a5" class="tag-cloud-link tag-link-960 tag-link-position-28" style="font-size: 8.5347222222222pt;" aria-label="淘宝美工 (34个项目)">淘宝美工</a>
<a href="http://www.9502669.com/tag/%e6%ba%90%e7%a0%81%e6%a8%a1%e6%9d%bf" class="tag-cloud-link tag-link-1145 tag-link-position-29" style="font-size: 10.430555555556pt;" aria-label="源码模板 (84个项目)">源码模板</a>
<a href="http://www.9502669.com/tag/%e6%bc%94%e8%ae%b2%e5%bc%80%e5%9c%ba%e7%99%bd" class="tag-cloud-link tag-link-991 tag-link-position-30" style="font-size: 8.6319444444444pt;" aria-label="演讲开场白 (35个项目)">演讲开场白</a>
<a href="http://www.9502669.com/tag/%e7%89%b9%e6%ae%8a%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-992 tag-link-position-31" style="font-size: 9.1180555555556pt;" aria-label="特殊符号 (45个项目)">特殊符号</a>
<a href="http://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9acss" class="tag-cloud-link tag-link-1468 tag-link-position-32" style="font-size: 14.5625pt;" aria-label="相关标签：css (595个项目)">相关标签：css</a>
<a href="http://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ahtml" class="tag-cloud-link tag-link-1522 tag-link-position-33" style="font-size: 12.8125pt;" aria-label="相关标签：html (264个项目)">相关标签：html</a>
<a href="http://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajavascript" class="tag-cloud-link tag-link-1628 tag-link-position-34" style="font-size: 12.958333333333pt;" aria-label="相关标签：javascript (283个项目)">相关标签：javascript</a>
<a href="http://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajquery" class="tag-cloud-link tag-link-1896 tag-link-position-35" style="font-size: 10.090277777778pt;" aria-label="相关标签：jquery (71个项目)">相关标签：jquery</a>
<a href="http://www.9502669.com/tag/%e7%9b%b8%e5%85%b3%e6%a0%87%e7%ad%be%ef%bc%9ajs" class="tag-cloud-link tag-link-2374 tag-link-position-36" style="font-size: 8pt;" aria-label="相关标签：js (26个项目)">相关标签：js</a>
<a href="http://www.9502669.com/tag/%e7%9f%a2%e9%87%8f%e5%9b%be" class="tag-cloud-link tag-link-37 tag-link-position-37" style="font-size: 8.4861111111111pt;" aria-label="矢量图 (33个项目)">矢量图</a>
<a href="http://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-993 tag-link-position-38" style="font-size: 11.791666666667pt;" aria-label="符号 (162个项目)">符号</a>
<a href="http://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7%e5%9b%be%e6%a1%88" class="tag-cloud-link tag-link-1011 tag-link-position-39" style="font-size: 8.2916666666667pt;" aria-label="符号图案 (30个项目)">符号图案</a>
<a href="http://www.9502669.com/tag/%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-986 tag-link-position-40" style="font-size: 9.1666666666667pt;" aria-label="符号大全 (46个项目)">符号大全</a>
<a href="http://www.9502669.com/tag/%e7%bb%87%e6%a2%a6%e6%95%99%e7%a8%8b" class="tag-cloud-link tag-link-560 tag-link-position-41" style="font-size: 11.743055555556pt;" aria-label="织梦教程 (157个项目)">织梦教程</a>
<a href="http://www.9502669.com/tag/%e7%be%8e%e5%b7%a5%e7%9f%a5%e8%af%86" class="tag-cloud-link tag-link-1118 tag-link-position-42" style="font-size: 8.3888888888889pt;" aria-label="美工知识 (31个项目)">美工知识</a>
<a href="http://www.9502669.com/tag/%e7%be%8e%e5%b7%a5%e8%ae%be%e8%ae%a1" class="tag-cloud-link tag-link-1117 tag-link-position-43" style="font-size: 8.3888888888889pt;" aria-label="美工设计 (31个项目)">美工设计</a>
<a href="http://www.9502669.com/tag/%e8%af%ad%e8%a8%80%e7%ac%a6%e5%8f%b7" class="tag-cloud-link tag-link-1014 tag-link-position-44" style="font-size: 8.3888888888889pt;" aria-label="语言符号 (31个项目)">语言符号</a>
<a href="http://www.9502669.com/tag/%e8%af%ad%e8%a8%80%e7%ac%a6%e5%8f%b7%e5%a4%a7%e5%85%a8" class="tag-cloud-link tag-link-1015 tag-link-position-45" style="font-size: 8.3888888888889pt;" aria-label="语言符号大全 (31个项目)">语言符号大全</a></div>
</div></aside>			</div>
			</div>
</div>


</div><!-- end sitecoent --> 

	
	<footer class="site-footer">
		<div class="container">
			
			<div class="footer-widget">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3 widget--about">
            <div class="widget--content">
                <div class="footer--logo mb-20">
                    <img class="tap-logo" src="/logo.png" data-dark="/logo.png" alt="美工之家">
                </div>
                <p class="mb-10">加入美工之家发布作品/付费下载/余额管理/积分换码，大家一起技术交流，共同进步。美工素材基地9502669.com</p>
            </div>
        </div>
        <!-- .col-md-2 end -->
        <div class="col-xs-12 col-sm-3 col-md-2 col-md-offset-1 widget--links">
            <div class="widget--title">
                <h5>本站导航</h5>
            </div>
            <div class="widget--content">
                <ul class="list-unstyled mb-0">
                    <li><a href="https://www.9502669.com/jingpin">精品资源</a></li><li><a href="https://www.9502669.com/sucai">美工素材</a></li><li><a href="https://www.9502669.com/zuopin">个人作品</a></li>                </ul>
            </div>
        </div>
        <!-- .col-md-2 end -->
        <div class="col-xs-12 col-sm-3 col-md-2 widget--links">
            <div class="widget--title">
                <h5>友情链接</h5>
            </div>
            <div class="widget--content">
                <ul class="list-unstyled mb-0">
                    <li><a href="https://www.99zt.cn/">高端源码</a></li><li><a href="https://www.52fw.cn">免费范文</a></li><li><a href="https://www.443.net.cn">免费外链</a></li>                </ul>
            </div>
        </div>
        <!-- .col-md-2 end -->
        <div class="col-xs-12 col-sm-12 col-md-4 widget--newsletter">
            <div class="widget--title">
                <h5>快速搜索</h5>
            </div>
            <div class="widget--content">
                <form class="newsletter--form mb-30" action="http://www.9502669.com/" method="get">
                    <input type="text" class="form-control" name="s" placeholder="关键词">
                    <button type="submit"><i class="fa fa-arrow-right"></i></button>
                </form>
                <h6>美工之家-美工素材交流分享首选平台，设计师互相学习区。</h6>
            </div>
        </div>

    </div>
</div>									  <div class="site-info">
			    © 2020 9502669.com  All rights reserved. <a href="https://www.9502669.com/">美工之家</a> 版权所有
			    			    <a href="https://beian.miit.gov.cn" target="_blank" class="text" rel="noreferrer nofollow"> 鲁ICP备18023744号-2</a>
			    			    <br>
			    
			  </div>
					</div>
	</footer>
	
<div class="rollbar">
	
	    <div class="rollbar-item tap-dark" etap="tap-dark" title="夜间模式"><i class="mdi mdi-brightness-4"></i></div>
    
		<div class="rollbar-item tap-click-qiandao"><a class="click-qiandao" title="签到" href="javascript:;"><i class="fa fa-calendar-check-o"></i></a></div>
		
					<div class="rollbar-item tap-pencil"><a target="_blank" title="投稿赚钱" href="http://www.9502669.com/wp-admin/post-new.php"><i class="fa fa-pencil"></i></a></div>
			
	    <div class="rollbar-item tap-qq" etap="tap-qq"><a target="_blank" title="QQ咨询" href="http://wpa.qq.com/msgrd?v=3&uin=9502669&site=qq&menu=yes"><i class="fa fa-qq"></i></a></div>
    
	    <div class="rollbar-item tap-blog-style" etap="tap-blog-style" data-id="0" title="博客模式"><i class="fa fa-list"></i></div>
        <div class="rollbar-item" etap="to_full" title="全屏页面"><i class="fa fa-arrows-alt"></i></div>
	<div class="rollbar-item" etap="to_top" title="返回顶部"><i class="fa fa-angle-up"></i></div>
</div>

<div class="dimmer"></div>

    <div id="popup-signup" class="popup-signup fade" style="display: none;">
    <div class="register-login-modal" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <img class="popup-logo" src="/logo.png" data-dark="/logo.png" alt="美工之家">
                    <!-- Nav tabs -->
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#login" data-toggle="login">登录</a>
                        </li>
                        <li><a href="#signup" data-toggle="signup">注册</a>
                        </li>
                    </ul>
                    <!-- Tab panes -->
                    <div class="tab-content">
                        <div class="tab-pane fade in active" id="login">
                            <div class="signup-form-container text-center">
                                <form class="mb-0">
                                    <div class="open-oauth  text-center"><a href="http://www.9502669.com/oauth/qq?rurl=http://www.9502669.com/91053.html" class="btn btn-qq"><i class="fa fa-qq"></i></a></div><div class="or-text"><span>or</span></div>                                                                            <a href="#" class="forget-password">仅开放社交账号登录</a>
                                                                    </form>
                                <!-- form  end -->
                            </div>
                            <!-- .signup-form end -->
                        </div>
                        <div class="tab-pane fade in" id="signup">
                            <form class="mb-0">
                                <div class="open-oauth  text-center"><a href="http://www.9502669.com/oauth/qq?rurl=http://www.9502669.com/91053.html" class="btn btn-qq"><i class="fa fa-qq"></i></a></div><div class="or-text"><span>or</span></div>                                                                    <a href="#" class="forget-password">仅开放社交账号注册</a>
                                                                
                            </form>
                            <!-- form  end -->
                        </div>
                    </div>
                    <a target="_blank" href="http://www.9502669.com/wp-login.php?action=lostpassword" class="rest-password">忘记密码？</a>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->
</div>


<div class="off-canvas">
  <div class="canvas-close"><i class="mdi mdi-close"></i></div>
  <div class="logo-wrapper">
      <a href="http://www.9502669.com/">
      <img class="logo regular" src="/logo.png" alt="美工之家">
    </a>
    </div>
  <div class="mobile-menu hidden-lg hidden-xl"></div>
  <aside class="widget-area">
      </aside>
</div>

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?6e3e432e6b34baedf97226f570ecbb67";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>
<script type="text/javascript">
((function() {
    var callbacks = [],
        timeLimit = 50,
        open = false;
    setInterval(loop, 1);
    return {
        addListener: function(fn) {
            callbacks.push(fn);
        },
        cancleListenr: function(fn) {
            callbacks = callbacks.filter(function(v) {
                return v !== fn;
            });
        }
    }
    function loop() {
        var startTime = new Date();
        debugger;
        if (new Date() - startTime > timeLimit) {
            if (!open) {
                callbacks.forEach(function(fn) {
                    fn.call(null);
                });
            }
            open = true;
            window.stop();
            alert('不要扒我了');
            window.location.reload();
        } else {
            open = false;
        }
    }
})()).addListener(function() {
    window.location.reload();
});
</script>

<script type='text/javascript' src='http://www.9502669.com/wp-content/themes/ripro/assets/js/plugins.js?ver=8.0.0' id='plugins-js'></script>
<script type='text/javascript' id='app-js-extra'>
/* <![CDATA[ */
var caozhuti = {"site_name":"\u7f8e\u5de5\u4e4b\u5bb6","home_url":"http:\/\/www.9502669.com","ajaxurl":"http:\/\/www.9502669.com\/wp-admin\/admin-ajax.php","is_singular":"1","tencent_captcha":{"is":"","appid":""},"infinite_load":"\u52a0\u8f7d\u66f4\u591a","infinite_loading":"<i class=\"fa fa-spinner fa-spin\"><\/i> \u52a0\u8f7d\u4e2d...","site_notice":{"is":"0","color":"#1e73be","html":"<div class=\"notify-content\"><h3>\u7f8e\u5de5\u4e4b\u5bb6\u6700\u65b0\u516c\u544a<\/h3><div>\u7f8e\u5de5\u3001\u8bbe\u8ba1\u5e08\u805a\u96c6\u5730\u3002\u8d44\u6e90\u4ea4\u6362\uff0c\u53d1\u5e03\u81ea\u5df1\u7684\u6536\u85cf\u6362\u53d6\u4ed6\u4eba\u7684\u6536\u85cf\uff0c\u540c\u65f6\u5356\u51fa\u53ef\u4ee5\u6d3b\u52a8\u6536\u5165\u54e6\uff01QQ\u4e00\u952e\u767b\u5f55\uff0c\u5feb\u6765\u5c1d\u8bd5 \u4e00\u4e0b\u5427<\/div><\/div>"},"pay_type_html":{"html":"<div class=\"pay-button-box\"><div class=\"pay-item\" id=\"alipay\" data-type=\"6\"><i class=\"alipay\"><\/i><span>\u652f\u4ed8\u5b9d<\/span><\/div><\/div><p style=\"font-size: 13px; padding: 0; margin: 0;\">\u5f53\u524d\u4e3a\u6e38\u5ba2\u8d2d\u4e70\u6a21\u5f0f<\/p>","alipay":6,"weixinpay":0}};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.9502669.com/wp-content/themes/ripro/assets/js/app.js?ver=8.0.0' id='app-js'></script>
<script type='text/javascript' src='http://www.9502669.com/wp-content/themes/ripro/assets/js/plugins/jquery.fancybox.min.js?ver=8.0.0' id='fancybox-js'></script>
<script type='text/javascript' src='http://www.9502669.com/wp-includes/js/comment-reply.min.js?ver=5.7.2' id='comment-reply-js'></script>
<script type='text/javascript' id='QAPress-js-js-extra'>
/* <![CDATA[ */
var QAPress_js = {"ajaxurl":"http:\/\/www.9502669.com\/wp-admin\/admin-ajax.php","ajaxloading":"http:\/\/www.9502669.com\/wp-content\/plugins\/QAPress\/images\/loading.gif"};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.9502669.com/wp-content/plugins/QAPress/js/scripts.min.js?ver=2.3.1' id='QAPress-js-js'></script>

</body>
</html>

、

、

…等标题元素，而对于一整段的文字内容则应该使用 元素

…等标题元素，而对于一整段的文字内容则应该使用

元素