前端小知识

前端知识

前端网站可以包括门户网站（新浪，腾讯等）
电商网站（淘宝，亚马逊等）
管理系统（企业管理网，校园网等）
作为一个Web前端开发工程师，不仅需要将内容呈现给用户，还需要学会维护网站，懂得搜索引擎优化，利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

• 在meta标签里我们需要设置关键字和内容描述，尽量给你的网页写上特定的标签，标签里要包含你所做的关键字词。对于不同的网页内容，你需要自己琢磨出合适的标签以提高搜索引擎的机器人对你网站的覆盖范围，并通过此分辨出你网站的有效主题。最好是每一页有不同的标签来支撑。

  <!-- 关键字设置 -->
  <meta name="keywords" content="新浪,新浪网,SINA,sina,新浪首页,门户">
  <!-- 内容描述 -->
  <meta name="description" content="新浪网为全球用户24小时提供全面及时的中文资讯，内容覆盖国内外突发新闻事件、体坛赛事、娱乐时尚、产业资讯、实用信息等，设有新闻、体育、娱乐、财经、科技等门户">

• 同时考虑搜索引擎规则，一个页面只有一个重要标题时，我们采用h1标签，样式在CSS文件中设置。

• 在编写HTML结构时，尽量使用语义化标签，便于搜索。
  语义化标签有以下这些：

  <form action=""></form> <!-- 定义表单 -->
  <table></table> <!-- 定义表格 -->
  <img src="" alt=""> <!-- 定义图片 -->
  <em></em> <!-- 斜体 -->
  <strong></strong> <!-- 粗体 -->
  
  <!-- html5新语义元素 -->
  <header></header> <!-- 规定文档或节的页眉 -->
  <nav></nav> <!-- 定义导航链接 -->
  <main></main> <!-- 规定文档的主内容 -->
  <section></section>	<!-- 定义文档中的节 -->
  <article></article> <!-- 定义文章 -->
  <aside></aside> <!-- 定义页面内容以外的内容 -->
  <details></details> <!-- 定义用户能够查看或隐藏的额外细节 -->
  <summary></summary> <!-- 定义details元素的可见标题 -->
  <figcaption></figcaption> <!-- 定义figure元素的标题 -->
  <figure></figure> <!-- 规定自包含内容，比如图示、图表、照片、代码清单等 -->
  <time datetime=""></time> <!-- 定义日期/时间 -->
  <mark></mark> <!-- 定义重要的或强调的文本 -->
  <footer></footer> <!-- 定义文档或节的页脚 -->

• 在页面上使用链接时，多使用锚链接，外部链接的rel设置成nofollow，保证用户停留在你的网页上。

• 导航栏不要使用图片，多使用文字来制作，有助于提高搜索排名。

引擎优化

总体上说，搜索引擎的机制由以下几部分构成：

优化规则

网页优化title部分

标题和关键字的符合度越高越好，长尾关键词更有利于提高网站流量。

网页的头部和底部

对于搜索引擎优化来说，尽量的将关键字加到里面。

外链非常重要

外链决定了网站在索引引擎中的排名，但是并不是说外链多，排名一定就高，毕竟决定网站排名的因素还有很多，外链只不过是其中的一个重要部分。记住永远不要进行群发，群发的结果是有一天你发现你的网站突然在搜索引擎中消失了。

内容优化

保持天天更新你的网站，以便爬虫蜘蛛来访的时候有东西可吃。最好的方法是定时更新网站，每天保持下去。内容最好是原创的，因为搜索引擎是非常的喜欢原创的。

服务器域名的选择

首先，必须选择一个好的域名，最好选择.com的，.cn的个人感觉权重没有.com好，确保域名容易记住，而且没有被搜索引擎惩罚过。还要选择一个好的服务器，如果你的网站所在的服务器经常的出现问题，导致网站频繁出现不能浏览的问题。那么你的网站就会受到很大的影响。排名会很难提升的。所以服务器域名的选择是非常重要的一个部分。

重视网站目录

优秀的目录排列让蜘蛛很轻松的找到你的内容，排名自然就高，想象一下，要是你的很多目录结构乱七八糟，目录名称不知所云，百度蜘蛛进了你的网站如同进了迷宫，网站排名自然很难提升，同时对于后期的网站优化是非常的不理想的。