整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
页开发设计是在面试创新实验室时面试官给的二面试题，让自己设计实现一个简单的网页。所以我决定来做一个邀请函网页，并将开发过程写在博客上供有需要的朋友们查看。
网页开发工具有很多，我使用的是对新手较为友好的Dreamweaver，其优点在于简便、直观、功能丰富，简称为“傻瓜化”。下载请点击这里。
1.1 创建首个HTML5页面
在准备好的开发工具中，首先输入第一行HTML代码，如下：
<!doctype html>
接下来，我们需要为页面构建最基本的结构框架。首先要建立最外侧的围“围墙”，来囊括整个页面，这需要使用到< html >标签，后续所有页面内容都卸载这对标签之内。而围墙之内又分为“头”和“身体”两部分，分别用< head >和< body >标签来指定。
<html> <head> </head> <body> </body> </html>
< head >类似“身份证”，里面需要两项基本信息，一项是“名字”和“语言”。
正如每个人都有一个名字，< head >中唯一必须的元素就是< title >，即页面的标题。此外，还需要标注“语言”来使浏览器正确解读我们的页面而不会出现乱码
<head> <meta charset="UTF-8"> <title>HTML5学习邀请函</title> </head>
< body >标签中则包含了所有要呈现给浏览者的内容信息。
<head> Let's Learn HTML5 </head>
.
1.2 增加必要的页面元素
为了对页面内容加以充实，我们使用标题标签。在HTML的各种标签中，标题标签有六个，按从大到小的层次结构为< h1 >到< h6 >。在这里我们就用< h1 >。
<body> <h1>Let's Learn HTML5</h1> </body>
接着要添加说明文字。说明文字放在段落标签< p >里。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> </body>
最后是添加按钮。按钮的实质是文本链接，单击后跳转到某个URL。链接的标签为< a >，跳转的URL可以用该标签的href属性来指定，单击跳转到href所指”界面。
<body> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </body>
1.3 页面中看不见的代码
页面中加入区块，可以将各种标签放入不同的内容区域中，可以是页面结构变得井井有条，便于后续的页面美化。而此次使用的就是通用区块< div >。修改代码如下：
<body> <div> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div> </body>
此外，区块还可以进行命名，我们以便直接对应到这个区块。添加一个id属性，命名为container：
<div id="container"> <h1>Let's Learn HTML5</h1> <p>发挥您的美感和想象力，探索Web开发的无限可能性，先诚邀您一同踏上HTML5的学习之路。</p> <a href="invite.php">邀您参加</a> </div>
2.1 添加页面背景
背景图片要放置在和 index.html相同的路径下。css样式代码可以指定各种页面元素的呈现形式，但是在创建css样式代码之前，还需要在头部创建style元素来作为样式的容器。
<head> <meta charset="utf-8"> <title>HTML5学习邀请函</title> <style type="text/css"></style> </head>
添加背景需要创建background样式：
<style type="text/css">
body{background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)}
</style>
这是网页的预览图，有没有发现什么问题？网页背景图片没有和网页的大小相匹配，出现了两张或好多张图片一起填充网页背景的情况。这是因为图片分辨率和浏览器的显示分辨率不同，因此要使图片根据浏览器的分辨率进行缩放。这就需要设置background属性在横向和纵向上的属性，使其充满全屏。
<style type="text/css">
html,body{height: 100%;}
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
}
</style>
想要改变字体颜色的话，需要使用color属性：
html,body{
height: 100%;
color: #ffffff;
}
2.2 调整区域位置
调整区域位置在网页设计中很重要，就想写微信推文，一个好的排版总能让人心情愉悦想要继续读下去，网页也一样，不能总是把东西都堆在一块，或者所有页面千篇一律。
在这个页面上，我想让内容居中显示，于是通过设置container这个容器（就是前面的id为container的div），使其宽度为100%，即横向充满整个屏幕，然后设置其中的文字居中：
#container{
width: 100%;
text-align: center;
}
*在创建css样式时，id类型的选择器需要使用“#”来定义。
之后需要变成垂直居中，先对container的父级，即页面的body做些属性定义，然后通过改变top属性来实现：
body{
background: url(file:///E:/HTML5/HTML52/images/timg2.jpg)center center;
background-size:cover;
margin: 0;
padding: 0;
position: relative;
}
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
}
要控制container的top属性，就要使container的定位方式为“绝对定位”，而这又需要body（container的父级）为“相对定位”。
top: 50%;使得container的顶部位于整个页面的50%位置。
不过要使得内容区块整体居中，还要使container向上移动其高度的一半。但问题在于container的高度是随着后续的字体、按钮样式而不断动态变化的值，所以不可以直接设置确定值，需要设置transform属性，设置其translateY的数值，使其在Y轴上移动-50%，即向上移动其高度的一半而无需声明container具体多高。代码如下：
#container{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
-ms-transform:translateY(-50%);
-moz-transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-o-transfrom:translateY(-50%);
}
这里多次重复定义是因为，不同浏览器对于transform属性的支持并不相同，为了使得页面在各种浏览器下都能够正常显示不得不这么做。
2.3 调整字体和字号
考虑到不同电脑上字体库的问题，可能同一个字在不同电脑上显示不同或生僻字不能显示，需要设置font-family属性为sans-serif，即系统默认的无衬线字体;
html,body{
height: 100%;
color: #ffffff;
font-family: sans-serif;
}
接下来要调整文字大小，将h1标题的字号设置为了更大的54像素，并且小写变大写：
h1{
font-size: 54px;
text-transform: uppercase;
margin-bottom: 20px;
}
设置说明文字的样式，使段落文字字号更大，且拉开距离，代码如下：
p{
font-size: 21px;
margin-bottom: 40px;
}
后记：对于大部分转行的人来说，找机会把自己的基础知识补齐，边工作边补基础知识，真心很重要。"我们相信人人都可以成为一个IT大神，现在开始，选择一条阳光大道，助你入门，学习的路上不再迷茫。这里是北京尚学堂，初学者转行到IT行业的聚集地。"
lt;a>标签是常用的标签之一，今天就一起说说这个<a>标签，不足之处，还望指正。
<a>标签的作用：链接、下载、锚点等。其中最为重要的属性为href.
链接是其最基本的功能，例如：
<a href="#">这是一个链接</a>
<a href="##">这是一个链接</a>
那么这时候就会产生一个链接指向#或者##
第二个属性target
<a href="#" target=“_blank”>这是一个链接</a>
这时候，点击链接时，会在一个新的页面打开，那么target有哪些值呢？如下：
_self -- 在当前窗体打开链接,此为默认值
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接（我喜欢用name）
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)（跳出框架）
我们做的都是文字链接，当然也可以生成图片链接：
<a href="#"> <img src="#" ></a>
下载功能：
<a href="#">下载</a> 此时#为文件地址
锚点功能：
<a href="#锚点名字">锚点</a>
<h2 name="锚点名字">标题</h2>
此外，<a>标签还有伪类，伪类选择符包括：
① a:link：未访问链接 ,如 a:link {color:blue}
② a:visited：已访问链接 ,如 a:visited{color:blue}
③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 a:active{color:blue}
④ a:hover：鼠标移到链接上时 ,如 a:hover {color:blue}
一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。
前三者分别对应body元素的link、vlink、alink这三个属性。
【重要】四个“状态”的先后过程是：a:link ->a:visited->a:hover ->a:active。另外，a:active不能设置有无下划线（总是有的）。
：为什么SEO人员要学会HTML代码标签的使用?
请注意，会建站不一定意味着懂HTML，现在随便找个CMS或者博客程序(如WordPress、Z-blog)，一个毫无HTML常识的菜鸟都能轻易建站，所以我要强调“一定要懂HTML”。或许很多人在网上看到或者听某家SEO培训机构说：“SEO很简单，你在我们这里学会了，以后直接去指导别人就可以，所以学SEO不用懂HTML”，不要以为我危言耸听，我确实碰到过很多朋友走进了这样的误区，在这里我想说：“学SEO不懂HTML，那你就不用学了!” HTML是SEO不可或缺的一部分，关键词布局、策略的调整都离不开HTML，网站制作时的诸多修改、调整也要用到HTML，想学SEO，先学会HTML吧!
① 首先我们大体来介绍了网页的基本结构，网页里面标签分为head和body标签，翻译起来很容易理解。head是头部，里面包含着title(网页标题)、keyword(关键词)、description(网页描述)这三个基本标签，可能还有css以及JS等在head标签里面，这里我们先不用管他。而我们一般SEOer主要工作就是做网页标题、关键词、描述这几个块，这是不得不做的，但是主要内容都还在body里面，其实这个我们可以把它理解为身体，一个比较成熟的网页要求五脏六腑俱全。所以里面有很多模块和功能，现在比较流行的CSS+DIV，代码比较简洁，美观，表现力比较强，所以table也渐渐的退出市场，因为对SEO来说table(表格)占用内存比较多，是DIV的10倍以上，所以我们也能不用最好不用。
② 做SEO还必须知道代码的规范标准，现在通过W3C标准很难，因为网站很难不出现错误，其实细小的错误肯本没有影响，只要不多搜索引擎也比较容易接受。但是能不错误就不要出现，网页前面最好申明标准体系，一般我们中国大陆的编码是GB2312和UTF-8，一般后者用的比较多，这个我们先不解释。
③ 还有就是现在搜索引擎可以读懂JS代码，所以对网站影响越来越小，不要在影响用户体验的情况下而去除JS，这是不明智的。特别是谷歌，几年前就可以读懂一般性JS代码，就算是导航也没有影响，但是这里我们也不推荐用JS写导航.如果朋友们现在想学Html知识了，我向大家推荐去下本HTML标签的电子书，里面的例子很多，也很详细，非常适合初学者。如果你想成为一名合格的优化，那么就去学下HTML，不然程序员会认为你什么都不懂在瞎指挥。
SEO人员应该都知道HTML语言是什么?那么我就来给大家写一篇SEO和HTML的文章，所以本文就为广大的seo人员介绍SEO必须懂的HTML代码标签。总体来说，SEO人员大部分情况下并不需要直接参与网站程序的编写，所以，我们只需要能看懂一部分html代码，并且在工具的辅助下，能够增、改、删这9个标签就可以了。
二：SEO人员必须懂的HTML语言代码
1．标题标签：如果我们不知道网页的标题是由哪个标签来控制的，是一件很失败的事情。曾与一位朋友交流其站点的优化问题，我对他说页面的标题要优化一下，标题的写法最好是“文章标题-栏目名称-网站名称”的结构，结果他将正文的标题修改了。这充分说明这位朋友并 懂标题标签，所以不知道如何去修改页面标题。而页面标题对于搜索引擎来说是非常重要的，所以我们 作为SEO人员，一定要会使用标题标签。
2．页面关键词标签：作为SEO人员，所有的工作内容都是在做与关键词相关的工作，所以我们千万不能将这个标签忽略了。对于常见有两种错误：
a. 没有使用页面关键词标签：通过源码，我们可以发现很多网站其实没有这个标签。没有此标签的网站，大部分情况是因为CMS程序不支持，而有些则是因为不明 白它的作用，所以没有添加。不论是那种情况，我们都可以通过某些方法来改进。
b. 关键词分隔符号使用不正确：关键词内容的正确形式是【content=“关键词，关键词2,……”】，关键词与关键词之间使用英文半角逗号分隔开来，而不是使用下划线、竖线或者空格等符号。
3．页面描述标签：此标签可以看着是定义文章的主要内容，与标题一样，搜索引擎会将其显示在搜索结果页中。所以我们千万不要忽略，甚至于我们可以利用这一点来将一些促销和利好信息展示给搜索者，描述的写法可以参见我们之前的文章。
4．默认地址标签：在某些情况下，我们的网站会被某些人恶意复制，造成网站排名下降和权重流失等损失，为了在一定程度上防御这种复制带来的后果，很 多SEO人员提出在外链接中使用绝对url的方法。实际上除了使用绝对地址，我们还可以使用默认地址标签，使用了默认地址标签的页面，其页内所有的相对url地址所指定的url作为基准，进行链接。同时，在此也提醒一下建站的朋友，如果使用了默认地址标签，在修改各种包含文件--如css,js等引用文件--的时候，要去掉默认地址标签，否则修改本地文件是无效的，因为它会默认去调用href指定的文件。
5．文字加粗标签：这两组html标签在 视觉效果上都是让文字加粗，都有强调的作用，它会告诉用户和搜索引擎，这部分内容在本页面是很重要的。所以我们在页面中可以将重要的词组--一般是关键 词，进行或加粗强调。但是要避免通篇都是加粗，或者 通篇都没有词组被加粗，这两种方式都是不可取的。大部分情况下，使用或者效果是类似的，有专家 提出使用字符更少、更能节约带宽，所以建议将都换 成，但显然这个理由并不是那么充分和吸引人，几个字符，对于现在的福鼎网络速度来说，完全可以忽略不计。
6．内容最大标题标签：被包含的内容，搜索引擎会给予很高的权重，所以作为SEO人员，一定要重视这一点。并且要记住：是用来定义正文内容最大标题，而不是页面标题，不要与混淆。同时，一个页面只允许有一个标签，否则会被认为是作弊--目前来说是这样的，HTML5拥有更强的功 能，允许一个页面有多个标签，但目前还未完全被搜索引擎所支持，所以我们坚持在一个页面使用一个是没错的。
7．内容次级标题标签：一篇文章，除了标题，还会有各种次级段落标题，比如本文：就存在多个次级标题。一般建议，页面必须有和标签，和标签不作要求，也不建议使用及更次级的标签，因为作用不大，但 不阻止使用，因为他们是文档的标准标签，即使无用，也无害。
8．超链接标签：作为SEO人员，这个HTML标签是必须懂的，在互联网中超链接标签可以说是灵魂一般的存在，如果 没有超链接标签，网站将失去意义。不管我们是做锚文本，还是做图片链接，都需要使用它。这里我们要注意它的两个属性，一个是【target】，它决定了链接以何种方式打开，一般站内链接会被定义为在当前页面打开，外部链接被定义为在新窗口中打开。另外一个属性是【rel】，其最让SEO人员关注的就是【Nofollow】值，因为它代表不传递权重。对内可以集中权重，不使其分散到无意义的页面;对外，可以防止权重流失和避免被骗友情链接。
9．图片标签：图片标签我们要注意的是其【alt】属性，因为搜索引擎并不认识图片，而【alt】属性则在大概意义上告诉了搜索引擎此图片的内容。 所以，作为SEO人员，一定要重视【alt】属性的使用，对每一幅具有实际意义的图片都应该加上【alt】属性，并为其指定内容。在大多数浏览器中，定义 了【alt】属性内容的图片，当鼠标悬停在图片上的时候，会显示【alt】属性值：鼠标悬停显示【alt】属性值
另外两个属性【widht】和【height】用来定义图片的宽度和高度，大部分情况下，很多程序编写人员都是忽略，让浏览器自行判断图片的大小。 这种做法在图片的显示上面是没有什么错误的，但是忽略【width】和【height】属性，会增加图片显示的时间，所以我们应该主动给图片加上宽度和高 度属性，并指定其值。
关注本头条（常州姜东），带您详细了解SEO培训优化十四步：（如何做出一个好的SEO效果）
1、做SEO优化第0步:你真的了解SEO优化吗？浅谈网站优化之用户体验优化
2、做SEO优化第一步:初步了解SEO的作用
3、做SEO优化第二步:背熟所有SEO基础名词
4、做SEO优化第三步:学习了解HTML基础知识
5、做SEO优化第四步:学会搭建一个个人网站（cms系统）
6、做SEO优化第五步:定位目标关键词和长尾关键词
7、做SEO优化第六步:设置Title、keywords和Description
8、做SEO优化第七步:如何选择网站程序模版?
9、做SEO优化第八步:如何设置网站目录优化?
10、做SEO优化第九步:如何设置页面内容优化
11、做SEO优化第十步:内容源找寻和网站更新维护方法
12、做SEO优化第十一步:如何设置外部链接优化
13、做SEO优化第十二步:网站优化推广方案
14、做SEO优化第十三步:一定要最好用户体验优化
*请认真填写需求信息，我们会在24小时内与您取得联系。
