电商HTML代码救急

WARNING

专业人士请在代码菜鸟陪同下观看！

  首先，我们了解一下什么是HTML？

  HTML 是用来描述网页的一种语言。

• HTML 指的是超文本标记语言 (Hyper Text Markup Language)

• HTML 不是一种编程语言，而是一种标记语言 (markup language)

• 标记语言是一套标记标签 (markup tag)

• HTML 使用标记标签来描述网页

说到这里我必须提一下什么是XHTML ，XHTML 是更严格更纯净的 HTML 代码。

而最新一代的，仍处于完善之中的称为HTML5。

说好的简单暴力呢！

好吧！前戏结束，直接开搞！

--------------------------------------------------------------------------------------

1.元素基本都是成对出现， 以开放标签（opening tag）开始，闭合标签（closing tag）结束

HTML 文档实例：

<!DOCTYPE html>

<html>

<head>

<title>Title of the document</title>

</head>

<body>

The content of the document......

</body>

</html>

当然也有例外：<br> 就是没有关闭标签的空元素（<br> 标签定义换行）直接写为<br /> 

基本上电商小伙伴们只需要掐头去尾，关注<body>到</body>之间的代码。

--------------------------------------------------------------------------------------

2 常用标签

HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。

实例

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

HTML 段落是通过 <p> 标签进行定义的。

实例

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

HTML 链接是通过 <a> 标签进行定义的。

实例

<a href="http://www.w3school.com.cn">This is a link</a>

  href 属性规定 链接 的目标（要会看链接！链接！链接！）

HTML 图像是通过 <img> 标签进行定义的。

实例

<img src="w3school.jpg" width="104" height="142" />

<hr /> <li> <span> <b> <span>等标签请自行扩展学习，然并卵！

--------------------------------------------------------------------------------------

3 需要重点说明的Table标签

如图所示，这就是在DW里面的代码。

一般包括 注释代码 在内的两端头尾都会删除（对！电商就是这样简单 暴力）

现在来看一下代码：

width="1536"  页面宽度是1536 （修改代码的时候，注意双引号的存在！）

height="4688"  页面总高度是4688

--------------------------------------------------------------------------------------

拓展一下：

添加align="center"以后，表示table表格是居中显示效果。

（1920宽度全屏海报怎么设置请询问你家前端大神）

添加background="#"，表示table表格有了个背景图片，如图所示，我猥琐的添加了一张nipic昵图网的图片。

（了解了这一点，我想你就快会切旺旺客服栏） 

另外bgcolor="#000000" 表示table表格填充了黑色背景。

现在来点黑货：

当我们做套一款宝贝详情页时，由于宝贝颜色、图片数量的影响，详情页长度是不一样的，那么就需要移动图层，调整画板长度，好复杂啊！

今天需求排太满了，（比如说一款详情页宝贝有16个颜色，别问我运营大人为什么不拆款，我怎么知道！我只是个美工！）本美工不乐意移动那些复杂的图层。

所以我直接把详情页中间空白区域作为一个切片切出来，然后删除掉这段代码。（从<tr> 删到</tr>哦）然后还有一件事情要做：删除总的高度 或 把总的height="4688"改成height="auto"（我们删了一张空白切片，table总高度当然变小了所以要修改）

--------------------------------------------------------------------------------------

4.苦口婆心的延伸

正统前端教程请去 http://www.w3school.com.cn/html/ 这样的网站学习，其他资源请自行搜索 或者咨询你家前端。

另外粗略说一下切旺旺：把各位做好的旺旺客服栏底图设置成table表格的background，然后百度搜索：旺旺代码生成，把代码或者生成的旺旺复制到table表格，然后爱加几个旺旺加几个，完事！

然后会删除空白切片，那么详情页代码分段，也会了吧？

别说你家天猫详情页代码不分段的！那好吧！

然后页面切片，记得切成四四方方规则的切片，配合热区工具加链接。不要切成上三下四的切片，产生分隔符.gif    呵呵会在火狐之类的浏览器中不正常显示，要么前端收拾你，要么运营收拾你。

好烦！突然想到还有 淘宝视频 插入页面的点！简单说一下，就是根据视频长宽比例，在页面上等比缩小预留一个位置，然后切片完了，放好页面代码，在后台自定义模板里面，直接找到视频插入页面。很简单的

--------------------------------------------------------------------------------------

最后

欢迎大家给建议，反正我也不会改

完

！站酷为什么不给文章编辑器一个字号大小修改功能！