seo新手应该掌握的html基础知识

发表评论 0 条 条评论 发布:jiangwei 发表时间:2011-04-10 标签: ,
 

  在SEO优化过程中,需要的代码知识最多的就是HTML 标签,其实做SEO也就只需要懂得HTML 标签即可。在处理网站中或许会碰到各式各样的程序、代码,可以请专业高手帮忙或自己搜索答案,但你知道你要做什么是最重要的。如果你想学了PHP、ASP等各种代码成为技术高手后再学SEO,那就是舍本逐末了。

  我们先来认识下什么是html?

  html是什么,什么是html通俗解答:

  html是hypertext markup language的缩写,即超文本标记语言。html是用于创建可从一个平台移植到另一平台的超文本文档的一种简单标记语言,经常用来创建web页面。html文件是带有格式标识符和超文本链接的内嵌代码的ascii 文本文件??html结构了解。

  html文本是由 html命令组成的描述性文本,html 命令可以说明文字、 图形、动画、声音、表格、链接等。 html网页结构包括头部 (head)、主体 (body) 两大部分。头部描述浏览器所需的信息,主体包含所要说明的具体内容。

  html是制作网页的基础,我们在网络营销中讲的静态网页,就是以html为基础制作的网页,早期的网页都是直接用html代码编写的,不过现在有很多智能化的网页制作软件常用的如frontpage,dream weaver等)通常不需要人工去写代码,而是由这些软件自动生成的。尽管不需要自己写代买,但了解html代码仍然非常重要,了解认识html是什么?是学习网络营销与电子商务的重要技术基础知识。

  自己动手建一个非常简单的网页,首先设置电脑显示扩展名方法,打开我的电脑,然后现在栏目工具-》文件夹选项-》查看-》高级设置中找到《隐藏已知文件类型的扩展名》将其不勾选,然后点击运用 确认设置完成。实现建立一个新的文本文件,在桌面新建一个txt文档(记住,如果你在使用比较复杂的文字处理器,就应该用”纯文本”或”普通文本”来保存)在文档里些一些文字,然后将此文件命名为”xxxx.html”。(随便你起一个什么名字,扩展名也可是HTM)。然后你可以用浏览器将它打开,你会看见最简单的自己做的页面。

  什么是 HTML页面结构

  无论是html还是其它后缀的动态页面其html语言结构都是这样的,只是在命名网页文件时以不同的后缀结尾。

  1、无论是动态还是静态页面都是以”<html>”开始,然后在网页最后以”</html>”结尾。

  2、”<html>”后接着是”<head>”页头,其在<head></head>中的内容是在浏览器中内容无法显示的,这里是给服务器、浏览器、链接外部JS、链接CSS样式等区域,而里面”<title></title>”中放置的是网页标题,可在浏览器中浏览

  3、接着”<meta name=”keywords” content=”关键字” /> <meta name=”description” content=”本页描述或关键字描述” /> “这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。

  4、接着就是正文”<body></body> “也就是常说的body区 ,这里放置的内容就可以通过浏览器呈现给用户,其内容可以是table表格布局格式内容,也可以DIV布局的内容,也可以直接是文字。这里也是最主要区域,网页的内容呈现区。

  5、最后是以”</html> “结尾,也就是网页闭合。

  以上是一个完整的最简单的html语言基本结构,通过以上可以再增加更多的样式和内容充实网页。

  注意:网页一般的根据xhtml标准都要求每个标签闭合,如:以<html> 开始,以</html>闭合;如果没有闭合如<meta name=”keywords” content=”关键字” />就没有</meta> 就要<meta 内容。。。  />来完成闭合。

  以上就是通俗来讲的最简单的html语言结构,如果需要看更多更丰富的html语言结构,可打开一个网站的网页,然后点击浏览器的”查看”–然后点击”查看源代码”即可看见该网页的html语言结构,这样可以根据此源代码来分析此网页的HTML语言结构与内容。

  html基本架构

  通俗的讲html是网页,一个文本文件,可以使用记事本打开,打开后里面有html自己的标签(这些标签各有各的功能),并有一定规律存在。

  首先html使用浏览器打开,就能呈现你们的内容,而这些内容需要你放入特定的标签里。

  先看一下最基本html结构:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

  <html xmlns=”http://www.w3.org/1999/xhtml“>

  <head>

  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

  <title>无标题文档</title>

  </head>

  <body>

  </body>

  </html>

  以上代码可以直接拷贝,然后新建一个记事本,将代码拷贝入内,并以”.html”扩展名命名(如:index.html)(扩展名显示),保存这样就新建一个完整html网页,当然你使用浏览器打开,什么内容也没有。

  假如你想显示”divcss5-测试内容”,那你只需在<body></body>中间打上字即可,完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

  <html xmlns=”http://www.w3.org/1999/xhtml“>

  <head>

  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

  <title>无标题文档</title>

  </head>

  <body>

  divcss5-测试内容

  </body>

  </html>

  下面介绍一下HTML基本标签供给大家参考:

  标题标签

  将文档的题目放在标题栏中 <title></title>

  文档整体属性

  设置背景颜色,使用名字或十六进制值 <body bgcolor=?>

  设置文本文字颜色,使用名字或十六进制值 <body text=?>

  设置链接颜色,使用名字或十六进制值 <body link=?>

  设置已使用的链接的颜色,使用名字或十六进制值 <body vlink=?>

  设置正在被击中的链接的颜色,使用名字或十六进制值 <body alink=?>

  文本标签

  创建预格式化文本 <pre></pre>

  创建最大的标题 <h1></h1>

  创建最小的标题 <h6></h6>

  创建黑体字 <b></b>

  创建斜体字 <i></i>

  创建打字机风格的字体 <tt></tt>

  创建一个引用,通常是斜体 <cite></cite>

  加重一个单词(通常是斜体加黑体) <em></em>

  加重一个单词(通常是斜体加黑体) <strong></strong>

  设置字体大小,从1到7 <font size=?></font>

  设置字体的颜色,使用名字或十六进制值 <font color=?></font>

  链接

  创建一个超链接 <a href=”URL”></a>

  创建一个自动发送电子邮件的链接 <a href=”mailto:EMAIL“>…. </a>

  创建一个位于文档内部的靶位 <a name=”NAME”></a>

  创建一个指向位于文档内部靶位的链接 <a href=”#NAME”></a>

  格式排版

  创建一个新的段落 <p>

  将段落按左、中、右对齐 <p align=?>

  插入一个回车换行符 <br>

  从两边缩进文本 <blockquote></blockquote>

  创建一个定义列表 <dl></dl>

  放在每个定义术语词之前 <dt>

  放在每个定义之前 <dd>

  创建一个标有数字的列表 <ol></ol>

  放在每个数字列表项之前,并加上一个数字 <li>

  创建一个标有圆点的列表 <ul></ul>

  放在每个圆点列表项之前,并加上一个圆点 <li>

  一个用来排版大块HTML段落的标签,也用于格式化表 <div align=?>

  图形元素

  添加一个图像 <img src=”name”>

  排列对齐一个图像:左中右或上中下 <img src=”name” align=?>

  设置围绕一个图像的边框的大小 <img src=”name” border=?>

  加入一条水平线 <hr>

  设置水平线的大小(高度) <hr size=?>

  设置水平线的宽度(百分比或绝对像素点) <hr width=?>

  创建一个没有阴影的水平线 <hr noshade>

  表格

  创建一个表格 <table></table>

  开始表格中的每一行 <tr></tr>

  开始一行中的每一个格子 <td></td>

  设置表格头:一个通常使用黑体居中文字的格子 <th></th>

  表格属性

  设置围绕表格的边框的宽度 <table border=#>

  设置表格格子之间空间的大小 <table cellspacing=#>

  设置表格格子边框与其内部内容之间空间的大小 <table cellpadding=#>

  设置表格的宽度-用绝对像素值或文档总宽度的百分比 <table width=# or %>

  设置表格格子的水平对齐(左中右) <tr align=?> or <td align=?>

  设置表格格子的垂直对齐(上中下) <tr valign=?> or <td valign=?>

  设置一个表格格子应跨占的列数(缺省为1) <td colspan=#>

  设置一个表格格子应跨占的行数(缺省为1) <td rowspan=#>

  禁止表格格子内的内容自动断行回卷 <td nowrap>

  框架

  放在一个框架文档的<body>标签之前,也可以嵌在其他框架文档中 <frameset></frameset>

  定义一个框架内的行数,可以使用绝对像素值或高度的百分比 <frameset rows=”value,value”>

  定义一个框架内的列数,可以使用绝对像素值或宽度的百分比 <frameset cols=”value,value”>

  定义一个框架内的单一窗或窗区域 <frame>

  定义在不支持框架的浏览器中显示什么提示 <noframes></noframes>

  框架属性

  规定框架内显示什么HTML文档 <frame src=”URL”>

  命名框架或区域以便别的框架可以指向它 <frame name=”name”>

  定义框架左右边缘的空白大小,必须大于等于1 <frame marginwidth=#>

  定义框架上下边缘的空白大小,必须大于等于1 <frame marginheight=#>

  设置框架是否有滚动栏,其值可以是”yes”,”no”,”auto”,缺省时一般为”auto” <frame scrolling=VALUE>

  禁止用户调整一个框架的大小 <frame noresize>

  表单

  对于功能性的表单,一般需要运行一个CGI小程序,HTML仅仅是产生表单的表面样子。

  创建所有表单 <form></form>

  创建一个滚动菜单,size设置在需要滚动前可以看到的表单项数目 <select multiple name=”NAME” size=?></select>

  设置每个表单项的内容 <option>

  创建一个下拉菜单 <select name=”NAME”></select>

  设置每个菜单项的内容 <option>

  创建一个文本框区域,列的数目设置宽度,行的数目设置高度 <textarea name=”NAME” cols=40 rows=8></textarea>

  创建一个复选框,文字在标签后面 <input type=”checkbox” name=”NAME”>

  创建一个单选框,文字在标签后面 <input type=”radio” name=”NAME” value=”x”>

  创建一个单行文本输入区域,size设置以字符计的宽度 <input type=text name=”foo” size=20>

  创建一个submit(提交)按钮 <input type=”submit” value=”NAME”>

  创建一个使用图象的submit(提交)按钮 <input type=”image” border=0 name=”NAME” src=”name.gif”>

  创建一个reset(重置)按钮 <input type=”reset”>

  注意:

  关于 HTML 标签,虽然目前是对大小写不敏感,如<b> 和 <B> 的作用是相同的。

  但万维网协会 (W3C) 的标准是:建议在 HTML 4 中使用小写标签,而在 XHTML(下一代 HTML)中,必须使用小写标签。所以尽量都用小写。

  HTML颜色参考

  在HTML里,颜色有两种表示方式。一种是用颜色名称表示,比如blue表示蓝色。另外一种是用16进制的数值表示RGB的颜色值。RGB是Red,Green,Blue意思,RGB每个原色的最小值是0,最大值是255,如果换算成16进制表示,就是(#00),(#FF)。比如白色的RGB(255,255,255),就用#FFFFFF表示;还有黑色的RGB(0,0,0),就用#000000表示。

  注:在W3C制定的HTML 4.0标准中,只有16种颜色可以用颜色名称表示(aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow),其它的颜色都要用16进制RGB颜色值表示。

  当然,现在的浏览器支持更多的颜色名称。不过为保险起见,建议你还是采用16进制RGB颜色值来表示颜色。并且在值前加上#这个符号。

  为了方便大家找到合适的颜色,我们在这里列了一些颜色说明,以供大家参考,不妨作为一种速查工具。

  Web安全颜色

  以前,很多电脑显示器最多支持256色,因此出现了216种Web安全颜色,以保证网页的颜色能够正确显示。

  那为什么不是256种Web安全颜色呢?因为Microsoft和Mac操作系统有40种不同的系统保留颜色。

  以下就是216种Web安全颜色:

#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

微软支持的颜色名称

下面是微软IE4.0以上都支持的颜色名称: 

aliceblue
(#F0F8FF)
antiquewhite
(#FAEBD7)
aqua
(#00FFFF)
aquamarine
(#7FFFD4)
azure
(#F0FFFF)
beige
(#F5F5DC)
bisque
(#FFE4C4)
black
(#000000)
blanchedalmond
(#FFEBCD)
blue
(#0000FF)
blueviolet
(#8A2BE2)
brown
(#A52A2A)
burlywood
(#DEB887)
cadetblue
(#5F9EA0)
chartreuse
(#7FFF00)
chocolate
(#D2691E)
coral
(#FF7F50)
cornflowerblue
(#6495ED)
cornsilk
(#FFF8DC)
crimson
(#DC143C)
cyan
(#00FFFF)
darkblue
(#00008B)
darkcyan
(#008B8B)
darkgoldenrod
(#B8860B)
darkgray
(#A9A9A9)
darkgreen
(#006400)
darkkhaki
(#BDB76B)
darkmagenta
(#8B008B)
darkolivegreen
(#556B2F)
darkorange
(#FF8C00)
darkorchid
(#9932CC)
darkred
(#8B0000)
darksalmon
(#E9967A)
darkseagreen
(#8FBC8B)
darkslateblue
(#483D8B)
darkslategray
(#2F4F4F)
darkturquoise
(#00CED1)
darkviolet
(#9400D3)
deeppink
(#FF1493)
deepskyblue
(#00BFFF)
dimgray
(#696969)
dodgerblue
(#1E90FF)
firebrick
(#B22222)
floralwhite
(#FFFAF0)
forestgreen
(#228B22)
fuchsia
(#FF00FF)
gainsboro
(#DCDCDC)
ghostwhite
(#F8F8FF)
gold
(#FFD700)
goldenrod
(#DAA520)
gray
(#808080)
green
(#008000)
greenyellow
(#ADFF2F)
honeydew
(#F0FFF0)
hotpink
(#FF69B4)
indianred
(#CD5C5C)
indigo
(#4B0082)
ivory
(#FFFFF0)
khaki
(#F0E68C)
lavender
(#E6E6FA)
lavenderblush
(#FFF0F5)
lawngreen
(#7CFC00)
lemonchiffon
(#FFFACD)
lightblue
(#ADD8E6)
lightcoral
(#F08080)
lightcyan
(#E0FFFF)
lightgoldenrodyellow
(#FAFAD2)
lightgreen
(#90EE90)
lightgrey
(#D3D3D3)
lightpink
(#FFB6C1)
lightsalmon
(#FFA07A)
lightseagreen
(#20B2AA)
lightskyblue
(#87CEFA)
lightslategray
(#778899)
lightsteelblue
(#B0C4DE)
lightyellow
(#FFFFE0)
lime
(#00FF00)
limegreen
(#32CD32)
linen
(#FAF0E6)
magenta
(#FF00FF)
maroon
(#800000)
mediumaquamarine
(#66CDAA)
mediumblue
(#0000CD)
mediumorchid
(#BA55D3)
mediumpurple
(#9370DB)
mediumseagreen
(#3CB371)
mediumslateblue
(#7B68EE)
mediumspringgreen
(#00FA9A)
mediumturquoise
(#48D1CC)
mediumvioletred
(#C71585)
midnightblue
(#191970)
mintcream
(#F5FFFA)
mistyrose
(#FFE4E1)
moccasin
(#FFE4B5)
navajowhite
(#FFDEAD)
navy
(#000080)
oldlace
(#FDF5E6)
olive
(#808000)
olivedrab
(#6B8E23)
orange
(#FFA500)
orangered
(#FF4500)
orchid
(#DA70D6)
palegoldenrod
(#EEE8AA)
palegreen
(#98FB98)
paleturquoise
(#AFEEEE)
palevioletred
(#DB7093)
papayawhip
(#FFEFD5)
peachpuff
(#FFDAB9)
peru
(#CD853F)
pink
(#FFC0CB)
plum
(#DDA0DD)
powderblue
(#B0E0E6)
purple
(#800080)
red
(#FF0000)
rosybrown
(#BC8F8F)
royalblue
(#4169E1)
saddlebrown
(#8B4513)
salmon
(#FA8072)
sandybrown
(#F4A460)
seagreen
(#2E8B57)
seashell
(#FFF5EE)
sienna
(#A0522D)
silver
(#C0C0C0)
skyblue
(#87CEEB)
slateblue
(#6A5ACD)
slategray
(#708090)
snow
(#FFFAFA)
springgreen
(#00FF7F)
steelblue
(#4682B4)
tan
(#D2B48C)
teal
(#008080)
thistle
(#D8BFD8)
tomato
(#FF6347)
turquoise
(#40E0D0)
violet
(#EE82EE)
wheat
(#F5DEB3)
white
(#FFFFFF)
whitesmoke
(#F5F5F5)
yellow
(#FFFF00)
yellowgreen
(#9ACD32)

文章作者:jiangwei
本文地址:http://www.fuzhouseoer.com/seoxinshou-html-jichu/
版权所有 © 转载时必须以链接形式注明作者和原始出处!

发表评论

*

* 绝不会泄露


Protected by WP Anti Spam