HTML标签常用标签

千次阅读 多人点赞 2017-02-23 11:33:58

1、 ...文档的第一行，位于标签之前。声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中有三种声明：1）HTML 4.01 Strict 该 DTD 包含所有

                  
 1、<!--...-->注释标签  
 注释标签用于在源代码中插入注释。注释不会显示在浏览器中。 
 2、<!DOCTYPE> 声明标签 
 <!DOCTYPE> 声明必须是 HTML文档的第一行，位于 <html>标签之前。<!DOCTYPE>声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML版本进行编写的指令。在 HTML 4.01中有三种 <!DOCTYPE>声明 ：1）HTML 4.01 Strict该 DTD包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets） 
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
 2）HTML 4.01 Transitional  包含所有 HTML元素和属性，包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets）。 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 3）HTML 4.01 Frameset 
 等同于 HTML 4.01 Transitional，但允许框架集内容。 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> 
 在 HTML5  中只有一种：<!DOCTYPE html> 
 
  
 3、 <a>标签    定义和用法 
 <a>标签定义超链接，用于从一张页面链接到另一张页面。 
 <a>元素最重要的属性是 href属性，它指示链接的目标。 
 下面是指向w3school的超链接 
 <a href="http://www.w3school.com.cn">W3School</a> 
 提示和注释 
 提示：如果不使用 href属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type  属性。 
 提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target属性）。 
 提示：请使用 CSS  来设置链接的样式。 
 HTML 4.01 与 HTML5之间的差异：在 HTML 4.01中，<a> 标签可以是超链接或锚。在 HTML5 中，<a>  标签始终是超链接，但是如果未设置 href属性，则只是超链接的占位符。HTML5提供了一些新属性，同时不再支持一些 HTML 4.01属性。详见：http://www.w3school.com.cn/tags/tag_a.asp 
 
  
 4、<abbr>标签 
 定义和用法 
 <abbr> 标签指示简称或缩写，比如 "WWW"或 "NATO"。 
 通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。 
 <abbr> 标签最初是在 HTML 4.0中引入的，表示它所包含的文本是一个更长的单词或短语的缩写形式。 
 标记一个缩写：The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949. 
 HTML 4.01 与 HTML5之间的差异：无。 
 详见：http://www.w3school.com.cn/tags/tag_abbr.asp 
 5、<acronym>标签 
 所有主流的浏览器均支持 <acronym>标签。HTML5 中不支持 <acronym> 标签。 
 实例：<acronym title="World Wide Web">WWW</acronym> 
 提示：title 属性可用于在鼠标指针移动到元素上时显示出缩写的完整版本。 
 详见：http://www.w3school.com.cn/tags/tag_acronym.asp 
 6、<address>标签——定义文档或文章的作者/拥有者的联系信息。 
 定义和用法 
 如果 <address>元素位于 <body>元素内，则它表示文档联系信息。 
 如果 <address>元素位于 <article>元素内，则它表示文章的联系信息。 
 <address>元素中的文本通常呈现为斜体。大多数浏览器会在 address元素前后添加折行。 
 提示：<address>  标签不应该用于描述通讯地址，除非它是联系信息的一部分。 
 提示：<address>  元素通常连同其他信息被包含在 <footer>  元素中。 
 7、<applet>标签 
 定义和用法 
 HTML5 中不支持 <applet>标签。请使用  object 元素标签代替。 
 HTML 4.01 中不赞成使用 <applet>元素。 
 <applet> 标签定义嵌入的 applet。 
 详见：http://www.w3school.com.cn/tags/tag_applet.asp 
 8、<area>标签 
 定义和用法 
 <area> 标签定义图像映射中的区域（注：图像映射指得是带有可点击区域的图像），area元素总是嵌套在 <map>标签中。注释：<img>标签中的 usemap属性与  map 元素 name属性相关联，创建图像与映射之间的联系。 
 实例： 
 <img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> 
 <map name="planetmap" id="planetmap"> 
   <area shape="circle" coords="180,139,14" href ="venus.html"alt="Venus" /> 
   <area shape="circle" coords="129,161,10" href ="mercur.html"alt="Mercury" /> 
   <area shape="rect" coords="0,0,110,260" href ="sun.html"alt="Sun" /> 
 </map> 
 注释：<img>中的 usemap 属性可引用 <map>中的 id 或name 属性（由浏览器决定），所以我们需要同时向 <map>添加 id 和 name  两个属性。 
 属性：alt（必需） — 定义此区域的替换文本 
      可选的属性： 
      coords（坐标值）—-定义可点击区域（对鼠标敏感的区域）的坐标 
 href（URL）-—定义此区域的目标URL 
 onhref   ——  从图像映射排除某个区域 
 shape  （default、rect、circ、poly）——定义区域的形状 
 target  （_blank、_parent、_self、_top）——规定何处打开href属性指定的目标URL 
 详见：http://www.w3school.com.cn/tags/tag_area.asp 
 9、 <aside>标签 
 是 HTML 5 的新标签，定义其所处内容之外的内容。aside的内容应该与附近的内容相关。 
 HTML5提供的aside元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。 
 根据目前的规范，aside元素有两种使用方法： 
 被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。
 
 在article之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。 
     实例代码： 
 <body> 
 <header> 
     <h1>My Blog</h1> 
 </header> 
 <article> 
     <h1>My Blog Post</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
         incididunt ut labore et dolore magna aliqua.</p> 
     <aside> 
         <!-- Since this aside is contained within an article, a parser 
 
  
   should understand that the content of this aside is directly related 
 
  
   to the article itself. --> 
         <h1>Glossary</h1> 
         <dl> 
             <dt>Lorem</dt> 
             <dd>ipsum dolor sit amet</dd> 
         </dl> 
     </aside> 
 </article> 
 <aside> 
     <!-- This aside is outside of the article. Its content is related 
 
  
 to the page, but not as closely related to the above article --> 
     <h2>Blogroll</h2> 
     <ul> 
         <li><a href="#">My Friend</a></li> 
         <li><a href="#">My Other Friend</a></li> 
         <li><a href="#">My Best Friend</a></li> 
     </ul> 
 </aside> 
 </body> 
 
  
 
  
 提示：<aside>  的内容可用作文章的侧栏。 
 详见：http://www.w3school.com.cn/tags/tag_aside.asp 
 
  
 10、<audio>标签 
 是 HTML 5  的新标签。 
 Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <audio> 标签。<audio>标签定义声音，比如音乐或其他音频流。 
 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。 
 <audio src="someaudio.wav"> 
 您的浏览器不支持 audio  标签。 
 </audio> 
 audio常用属性 
 那么首先来看一下audio标签中的一些常用属性： 
 
  
 
  
 audio音乐格式的支持 
 
  
 
  
 audio可通过new来创建。也可以通过用document来获取。 
 //通过new关键字来创建Audio对象 
 var Music = new Audio("test.mp3"); 
 //通过document来获取已经存在的Audio对象 
 var Music = document.getElementById("audio"); 
 //当然这里也可以使用document.getElementsByClassName('className')等其他的方法来获取。 
 然后我们来看下api所提供的对audio标签操作的一些属性和方法 
 详见：http://www.cnblogs.com/zhangwei595806165/p/5507774.html、http://www.w3school.com.cn/tags/tag_audio.asp 
 11、<b>标签 
 <b> 标签规定粗体文本。 
 注释：根据 HTML5  规范，在没有其他合适标签更合适时，才应该把 <b>标签作为最后的选项。HTML5规范声明：应该使用  <h1> - <h6> 来表示标题，使用<em> 标签来表示强调的文本，应该使用<strong> 标签来表示重要文本，应该使用 <mark>标签来表示标注的/突出显示的文本。另外能够使用 CSS "font-weight"属性来设置粗体文本。 
 详见：http://www.w3school.com.cn/tags/tag_b.asp 
 12、 <base>标签 
 定义和用法 
 <base> 标签为页面上的所有链接规定默认地址或默认目标。 
 通常情况下，浏览器会从当前文档的 URL中提取相应的元素来填写相对 URL中的空白。 
 使用 <base> 标签可以改变这一点。浏览器随后将不再使用当前文档的 URL，而使用指定的基本 URL来解析所有的相对 URL。这其中包括 <a>、<img>、<link>、<form>标签中的 URL。 
 实例： 
 <head> 
 <base href="http://www.w3school.com.cn/i/" /> 
 <base target="_blank" /> 
 </head> 
 
  
 <body> 
 <img src="eg_smile.gif" /> 
 <a href="http://www.w3school.com.cn">W3School</a> 
 </body> 
 注释：<base>标签必须位于 head 元素内部。 
 必需的属性 
      href（URL）——规定页面中所有相对应连接的基准URL 
  可选属性 
      target （_blank、_parent、_self、_top、framename）——何处打开页面中所有的链接。 
 在 HTML  文档中 <base> 每出现一次，Base对象就会被创建。 
 详见：http://www.w3school.com.cn/tags/tag_base.asp 
 13、<bdo>标签 
 bdo 元素可覆盖默认的文本方向。 
 可选属性   dir  （ltr、rtl）定义文字的方向     ltr —左到右 ；rtl —  右到左 
 详见：http://www.w3school.com.cn/tags/tag_bdo.asp 
 
  
 14、<big>标签 
 <big> 标签呈现大号字体效果。 
 使用 <big> 标签可以很容易地放大字体。这简直不能再简单了：浏览器显示包含在 <big>标签和其相应的 </big>标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big>标签将不起任何作用。 
 更妙的是，可以嵌套 <big>  标签来放大文本。每一个 <big>  标签都可以使字体大一号，直到上限 7号文本，正如字体模型所定义的那样。 
 但是使用 <big>  标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big>标签的浏览器来说，它经常将其认为是粗体字标签。 
 详见：http://www.w3school.com.cn/tags/tag_big.asp 
 15、<blockquote>标签 
  <blockquote>标签定义块引用，所有主流的浏览器均支持 <blockquote>标签，但是没有浏览器能够正确地显示 cite属性。<blockquote>与 </blockquote>之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 
 可选属性   cite（URL）——规定引用的来源 
 提示：请使用  q 元素来标记短的引用。 
 <q> 和 <blockquote>都表示“引用”。不同的是，q标签是行内元素，在内容的开始和结尾处会包有“”，而 blockquote是块级元素，默认带有左右40px的外间距，不带“”。从语义上讲，前者引用的是小段文字，后者引用的是大段的内容块。从兼容性上讲，在IE6、7下q标签不会带有“”。FF下的引号是漂亮的全角字符：“”。而chrome下则为半角字符：""。至于IE8、9，应该也是全角字符，但在不指定字体的情况下真的丑爆了，在为其指定宋体或者微软雅黑后呈现与FF一致。 
 16、<br>标签 
 <br> 可插入一个简单的换行符。<br>标签是空标签（意味着它没有结束标签，因此这是错误的：<br></br>）。在 XHTML中，把结束标签放在开始标签中，也就是 <br />。请注意，<br>标签只是简单地开始新的一行，而当浏览器遇到<p>标签时，通常会在相邻的段落之间插入一些垂直的间距。 
 clear 属性 
 如果您希望文本流在内联表格或图像的下一行继续输出，请使用 clear属性，该属性有三个可选的值：left、right或者 all，每个值都代表一个边界或两边的边界。 
 提示：一般情况下，文本流中的其他行会在内联图像的底部显示，除非图形的 <img>标签被设置为左对齐或右对齐（对于 <table>标签也一样）。因此，<br>标签的 clear 属性只对这些左对齐或右对齐的图像或表格起作用。 
 注释：请使用 <br>  来输入空行，而不是分割段落。 
 详情：http://www.w3school.com.cn/tags/tag_br.asp 
 17、<button>标签 
 定义一个按钮，所有主流浏览器都支持 <button>标签。 
 用法： 
 在 button 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 input元素创建的按钮之间的不同之处。 
 <button> 控件与 <input type="button">相比，提供了更为强大的功能和更丰富的内容。<button>与 </button>标签之间的所有内容都是按钮的内容，其中包括任何可接受的正文内容，比如文本或多媒体内容。例如，我们可以在按钮中包括一个图像和相关的文本，用它们在按钮中创建一个吸引人的标记图像。 
 唯一禁止使用的元素是图像映射，因为它对鼠标和键盘敏感的动作会干扰表单按钮的行为。 
 请始终为按钮规定 type属性。Internet Explorer的默认类型是 "button"，而其他浏览器中（包括 W3C规范）的默认值是 "submit"。 
 属性：autofocus（autofocus）——规定当页面加载时按钮应当自动地获得焦点 
   disabled  （disabled）—规定应该禁用该按钮 
 form    （form_name）——规定按钮属于一个或多个表单 
 formaction  （url）——覆盖form元素的action属性（该属性与type=“submit”配合使用） 
 formenctype  （application/x-www-form-urlencoded、multipart/form-data、text/plain）——覆盖form元素的enctype属性（该属性与type=“submit”配合使用） 
 formmethod  （get、post）——覆盖form元素的method属性（该属性与type=“submit”配合使用） 
 formmovalidate（formmovalidate） —— 覆盖form的novalidate属性（该属性与type=“submit”配合使用） 
 formtarget（_blank、_parent、_self、top、framename）覆盖form的target属性（该属性与type=“submit”配合使用 
 name  —  按钮的名称 
 type（button、reset、submit） —— 按钮的类型 
 value  （text）——规定按钮的初始值 
 placeholder ——   按钮的占位符 
 
  
 <html> 
 <body> 
 <form action="demo_form.asp" method="get"> 
 E-mail: <input type="email" name="userid" /><br /> 
 <button type="submit" >提交</button><br /> 
 <button type="submit" formnovalidate="formnovalidate">进行没有验证的提交</button> 
 </form> 
 </body> 
 </html> 
 formnovalidate 属性覆盖表单的novalidate 属性。 
 如果使用该属性，则提交表单时按钮不会执行验证过程。 
 该属性与 type="submit"配合使用。 
 
  
 一开始的页面是 
  
 
 输入qw，点击提交会验证输入的正确性 
 
  
 如果点击 第二个按钮就不会验证输入的内容是否符合要求 
 
  
 详见：http://www.w3school.com.cn/tags/tag_button.asp 
 
  
 18、<canvas>标签 
 （Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari支持 <canvas> 标签。） 
 定义和用法 
 <canvas> 标签定义图形，比如图表和其他图像。 
 <canvas> 标签只是图形容器，必须使用脚本来绘制图形。是html5中新标签。 
 HTML5 的 canvas元素使用 JavaScript在网页上绘制图像。 
 画布是一个矩形区域，您可以控制其每一像素。 
 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 
 属性 
 height —  设置canvas的高度 
 width —  设置canvas的宽度 
 详见：http://www.w3school.com.cn/tags/tag_canvas.asp 
 19、<caption>标签 
 用来定定义表格标题，必须紧随 table标签之后。只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。 
    可选属性 
  align （left、right、top、bottom）—规定标题的对齐方式（w3c不推荐使用，一般使用样式取而代之） 
 在 HTML 4.01中，caption 元素的 align  属性是不被赞成使用的。 
 在 XHTML 1.0 Strict DTD中，caption 元素的 align  属性是不被支持的。 
 <html> 
 <body> 
 <h4>这个表格有一个标题，以及粗边框：</h4> 
 <table border="6"> 
 <caption>我的标题</caption> 
 <tr> 
   <td>100</td> 
   <td>200</td> 
   <td>300</td> 
 </tr> 
 <tr> 
   <td>400</td> 
   <td>500</td> 
   <td>600</td> 
 </tr> 
 </table> 
 
  
 </body> 
 效果图： 
 
  
 
  
 20、 <cite>标签 
 <cite> 标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。 
 按照惯例，引用的文本将以斜体显示。 
 用 <cite> 标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 <a>标签中，从而把一个超链接指向该联机版本。 
 <cite> 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。<cite>标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。 
 
  
 
  
 21、<em> <strong> <dfn> <code> <samp> <kbd><var> <cite>标签 
 都是短语元素，虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_phrase_elements.asp 
 
  
 22、<col>标签 
 为表格中一个或多个列定义属性值。如需对全部列应用样式，<col>标签很有用，这样就不需要对各个单元和各行重复应用样式了。只能在 table或 colgroup 元素中使用 <col> 标签。 
 提示：请为 <col>  标签添加 class  属性。这样就可以使用 CSS  来负责对齐方式、宽度和颜色等等。如果您希望在 colgroup内部为每个列规定不同的属性值时，请使用此元素。如果没有 col元素，列会从 colgroup那里继承所有的属性值。col元素是仅包含属性的空元素。如需创建列，您就必须在 tr元素内部规定 td 元素。 
 详见：http://www.w3school.com.cn/tags/tag_col.asp 
 
  
 23、<datalist>标签 
 <datalist>  标签定义选项列表。请与 input  元素配合使用该元素，来定义 input可能的值。 
 datalist 及其选项不会被显示出来，它仅仅是合法的输入值列表。 
 请使用 input  元素的 list 属性来绑定 datalist。 
 <html> 
 <body> 
 <input id="myCar" list="cars" /> 
 <datalist id="cars"> 
   <option value="BMW"> 
   <option value="Ford"> 
   <option value="Volvo"> 
 </datalist> 
 </html> 
 
  
 
  
 选择第三个 
 
  
 注意：所有主流浏览器都支持 <datalist>标签，除了 Internet Explorer和 Safari。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_datalist.asp 
 
  
 24、<dl>、<dd>、<dt>标签 
 <dl> 
    <dt>计算机</dt> 
    <dd>用来计算的仪器 ... ...</dd> 
    <dt>显示器</dt> 
    <dd>以视觉方式显示信息的装置 ... ...</dd> 
 </dl> 
 <dl> 标签定义了定义列表（definition list）。 
 <dl> 标签用于结合<dt>（定义列表中的项目）和<dd>（描述列表中的项目）。 
 
  
 
  
 
  
 
  
 25、<del>标签 
 定义文档中已被删除的文本。 
 
  
 <html> 
 
  
 <body> 
 
  
 <p>一打有  <del>二十</del> <ins>十二</ins>件。</p> 
 
  
 <p>大多数浏览器会改写为删除文本和下划线文本。</p> 
 
  
 <p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p> 
 
  
 </body> 
 </html> 
  
 
 详见：http://www.w3school.com.cn/tags/att_del_cite.asp 
 
  
 26、<div>标签 
 <div> 可定义文档中的分区或节（division/section）。<div>标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。 
 如果用 id 或 class来标记 <div>，那么该标签的作用会变得更加有效。 
 用法 
 <div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div>固有的唯一格式表现。可以通过 <div>的 class 或 id  应用额外的样式。 
 不必为每一个 <div>  都加上类或 id，虽然这样做也有一定的好处。 
 可以对同一个 <div>  元素应用 class  或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素。 
 W3C 在其最新的 XHTML2草案的 XHTML 结构模型中这样定义 div： 
 div 元素，通过与 id、class及 role 属性配合，提供向文档添加额外结构的通用机制。这个元素不会将表现的风格定义于内容。所以，创作者可以通过将这个元素与样式表、xml:lang、属性等配合使用，使 XHTML适应他们自身的需求和口味。 
 div 是 division的简写。division意为分割、区域、分组。比方说，当你将一系列的链接组合在一起，就形成了文档的一个 division。 
 http://www.w3school.com.cn/tags/att_div.asp 
 
  
 27、<embed>标签 
 定义嵌入的内容，比如插件。 
 <embed src="helloworld.swf" /> 
 <embed> 标签是 HTML 5中的新标签。 
 属性 
 
  
 
  
 详见：http://www.w3school.com.cn/tags/tag_embed.asp 
 
  
 28、<fieldset>标签 
 fieldset 元素可将表单内的相关元素分组。 
 <fieldset>  标签将表单内容的一部分打包，生成一组相关表单的字段。 
 当一组表单元素放到 <fieldset>标签内时，浏览器会以特殊方式来显示它们，它们可能有特殊的边界、3D效果，或者甚至可创建一个子表单来处理这些元素。 
 <fieldset>  标签没有必需的或唯一的属性。 
 <legend>标签为 fieldset元素定义标题。 
 属性 
 
  
 
  
 <html> 
 <body> 
 <form> 
   <fieldset> 
     <legend>health information</legend> 
     height: <input type="text" /> 
     weight: <input type="text" /> 
     age:<input type="text" /> 
   </fieldset> 
 </form> 
 </body> 
 </html> 
 页面效果 
 
  
 
  
 29、  <figure>标签和<figcaption>标签 
 Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持 
 <figure>标签规定独立的流内容（图像、图表、照片、代码等等）。 
 figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。 
 
  
 <figcaption> 标签，Internet Explorer 9, Firefox, Opera, Chrome以及 Safari 支持 <figcaption> 标签。 
 <figcaption> 标签定义figure元素的标题（caption）。 
 "figcaption"  元素应该被置于 "figure"  元素的第一个或最后一个子元素的位置。 
 
  
 <figure> 
   <img src="http://pic73.nipic.com/file/20150724/18576408_175304314596_2.jpg" width="350" height="234" /> 
   <figcaption>黄浦江上的的卢浦大桥</figcaption> 
 </figure> 
 
  
 
  
 30、<header>和<footer>标签 
 <header>   标签定义文档的页眉（介绍信息）。 
 
  
 <footer> 标签，Internet Explorer 9, Firefox, Opera, Chrome, and Safari支持 <footer> 标签。用来定义文档或节的页脚。<footer> 元素应当含有其包含元素的信息。 
 页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。 
 您可以在一个文档中使用多个 <footer>元素。 
 <footer> 标签是 HTML 5中的新标签。 
 
  
 提示：<footer>  元素内的联系信息应该位于  <address>  标签中。 
 
  
 
  
 31、<form>标签 
 用于为用户输入创建 HTML  表单。 
 表单能够包含  input 元素，比如文本字段、复选框、单选框、提交按钮等等。 
 表单还可以包含menus、textarea、fieldset、legend和label元素。 
 表单用于向服务器传输数据。 
 注释：form元素是块级元素，其前后会产生折行。 
 <html> 
 
  
 <body> 
 <form action="form_action.asp" method="get"> 
   <p>First name: <input type="text" name="fname" /></p> 
   <p>Last name: <input type="text" name="lname" /></p> 
   <input type="submit" value="Submit" /> 
 </form> 
 </body> 
 </html> 
 
  
 属性 
 
  
 详见：http://www.w3school.com.cn/tags/tag_form.asp 
 
  
 32、<h1>到 <h6>标签 
 由于 h 元素拥有确切的语义，因此请您慎重地选择恰当的标签层级来构建文档的结构。因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。 
 
  
 
  
 33、<head>标签 
 <head> 标签用于定义文档的头部，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。 
 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 
 下面这些标签可用在 head部分：<base>,<link>,<meta>,<script>,<style>,以及<title>。 
 <title> 定义文档的标题，它是 head部分中唯一必需的元素。 
 提示：应该把 <head>标签放在文档的开始处，紧跟在 <html>后面，并处于 <body>标签或 <frameset>标签之前。 
 提示：请记住始终为文档规定标题！ 
 框架 
 
  
 
  
 
  
 34、<hr>标签 
 <hr> 标签在 HTML页面中创建一条水平线。 
 水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。 
 HTML 与 XHTML之间的差异 
 在 HTML 中，<hr>标签没有结束标签。 
 在 XHTML  中，<hr> 必须被正确地关闭，比如 <hr />。 
 在 HTML 4.01  中，hr 元素的所有呈现属性均不被赞成使用。 
 在 XHTML 1.0 Strict DTD中，hr 元素的所有呈现属性均不被支持。 
 属性 
 
  
 
  
 35、<i>标签 
 <i> 标签显示斜体文本效果。 
 <i> 标签和基于内容的样式标签<em>类似。它告诉浏览器将包含其中的文本以斜体字（italic）或者倾斜（oblique）字体显示。如果这种斜体字对该浏览器不可用的话，可以使用高亮、反白或加下划线等样式。 
 提示：<i> 标签一定要和结束标签 </i>结合起来使用。 
 
  
 <html> 
 
  
 <body> 
 
  
 <i> 我是i标签 </i> 
 </body> 
 </html> 
 
  
 
  
 
  
 36、 <img>标签 
 向网页中嵌入一幅图像。从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接图像。<img>标签创建的是被引用图像的占位空间。 
 <img> 标签有两个必需的属性：src属性和  alt 属性。 
 
  
 
  
 详见：http://www.w3school.com.cn/tags/tag_img.asp 
 
  
 37、 <input>标签 
 用于搜集用户信息。根据不同的 type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 
 提示：请使用  label 元素为某个表单控件定义标签。 
 <form> 
   <label for="male">Male</label> 
   <input type="radio" name="sex" id="male" /> 
   <br /> 
   <label for="female">Female</label> 
   <input type="radio" name="sex" id="female" /> 
 </form> 
 
  
 
  
 具体属性和实例详见：http://www.w3school.com.cn/tags/tag_input.asp 
 
  
 38、<keygen>标签 
 Firefox, Chrome, Opera以及 Safari 6 支持 <keygen>  标签。 
 <keygen> 标签规定用于表单的密钥对生成器字段。 
 当提交表单时，私钥存储在本地，公钥发送到服务器。 
 属性 
 
  
 详见：http://www.w3school.com.cn/tags/tag_keygen.asp 
 39、<label>标签 
 为 input 元素定义标注（标记） 
 label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。 
 <label> 标签的 for属性应当与相关元素的 id属性相同。 
 属性 
 
  
 <html> 
 
  
 <body> 
 
  
 <form> 
   <label for="male">Male</label> 
   <input type="radio" name="sex" id="male" /> 
   <br /> 
   <label for="female">Female</label> 
   <input type="radio" name="sex" id="female" /> 
 </form> 
 
  
 </body> 
 </html> 
 
  
 也就是说我们点击Male文本时也会触发 male的 input的点击事件 
 详见：http://www.w3school.com.cn/tags/tag_label.asp 
 40、<li>标签、<ol>标签、<ul>标签 
 <li>标签 
 <li> 标签定义列表项目。 
 <li> 标签可用在有序列表(<ol>)和无序列表 (<ul>)中。 
 
  
 
  
 提示：请使用 CSS  来定义列表和列表项目的类型。 
 
  
 <ol>  标签定义有序列表。 
 
  
 提示：请使用 CSS  来定义列表的类型。 
 
  
 
  
 
  
 
  
 <ul>  标签定义无序列表。 
  
 HTML 与 XHTML之间的差异 
 在 HTML 4.01  中，ul 元素的 "compact"和 "type" 属性是不被赞成使用的。 
 在 XHTML 1.0 Strict DTD中，ul 元素的 "compact" 和 "type"  属性是不被支持的。 
 提示：请使用样式来定义列表的类型。 
 例子（复杂的嵌套列表）： 
 <h4>一个嵌套列表：</h4> 
 <ul> 
   <li>咖啡</li> 
   <li>茶 
     <ul> 
     <li>红茶</li> 
     <li>绿茶 
       <ul> 
       <li>中国茶</li> 
       <li>非洲茶</li> 
       </ul> 
     </li> 
     </ul> 
   </li> 
   <li>牛奶</li> 
 </ul> 
 
  
 
  
 例子(不同类型的无序列表)： 
 <h4>Disc 项目符号列表：</h4> 
 <ul type="disc"> 
  <li>苹果</li> 
  <li>香蕉</li> 
  <li>柠檬</li> 
  <li>桔子</li> 
 </ul>   
 
  
 <h4>Circle 项目符号列表：</h4> 
 <ul type="circle"> 
  <li>苹果</li> 
  <li>香蕉</li> 
  <li>柠檬</li> 
  <li>桔子</li> 
 </ul>   
 
  
 <h4>Square 项目符号列表：</h4> 
 <ul type="square"> 
  <li>苹果</li> 
  <li>香蕉</li> 
  <li>柠檬</li> 
  <li>桔子</li> 
 </ul>   
 
  
 41、<link>标签 
 <link> 标签定义文档与外部资源的关系。 
 <link> 标签最常见的用途是链接样式表。 
 注释：link 元素是空元素，它仅包含属性。 
 注释：此元素只能存在于 head  部分，不过它可出现任何次数。 
 
  
 
  
 <link> 标签链接到一个外部样式表的代码如下： 
 <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > 
 
  
 给页面的头部加头像 
 <link rel="icon" href="ggfd_09.png" /> 
 
  
 注意：必须加在head部分 
 详见：http://www.w3school.com.cn/tags/tag_link.asp 
 42、<map>标签 
 所有主流浏览器都支持 <map>  标签。它定义了一个客户端图像映射。图像映射（image-map）指带有可点击区域的一幅图像。 
 注释：area 元素永远嵌套在 map元素内部。area 元素可定义图像映射中的区域。 
 注释：<img>中的 usemap属性可引用 <map> 中的 id  或 name属性（取决于浏览器），所以我们应同时向 <map>添加 id 和 name  属性。 
 
  
 例子： 
 
  
 <p>请点击图像上的星球，把它们放大。</p> 
 <img 
 src="/i/eg_planets.jpg" 
 border="0" usemap="#planetmap" 
 alt="Planets" /> 
 
  
 <map name="planetmap" id="planetmap"> 
 
  
 <area 
 shape="circle" 
 coords="180,139,14" 
 href ="/example/html/venus.html" 
 target ="_blank" 
 alt="Venus" /> 
 
  
 <area 
 shape="circle" 
 coords="129,161,10" 
 href ="/example/html/mercur.html" 
 target ="_blank" 
 alt="Mercury" /> 
 
  
 <area 
 shape="rect" 
 coords="0,0,110,260" 
 href ="/example/html/sun.html" 
 target ="_blank" 
 alt="Sun" /> 
 
  
 </map> 
 
  
 
  
 
  
 
  
 注意：shape="circle"  coords="180,139,14”是一个圆（中心坐标180，139半径14） 
 矩形：shape="rectangle"，coords="x1,y1,x2,y2"第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标 
 多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。 
 详见：http://www.w3school.com.cn/tags/tag_map.asp 
 
  
 43、<mark>标签、<meter>标签、<nav>标签 
 Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <mark> 标签。 
 <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m>标签。 
 
  
 Firefox, Chrome, Opera以及 Safari 6 支持 <meter>  标签。 
 <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。 
 注释：<meter>  标签不应用于指示进度（在进度条中）。如果标记进度条，请使用 <progress>标签。 
 
  
 
  
 
  
 <nav> 标签 Internet Explorer 9, Firefox, Opera, Chrome 以及 Safari支持 <nav> 标签，<nav>  标签定义导航链接的部分。 
 提示：如果文档中有“前后”按钮，则应该把它放到 <nav>元素中。 
 <!DOCTYPE html> 
 <html> 
 <body> 
 
  
 <nav> 
 <a href="/html/">HTML</a> | 
 <a href="/css/">CSS</a> | 
 <a href="/js/">JavaScript</a> | 
 <a href="/jquery/">jQuery</a> 
 </nav> 
 </body> 
 </html> 
 
  
 详见：http://www.w3school.com.cn/tags/tag_nav.asp 
 
  
 44、<meta>标签 
 
  
 <meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。 
 <meta> 标签位于文档的头部，不包含任何内容。<meta>标签的属性定义了与文档相关联的名称/值对。 
 注释：<meta>  标签永远位于 head 元素内部。 
 注释：元数据总是以名称/值的形式被成对传递的。 
 
  
 
  
 
  
 Meta  元素中的信息可以描述 HTML文档，Meta元素中的信息可以描述文档的关键词 
 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
  
 
  
 在网址已经变更的情况下，将用户重定向到另外一个地址。 
 <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" /> 
 content="5表示5秒后自动跳转到重定向的地址 
 详见：http://www.w3school.com.cn/tags/tag_meta.asp 
 
  
 45、<object>标签 
 定义一个嵌入的对象，<object>标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF以及 Flash。object的初衷是取代 img 和 applet  元素。 
 浏览器的对象支持有赖于对象类型。不幸的是，主流浏览器都使用不同的代码来加载相同的对象类型。 
 而幸运的是，object  对象提供了解决方案。如果未显示 object元素，就会执行位于 <object>和 </object>之间的代码。通过这种方式，我们能够嵌套多个 object元素（每个对应一个浏览器）。 
 注释：<param>标签定义用于对象的 run-time 设置。 
 注释：不要对图像使用 <object>标签，请使用  <img> 标签代替。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_object.asp 
 
  
 46、<optgroup>标签、<option>标签、<select>标签 
 
  
 所有主流浏览器都支持 <optgroup>标签。<optgroup>标签定义选项组。 
 optgroup 元素用于组合选项。当您使用一个长的选项列表时，对相关的选项进行组合会使处理更加容易。 
 
  
 例子： 
 <select> 
   <optgroup label="Swedish Cars"> 
     <option value ="volvo">Volvo</option> 
     <option value ="saab">Saab</option> 
   </optgroup> 
 
  
   <optgroup label="German Cars"> 
     <option value ="mercedes">Mercedes</option> 
     <option value ="audi">Audi</option> 
   </optgroup> 
 </select> 
 
  
 详见：http://www.w3school.com.cn/tags/tag_optgroup.asp 
 
  
 option 元素定义下拉列表中的一个选项（一个条目）。浏览器将 <option>标签中的内容作为 <select>标签的菜单或是滚动列表中的一个元素显示。 
 option 元素位于 select元素内部。 
 注释：<option>标签可以在不带有任何属性的情况下使用，但是您通常需要使用 value属性，此属性会指示出被送往服务器的内容。 
 提示：如果列表选项很多，可以使用 <optgroup>标签对相关选项进行组合。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_option.asp 
 
  
 <select> 标签可创建单选或多选菜单。<select&>元素中的  <option> 标签用于定义列表中的可用选项。 
 提示：select 元素是一种表单控件，可用于在表单中接受用户输入。 
 
  
 
  
 详见：http://www.w3school.com.cn/tags/tag_select.asp 
 
  
 47、<output>标签、<param>标签、<pre>标签 
 
  
 <output> 标签定义不同类型的输出，比如脚本的输出。是 HTML 5中的新标签。 
 
  
 
  
 详见：http://www.w3school.com.cn/tags/tag_output.asp 
 
  
 
  
 param 元素允许您为插入 XHTML文档的对象规定 run-time设置，也就是说，此标签可为包含它的<object>或者  <applet> 标签提供参数。 
 
  
 pre 元素可定义预格式化的文本。被包围在 pre元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。 
 详见：http://www.w3school.com.cn/tags/tag_pre.asp 
 
  
 48、 <progress>标签 
 Internet Explorer 10, Firefox, Opera, Chrome以及 Safari 6 支持 <progress> 标签。<progress> 标签标示任务的进度（进程）。 
 提示：请结合 <progress>  标签与 JavaScript  一同使用，来显示任务的进度。<progress>标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。如需表示度量衡，请使用 <meter>标签代替。 
 
  
 
  
 
  
 
  
 49、<ruby>标签 
 Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <ruby> 标签。<ruby>标签定义 ruby 注释（中文注音或字符）。与 <ruby> 以及 <rt>  标签一同使用： 
 ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt元素组成，还包括可选的 rp元素，定义当浏览器不支持 "ruby"元素时显示的内容。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_rt.asp 
 
  
 
  
 50、<s>标签 
 <s> 标签可定义加删除线文本定义。 
 <s> 标签是  <strike> 标签的缩写版本，Netscape和 Internet Explorer都支持它。但在 HTML 4和 XHTML 中已经不再赞成使用它了，意思就是不再使用了；它早晚有一天将会消失。 
 注释：请使用 <del>  替代它！ 
 
  
 为文本标记添加删除线 
 <p>在 HTML 5  中，<s>仍然支持</s>已经不支持这个标签了。</p> 
 
  
 
  
 
  
 51、<section>标签、<small>标签、<source>标签 
 
  
 <section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<section>标签是 HTML 5 中的新标签。 
 
  
 
  
 
  
 <small> 标签呈现小号字体效果。<small>标签和它所对应的 <big>标签一样，但它是缩小字体而不是放大。如果被包围的字体已经是字体模型所支持的最小字号，那么 <small>标签将不起任何作用。 
 与 <big> 标签类似，<small>标签也可以嵌套，从而连续地把文字缩小。每个 <small>标签都把文本的字体变小一号，直到达到下限的一号字。 
 
  
 <source> 标签为媒介元素（比如 <video>和 <audio>）定义媒介资源。<source>标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。 
 
  
 
  
 
  
 
  
 52、<span>标签 
 <span> 标签被用来组合文档中的行内元素。 
 提示：请使用 <span>  来组合行内元素，以便通过样式来格式化它们。 
 注释：span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 
 <p><span>some text.</span>some other text.</p> 
 如果不对 span 应用样式，那么 span元素中的文本与其他文本不会任何视觉上的差异。尽管如此，上例中的 span元素仍然为 p 元素增加了额外的结构。 
 可以为 span 应用 id或 class 属性，这样既可以增加适当的语义，又便于对 span应用样式。 
 可以对同一个 <span>  元素应用 class  或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而 id用于标识单独的唯一的元素。 
 详见：http://www.w3school.com.cn/tags/tag_span.asp 
 
  
 
  
 53、<sub>标签、<sup>标签 
 <sub> 标签可定义下标文本。 
 包含在 <sub> 标签和其结束标签 </sub>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 
 <sup> 标签可定义上标文本。 
 包含在 <sup> 标签和其结束标签 </sup>中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。 
 提示：无论是 <sub>  标签还是和它对应的  <sup> 标签，在数学等式、科学符号和化学公式中都非常有用。 
 
  
 <html> 
 <body> 
 
  
 <p> 
 This text contains <sub>subscript</sub> 
 </p> 
 
  
 <p> 
 This text contains <sup>superscript</sup> 
 </p> 
 
  
 </body> 
 </html> 
 
  
 
  
 
  
 54、 <summary>标签 
 只有 Chrome  以及 Safari 6 支持 <summary>标签。 
 <summary> 标签包含 details元素的标题，"details"元素用于描述有关文档或文档片段的详细信息。 
 
  
 提示：请与  <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。 
 注释："summary"  元素应该是 "details"  元素的第一个子元素。 
 <!DOCTYPE HTML> 
 <html> 
 <body> 
 
  
 <details> 
 <summary>HTML 5</summary> 
 This document teaches you everything you have to learn about HTML 5. 
 </details> 
 
  
 </body> 
 </html> 
 
  
 
  
 
  
 55、<table>标签 
 <table> 标签定义 HTML表格。 
 简单的 HTML  表格由 table 元素以及一个或多个 tr、th或 td 元素组成。 
 tr 元素定义表格行，th元素定义表头，td 元素定义表格单元。 
 更复杂的 HTML  表格也可能包括 caption、col、colgroup、thead、tfoot以及 tbody 元素。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_table.asp 
 
  
 
  
 
  
 56、<textarea>标签 
 <textarea>  标签定义多行的文本输入控件。 
 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。 
 可以通过 cols  和 rows 属性来规定 textarea的尺寸，不过更好的办法是使用 CSS的 height 和 width  属性。 
 注释：在文本输入区内的文本行间，用 "%OD%OA"（回车/换行）进行分隔。 
 
  
 
  
 详见：http://www.w3school.com.cn/tags/tag_textarea.asp 
 
  
 
  
 57、<track>标签、<u>标签、<video>标签、<wbr>标签 
 
  
 
  
 nternet Explorer 10, Chrome以及 Opera 支持 <track>  标签。 
 <track> 标签为诸如 video元素之类的媒介规定外部文本轨道。 
 用于规定字幕文件或其他包含文本的文件，当媒介播放时，这些文件是可见的。 
 <track> 标签是 HTML 5中的新标签。 
 
  
 
  
 <u> 标签可定义下划线文本。 
 注释：请尽量避免为文本加下划线 -  用户会把它混淆为一个超链接！ 
 
  
 Internet Explorer 9+, Firefox, Opera, Chrome以及 Safari 支持 <video> 标签。<video>标签定义视频，比如电影片段或其他视频流。 
 <video> 标签是 HTML 5的新标签。 
 提示：可以在开始标签和结束标签之间放置文本内容，这样老的浏览器就可以显示出不支持该标签的信息。 
 
  
 详见：http://www.w3school.com.cn/tags/tag_video.asp、http://www.w3school.com.cn/jsref/dom_obj_video.asp 
 
  
 Word Break Opportunity  (<wbr>)规定在文本中的何处适合添加换行符。 
 提示：如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用 <wbr>元素来添加 Word Break Opportunity（单词换行时机）。 
 如果想学习 AJAX，那么您必须熟悉 XML<wbr>Http<wbr>Request对象。 
 详见：http://www.w3school.com.cn/tags/tag_wbr.asp

