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


  • 相关阅读:
    启动redis时报错:FATAL CONFIG FILE ERROR :Bad directive or wrong number of arguments
    转载Redis的三个框架:Jedis,Redisson,Lettuce
    转载Dubbo详解(一):Dubbo介绍和SpringBoot整合Dubbo+ZooKeeper
    Redisson如何实现类似incr的自增操作
    转载解决 com.alibaba.fastjson.JSONException: autoType is not support.
    转载springboot+mybatis实现数据库的读写分离
    转载dubbo服务被重复调用三次的原因
    js中实现函数防抖跟函数节流
    网站项目后台的目录命名为admin后,网页莫名其妙的变样了
    createreactapp不支持less的解决方式
  • 原文地址:https://www.cnblogs.com/mingerlcm/p/10534650.html
Copyright © 2020-2023  润新知