当前位置:首页 > 行业动态 > 正文

如何精通文章万能标签的运用技巧?

“万能标签”在HTML中通常指的是具有广泛用途的标签, 、 等。这些标签没有特定的语义含义,但可以通过属性和样式进行多种用途的定义和使用。 常用于布局结构,而`则用于内联样式应用。通过CSS和JavaScript,这些标签可以实现复杂的页面布局和交互效果。

article 标签的概述

如何精通文章万能标签的运用技巧?  第1张

article 标签是 HTML5 中引入的一个新元素,用于定义独立的、完整的文章或内容块,它可以是一个新闻文章、博客文章、论坛帖子等独立的内容区域,与 div 标签不同,article 标签应具备独立性,可以被其他网页或站点单独引用或发布。

article 标签的基本用法

使用 article 标签非常简单,只需将要标记的内容放在<article> 和</article> 标签之间即可。

<article>
  <h1>HTML5 新特性</h1>
  <p>HTML5 是最新的 HTML 版本,引入了许多新特性。</p>
  <p>...</p>
</article>

article 标签的正确嵌套

article 标签应该被正确嵌套,遵循 HTML5 的父子元素关系,一个合理的嵌套示例如下:

<article>
  <h1>HTML5 新特性</h1>
  <section>
    <h2>语义化标签</h2>
    <p>HTML5 引入了更多的语义化标签,如<header>、<nav>、<section>、<article> 等。</p>
  </section>
  <section>
    <h2>多媒体支持</h2>
    <p>HTML5 提供了更好的多媒体支持,包括视频、音频等。</p>
  </section>
</article>

article 标签的优势

1、语义化:标签的出现使得内容更具有语义化,更容易理解和维护。

2、SEO 优化:搜索引擎会更好地识别和处理 article 标签,提高网站的搜索结果排名。

3、分享和引用:其他网站可以更轻松地引用和分享 article 标签内的内容,提升网站的传播力。

article 标签的常见误用

在使用 article 标签时,需要注意避免以下常见误用:

1、广告块:标签应该用于独立、完整的文章或内容块,不应被用于广告块,广告块应该使用 div 或其他适合的标签。

2、导航链接:标签应该包含完整的文章内容,不应为导航链接、页脚或其他非文章内容的部分,这些应该使用 nav、footer 等标签。

3、评论部分:标签应该包含主要内容,不应包含评论部分,评论部分应使用 section 或其他标签。

DEDECMS中的arclist标签详解

DEDECMS中的arclist标签是一种万能标签,也称为自由列表标记,其中imglist、imginfolist、specart、coolart、autolist都是由该标记所定义的不同属性延伸出来的别名标记,它的基本语法如下:

{dede:arclist flag='h' typeid='' row='' col='' titlelen='' infolen='' imgwidth='' imgheight='' listtype='' orderby='' keyword='' limit='0,1'}
<a href='[field:arcurl/]'>[field:title/]</a>
{/dede:arclist}

typeid:栏目ID,在列表模板和档案模板中一般不需要指定,在首页模板中允许用","分开表示多个栏目。

orderby:文档排序方式,可以是sortrank(按排序等级)、hot(按点击数)、click(按点击数)、pubdate(按出版时间)、near(按接近时间)、lastpost(按最后评论时间)、scores(按得分)等。

idlist:提取特定文档(文档ID),调用指定id文档,例子idlist =’4,45,78,237’。

limit:限定的记录范围(起始ID从0开始),如limit=’1,2’表示从ID为1的记录开始,取2条记录。

keyword:含有指定关键字的文档列表,多个关键字用","分隔。

orderway:指定排序方式是降序(desc)还是顺向排序(asc),默认为降序。

FAQs

1、如何在DEDECMS中使用arclist标签调用含有缩图的文档?

你可以使用flag="p"属性来调用含有缩图的文档,示例代码如下:

     {dede:arclist flag="p" row='10' titlelen='60'}
     <li><a href="[field:arcurl /]"><img src="[field:litpic/]" border="0" alt="[field:fulltitle /]"></a><br/><span><a href="[field:arcurl /]" title="[field:fulltitle /]">[field:title /]</a></span><br/></li>
     {/dede:arclist}

2、如何使用article标签定义一篇包含标题和发布时间的文章?

你可以按照以下示例代码来定义:

     <article>
       <header>
         <h1>文章标题</h1>
         <time pubdate="pubdate">20231011</time>
       </header>
       <p>文章内容...</p>
     </article>

序号 标签名称 描述 使用示例
1 article 表示一个独立的内容,通常具有自己的标题和主题,可以独立于其他内容存在。 这是一个独立的文章。
2 section 表示文档中的一个部分,可以包含标题、内容和其他嵌套元素。 这是文章的一个部分。
3 header 表示文档或节区的标题。 这是一个标题。
4 footer 表示文档或节区的页脚。 这是页脚内容。
5 nav 表示导航链接的容器,通常用于页面顶部的导航栏。 这是导航链接。
6 main 表示文档的主要内容。 这是文章的主要内容。
7 aside 表示与文档主体内容相关的辅助信息,如侧边栏或广告。 这是侧边栏内容。
8 article 表示一个独立的内容,通常具有自己的标题和主题,可以独立于其他内容存在。 这是一个独立的文章。
9 figure 表示图像及其标题的容器。
10 figcaption 表示figure元素的标题。 这是图像的标题。
11 ul 表示无序列表。
  • 项目1
  • 项目2
12 ol 表示有序列表。
  1. 项目1
  2. 项目2
13 li 表示列表中的一个项目。
  • 项目1
  • 14 h1h6 表示标题,h1是最高的标题,h6是最低的标题。

    15 p 表示段落。

    这是一个段落。

    16 div 表示文档中的一个部分,没有特定的语义。 这是一个div元素。
    17 span 表示行内元素,没有特定的语义。 这是一个span元素。
    18 strong 表示强调的文本。 这是强调的文本。
    19 em 表示强调的文本。 这是强调的文本。
    20 a 表示超链接。 这是一个链接
    21 img 表示图像。
    22 table 表示表格。
    表头1 表头2
    数据1 数据2

    23 th 表示表格头。 表头1
    24 td 表示表格数据。 数据1
    25 form 表示表单。 这是一个表单。
    26 input 表示输入框。
    27 label 表示输入框的标签。 用户名:
    28 select 表示下拉列表。 VolvoSaab
    29 option 表示下拉列表中的一个选项。 Volvo
    30 textarea 表示多行文本输入框。 这是一个多行文本输入框。

    这只是部分【article万能标签】的使用示例,实际上还有很多其他标签和属性可以应用于HTML文档。

    0