收起

展开全文

vue使用vue-meta插件动态设置meta和title标签(seo优化)

千次阅读 2020-12-30 18:45:27

一文看懂动态设置meta和title标签一、meta标签是什么二、静态设置meta标签属性①、首先下载相关包②、在main.js中全局使用③、给每个route赋一个静态属性对象④、在vuex中存储一个空的属性对象和定义方法⑤、最后在...

一、meta标签是什么

在w3cschool中的定义如下所示

元数据（metadata）是关于数据的信息。
标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

meta标签可以用来描述一个HTML网页文档的属性，例如作者、日期和时间、网页描述、关键词、页面刷新等。

在seo优化中，合理利用 Meta 标签的 Description 和 Keywords属性，加入网站的描述或者网页的关键字，可使网站更加贴近用户体验。

今天我们就要使用的就是关于Meta 标签的 Description 和 Keywords属性

二、静态设置meta标签属性

①、首先下载相关包

npm install vue-meta --save  或 yarn add vue-meta

②、在main.js中全局使用

import Meta from 'vue-meta';
// 使用vue-meta
Vue.use(Meta);

③、给每个route赋一个静态属性对象

const routes = [
  {
    path: '/',
    name: 'website_index',
    component: website_index,
    children: [
        // 官网首页
        { 
            path: '/', 
            name: '/',
            component: home_main,
            meta: {
              metaInfo: {
                  title: "首页",
                  keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
                  description: "我司从2003年创立至今，已经成为集新闻信息……"
              }
            }
        },        // 解决方案详细信息
        { 
            path: 'solutions_detail', 
            name: 'solutions_detail',
            component: solutions_detail,
            meta: {
              metaInfo: {
                  title: "解决方案",
                  keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
                  description: "我司从2003年创立至今，已经成为集新闻信息……"
              }
            }
        },
        // 关于我们
        { 
            path: 'about_hc', 
            name: 'about_hc',
            component: about_hc,
            meta: {
              metaInfo: {
                  title: "关于我们",
                  keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
                  description: "我司从2003年创立至今，已经成为集新闻信息……"
              }
            }
        }
    ]
  },
]

