最简单的网页结构应该是这样：
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
</body>
</html>
<meta charset="utf-8" /> 对整个网页编码的定义
在body标签内出现的，就是网页的具体内容，较常见的html标签有下面这些：
1. div标签——主要用于网页结构的布局，一般采用id和class区分不同的div，例如定义一个网页的底部版权信息，可以写为：
<div class="copy">XXX 版权所有</div>
2. p标签——表示段落，比如公司简介的文字可以写为：
<p>本公司成立于2005年，主要提供xxxx等业务。</p>
3. h1--h6标签——标题标签，权重由h1到h6依次递减，h1具有唯一性，每个页面只出现一次，例如，可以将网页主标题放在h1里，副标题放在h2里，相关内容放在h3里，等等……
4. ul标签——表示列表，与li标签配合使用，例如：
<ul><li>产品1</li><li>产品2</li><li>产品3</li></ul>
类似的还有有序列表ol，用法相似，一般网页的导航菜单就使用列表标签来实现……
5. img标签——图片表示，在网页中展示图片的时候用。如：
<img src="images/1.jpg" alt="产品图片" />
6. span标签——表示行内元素，比如：
<p>联系电话：<span>88888888</span></p>
文本中的某部分加上了span标签，便于在CSS中给它单独定义样式……
7. a标签——表示链接，例如：
<a href="https://www.html8.com.cn">HTML8</a>
含义是给“HTML8”这几个字加上对应的链接。如果是给图片加上链接，则应当写为：
<a href="https://www.html8.com.cn"><img src="logo.jpg" alt="产品图片" /></a>
8. strong和em标签——表示强调，在文章中某个关键词或某句话比较重要，可以加上此标签，在没定义样式的情况下，一般强调的文本会显示粗体或斜体。
9. 此外还有一些标签，如表格标签table，以及表示音频或视频的标签audio和video等等，在网页模板中用的较少的标签这里就不再赘述，将以上标签使用灵活的话，制作网页模板就基本够用了，其他的标签再慢慢研究就可以了。
关于CSS，也有很多定义各种样式的“代码”：
1. background——表示背景，例如给名为top的p标签定义背景，我们可以写为：
#top {background:#ccc;}
这表示背景是浅灰色，如果要用图片作为背景，则应写作：
#top {background: #00FF00 url(bg.png) no-repeat;}
这里的no-repeat表示不重复显示背景，如果需要重复，则去掉该属性即可；
2. text-align——表示文本居左、居右和居中的设置，最常用的：
p {text-align:center}
意思就是将这段文本居中；
text-align:left
文本内容靠左居左
text-align:right
文本内容靠右 居右
3. font——定义字体和字号，例如：
#one {font:bold 12px/20px arial}
表示文字为粗体，12px大小，行间距为20px，字体为arial，如需单独定义字号和字体，则写为：
font-size:14px;font-family:arial;
单独定义是否加粗，则使用：
font-weight:bold;
font-weight:normal
单独设置行间距，则使用:
line-height:24px;
line-height:150%;
4. padding和margin——分别定义内边距和外边距，例如:
#two {padding:0 5px 0 6px;margin:10px;}
表示two标签的内边距分别为0，5px，0，6px，四边外边据都为10px，当分别定义四边边距的时候，按照上、右、下、左的顺序，只定义两个数字，则表示上下，左右，只定义一个数字，则表示四边相同距离；
5. border——表示边框，一般写为:
#xxx {border:1px solid #eee}
则表示边框宽度为1px，颜色为#eee，如果单独定义下边框，则写为border-bottom，其他四边亦然；
6. 链接样式：我们可以分别定义链接文本的样式与鼠标指向链接时的样式，比如:
a {text-decoration: none;color:red;}
a:hover {text-decoration: underline;color:blue;}
意思是链接文本不显示下划线，颜色为红色，当鼠标指向时显示下划线，并显示为蓝色。此外还有a:visited标签定义已经访问过的链接样式，可以自己试一下；
7. 上述text-decoration定义文字是否加下划线，不一定针对链接使用，如果将给普通文本加下划线也是可以的，至于a:hover表示鼠标指向链接时的样式，同样的，也可以使用p:hover表示鼠标指向该段落时的样式；
8. height和width——表示高度和宽度，例如:
img {height:50px;width:200px;}
则定义了图片的宽和高，如果width:100%则表示宽度为整个屏幕的宽度；
9. float:left和float:right——常用来布局的浮动标签，它表示元素的流动方向，例如float:left表示向左浮动，下方的元素就会自动显示在右边；
10. display——定义元素的类型，最常用的display:none表示隐藏该元素，display:inline表示元素在行内显示，display:block表示元素以块状显示；
11. clear:both——表示清除浮动，不希望元素有浮动效果，则可以给元素加上此定义。
12. position:absolute和position:relative——表示绝对定位，通常是父级定义position:relative，子级定义position:absolute绝对定位属性，子级使用left或right和top或bottom进行绝对定位。对于初学者来说这个可能不易理解，暂时可以不作研究，并不是每个网页模板都会用到绝对定位。