看懂HTML代码，摸清国外买家喜欢搜什么关键词
大家每天都忙着找关键词，忙着写标题，忙着做各种的优化。目的就是想把自己的产品排名到前面，获得更多的曝光，带来更多的询盘。在这个过程中客服同时也是一名搜索优化人员，但是作为搜索优化人员往往忽视一个重要的东西---代码。在做搜索优化中，必须要了解这些阿里用得到的基础代码，至少看得懂它，知道它是做什么的。那么，阿里里面需要看得懂的代码和它的用法是怎样的呢？国际站必须看得懂的HTML代码
Html是来描述网页的一种超文本标记语言，它不是什么程序语言，仅仅是简单的做网页标记用的语言，简单易学。它是以html标签的形式成对出现的。示例：<html></html>。不区分大小写。接下来给大家列举一下阿里中我们需要看得懂的标签。
<html>,<title>,<meta>,<p>,<span>,<strong>,<table>,<tr>,<td>,<a>,<img>一，<html>
<html></html>,这个标签是HTML代码开始和结束的标记。其实这个在阿里中是用不到的，但是在这里还是要说一下，就是因为所有的HTML标签都应该出现在它的里面，可以任意打开一个网页，进入代码页面去观察一下，每一个正常的页面都能够发现它的踪迹。这里不讲太多，只是让大家知道它的作用。二，<title>
这个是一个非常非常非常重要的标签。它的重要性并非需要去怎么怎么修改它。它的内容一般会出现在浏览器的标题栏和状态栏。它是一个页面的标题，也是一个网页页面的概述。所以在搜索引擎优化中，它是非常非常的重要的一个元素。在阿里里面每个产品页面的<title>里面的内容就是产品标题和关键词。可以到后台截图看一下.
从这里可以清晰的看到<title></title>这对标签里面的内容，第一个箭头所指示的是产品标题的名称。后面三个箭头是产品的三个关键词。还可以看到在后面关键词的前部阿里自动加了buy………on alibaba.com.这是阿里做的优化。这些东西只要能看懂就可以，寻找对手的关键词就可以从这里入手。打开它的方法很简单，在产品页面任意空白处点击鼠标右键，然后点击打开网页源代码按钮，即可打开代码页面。<title>标签都出现在网页的上部，很容易找到它的。这个标签，只需要了解它就可以了，只要认识它，就可以方便的找到对手的标题和关键词了。三，<meta>
这个标签所出现的位置也是网页的上部。它本身是不包含任何信息的。在这里我们主要讲解它的一个作用，搜索优化。SEO优化中，<meta>是非常非常重要的。<meta name="keywords" content="Retro Mdf Pleaue Oil Painting, High Quality Mdf Pleaue Oil Painting,Mdf Plaque With Painting,Retro Mdf Plaque Painting,Yiwu Ziwei Daily Necessities Co., Ltd." />
<meta name="description" content="Retro Mdf Pleaue Oil Painting , Find Complete Details about Retro Mdf Pleaue Oil Painting,Mdf Pleaue Oil Painting,Mdf Plaque With Painting,Retro Mdf Plaque Painting from Painting & Calligraphy Supplier or Manufacturer-Yiwu Ziwei Daily Necessities Co., Ltd." />
这里首先要说的是这个标签是单独出现的，格式是<meta … />. 接下来看上面的<meta>，看它的name，name的键值是 keywords。这个很好理解的，就是关键词的意思。既然它的名字是关键词，当然它的内容就可想而知了。再看第二个<meta>的name是description，这里面是这个页面的简要描述。这样一看就很容易理解了，它主要的作用是搜索引擎优化。仔细看它content里面的内容，跟关键词和标题有很大的关系，从这个上面可以看出来，在产品发布的时候关键词和标题是多么重要了。在这里，这个标签只需要看得懂，知道它是干嘛的即可。因为优化这里的过程就是修改标题和关键词的过程。是不能单独修改这两个部分的。四，<p>
<p>标签主要是用来定义段落的，这个标签在详情描述里面可以经常看到的，文字段落的定义就可以用它来实现。用实例的方式来说明下（搜索微信公众号名称：外贸充电站，永久关注汇聚全国数万外贸精英的掌上学习平台。)
<p style="text-align: center;">oil painting</p>
可能新手朋友一眼看到这个不太了解这段代码为什么要这样写。首先告诉大家它的显示效果是文字内容居中显示。红色的oil painting 就是里面写的文字内容。前面的style = “text-align:center;” 这个是<p>标签支持的样式风格，style =“”是样式风格在标签中的通用写法，大家只要记住即可。Text-align：center 这个代表的是文本的对齐方式。它的值是 center，意思就是居中显示。当然它也可以是left 或者right。由于style 里面有很多很多的值，这里就不一个一个的讲解了。大家只要能知道<p>标签是干嘛用的即可。五，<span>
<span>标签在阿里详情描述里面也是出现很多的标签。它本身没有什么实际效果，应用它的主要原因就是要对内容添加样式，即style。如果不在<span>标签中添加样式，它就没有什么视觉上的区别，也没有很特别的意思。下面举例说明它的用法。可以把它用在<P>标签内来改变指定的文字样式。如：
<p> <span style="background-color:#FF0; font-family:'微软雅黑'; font-size:16px; color:#F00;">abstract handmade</span> seascape oil painting</p>
abstract handmade seascape oil painting 是文本。<span>标签是加在abstract handmade 这两个单词上的。里面添加了一些样式，从最后显示的效果大家就能够清晰的看出来，文字背景为黄色，文字颜色是红色，文字的字体是微软雅黑，字号大小是16px。这些代码不但需要看得懂，最好是能够自由使用。因为熟练的时候，不但能使用，而且还可以根据自己的需要添加和删除一些代码，那些无用的代码尽量要删除，这样可以减小搜索服务器的压力，对搜索排名是有一定的优势的。还有就是规范合理的代码书写和排列也是对搜索排名有好处的。六，<strong>
这个标签是一种效果标签，从字面意思可能就可以理解，它是把文本加粗的一种标签。这是文本的一种强调形式。用这个标签告诉搜索引擎，这里是重点，在搜索优化的时候，这个标签内的内容就会有多一些的权重值。所以，在优化的时候，标题和关键词出现在详情描述中的时候，尽量要把他们加粗显示哦。七，<table>,<tr>,<td>
这三个标签我写在一起的原因是他们是组团出现的。它就是做表格的三个不可缺少的标签<table>定义的是表格开始，</table>表示表格结束。<tr><td>分别定义行和列。接下来我用代码和图片的形式来展现它的效果：
<table class="aliDataTable" style="width: 80%;" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
这里要简单说一下的是 <table>里面的 内容：class="aliDataTable" style="width: 80%;" border="1"。其中class="aliDataTable" 是阿里给出的表格样式，可以直接使用，就是这个灰色边框效果显示的表格样式。当然也可以不用阿里给出的样式，可以自己来定义边框的颜色样式。style="width: 80% 是这个表格的宽度，显示80%的意思是 阿里产品详情描述显示宽度是750，也就是说750宽度属于是100%，那么80%的意思就是这个表格的宽度是600. Border=“1”的意思是边框的宽度是1像素。关于表格，在阿里详情描述中建议一定要使用。而且尽量使用阿里给出的表格样式，即灰色边框的显示模式，当然如果觉得不好看，可以自定义边框和表格背景等等风格，但是这样会加入大量的样式代码，加重搜索引擎的负担。但是好的一点是视觉效果会非常非常的漂亮。八，<a>
<a>标签的功能是定义超链接，这个是一个非常非常重要的标签。有的朋友想在产品的详细描述中加入其他产品的链接，或者是在图片上加入其他产品的链接，这个时候就必须用到这个标签了。下面用代码和图样的形式来说明：
<a href="www.alibaba.com" target="_blank">abstract oil painting</a>
这个时候如果我们点击上图里面的 abstract oil painting 我们就会打开阿里巴巴的主页。如上面的代码<a>……</a>里面红色文字是文本文字。就是在这些文字上加的超链接。href=http://www.alibaba.com 这个代码说明加入的超链接是 http://www.alibaba.com 也就是阿里巴巴国际站的首页网址。target="_blank" 的意思是点击后在新窗口打开页面。如果想在图片上加入超链接，只需要把红色文本换成<img>标签且链接图片即可实现图片上加入链接哈。在阿里的实际操作过程中，可以在关键词上加入超链接来导向相关产品来增加关键词对这个关键词的关注度，来增加它的权重。九，<img>
<img>标签表示是在网页中插入图片信息。这里需要说明的是这个标签也是单独出现的。它的代码格式是：
<img src="图片链接地址" alt ="图片优化关键词" width="120" height="120" />
这个标签的功能实现主要是 src =”#”。这里的#号代表的是图片的链接地址，只要加入这个地址，图片就可以在网页上显示出来。Width 和height 是控制图片在网页中显示的宽度和高度的。单位是像素。这里的Alt 是阿里进来刚开放的功能。它的功能是对图片的搜索优化，当我们在阿里详细描述中插入图片的时候，Alt 的默认值是图片的名称，如果你的图片是数字编号，比如：001，那么Alt的值就是001。这个时候就需要切换成HTML的编辑模式对图片的Alt值进行修改，修改成优化的关键词或者其他跟图片相关的文字信息。
做阿里优化，代码基础多多少少都应该掌握一些，这对以后的工作会有很大的帮助。
![vscode html中加css,[VScode教程] VSCode 支持CSS](http://pic.xiahunao.cn/vscode html中加css,[VScode教程] VSCode 支持CSS)