④、在vuex中存储一个空的属性对象和定义方法

export default new Vuex.Store({
    state: {
        baseUrl:'http://192.168.31.39:8060/',
        // 默认网站关键词
        metaInfo: { }
    },
    mutations: {
        CAHNGE_META_INFO(state, metaInfo) {
            console.log(metaInfo,"metaInfo")
            state.metaInfo = metaInfo;
        }
    },
    actions: {
    },
    modules: {
    }
})

⑤、最后在main.js中使用路由拦截守卫

router.beforeEach((to, from, next) => {
  if (to.meta.metaInfo){
    store.commit("CAHNGE_META_INFO", to.meta.metaInfo)
  }
  next()
});
new Vue({
  router,
  store,    
  metaInfo(){
    return {
        title: this.$store.state.metaInfo.title,
        meta: [
            {
                name: "keywords",
                content: this.$store.state.metaInfo.keywords
            }, {
                name: "description",
                content: this.$store.state.metaInfo.description
            }
        ]
    }
  },
  render: h => h(App)
}).$mount('#app')

这样一个静态的meta标签属性就设置好了

三、动态设置meta标签属性

设置动态的meta标签属性的话，我们可以在静态设置的基础上修改。比如修改某个路由的动态meta标签属性

①、修改单个路由

const routes = [
  {
    path: '/',
    name: 'website_index',
    component: website_index,
    children: [
        // 官网首页
        { 
            path: '/', 
            name: '/',
            component: home_main,
            meta: {
              metaInfo: {
                  title: "首页",
                  keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
                  description: "我司从2003年创立至今，已经成为集新闻信息……"
              }
            }
        },
        // 解决方案详细信息
        { 
            path: 'solutions_detail', 
            name: 'solutions_detail',
            component: solutions_detail,
            meta: {
              metaInfo: {
                  title: "解决方案",
                  keywords: "资讯,新闻,财经,房产,视频,NBA,科技",
                  description: "我司从2003年创立至今，已经成为集新闻信息……"
              }
            }
        },
        // 关于我们
        { 
            path: 'about_hc', 
            name: 'about_hc',
            component: about_hc
        }
    ]
  },
]

