文章編輯時間：2018-06-12
1. HTML結(jié)構(gòu)
一個最基本的HTML結(jié)構(gòu)代碼
<!DOCTYPE html> //文檔申明(告訴瀏覽器使用哪個HTML版本進(jìn)行解析)，不是HTML元素哦??
<html> //HTML元素--頂級元素或者根元素（只能包含head和body元素）
<head> // head元素 （頁面的通用信息都放在head元素之中--也稱為元數(shù)據(jù)）用來描述html文檔本身的信息
<title>基本HTML結(jié)構(gòu)</title>
</head>
<body> // body元素用來存放頁面的內(nèi)容
<h1>H1是一級標(biāo)題</h1>
<p>p是一段文本段落</p>
</body>
</html>
這段代碼點(diǎn)擊這里可查看代碼在瀏覽器中呈現(xiàn)的效果如下截圖：codepen了解一下
基本HTML結(jié)構(gòu)
2. 深入了解head
head元素用于定義網(wǎng)頁的常規(guī)信息和元數(shù)據(jù)蒜田，在網(wǎng)頁中不可見，但很重要
<head>元素三大重要功能
1.描述網(wǎng)頁的基本信息
<meta charset="utf-8">//網(wǎng)頁的編碼格式
<meta http-equiv="X-UA-Compatible" content="ie=edge">//IE瀏覽器版本渲染設(shè)置(網(wǎng)頁的兼容性問題--指定IE的版本)
<title>標(biāo)題</title>//網(wǎng)頁標(biāo)簽顯示的標(biāo)題
<meta name="viewport" content="width=device-width, initial-scale=1">//視窗設(shè)置
<meta name="keyWords" content=" head元素">
<meta name="description" content="深入了解head元素">//搜索引擎優(yōu)化相關(guān)內(nèi)容
2.指向渲染網(wǎng)頁需要其它文件鏈接
<link rel="shortcut icon" href="favicon.ico">//網(wǎng)頁選項(xiàng)卡圖標(biāo)
<link rel="stylesheet" href="style.css">
<script src="app.js"> </script>
3.各大廠商根據(jù)自己需要定制
<!-- 360 瀏覽器 -->
<meta name="renderer" content="webkit"> <!-- 默認(rèn)webkit內(nèi)核 -->
<meta name="renderer" content="ie-stand"> <!-- 默認(rèn)IE標(biāo)準(zhǔn)模式 -->
<meta name="renderer" content="ie-comp"> <!-- 默認(rèn)IE兼容模式 -->
<!-- QQ 分享 -->
<meta itemprop="name" content="這是分享的標(biāo)題"/>
<meta itemprop="name" content="logo.png" />
<meta name="description" itemprop="description" content="這是要分享的內(nèi)容" />
<!-- iOS -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
你要的資料在這里哦
參考資料傳送門??請進(jìn)門
上一章節(jié)：WEB的歷史
下一章節(jié)： HTML元素族展、注釋缎脾、屬性悬垃、常用基本元素
