前端 HTML文档结构介绍

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

posted @ 2019-03-16 13:51 minger_lcm 阅读(1699) 评论(0) 编辑收藏举报

刷新页面返回顶部

前端 HTML文档结构介绍

公告