删除关于我们的路由静态的meta属性

②、动态赋值

用在该路由页面加载时获取到的动态属性赋值给vuex中的对象属性

mounted () {
	// 假设这是我们获取到的动态数据
    let metaInfo = {
        title: "张先生",
        keywords: "玉树临风,风流倜傥",
        description: "前方路过村庄，记得带一箱土鸡蛋回去~"
    }
    this.$store.commit("CAHNGE_META_INFO", metaInfo)
}

这样就实现了动态设置meta标签属性~~

有想法的小伙伴下方评论区多多交流噢~~

收起

展开全文

vue

MATLAB教程（1） MATLAB 基础知识

万次阅读 多人点赞 2017-10-26 20:57:32

这时候你会发现，我们开始为第一个图定义的标题和标签不再显示在当前图形窗口中了。这是因为在默认情况下，重新调用一个绘图函数，MATLAB就会清除数据，重置轴和其他元素来准备新的绘图。若要将图添加到现有图形...

初学。去年看过一点点MATLAB，很久不用，遗忘惊人。为了加深自己的印象，扎实基础，现将官网上的基础教程做简单的翻译。

首先，以下从九个部分简单介绍基础入门知识。

第一部分：MATLAB显示桌面的基本布局

https://cn.mathworks.com/help/matlab/learn_matlab/desktop.html

