文章目录

  • 1、网页结构
  • 文档类型
  • HTML的主要版本
  • html标签
  • head标签
  • body标签
  • 2、小结


1、网页结构

一张网页有<html>、<head>、<body>三大标签元素组成，如下图所示：

标准html5页面结构模版_HTML

文档类型

DOCTYPE是用来声明文档的类型，表示HTML的版本信息。在html文档的第⼀行编写。作用是告知浏览器的解析器⽤什么文档标准去解析当前⽂文档。 DOCTYPE不存在或格式不正确会导致⽂文档以怪异模式呈现。

标准html5页面结构模版_HTML_02

HTML的主要版本

标准html5页面结构模版_HTML_03


最新版html5

html5是向下兼容的，此版本文档用hbuilderx创建方法： html:5 + tab。文档示例：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	
</body>
</html>

xhtml1.0
xhtml 1.0 是html5之前的一个常用的版本，目前还有一些网站仍然使用此版本。此版本文档用hbuilderx创建方法： html:xt + tab。文档示例：

<!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" xml:lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

html5和xhtml1.0两种文档的区别
1、文档声明和编码声明
2、html5新增了标签元素以及元素属性

html标签

<html>标签是HTML页面的根元素，将所有HTML代码放入<html>标签中，该标签的结束标志为</html>。

标准html5页面结构模版_HTML_04

head标签

网页中的不可见部分放入<head>标签中。<head>标签包含了了文档的元数据(meta) ，当meta标签属性设置为utf-8的时候即可定义网页编码格式为utf-8， title标签即定义文档标题。 具体设置如下：

标准html5页面结构模版_HTML_05


该标签的结束标志为</head>。

body标签

<body>标签定义文档主体，即网页可见的内容，将所有显示在网页中的内容放入<body>标签中，该标签的结束标志为</body>

标准html5页面结构模版_标准html5页面结构模版_06

2、小结

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>网页标题</title>
</head>
<body>
	网页显示内容
</body>
</html>

第一行是文档声明，第二行“”标签和最后一行“”定义html文档的整体，“”标签中的‘lang=“zh”’定义网页的语言为中文，不定义也没什么影响，它一般作为分析统计用。 “”标签和“”标签是它的第一层子元素，“”标签里面负责对网页进行一些设置以及定义标题，设置包括定义网页的编码格式，外链css样式文件和javascript文件等，设置的内容不会显示在网页上，标题的内容会显示在标题栏，“”内编写网页上显示的内容。