1. HTML结构

一个最基本的HTML结构代码

 <!DOCTYPE html> //文档申明(告诉浏览器使用哪个HTML版本进行解析)，不是HTML元素哦😯
 <html> //HTML元素--顶级元素或者根元素（只能包含head和body元素）
 <head> // head元素 （页面的通用信息都放在head元素之中--也称为元数据）用来描述html文档本身的信息
   <title>基本HTML结构</title>
 </head>
 <body>  // body元素用来存放页面的内容
   <h1>H1是一级标题</h1>
   <p>p是一段文本段落</p>
 </body>
 </html>

这段代码点击这里可查看代码在浏览器中呈现的效果如下截图：codepen了解一下

基本HTML结构

2. 深入了解head

head元素用于定义网页的常规信息和元数据，在网页中不可见，但很重要

 <head>元素三大重要功能
 1.描述网页的基本信息
    <meta charset="utf-8">//网页的编码格式
    <meta http-equiv="X-UA-Compatible" content="ie=edge">//IE浏览器版本渲染设置(网页的兼容性问题--指定IE的版本)
    <title>标题</title>//网页标签显示的标题
    <meta name="viewport" content="width=device-width, initial-scale=1">//视窗设置
    <meta name="keyWords" content=" head元素">
    <meta name="description" content="深入了解head元素">//搜索引擎优化相关内容
 2.指向渲染网页需要其它文件链接
    <link rel="shortcut icon" href="favicon.ico">//网页选项卡图标
    <link rel="stylesheet" href="style.css"> 
    <script src="app.js"> </script>
 3.各大厂商根据自己需要定制
    <!-- 360 浏览器 -->
    <meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->     
    <meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
    <meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
    <!-- QQ 分享 -->
    <meta itemprop="name" content="这是分享的标题"/>
    <meta itemprop="name" content="logo.png" />
    <meta name="description" itemprop="description" content="这是要分享的内容" />
    <!-- iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />