您的位置:首页> 前端教程> HTML教程
文章导航

HTML 基本结构

2018-8-4 09:39| 作者: admin| 查看: 1643| 评论: 0|来自: 蚂蚁部落

网页无论多复杂,后台是使用何种语言。

最终呈现在浏览者眼前的内容实质上都是由浏览器解析HTML代码后绘制出来的。

HTML代码由几大结构组成,不同的结构具有不同的功能。

本文只从宏观简略介绍一下各大部分的功能,具体内容需要参阅本版块其他文章。

首先看一段代码实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<div>蚂蚁部落</div>
</body>
</html>

一个HTML文档由四个基本部分组成:

(1).一个文档声明:<!DOCTYPE HTML>。

(2).一个html标签对:<html></html>。

(3).一个head标签对:<head></head>。

(4).一个body标签对:<body></body>。

一.文档声明:

文档声明非常重要,每一个页面都是必须的,除非有特殊的考量。

DOCTYPE声明不属于html标签,它是一条指令,用于告知浏览器,当前html文档使用何种规范书写。

HTML4.01中的doctype需要对DTD进行引用,因为HTML4.01基于SGML。

HTML5不基于SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为。

更多内容可以查阅HTML <!DOCTYPE>一章节。

当前我们推荐使用HTML5的文档声明方式:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>

二.<HTML>标签:

它是所有HTML元素的根元素,除去<!DOCTYPE HTML>,页面的其他内容都会包裹于此元素之内。

上面的代码实例也演示了这一点。

三<head>标签:

此标签内部会提供一些与浏览器解析或者搜索引擎抓取等相关的信息。

这些信息不会直接暴露给浏览者,除<title>元素规定的标题(它规定了网页的标题):

a:3:{s:3:\"pic\";s:43:\"portal/201808/29/234244tz29kebizi9zd9ed.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

<head>标签包裹其他重要标签,可以参阅本版块其他相关文章。

四.<body>标签:

它规定了网页的主体部分,我们所能看到页面内容都位于此标签之内。

body所容纳的都是与展现相关的,代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css">  
table{border-collapse:collapse;} 
td{
  background:#F2F2F2;
  border:solid 1px #CCCCCC;
  width:100px;
  height:22px;
} 
</style>  
</head>  
<body>  
<table  id="thetable"> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
</table> 
</body>  
</html>

上面代码中,body内容是一个细线表格效果的展示,当然还可以容纳其他内容这里仅仅是一个展示。

2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

上一篇:HTML fieldset元素下一篇:HTML <head>标签

最新评论

返回顶部