<!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. WINDOWS消息和窗口简介

    一.WINDOWS的消息和窗口简介:1.什么是windows在这里我就不介绍了,但是作为一个程序员我们要知道WINDOWS最重要的一个也是我们程序员常用的一个东西就是消息.窗口是以消息的形式输入的,窗 ...

  2. mysql存储过程中使用事务

    DROP PROCEDURE IF EXISTS test_sp1 CREATE PROCEDURE test_sp1( ) BEGIN ; ; START TRANSACTION; INSERT I ...

  3. cvc-complex-type.2.4.c: The matching wildcard is strict, but no declaration的解决

    导入了一个工程,编译什么的都还好,但是报了一个XML的错误. cvc-complex-type.2.4.c: The matching wildcard is strict, but no decla ...

  4. VMware Workstation 14 黑屏的一个解决办法

    近期很多朋友遇到了VMware Workstation 14开启或新建虚拟机后黑屏的现象,同时发现如果挂起虚拟机,可以显示挂起前最后的画面.显然,虚拟机核心是正常工作的,只是“显示”方面出现了问题. ...

  5. Win8交互UX——用于 Windows 的触摸交互

    用于 Windows 的触摸交互   Windows 8.1 提供一组在整个系统中使用的简单触摸交互功能.一致地应用此触摸语言可让用户对你的应用感觉已经很熟悉.通过让你的应用更容易学习和使用,可提高用 ...

  6. java基础---->数组的基础使用(二)

    这里对List(jdk 1.7)列表里面的一些方法做一些简单的分析,以避免有些函数的误用.手写瑶笺被雨淋,模糊点画费探寻,纵然灭却书中字,难灭情人一片心. List中注意的方法 一.Arrays.as ...

  7. 【线程】Volatile关键字

    Volatile变量具有 synchronized 的可见性特性,但是不具备原子特性.这就是说线程能够自动发现 volatile变量的最新值.Volatile变量可用于提供线程安全,但是只能应用于非常 ...

  8. ios-toolchain-based-on-clang-for-linux

    https://github.com/tpoechtrager/cctools-port.git https://www.embtoolkit.org

  9. 解决win764位安装pycrypto遇到unable to find vcvarsall.bat 问题

    今天安装pycrypto的库.安装中遇到一些问题,这里简单记录下来. 首先安装python,pycrypto是基于python的一个库. 第一种:搜索关键字pycrypto,找到pycrypto的官方 ...

  10. How to Use Postman to Manage and Execute Your APIs

    How to Use Postman to Manage and Execute Your APIs Postman is convenient for executing APIs because ...