第三课--认识HTML、深入了解head元素
2018-06-12 本文已影响0人
简书Boss
文章编辑时间：2018-06-12
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" />
你要的资料在这里哦
参考资料传送门🚪请进门
上一章节：WEB的历史
下一章节： HTML元素、注释、属性、常用基本元素
