<!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. Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构

    分享两篇Win 10应用开发的XML文档结构:Win 10 开发中Adaptive磁贴模板的XML文档结构,Win10 应用开发中自适应Toast通知的XML文档结构. Win 10 开发中Adapt ...

  3. MongoDB学习笔记(四) 用MongoDB的文档结构描述数据关系

    MongoDB的集合(collection)可以看做关系型数据库的表,文档对象(document)可以看做关系型数据库的一条记录.但两者并不完全对等.表的结构是固定的,MongoDB集合并没有这个约束 ...

  4. HTML5的文档结构

    HTML5的文档结构 HTML5简化了许多,它的设计遵循了3个原则:1.兼容性.2.实用性.3.通用访问性     1. header 元素     <header> 标签定义文档或者文档 ...

  5. 4. svg学习笔记-文档结构元素和样式的使用

    svg除了绘图元素之外还有一部分是专门用于文档结构的,这类元素有<g>,<use>,<defs>,<symbol>等 <g>元素 如果我们仅 ...

  6. html 初识 文档结构 常用标签

    HTML初识 △HTML: 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言,没有逻辑 本质上是浏览器可识别的规则 我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一 ...

  7. HTML5的文档结构和新增标签

    一.HTML5 文档结构1.第一步:打开 开发工具,打开指定文件夹:2.第二步:保存 index.html 文件到磁盘中,.html 是网页后缀:3.第三步:开始编写 HTML5 的基本格式.< ...

  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. 读取XML文档结构并写入内容

    1.在项目中新建XML文档结构.xsd文件,在其中添加相应的节点. 2.读取文档结构并写入内容 string initFileName = @"D:\Config.xml"; Da ...

随机推荐

  1. python--Anaconda学习笔记

    http://study.163.com/course/courseLearn.htm?courseId=1003664056#/learn/video?lessonId=1048567028& ...

  2. Ubuntu下安装MySQL及简单操作

    Ubuntu上安装MySQL非常简单只需要几条命令就可以完成. 1. sudo apt-get install mysql-server 2. apt-get isntall mysql-client ...

  3. 【delphi】Delphi过程、函数传递参数的八种方式

    Delphi过程函数传递参数的八种方式

  4. 使用node中的iconv-lite实现对“gbk”格式的转码

    在window中,gbk和utf-8是最常见的两种格式,但是我们在显示的时候往往需要将GBK转换为UTF-8,我现在有一个同步读取文件的操作: const fs = require('fs'); co ...

  5. Apache HTTP Server 与 Tomcat 的三种连接方式介绍

    本文转载自IBM developer 首先我们先介绍一下为什么要让 Apache 与 Tomcat 之间进行连接.事实上 Tomcat 本身已经提供了 HTTP 服务,该服务默认的端口是 8080,装 ...

  6. 【面试题】Java EE面试题

    第一部分:Servlet/JSP快速入门 1.      请列举至少6种javaEE技术,并简述其作用. 解析: javaEE是一系列的技术,主要包扩13种.对于开发人员来说,了解几种主要的技术是非常 ...

  7. Ubuntu16.04安装Mono、MonoDevelop运行C#代码

    Ubuntu16.04安装MonoDevelop运行C#代码 在Ubuntu上安装Mono 运行下面代码授权注册repo源并更新软件列表: Add the Mono repository to you ...

  8. Ubuntu 16.04 LAMP server tutorial with Apache 2.4, PHP 7 and MariaDB (instead of MySQL)

    https://www.howtoforge.com/tutorial/install-apache-with-php-and-mysql-on-ubuntu-16-04-lamp/ This tut ...

  9. SpringMVC温故知新

    1. SpringMVC流程简记 (1) 用户发送请求至前端控制器DispatcherServlet (2) DispatcherServlet收到请求调用HandlerMapping处理器映射器 ( ...

  10. Python安装模块出错(No module named setuptools)解决方法

    Python第三方模块中一般会自带setup.py文件,在Windows环境下,我们只需要在命令行中使用以下命令即可自动化安装 python setup.py install 安装的过程中有可能会出现 ...