前端 HTML文档结构介绍

2021年11月21日 阅读数:13
这篇文章主要向大家介绍前端 HTML文档结构介绍,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

 

 

<!DOCTYPE HTML>
<html>
    <head>...</head>
    <body>...</body>
</html>

 

解释一下上面的代码:html

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

 

2.<html></html> 称为HTML根标签,全部的网页标签都在<html></html>中。编码

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

4.在<body>和</body>标签之间的内容是网页的主要内容,如<h1>、<p>、<a>、<img>等网页内容标签,在<body>标签中的内容(图中淡绿色部份内容)最终会在浏览器中显示出来。
HTML文档包含了HTML标签及文本内容,不一样的标签在浏览器上会显示出不一样的效果,因此咱们须要记住最多见的标签的特性code

 

 

<html>:开始标签  ; </html>:闭合标签,闭合标签和开始标签不一样,在于前面多了/htm

 

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>
<!-- 页面根节点结束-->