老杂毛博客
  青青子衿,悠悠我心。但为君故,沉吟至今。
博客首页 | 人生历程 | 编程开发 | 机关门  
  文章分类
 
博客首页 > 网络营销相关 > 文章正文

店主必学的常用HTML代码(HTML基础教程第一讲)

2011/4/21 20:44:23
 

什么是HTML代码?


          我们看到的任何网页都是由文字和图片以及一些流媒体组成,那么我们单纯的把文字和图片放到页面上显得有点杂乱无章,这时候聪明的人就想到了一个办法,制定一套规则,让所有的浏览器都遵循这套规则,而所有的网站在开发的时候也需要遵循这样的规则,这样网页就不会乱了,这个规则就是HTML代码。

          我们现在可以随便打开一个网页,然后在页面上右击选择查看源文件,这时候会出现一个记事本文件,这里面的代码就是这个页面的html代码,里面混合着网页上的文字和图片信息,浏览器会把这些代码执行,所以我们看到的网页就是很规范的了,也就是有格式的了。

为什么要学习HTML代码?

          HTML是网络上最简单的语言,简单到你只要仔细的去看几个小时就可以完全掌握的一门标记语言,而如果想要把自己的产品完全按照自己的意思去展示给客户看,就一定要掌握一些基本的HTML标记,想要更好的装修你的店铺,想要更好的让你的产品展示给顾客就需要自己去设计你的页面,那就要懂的一些HTML的基础知识。

编写HTML需要用什么工具?

         现在网页设计师常用的是Dreamweaver,而我们刚开始学的时候用不到这个,等以后做复杂的页面的时候才会用的到。

         在跟着我的学习教程中,我们暂时只需要用记事本亦可。


HTML语法

          语法很简单,我们只需要知道,所有的标记都是成对出现,只需要记住这一句话就可以了,下面我们先学习第一个标记。

一:段落标记P


         P标记是我们最常用的标记之一,在我们发布产品编辑公告的时候,一段一段的文字都是用P标记标识的。

         为了更好的说明,举一个例子来让大家看看效果,在桌面上新建一个文件夹,取名myWeb,然后在文件夹里新建一个记事本文件,把下面的文字复制到记事本中

 #lt;p#gt;店主必学的常用HTML代码(淘宝公告栏代码)这里是第一段文字#lt;/p#gt;
 #lt;p#gt;店主必学的常用HTML代码(淘宝公告栏代码)这里是第二段文字#lt;/p#gt;

然后保存,把文件名改成test.html,这时会发现图标从原来的记事本文件变成了ie的图标,我们可以双击打开,就可以看到一个网页出现在我们眼前了。

注意:如果修改完扩展名图标没有变的话,请单击窗口上面的工具--文件夹选项--查看--把“隐藏已知文件类型的扩展名”前面的勾去掉亦可。

          你可以看到出现在你面前的页面上只有两行字,并没有出现p标记。

补充几点:

        第一:标记都是成对出现的,后面的闭合标记要带一个反斜杠(/),如:#lt;/p#gt;。
        第二:标记都是用尖括号括起来的,如:#lt;p#gt;

        上面的例子因为文字太少,根本感觉不出什么效果,为了感觉到效果,你可以把现在你看的这篇文章整个复制进你的记事本文件,然后用浏览器打开看一下,是不是没有任何格式了,也不分段了,文字全都乱在一起,而想要分段怎么办?你需要在每一段开始的时候加一个#lt;p#gt;然后在自然段结尾的地方加一个#lt;/p#gt;,你可以复制两段文字做一个试验来看看。

二:加粗标记B

      
       还记得在什么地方见到过这个标记吗?没错,是我们seo教程里,在seo优化的时候B标记是很重要的一个标记,今天我们再次学习一下它的用法。

       我们还是拿上面的文字来举例说明:

 #lt;p#gt;店主必学的常用HTML代码(#lt;b#gt;淘宝公告栏代码#lt;/b#gt;)这里是第一段文字#lt;/p#gt;
 #lt;p#gt;店主必学的常用HTML代码(#lt;b#gt;淘宝公告栏代码#lt;/b#gt;)这里是第二段文字#lt;/p#gt;


        同样,我们还是把上面这两句代码放到我们刚才的记事本文件里,然后把扩展名改成html的,哦,对了,刚才你已经改过了,那你重新建立一个记事本文件也是可以的,如果你不想重新建立的话,你可以在你之前的那个test.html上右击,然后点击打开方式,选择记事本就可以了,然后把上面的代码复制进去,保存,再刷新我们刚才的页面,会出现如下效果:

店主必学的常用HTML代码(淘宝公告栏代码)这里是第一段文字

店主必学的常用HTML代码(淘宝公告栏代码)这里是第二段文字

         我们可以看到,被B标记套住的文字都加粗了,好了,知道B标记是做什么用的了吗?

补充几点:

        第一:标记的字母不区分大小写,如#lt;b#gt;和#lt;B#gt;是一样的,#lt;p#gt;和#lt;/P#gt;也是可以成对使用的。
        第二:标记可以嵌套,刚才我们就是在p标记里嵌套了B标记,而你需要注意的一点是B标记的嵌套是无意义的,也就是说#lt;b#gt;#lt;b#gt;这里是加粗的文字#lt;/b#gt;#lt;/b#gt;这样的两层和加一次b标记所得到的效果是一样的。

         好了,你需要着重描述哪些文字就给哪些文字加上B标记吧。

 #lt;p#gt;店主#lt;b#gt;必学#lt;/b#gt;的常用HTML代码(#lt;b#gt;淘宝公告栏代码#lt;/b#gt;)这里是第一段文字#lt;/p#gt;
 #lt;p#gt;店主必学的#lt;b#gt;常用HTML代码#lt;/b#gt;(#lt;b#gt;淘宝公告栏代码#lt;/b#gt;)这里是第二段文字#lt;/p#gt;

看看上面这段代码,并试着修改一下,多熟悉几遍。

注意:标记之间不可以交叉嵌套,如:#lt;b#gt;aaa#lt;p#gt;bbb#lt;/b#gt;ccc#lt;/p#gt;,这样是不可以的。

总结:

        也许你想问B标记虽然加粗了,但还是没有到我想要的大小,如果把文字变的更大一些,或把文字变个颜色需要怎么办呢,这是我们下一讲的内容,请关注我的教程。

阅读: (1042)  评论(8)  
 
网友评论:
 
 1.Mande2011/5/19 7:30:27 
Sundos great to me BWTHDIK
 2.116.113.40.1062011/5/21 11:58:22 
请教如何向你那样把 甩饼歌 放到博客里??而且没有酷6的强制连接
 3.2016/6/30 6:38:01 
 4.2016/7/11 7:10:16 
 5.2016/11/5 0:02:28 
 6.2017/12/29 18:19:58 
 7.2018/1/13 20:03:05 
 8.2018/1/29 0:59:16 
 
相关文章:
 什么是微信公众帐号?
 怎样利用QQ群推广网店?
 如何寻找活跃的QQ群?
 网络广告的形式有哪些?
 淘宝站内搜索的一些排名靠前方法。
 什么是软文?怎样利用软文推广?
 网店推广之最准确定位客户的合作推广法
 简单的几句话可以总结我们成功的全过程
 网店推广之博客推广法
 网店推广之新浪博客免费广告推广法
 
 
     
联系作者: QQ: 657603425 Email: 657603425@qq.com
Copyright © 2007-2014 www.laozamao.com All Rights Reserved
京ICP备09002242号 北京海淀分局备案号:1101084842