1.启动MATLAB后，桌面会显示默认布局，主要有以下三个部分：

当前文件夹
命令行窗口
工作空间

2.在MATLAB中一般需要创建变量和调用函数。

直接在命令行中输入变量名以及其值即可（比如：a = 1）,多个变量的创建同理，不再赘述。

需要注意的是，如果没有定义输出变量，MATLAB会使用一个名为ans的变量来储存计算结果。

这里写图片描述

3.如果语句以分号结束，表示MATLAB内部会执行这一运算，但是命令行不对计算结果进行输出。

第二部分：矩阵和数组

https://cn.mathworks.com/help/matlab/learn_matlab/matrices-and-arrays.html

大多数的编程语言一次性只能对一个数进行操作，而MATLAB主要被用来对整个矩阵或者数组进行操作。不管是什么类型的数据，所有的额MATLAB变量都是数组。矩阵是常用于线性代数的二维数组。

1.数组的创建

在一个单行中创建一个拥有四个元素的数组，其各个元素之间用逗号或者空格隔开。
例如：
a = [1 2 3 4]
这种数组叫做单行矩阵（行向量）。
创建一个多行矩阵，其各个行之间用分号隔开。
例如：
b = [1,2;3,4;5,6]
还可以用函数来创建矩阵。
例如：创建一个5行1列每一个元素都是0的列向量。
z = zero(5,1)

