<!DOCTYPE HTML>

<html>

    <head>...</head>

    <body>...</body>

</html>

解释一下上面的代码：

1.首先，<!DOCTYPE HTML>是HTML文档声明，必须写在HTML文档的第一行，位于<html>标签之前，表明该文档是HTML5文档。

2.<html></html> 称为HTML根标签，所有的网页标签都在<html></html>中。

3.<head></head> 标签用于定义文档的头部，它是所有头部元素的容器。常见的头部元素有<title>、<script>、<style>、<link>和<meta>等标签。

4.在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在<body>标签中的内容（图中淡绿色部分内容）最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容，不同的标签在浏览器上会显示出不同的效果，所以我们需要记住最常见的标签的特性。

<html>：开始标签  ; </html>：闭合标签，闭合标签和开始标签不同，在于前面多了/

html中的标签都是 闭合标签,
<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->

<!DOCTYPE html>

<!-- 页面根节点开始-->

<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合

双闭合有:<html></html>

单闭合有:<meta> 或者这样写<meta/>也可以

 -->

<html></html>

<!-- 页面根节点结束-->


闭合标签包含 双闭合和单闭合

双闭合有:<html></html>  就是有开头，有结尾

单闭合有:<meta> 或者这样写<meta/>也可以  ，只有一个标签就是单闭合标签

编写HTML，记得缩进，不然看起来很乱




<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->

<!DOCTYPE html>

<!-- 页面根节点开始-->

<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合

双闭合有:<html></html>

单闭合有:<meta> 或者这样写<meta/>也可以

 -->

<html>

    <!-- 页面字节点开始区域-->

    <head>

        <!-- 包含头部信息 是一个容器 包含 style title meta script link等标签-->

    </head>

    <body>

        <!-- 包含浏览器显示的内容标签div p a img input等标签 -->

        这是我们的文档

    </body>

    <!-- 页面字节点结束区域-->

</html>

<!-- 页面根节点结束-->






上面的代码用浏览器打开出现乱码，让浏览器显示中文

在<head>里面加上<meta>标签  ，<meta>声明头部的元信息，<meta>是单闭合标签， 可以<meta/>这样写


规定编码格式为utf-8




<!-- 声明HTML文档的类型,标记该文档为HTML5的文件-->

<!DOCTYPE html>

<!-- 页面根节点开始-->

<!-- html中的标签都是 闭合标签 闭合标签包含 双闭合和单闭合

双闭合有:<html></html>

单闭合有:<meta> 或者这样写<meta/>也可以

 -->

<html>

    <!-- 页面字节点开始区域-->

    <head>

        <!-- 声明头部的元信息，对我们HTML文档 规定编码格式-->

        <meta charset="utf-8">

        <!-- 包含头部信息 是一个容器 包含 style title meta script link等标签-->

    </head>

    <body>

        <!-- 包含浏览器显示的内容标签div p a img input等标签 -->

        这是我们的文档

    </body>

    <!-- 页面字节点结束区域-->

</html>

<!-- 页面根节点结束-->






												


											
前端 HTML文档结构介绍的更多相关文章
	

    
								
  1. Poi之Word文档结构介绍
		
    1.poi之word文档结构介绍之正文段落 一个文档包含多个段落,一个段落包含多个Runs,一个Runs包含多个Run,Run是文档的最小单元 获取所有段落:List<XWPFParagraph ...
    
		
    2. 
						
  2. Win 10 开发中Adaptive磁贴模板的XML文档结构，Win10 应用开发中自适应Toast通知的XML文档结构
		
    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...
    
		
    3. 
						
  3. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系
		
    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...
    
		
    4. 
						
  4. HTML5的文档结构
		
    HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     <header> 标签定义文档或者文档 ...
    
		
    5. 
						
  5. 4. svg学习笔记-文档结构元素和样式的使用
		
    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...
    
		
    6. 
						
  6. html 初识  文档结构  常用标签
		
    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...
    
		
    7. 
						
  7. HTML5的文档结构和新增标签
		
    一．HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...
    
		
    8. 
						
  8. Mongodb：修改文档结构后出现错误：Element '***' does not match any field or property of class ***.
		
    Mongodb:修改文档结构后出现错误:Element '***' does not match any field or property of class ***. Mongodb是一种面向文档的 ...
    
		
    9. 
						
  9. 读取XML文档结构并写入内容
		
    1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Windows下mysql重设密码
			
    Windows下的实际操作如下 .关闭正在运行的MySQL,即关闭服务. .打开DOS窗口,转到mysql\bin目录. .输入 mysqld --skip-grant-tables 回车.如果没有出 ...
    
			
    2. 
						
  2. VC调用DLL
			
    VC调用DLL   调用DLL有两种方法:静态调用和动态调用. (一).静态调用其步骤如下: 1.把你的youApp.DLL拷到你目标工程(需调用youApp.DLL的工程)的Debug目录下; 2. ...
    
			
    3. 
						
  3. 【Python3】 django2.0  url 跳转设置
			
    python: 3.6.4 django :  2.0 在创建应用时候.我是把 urls.py 分开了.所以在设置url跳转时候.要修改成如下模式 1  父 urls.py 里边要加上命名空间 2   ...
    
			
    4. 
						
  4. Makefile eval函数
			
    https://www.cnblogs.com/gaojian/archive/2012/10/04/2711494.html对 makefile 中 eval 函数的学习体会 http://blog ...
    
			
    5. 
						
  5. 面试题：应用中很多jar包，比如spring、mybatis、redis等等，各自用的日志系统各异，怎么用slf4j统一输出？（上）
			
    一.问题概述 如题所说,后端应用(非spring boot项目)通常用到了很多jar包,比如spring系列.mybatis.hibernate.各类连接数据库的客户端的jar包.可能这个jar包用的 ...
    
			
    6. 
						
  6. docker搭建gitlab、Redmine
			
    本地使用windows,setting里面切换至linux 从Docker图标的右键菜单中选中 “Switch to Linux containers ...” Docker Engine运行在Lin ...
    
			
    7. 
						
  7. 23种设计模式之命令模式（Command）
			
    命令模式是一种对象的行为型模式,类似于传统程序设计方法中的回调机制,它将一个请求封装为一个对象,从而使得可用不同的请求对客户进行参数化:对请求排队或者记录请求日志,以及支持可撤销的操作.命令模式是对命 ...
    
			
    8. 
						
  8. [工具] 护眼宝 – 傻瓜版屏幕蓝光过滤应用[Win/Android]
			
    护眼宝 是一款 Windows.Android 下的屏幕蓝光过滤工具,傻瓜式操作,支持智能模式.疲劳提醒,可以有效的保护视力及减小夜间使用电脑.手机对睡眠对影响. 来自发现频道.   类似应用有很多了 ...
    
			
    9. 
						
  9. Sql Server 统计当天数据
			
    方法一. ),日期字段名,)),) 方法二. Access: * FROM 表名 WHERE DAY(日期字段名)=DAY(NOW()) 查询当天之前一天的数据
    
			
    10. 
						
  10. SVG学习笔录（一）
			
    SVG可缩放矢量图形(Scalable Vector Graphics)这项技术,现在越来越让大家熟知,在h5的移动端应用使用也越来越广泛了, 下面让我分享给大家svg学习的经验. HTML体系中,最 ...
    
			
    11.