WEB基础知识

网页的小知识

网页基本结构

如今受到大众认可的网页结构为div+css模式,加上现代刘浏览器的快速发展,新的属性和特性也更多的应用于网页当中。今天浅谈一些网页的结构认识。

html网页结构

很多时候学网页制作开发的时候第一看到的印象深刻的就是html或htm后缀结尾的网页,我们把这类网页归结为静态网页,伪静态除外。
So,问题来了:html或htm与其它如php、asp、aspx、jsp等后缀结尾的网页有什么区别呢?

首先,html页面是静态的从头到尾没有程序的执行是纯的html语言,是不经过服务器处理就直接送出给浏览器呈现给浏览者。
而其他后缀的结尾的网页相对来说就是动态网页页面,动态页面是经过服务器对各自的程序翻译处理、数据库操作等处理然后才由浏览器把服务器处理完的数据程序给用户,而网页内容数据可以随后台数据改变而改变。

OK,大概的了解html结构后,我们来看下html的代码结构

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>放置文章标题</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> //这里是网页编码现在是utf-8
<meta name="keywords" content="关键字" />
<meta name="description" content="本页描述或关键字描述" />
</head>
<body>
这里就是正文内容啦
balabala...
</body>
</html>

一个完整的HTML包括 DOCTYP声明title标题head网页编码声明
最迟使用完整的HTML源码

1
2
3
4
5
6
7
8
9
10
11
12
13
<!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>
<meta name="keywords" content="关键字" />
<meta name="description" content="本页描述或关键字描述" />
</head>
<body>
内容
</body>
</html>

由于HTML5的问世,极大的简化了书写的格式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>网页标题</title>
<meta name="keywords" content="关键字" />
<meta name="description" content="此网页描述" />
</head>
<body>
网页正文内容
,___ .-;'
·"-.·\_...._/·.·
, \ /
.-' ', / () ()\
·'._ \ /() . (|
> .' ;, -'- /
/ < |;, __.;
'-.'-.| , \ , \
·>.|;, \_) \_)
·-; , /
\ / <
'. <·'-,_)
'._)
</body>
</html>

无论是html还是其它后缀的动态页面其html语言结构都是这样的,只是在命名网页文件时以不同的后缀结尾。
1、无论是动态还是静态页面都是以“”开始,然后在网页最后以“”结尾。
2、“”后接着是“”页头,其在中的内容是在浏览器中内容无法显示的,这里是给服务器、浏览器、链接外部JS、a链接CSS样式等区域,而里面“”中放置的是网页标题,可在浏览器最左上看见如图:
title介绍
3、接着“ ”这两个标签里的内容是给搜索引擎看的说明本页关键字及本张网页的主要内容等SEO可以用到。
4、接着就是正文“ ”也就是常说的body区 ,这里放置的内容就可以通过浏览器呈现给用户,其内容可以是table表格布局格式内容,也可以DIV布局的内容,也可以直接是文字。这里也是最主要区域,网页的内容呈现区。
5、最后是以“ ”结尾,也就是网页闭合。

×

可以的话,我想喝杯咖啡续命

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

文章目录
  1. 1. 网页的小知识
    1. 1.1. 网页基本结构
      1. 1.1.1. html网页结构