2.矩阵和数组的操作

在MATLAB中，允许用一个单一的运算或者函数对矩阵中所有的数据进行处理（操作）。

例如：
这里写图片描述

如果要对矩阵进行转置，则使用单引号(‘)
例如：a’
可以通过执行标准矩阵乘法，通过*运算符来计算内积。

这是我自己的结果截图……很明显是不对滴~
这里写图片描述

然后下面是官网爸爸给的运行结果。
这里写图片描述

我们都知道，一个矩阵与它的逆矩阵相乘的结果的确应该等于单位矩阵。至于这里为什么不对，还希望各位大佬们能不吝赐教，大恩不言谢~

这里要注意的是，p不是一个整数值矩阵，MATLAB存储数字是以浮点型存储的，真实值和它的浮点数在运算时有小小的不同，我们可以使用格式化命令，显示更多的小数位数。

比如：
format long
p = a*inv(a)

可以使用format short来重置到较短格式的使用。

x = a.*a用来表示对矩阵的每一个元素做平方操作。
若需要对每一个元素做立方运算，则用x = a.^3(如图)

这里写图片描述

矩阵的扩充
行方向上：A = [a,a]
列方向上：A = [a; a]
复数
复数由实部和虚部组成，它的虚部是-1的平方根。
即sqrt(-1) = 0.0000 + 1.0000i
一般用i或者j来代表复数的虚部部分。

第三部分：数组的索引

https://cn.mathworks.com/help/matlab/learn_matlab/array-indexing.html

MATLAB中的每一个变量都是可以存储多个值的数组。如果想要使用数组中的某一个值，则需要用到索引。

1.单个元素的索引

从一个数组中索引某个元素一般有两种方法：
第一种比较常见：数组名加要索引的元素所在的行和列，例如A(2，4) = 8。
第二种不太常用：数组名加一个下标，该下标按列遍历。A(14) = 8。【这里不太好表达，上图吧~】

这里写图片描述

再多说一句，其实A(14)中的14表示按列数第14个元素！
利用下标索引元素这种方式叫做线性索引。
注意：如果索引超出矩阵维度，MATLAB会报错。

2.多个元素的索引
引用数组的多个元素，使用冒号操作符m : n(m，n分别表示索引开始和结束的范围)

例1索引第二列第1个元素到第3个元素。
例2索引第三行全部元素

这里写图片描述

不难发现，索引行则将行数放在逗号前；索引列要将列数放在逗号后。

另外，冒号运算符也可以帮助创建一组等距的矢量值，例如：
B = 0:10:100
—->B = 0 10 20 30 40 50 60 70 80 90 100
输出一个从0到100步长为10的数组。

第四部分：工作空间变量

https://cn.mathworks.com/help/matlab/learn_matlab/workspace.html

工作区包含你创建的变量或者从数据文件或其他程序导入到MATLAB中的变量。例如，我现在创建两个变量：
A = magic(4)
B = rand(3,5,2)

我们可以通过whos来看工作空间的内容。

这里写图片描述

工作区的变量在退出MATLAB后就不存在了。
所以一般使用save myfile.mat命令来保存工作区变量以便以后使用。
保存操作将当前工作文件夹中的工作区保存在一个压缩文件中，该文件的扩展名为.MAT，称为MAT文件。
如果想要清空工作空间里的所有变量，则需使用clear命令
使用load myfile.mat命令将MAT文件中的数据恢复到工作区

第五部分：文本和字符

https://cn.mathworks.com/help/matlab/learn_matlab/character-strings.html

在处理文本时，将其中的字符序列用单引号括起来，可以将文本分配给变量。
例如：myText = ‘Hello, world’;
如果文本本身包括一个单引号，则在定义时使用两个单引号。
例如：otherText = ‘You”re right’

这里写图片描述

同所有的MATLAB变量一样，上述创建的两个变量也都是数组，他们的数据类型是字符型。注意：字符数组也可以像数字数组那样用方括号括起来表示。

要将数字转换成字符，就要用到函数。例如num2str()或者int2str()。

第六部分：函数调用

https://cn.mathworks.com/help/matlab/learn_matlab/calling-functions.html

MATLAB提供了大量函数来执行计算任务，函数相当于其他编程语言中的子程序或方法。
例如求最大值的函数，max()。

