认识基本的HTML代码

欢迎光临，沐风博客分享SEO等网络营销推广技术和资讯！

推荐：2024年百度SEO应该怎么做 - 跨境电商规避风险 | 视频号直播带货 | 直播带货选择什么产品

电商平台：淘宝、天猫、京东、闲鱼、视频号小店、拼多多、抖音小黄车、亚马逊、 shopify 自媒体：微信视频号、快手视频、搜狐自媒体、百家号、今日头条、小红书

当前位置：沐风博客 >> SEO教程 >>正文

认识基本的HTML代码

重点导读：对于seoer来说，掌握html代码是最基本的要求（某些大神提出seoer不需要懂代码或者程序，只需懂内容策划即可，对此笔者不做更多辩解，只简单的说句具体情况具体分析，谁做谁知道！）。对于刚接触seo的朋友来说，最想了解的问题可能是：网页到底是怎么做出来的？今天笔者就带大家来解开网页的神秘面纱，通过简单的html代码讲述页面的大致结构。
发布人:沐风 - 更新时间:2019-02-19 18:26:43 - 地址:http://www.tangmengyun.com/seo/10.html - 浏览:11976

对于seoer来说，掌握html代码是最基本的要求（某些大神提出seoer不需要懂代码或者程序，只需懂内容策划即可，对此笔者不做更多辩解，只简单的说句具体情况具体分析，谁做谁知道！）。

对于刚接触seo的朋友来说，最想了解的问题可能是：网页到底是怎么做出来的？今天笔者就带大家来解开网页的神秘面纱，通过简单的html代码讲述页面的大致结构。

先上图，这是笔者刚做的页面结构图：

效果图.jpg

页面虽然简单，但能说明页面的结构。不管是大型网站还是中小型网站，其结构都大致如此。我们先来看下最基本的代码框架，如图：

html基本结构.jpg

这就是一个静态页面的基本结构，html代码简化如下

<html>

<head>

</head>

<body>

</body>

</html>

页面内容包含在<html>和</html>之间，其中<head></head>之间的是头部信息，包含title属性及meta属性等，在页面前端显示的内容则包含在<body></body>里。

下面再来完善代码，让其在前端展示出来（效果就是第一张图），代码自上而下分析。

1.<head></head>部分，这里重要添加了页面标题、关键词、描述三个属性（css内容下面再讲），这也是seo优化非常重要的地方，html代码如下：

<title>简单的html代码</title>

2.<style></style>部分，这里是页面的样式（css），对html代码熟悉后可以进一步学习div+css（利用div和css对页面进行布局），这里对css暂且不做过多解释。

一般而言，css内容会单独存放到一个独立的文件，这里方面讲解所以就放在了<head></head>里。

<style>

.anli_main{margin:0 auto;width:500px; color:#FFF;}

.anli_top{ width:500px; height:50px; float:left; text-align:center; background-color:#333; }

.anli_main_main{ width:500px; height:500px; float:left; text-align:center; background-color:#00F}

.anli_main_left{ width:120px; height:500px; float:left; text-align:center; background-color: #F3F;}

.anli_main_right{ width:380px; height:500px; float:left; text-align:center;}

.anli_footer{ width:500px; height:50px; float:left; text-align:center; background-color:#633 }

</style>

3.<body></body>部分，整体代码如下，其中分为了头部、主体、底部三个区块，主体中又分为了左侧边栏及右侧主体栏。

<body>

这里是头部

</div>

这里是左边

</div>

这里是主体内容的左边

</div>

这里是底部

</div>

</body>

html代码颇为简单，本文旨在让大家对页面html代码有大概的了解，知道网页其实并没有想象中那么神秘。笔者认为，掌握html代码是做好seo的基本条件，大家可以利用dreamweaver等网页编辑工具多做练习，同时也可以学习css相关知识（建议去http://www.w3school.com.cn/css/学习），利用div+css进一步美化页面。

基本的html代码就介绍到这里，希望大家能熟练掌握！