一、HTML的開發工具和使用的瀏覽器
開發工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE 描述文檔的類型
html 網頁的根元素，寫在網頁的在外面
head 網頁的頭部信息，寫在html標記的里面
body 網頁的內容，寫在html標記的里面
具體描述：
1、DOCTYPE 描述文檔的類型，規定web 瀏覽器關於頁面使用哪個 HTML 版本進行編寫的指令。
網頁可以使用的具體版本，網頁中可以使用那些標記，每個版本的DTD版本均有不同
使用例子
HTML4的例子
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML5的例子
2、<html></html> 網頁文檔中的根標記
html 標簽有三個特殊的屬性
- manifest 指定網頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
- xmlns 設置html名空間，比如把網頁設置成xhml的時候可以使用這個值。
- lang 設置網頁的描述語言，比如中文是zh；英文是en。
3、<head></head>頭部標簽在網頁中只能有一個，設置HTML文檔的頭部信息，里面內容不會在頁面中顯示出來·。
head里面的標記
- <meta> 標記
- <title>定義網頁的標題
- <link> 鏈接
- <script> 標記JavaScript腳本的內容
- <style> 標記css樣式
- meta 標記
4、<body></body>只能有一個，顯示網頁的主體內容。
代碼示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網頁標題(顯示在瀏覽器上)</title> 6 <meta name="description" content="網頁內容的簡單描述"> 7 <meta name="keywords" content="網頁關鍵詞"> 8 <link rel="/css/style.css"> 9 <script src="/js/script.js"></script> 10 </head> 11 <body> 12 <header>網頁頭部內容</header> 13 <main>網頁主要內容</main> 14 <nav>網頁的導航內容</nav> 15 <footer>網頁的頁腳內容</footer> 16 </body> 17 </html>
三、寫在<head>中的標簽
（一）、<meta>標簽
<meta>元素的屬性：
- name 描述信息的名稱，來標記這是一個什么樣的信息
- http-equiv 描述行為
- content 描述的內容
- charset 指定網頁的編碼
1、name 屬性
1 <meta name="author" content="nyw"> 2 <!--作者， 定義網頁的作者 --> 3 <meta name="description" content="meta標記學習"> 4 <!-- 描述，描述網頁的實際內容 --> 5 <meta name="keywords" content="HTML,meta"> 6 <!-- 關鍵字，定義網頁關鍵字 -->
2、http-equiv屬性
1 <meta http-equiv="refresh" content="30"> 2 <!-- 網頁30s后自動刷新 --> 3 <meta http-equiv="refresh" content="5,url=dom.html"> 4 <!-- 網頁30秒后跳轉到dom.html文檔 -->
<meta http-equiv="refresh" content="5,url=dom.html">
http-equiv描述網頁的行為，行為 refresh刷新，內容為5，表示5秒后跳轉到 dom.html這個文檔。
3、content 屬性
特殊屬性
- content-type 指定http頭部信息的文字編碼（最為常用）
- default-style 指定優先使用的樣式單（stylesheet）
- refresh 用於網頁的自動刷新或是頁面跳轉
- set-cookie 設置頁面的cookie（現在已經不再推薦使用）
4、charset屬性
指定網頁的編碼，推薦使用UTF-8來增加網頁的兼容性。
代碼實例：
為搜索引擎抓取機器人准備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網頁。
<meta name="robots" content="noindex,nofollow"> <!-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 -->
代碼實例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>網頁標題(顯示在瀏覽器上)</title> 6 <meta name="author" content="nyw"> 7 <!--作者， 定義網頁的作者 --> 8 <meta name="description" content="meta標記學習"> 9 <!-- 描述，描述網頁的實際內容 --> 10 <meta name="keywords" content="HTML,meta"> 11 <!-- 關鍵字，定義網頁關鍵字 --> 12 <meta http-equiv="refresh" content="30"> 13 <!-- 網頁30s后自動刷新 --> 14 <meta http-equiv="refresh" content="5,url=dom.html"> 15 <!-- 網頁30秒后跳轉到dom.html文檔 --> 16 <meta name="robots" content="noindex,nofollow"> 17 <!-- name定義的是機器人，內容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --> 18 </head> 19 <body> 20 </body> 21 </html>
（二）、title、base標記
title和base標記都是寫在head標簽中
title：設置網頁的標題
寫法：<title>內容</title>。
base：指定網頁跳轉基准URL，如果不指定的話默認為當前網站的當前路徑。
寫法：<base href="http://www.aaa.zzz/">
base屬性值：
- href 指定網頁跳轉到基准URL，如果不指定的話則默認為當前網站的當前路徑。
<base href="http://baidu.com/"> 這是將頁面跳轉到百度的網站打開。
- target 指定鏈接的跳轉幀如果不指定的話，則是在當前頁面中跳轉。
<base target="_blank"> 網頁中的鏈接都應該在新的窗口中打開。
terget屬性值：
- _blank 在新窗口中打開被鏈接的文檔
- _self 默認值，在相同框架中打開被鏈接的文檔
- _parent 在父框架集中
- _top 在整個窗口中打開被鏈接文檔·
- framename 在指定框架中打開被鏈接文檔
（三）、link標記
link標記：鏈接外部文件時使用的標記，可以把外部文件的內容引入到當前文件中來，使當前網頁實現更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設置全路徑並且帶文件名
rel：引用文件，引用資源的類型定義
我們在使用link標簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate 代替文檔（種子，其他語言版本，其他格式等等）
author 網頁的作者
help 幫助文件的鏈接
icon 網頁的圖標
next 如果是連續網頁的時候，指定下一個網頁
prefetch 把鏈接外部資源時提前緩存起來。
prev 如果是連續網頁
media 鏈接文件或是資源屬於哪一種資源。
hreflang 鏈接文件的語言種類
type 鏈接文件的mi/me類型（比如說，圖片圖標文本）
sizes 根據link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網頁圖標：
網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾
1 <!-- 網站的圖標指定，可以顯示在瀏覽器的圖標欄，也可以被手機讀取作為網站的圖標存入收藏夾 --> 2 <link rel="icon"> 3 <!-- 示例 --> 4 <link rel="icon" href="img/favicon.png" type="image/png"> 5 <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon"> 6 <link rel="apple-touch-icon" href="img/apple-touch-icon.png" type="image/png">
注意：后面的href和前面type標注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機上
鏈接外部樣式單
1 <link rel="stylesheet"> 2 <link rel="stylesheet" href="style1.css" media="screen"> 3 <link rel="stylesheet" href="style2.css" title="主題樣式文件"> 4 <link rel=" alternate stylesheet" href="style3.css" title="可選樣式單">
說明：
alternate 會在瀏覽器中會彈出一個對話框，供用戶可以進行選擇
media 表示媒體類型為屏幕，可以是手機，但不包括打印機和投影儀
title 對這個link進行簡單的說明
網站RSS種子指定
<!-- 網站RSS種子指定 --> <link rel="alternate" type="application/rss+xml">
為搜索引擎的准備的網頁的URL
<!-- 為搜索引擎的准備的網頁的URL --> <link rel="canonical"> <link rel="canonical" href="http://www.aaa.zzz/help.html">
告訴搜索引擎代替URL是哪里。