将输入参数用括号括起来，如果有多个参数，则将参数用逗号隔开。
一般通过将函数值赋给某个变量这种方式来返回（输出）函数值，如果有多个输出参数，则需将它们用方括号括起来。
例如：
A = [1 3 5];
[maxA,location] = max(A)

这里写图片描述

可以用单引号括住任何字符进行输入。
例如：
disp(‘hello world’)
===>输出 hello world

disp()用来显示变量的内容,括号里可以是字符,结构体,矩阵等等，类似于c语言的printf()。

clc函数被用来清空命令行。

第七部分：二、三维图

https://cn.mathworks.com/help/matlab/learn_matlab/plots.html

折线图

（1）画图

x = 0:pi/1000:2*pi;
y = sin(x);
plot(x,y)

这里x就用到了前面说到的索引。x表示0到2*pi之间步长为pi/100的值。
二维图如下：

这里写图片描述

这里多说一下步长，步长决定了横轴取值的密集程度。下图是将步长改为pi/10之后的图像。

这里写图片描述

对比图中标记处不难发现，步长增大，图像的精确度变低，所以这里尽量保证步长足够小，使得x可以取到足够多的值

（2）坐标
我们可以对横轴和纵轴分别命名，并对上述正弦图像加上标题。

这里写图片描述

（3）plot(x, y, ‘r–’)
通过在图像函数中添加第三个输入参数，可以用红色虚线绘制与原来相同的变量。

这里写图片描述

其中第三个参数规定了线条的颜色、样式和标记的字符。（例如上例中的‘r–’表示红色虚线。）标记是指对每一个数据点用参数所给的标记形式进行表示。（例如’g:o’表示用‘o’连成一条绿色的线输出=.=我这个解释没谁了，讲不清楚还是上图吧…..）

这里写图片描述

这样的标记除了’o’，还有‘+’，‘*’等等。

这时候你会发现，我们开始为第一个图定义的标题和标签不再显示在当前图形窗口中了。这是因为在默认情况下，重新调用一个绘图函数，MATLAB就会清除数据，重置轴和其他元素来准备新的绘图。
若要将图添加到现有图形，使用hold命令即可。

这里写图片描述

在使用hold off或close the window命令之前，所有的图都会出现在当前的图形窗口中。

3D图像

3D图像通常用有两个参数的函数来定义一个曲面，z = f(x,y) 。
对于z，首先使用meshgrid命令在函数定义域内创建若干(x,y)。

这里写图片描述

这里需要注意的是，在matlab中，.2代表0.2
(-2:.2:2)表示在-2到2的区间上以0.2的长度为间隔的向量；

当变量x是由向量、数组或隔开的点组成（如x=0：0.1：1）时，则后面有x变量的方程要加点 (.)，例如：y=x.*exp(-x.*2)
但是如果x是连续的变量，如syms x，则方程写成y=x*exp(-x*2)。

Subplots
你可以用subplot函数在同一窗口的不同区域显示多个图像。
subplots函数的前两个输入参数显示当前窗口每行每列的图像数量，第三个输入参数指定活动区域。例如，在图形窗口创建四个区域来分别输出图像。

这里写图片描述

mesh()生成由X，Y和Z指定的网线面，由C指定的颜色的三维网格图。

第八部分：程序和脚本

https://cn.mathworks.com/help/matlab/learn_matlab/scripts.html

示例脚本（从均匀分布中生成随机数据并计算平均值。绘制数据和平均值。）
用edit命令来创建脚本：
edit plotrand
这样就打开了一个叫plotrand.m的空文件，输入产生随机数向量的代码：

n = 50;
r = rand(n,1);
plot(r)

然后，添加代码在图中绘制水平线：

m = mean(r);
hold on
plot([0,n],[m,m])
hold off
title('Mean of Random Uniform Data')

在写代码过程中，可用（%）在代码之间添加注释。
最后保存脚本，在命令行窗口输入plotrand运行脚本。

这里写图片描述

循环和条件语句
在脚本中，可以循环使用部分代码，并且通过使用（for,while,if,switch等关键字）来执行这部分代码。
例如，创建一个叫calcmean.m的脚本，利用for循环计算五个随机样本的平均数和总平均数。

nsamples = 5;
npoints = 50;

for k = 1:nsamples
    currentData = rand(npoints,1);
    sampleMean(k) = mean(currentData);
end
overallMean = mean(sampleMean)

现在，修改for循环，以便每次迭代时都可以查看结果。在运行脚本时，会先显示中间结果，再计算总体均值。

for k = 1:nsamples
   iterationString = ['Iteration #',int2str(k)];
   disp(iterationString)
   currentData = rand(npoints,1);
   sampleMean(k) = mean(currentData)
end
overallMean = mean(sampleMean)

calcmean

在编辑器中，在calcmean.m的最后添加条件语句，使它根据不同的总体均值返回不同的信息。

if overallMean < .49
   disp('Mean is less than expected')
elseif overallMean > .51
   disp('Mean is greater than expected')
else
   disp('Mean is within the expected range')
end

脚本位置
MATLAB中，要运行脚本，文件必须位于当前文件夹或搜索路径中的文件夹中。
默认情况下，MATLAB安装程序创建的MATLAB文件夹位于搜索路径上。如果要在另一个文件夹中存储和运行程序，需要将其添加到搜索路径中：在当前文件夹浏览器中选择文件夹，右键单击，然后选择“添加到路径”。

第九部分：帮助和文档

https://cn.mathworks.com/help/matlab/learn_matlab/help.html

使用doc命令在单独的窗口中打开函数文档。

doc mean
键入左圆括号后暂停，MATLAB在命令窗口中就会显示函数提示（函数文档的语法部分）。

