HTML的基础结构
<!DOCTYPE html>
<!--文档声明,即告诉浏览器使用哪个版本的HTML进行解析.-->
<html>
<!--所有代码都写在HTML元素里,所以Ta叫“顶级元素”或“根元素”.Ta只能包含head和body元素.-->
<head>
<!--用来存储元数据,即文档本身的配置信息.-->
<title>HTML的基本结构</title>
</head>
<body>
<!--用于存放页面的内容.-->
<h1>我是一级标题</h1>
<p>我是文本段落</p>
</body>
</html>
head元素的作用
head元素用于定义网页的常规信息和元数据,总得来说其里面的子元素大概分为三类,分别是:描述网页基本信息,指向渲染网页需要其他文件链接的,各大厂商根据自己需要定制的。
描述网页基本信息
- 文档标题(浏览器标签中显示的文本):<title>深入了解 head 元素</title>
- 编码格式:
<meta charset="utf-8">
- 视窗设置:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 搜索引擎优化相关内容:
<meta name="description" content=“帮助你深层次了解HTML文档结构”>
- IE浏览器版本渲染设置:
<meta http-equiv="X-UA-Compatible" content="ie=edge">
指向渲染网页需要用到其他文件的链接
- CSS 文件:
<link rel="stylesheet" type="text/css" href="style.css">
- JavaScript 文件:
<script src=“script.js"></script>
根据自己需要定制
- 比喻开启双核浏览器先河的360浏览器就定制了一个默认使用哪个内核来渲染页面,可以设置为webkit内核、IE标准,IE兼容三种模式。代码分别为:
<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->
<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->
<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->
同样分享页面到QQ的聊天窗口,有些页面直接就是一个链接,但是有些页面有标题,图片,还有文字介绍。为什么区别这么明显呢?其实就是看有没有设置下面这三个内容(具体参阅:腾讯移动WEB开发平台)
<meta itemprop="name" content="这是分享的标题"/>
<meta itemprop="image" content="http://imgcache.qq.com/qqshow/ac/v4/global/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" />
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-startup-image" href="/startup.png">
网友评论