mean(
使用帮助命令后，在命令窗口中查看函数的简单用法概括。

help mean

以上就是MATLAB的基础入门知识，欢迎指正呦~

收起

展开全文

matlab

Bootstrap 标签导航的布局

千次阅读 2018-03-09 09:32:47

为了灵活控制标签的位置，Bootstrap额外提供了 3 个类，分别是 .tabs-left、.tabs-right、.tabs-below，它们分别让标签位于左侧、右侧、底部，可以根据需要选择使用。如果希望标签在左侧，只需为 .tabbable 容器追加...

默认情况下，标签的位于顶部。为了灵活控制标签的位置，Bootstrap额外提供了 3 个类，分别是 .tabs-left、.tabs-right、.tabs-below，它们分别让标签位于左侧、右侧、底部，可以根据需要选择使用。
如果希望标签在左侧，只需为 .tabbable 容器追加 .tabs-left 类即可。如：

<div class="tabbables tabs-left">
...
</div>
效果如图 4‑26所示：
图4-26 Bootstrap标签导航标签在左侧
当然，也可以让标签在右侧，内容在左侧，只需将 .tabbable 容器的 .tabs-left 类换成 . tabs-right 类就行了。如：

<div class="tabbables tabs-right">
...
</div>
效果如图 4‑27所示：
图4-27 Bootstrap标签导航标签在右侧
如果让标签在内容的下面，除了要为 .tabbable 容器添加 .tabs-below 类，还要将 .tab-content 和 .nav-tabs 的位置互换。如：

<div class="tabbable tabs-below">
  <div class="tab-content">
    <div class="tab-pane active" id="A">
      <p>I'm in Section A.</p>
    </div>
    <div class="tab-pane" id="B">
      <p>Howdy, I'm in Section B.</p>
    </div>
    <div class="tab-pane" id="C">
      <p>What up girl, this is Section C.</p>
    </div>
  </div>
  <ul class="nav nav-tabs">
    <li class="active"><a href="#A" data-toggle="tab">Section 1</a></li>
    <li><a href="#B" data-toggle="tab">Section 2</a></li>
    <li><a href="#C" data-toggle="tab">Section 3</a></li>
  </ul>
</div>
效果如图 4‑28所示：
图4-28 Bootstrap标签导航标签在底部

 关于作者
 歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

收起

展开全文

前端面试题
万次阅读 多人点赞 2019-08-08 11:49:01
前端面试题汇总 ... 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? 21 ... 21 Quirks模式是什么？它和Standards模式有什么区别 21 ...img的alt与title有何异同？ strong与em的异同？ 22 你能...
收起
前端面试题
java爬虫
千次阅读 多人点赞 2019-04-12 11:59:12
getElementsByTagName() 返回带有指定标签名的对象集合。 open() 打开一个流，以收集来自任何 document.write() 或 document.writeln() 方法的输出。 write() 向文档写 HTML 表达式或 JavaScript 代码。 2.2.4 ...
收起
爬虫
jQuery
千次阅读 多人点赞 2019-09-03 23:20:53
鼠标指针位于元素上方时事件 mouseup([function]) 当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。 hover([function]) 鼠标指针悬停事件键盘事件 keypress(...
收起
jQuery
matplotlib
千次阅读 多人点赞 2019-04-20 19:19:46
今天我们来介绍一下python的一个可视化工具matplotlib matplotlib ...matplotlib的api都位于matplotlib.pyplot中，所以一般的引入方式为： import matplotlib.pyplot as plt Figure、Subplot F...
收起
matplotlib
js面试题
千次阅读 多人点赞 2019-04-09 19:42:32
大部分 attribute 与 property 是一一对应关系，修改其中一个会影响另一个，如 id，title 等属性一些布尔属性的检测设置需要 hasAttribute 和 removeAttribute 来完成，或者设置对应 property 像 ...
收起
js 面试题 js面试题
C#基础教程-c#实例教程，适合初学者
万次阅读 多人点赞 2016-08-22 11:13:24
C#基础教程-c#实例教程，适合初学者。第一章 C#语言基础本章介绍C#语言的基础知识，希望具有C语言的读者能够基本掌握C#语言，并以此为基础，能够进一步学习用C#语言编写window应用程序和Web应用程序。...
收起
c#
css 标签上 title 和 alt 的区别
千次阅读 2021-06-06 00:57:22
内容title/alt: css 标签上 title 和 alt 的区别 alt 是给搜索引擎识别, 在图像无法显示时的替代文本; title 是关于元素的注释信息, 主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。 ...
收起
css css3 前端
【input 标签的 type 属性详解】
万次阅读 多人点赞 2019-09-03 23:16:31
input 标签的 type 属性详解1. input 输入标签的type 属性1.1 input 标签的 type类型属性的常用属性值⑴ type="text"⑵ type="button"⑶ type="checkbox"⑷ type="file"⑸ type="hidden"⑹ type="image"⑺ type=...
收起
PHP 获取网页标题(title)、描述(description)、关键字(keywords)等meta信息
万次阅读 2018-06-22 00:55:10
米扑导航在收集网站、验证网站时，需要采集网页标题(title)、描述(description)、关键字(keywords)等meta信息本文将其整理出来，总结的经验分享给大家，欢迎交流、斧正、改进。本文原文转自米扑博客：PHP 获取网页...
收起
WPF开发教程
万次阅读 多人点赞 2019-07-02 23:13:20
假设您具有带有 STA 线程的对象，则需要一种方式来在线程之间通信，并验证您是否位于正确的线程上。调度程序的作用就在于此。调度程序是一个基本的消息调度系统，具有多个按优先级排列的队列。消息的示例包括原始...
收起
WPF
web前端 HTML常用标签,标签分类
千次阅读 2018-11-17 20:34:13
1、什么是标签 #1、在HTML中规定标签使用英文的的尖括号即<和>包起来，如<html>、<head>、<body>都是标签， #2. HTML中标签通常情况下是成对出现的，分为...
收起
Meta标签详解
2011-09-07 12:23:15
　META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和<TITLE>标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于...
收起
meta
网站页面title标题的设置方法技巧
万次阅读 2017-09-29 20:45:05
标题是网页优化最重要的因素，页面标题Title相当于赋予一个网页一些内容，它告诉搜索引擎蜘蛛此页面是关于什么的，所以任何一个网页Title的重要性是最高的，远远超过网站页面keyword和description的作用。...
收起
HTML - 元素/标签详解
千次阅读 多人点赞 2017-12-29 10:46:44
可以添加在头部区域的元素标签为: , , , , , , . 标签定义了不同文档的标题。在 HTML/XHTML 文档中是必须的。定义了浏览器工具栏的标题当网页添加到收藏夹时，显示在收藏夹中的标题显示在搜索引擎结果页面的标题 ...
收起
html 元素
灰色关联度矩阵模型及其MATLAB实现
千次阅读 多人点赞 2019-12-06 10:41:15
之值位于[0,1]区间，同时上下对称的结构可以消除量纲不同和数值悬殊的问题。 ③ ∣ x j ( k ) − x i ( k ) ∣ |x_{j}(k)-x_{i}(k)| ∣ x j ( k ) − x i ( k ) ∣ 式被称之为“Hamming”距离，Hamming距离的...
收起
灰色关联度模型
HTML学习5：常用标签之图像标签
千次阅读 2015-10-20 12:21:26
是空标签，意思是说，它只包含属性，并且没有闭合标签。要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。定义图像的语法是：。URL 指存储图像的
收起
HTML web前端开发
HTML学习3：常用标签之文本标签
万次阅读 2015-10-18 16:04:50
我们说到网页，首先关注到的就是网页中显示的文本内容，而这些文本内容就是用文本标签来标记的。在说常用的标签之前，我们先来说说标签的组成。 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 1HTML 标签...
收起
HTML web前端开发
Matlab中title函数使用
千次阅读 2020-12-05 21:06:43
目录一.语法 1.输入参数 2.名称-值对组参数 3.输出参数二.说明三.示例 1.在当前坐标区上添加标题 2.在标题中包含变量的值 3.使用 TeX 标记创建多色标题 ...title函数的作用是添加标题。...一....title(txt) ...title
收起
HTML 表单标签
千次阅读 2019-08-14 00:41:05
标签 2、<input > 标签 3、<select> 标签与 <option> 标签 4、<textarea> 标签 5、实现注册账号功能： 1、<form> 标签 <form> 标签代表一个表单，表单用于向服务器传输...
收起
HTML
R语言中title()函数的参数详解
千次阅读 2020-05-08 21:22:45
title(main = NULL, sub = NULL, xlab = NULL, ylab = NULL, line = NA, outer = FALSE, ...) 参数描述 main 主标题 sub 副标题 xlab x轴标签 ylab y轴标签 line 到轴线的行数距离 outer 一个...
收起
R语言基础
HTML学习13：其他常见标签之体标签
千次阅读 2015-11-04 13:57:02
一标签 div标签定义文档中的一个分区，元素是块级元素，它是可用于组合其他 HTML 元素的容器。元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。如果与 CSS 一同使用，元素可...
收起
HTML web前端开发
Struts2框架学习之五：通用标签详解
千次阅读 2015-12-13 16:12:36
前言Struts2框架为我们提供了很多标签，这些标签总体上可以分为两类：通用标签和UI标签。而较常使用的又是通用标签，所以文章的内容也是围绕通用标签展开的。通用标签分为两类：数据标签和控制标签。数据标签用于...
收起
Struts2
HTML列表标签与表格标签
千次阅读 多人点赞 2019-02-22 22:12:54
列表标签 ul：无序列表 &amp;amp;lt;li&amp;amp;gt;列表项&amp;amp;lt;\li&amp;amp;gt; 属性：type disc：默认的 circle：空心圆点 sqare：小正方形（实心的） eg:&...
收起
HTML 基础前端
JSP页面中常用四种标签
万次阅读 2015-09-23 14:43:12
JSP页面常用四种标签： 1. EL表达式: ${} 2. jstl表达式（sun apache）: uri="http://java.sun.com/jsp/jstl/core" %> uri="http://java.sun.com/jsp/jstl/functions" %> uri=...
收起
Struts2 表单和非表单标签
千次阅读 2017-06-02 08:46:01
学习内容Struts 2表单标签 Struts 2非表单标签能力目标熟练使用Struts 2表单标签开发表单熟练使用Struts 2非表单标签本章简介上一章讲述了ognl和Struts2标签库中的数据访问标签和逻辑控制标签。本章将重点...
收起

HTML标签常用标签

vue使用vue-meta插件动态设置meta和title标签(seo优化)

一文看懂动态设置meta和title标签

一、meta标签是什么

二、静态设置meta标签属性

①、首先下载相关包

②、在main.js中全局使用

③、给每个route赋一个静态属性对象

④、在vuex中存储一个空的属性对象和定义方法

⑤、最后在main.js中使用路由拦截守卫

三、动态设置meta标签属性

①、修改单个路由

②、动态赋值

MATLAB教程（1） MATLAB 基础知识

Bootstrap 标签导航的布局

前端面试题

java爬虫

jQuery

matplotlib

js面试题

C#基础教程-c#实例教程，适合初学者

css 标签上 title 和 alt 的区别

【input 标签的 type 属性详解】

PHP 获取网页标题(title)、描述(description)、关键字(keywords)等meta信息

WPF开发教程

web前端 HTML常用标签,标签分类

Meta标签详解

网站页面title标题的设置方法技巧

HTML - 元素/标签详解

灰色关联度矩阵模型及其MATLAB实现

HTML学习5：常用标签之图像标签

HTML学习3：常用标签之文本标签

Matlab中title函数使用

HTML 表单标签

R语言中title()函数的参数详解

HTML学习13：其他常见标签之体标签

Struts2框架学习之五：通用标签详解

HTML列表标签与表格标签

JSP页面中常用四种标签

Struts2 表单和非表单标签

title标签位于