1、新建一個文件夾，用來存放網(wǎng)頁文件和圖片，快捷鍵ctrl+shift+n。
創(chuàng)新互聯(lián)建站從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項目網(wǎng)站設(shè)計、做網(wǎng)站網(wǎng)站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元沁源做網(wǎng)站,已為上家服務(wù),為沁源各地企業(yè)和個人服務(wù),聯(lián)系電話:028-86922220
2、進(jìn)入新建文件夾里面，右鍵新建文本文檔。
3、進(jìn)入新建的文本文檔，復(fù)制下方代碼，點擊快捷鍵ctrl+s保存后退出。
!DOCTYPE html
html
head
meta charset="UTF-8"
title/title
style type="text/css"
body{margin: 0 auto;color:#F6F6F6;}
/*注：t1的寬度是100%跟其他div的寬度不同，如果分辨率高于1100寬度的時候，t1會突出來，這是你原先代碼的。*/
/*position:fixed;這個fixed屬性為塊狀，他跟absolute一樣，不會獨占一行。z-index: 2;屬性就是讓他顯示在其他div的上層*/
.t1{position:fixed; width:100%; height:50px; background: #000000;z-index: 2;}
.t2{width:1100px;height:100px;background:#2266FF;}
.t3{width:1100px;height:100px;background:#5577FF;}
.t4{width:1100px;height:100px;background:#3344FF;}
.t5{width:1100px;height:100px;background:#5577FF;}
.t6{width:1100px;height:100px;background:#3344FF;}
/*t01的position: relative;這個是獨占一行的屬性，在這里相當(dāng)于占位符的作用。height: 50px;這里的50像素高度要等于t1的高度。background:none;背景設(shè)置成空白或者透明，這里設(shè)不設(shè)置都沒關(guān)系，因為他沒有加z-index這個屬性，他默認(rèn)的屬性為0，即顯示在t1圖層的下面*/
.t01{position: relative;height: 50px;background:none;}
/style
/head
body
div class="t1"T1這是希望固定不動的DIV/div
div class="t01"/div
div class="t2"T2/div
div class="t3"T3/div
div class="t4"T4/div
div class="t5"T5/div
div class="t6"T6/div
/body
/html
4、重命名新建文本文檔為index.html，原先的.txt的后綴同時去掉后保存，提示確實要更改后按“是”即可。
5、點擊index.html，右鍵瀏覽器打開預(yù)覽效果，打開后即可得到如下效果。
一、HTML的開發(fā)工具和使用的瀏覽器
開發(fā)工具：記事本等文本編輯器，Atom、VisualStudioCode( VSCode)、Brackets、Sublime text和Hbuider。
瀏覽器：Chrome、Firefox、IE、Safari、IPhone、Android。
二、HTML的基本要素
DOCTYPE? 描述文檔的類型
html? ? ?網(wǎng)頁的根元素，寫在網(wǎng)頁的在外面
head??? 網(wǎng)頁的頭部信息，寫在html標(biāo)記的里面
body? ? 網(wǎng)頁的內(nèi)容，寫在html標(biāo)記的里面
具體描述：
1、DOCTYPE? 描述文檔的類型，規(guī)定web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進(jìn)行編寫的指令。
網(wǎng)頁可以使用的具體版本，網(wǎng)頁中可以使用那些標(biāo)記，每個版本的DTD版本均有不同
使用例子
HTML4的例子
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
HTML5的例子
2、html/html?網(wǎng)頁文檔中的根標(biāo)記
html 標(biāo)簽有三個特殊的屬性
manifest? ?指定網(wǎng)頁緩存文件，可以讓用戶離線的時候也可以訪問文件。
xmlns? ?設(shè)置html名空間，比如把網(wǎng)頁設(shè)置成xhml的時候可以使用這個值。
lang? ?設(shè)置網(wǎng)頁的描述語言，比如中文是zh；英文是en。
3、head/head頭部標(biāo)簽在網(wǎng)頁中只能有一個，設(shè)置HTML文檔的頭部信息，里面內(nèi)容不會在頁面中顯示出來·。
head里面的標(biāo)記
meta 標(biāo)記
title定義網(wǎng)頁的標(biāo)題
link 鏈接
script? 標(biāo)記JavaScript腳本的內(nèi)容
style? 標(biāo)記css樣式
meta? 標(biāo)記
4、body/body只能有一個，顯示網(wǎng)頁的主體內(nèi)容。
代碼示例：
請點擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="description" content="網(wǎng)頁內(nèi)容的簡單描述" 7 ? ? meta name="keywords" content="網(wǎng)頁關(guān)鍵詞" 8 ? ? link rel="/css/style.css" 9 ? ? script src="/js/script.js"/script10 /head11 body12 ? ? header網(wǎng)頁頭部內(nèi)容/header13 ? ? main網(wǎng)頁主要內(nèi)容/main14 ? ? nav網(wǎng)頁的導(dǎo)航內(nèi)容/nav15 ? ? footer網(wǎng)頁的頁腳內(nèi)容/footer16 /body17 /html
請點擊輸入圖片描述
請點擊輸入圖片描述
三、寫在head中的標(biāo)簽
（一）、meta標(biāo)簽
meta元素的屬性：
name?描述信息的名稱，來標(biāo)記這是一個什么樣的信息
http-equiv? 描述行為
content? 描述的內(nèi)容
charset? ?指定網(wǎng)頁的編碼
1、name 屬性
1 meta name="author" content="nyw"2 ? ? !--作者， 定義網(wǎng)頁的作者 --3 meta name="description" content="meta標(biāo)記學(xué)習(xí)"4 ? ? !-- 描述，描述網(wǎng)頁的實際內(nèi)容 --5 meta name="keywords" content="HTML,meta"6 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --
2、http-equiv屬性
1 meta http-equiv="refresh" content="30"2 ? ? !-- 網(wǎng)頁30s后自動刷新 --3 meta http-equiv="refresh" content="5,url=dom.html"4 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --
meta http-equiv="refresh" content="5,url=dom.html"
http-equiv描述網(wǎng)頁的行為，行為 refresh刷新，內(nèi)容為5，表示5秒后跳轉(zhuǎn)到 dom.html這個文檔。
3、content 屬性
特殊屬性
content-type???指定http頭部信息的文字編碼（最為常用）
default-style? ?指定優(yōu)先使用的樣式單（stylesheet）
refresh? ? 用于網(wǎng)頁的自動刷新或是頁面跳轉(zhuǎn)
set-cookie???設(shè)置頁面的cookie（現(xiàn)在已經(jīng)不再推薦使用）
4、charset屬性
指定網(wǎng)頁的編碼，推薦使用UTF-8來增加網(wǎng)頁的兼容性。
代碼實例：
為搜索引擎抓取機(jī)器人準(zhǔn)備一些信息
這段代碼可以禁止搜索引擎緩存和跟蹤網(wǎng)頁。
meta name="robots" content="noindex,nofollow"
!-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --
代碼實例：
請點擊輸入圖片描述
1 !DOCTYPE html 2 html lang="en" 3 head 4 ? ? meta charset="UTF-8" 5 ? ? title網(wǎng)頁標(biāo)題(顯示在瀏覽器上)/title 6 ? ? meta name="author" content="nyw" 7 ? ? !--作者， 定義網(wǎng)頁的作者 -- 8 ? ? meta name="description" content="meta標(biāo)記學(xué)習(xí)" 9 ? ? !-- 描述，描述網(wǎng)頁的實際內(nèi)容 --10 ? ? meta name="keywords" content="HTML,meta"11 ? ? !-- 關(guān)鍵字，定義網(wǎng)頁關(guān)鍵字 --12 ? ? meta http-equiv="refresh" content="30"13 ? ? !-- 網(wǎng)頁30s后自動刷新 --14 ? ? meta http-equiv="refresh" content="5,url=dom.html"15 ? ? !-- 網(wǎng)頁30秒后跳轉(zhuǎn)到dom.html文檔 --16 ? ? meta name="robots" content="noindex,nofollow"17 ? ? !-- name定義的是機(jī)器人，內(nèi)容部分表示不要被搜索引擎緩存，也不要被搜索引擎跟蹤 --18 /head19 body20 /body21 /html
請點擊輸入圖片描述
（二）、title、base標(biāo)記
title和base標(biāo)記都是寫在head標(biāo)簽中
title：設(shè)置網(wǎng)頁的標(biāo)題
寫法：title內(nèi)容/title。
base：指定網(wǎng)頁跳轉(zhuǎn)基準(zhǔn)URL，如果不指定的話默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
寫法：base href=""
base屬性值：
href? 指定網(wǎng)頁跳轉(zhuǎn)到基準(zhǔn)URL，如果不指定的話則默認(rèn)為當(dāng)前網(wǎng)站的當(dāng)前路徑。
base href=""??這是將頁面跳轉(zhuǎn)到百度的網(wǎng)站打開。
target? 指定鏈接的跳轉(zhuǎn)幀如果不指定的話，則是在當(dāng)前頁面中跳轉(zhuǎn)。
base target="_blank"?網(wǎng)頁中的鏈接都應(yīng)該在新的窗口中打開。
terget屬性值：
_blank? 在新窗口中打開被鏈接的文檔
_self? ?默認(rèn)值，在相同框架中打開被鏈接的文檔
_parent? ?在父框架集中
_top? ?在整個窗口中打開被鏈接文檔·
framename? ?在指定框架中打開被鏈接文檔
（三）、link標(biāo)記
link標(biāo)記：鏈接外部文件時使用的標(biāo)記，可以把外部文件的內(nèi)容引入到當(dāng)前文件中來，使當(dāng)前網(wǎng)頁實現(xiàn)更多的功能。
link屬性：
href：指定鏈接外部路徑的路徑和文件名，要設(shè)置全路徑并且?guī)募?/p>
rel：引用文件，引用資源的類型定義
我們在使用link標(biāo)簽引用外部文件的時候，外部文件的類型是多種多樣的。
alternate? ?代替文檔（種子，其他語言版本，其他格式等等）
author? ?網(wǎng)頁的作者
help? 幫助文件的鏈接
icon? 網(wǎng)頁的圖標(biāo)
next? 如果是連續(xù)網(wǎng)頁的時候，指定下一個網(wǎng)頁
prefetch? ?把鏈接外部資源時提前緩存起來。
prev? ?如果是連續(xù)網(wǎng)頁
media? 鏈接文件或是資源屬于哪一種資源。
hreflang? ?鏈接文件的語言種類
type? 鏈接文件的mi/me類型（比如說，圖片圖標(biāo)文本）
sizes? 根據(jù)link鏈接文件的類型，來指定文件的大小
代碼示例：
鏈接網(wǎng)頁圖標(biāo)：
網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾
1 !-- 網(wǎng)站的圖標(biāo)指定，可以顯示在瀏覽器的圖標(biāo)欄，也可以被手機(jī)讀取作為網(wǎng)站的圖標(biāo)存入收藏夾 --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標(biāo)注的類型要一致，這樣既可以顯示在瀏覽器，又可以顯示在手機(jī)上
鏈接外部樣式單
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 會在瀏覽器中會彈出一個對話框，供用戶可以進(jìn)行選擇
media? 表示媒體類型為屏幕，可以是手機(jī)，但不包括打印機(jī)和投影儀
title? 對這個link進(jìn)行簡單的說明
網(wǎng)站RSS種子指定
!-- 網(wǎng)站RSS種子指定 --
link rel="alternate" type="application/rss+xml"
為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL
!-- 為搜索引擎的準(zhǔn)備的網(wǎng)頁的URL --
link rel="canonical"
link rel="canonical" href=""
在很多情況下都需要實現(xiàn)兩個div的重疊（包含層級關(guān)系），實現(xiàn)的方法也和div中屬性設(shè)置的不同也是不一樣的，尤其是 position 和 display 的變化.
但是總體上就是對margin（ 盒模型 ）和top（ 定位 ）等的運用。margin是屬于盒模型中的一部分，修改了margin，就是修改了div元素的大小，但是修改了定位，只是修改了 自己本身的位置 ，不修改元素占用的大小，也不會干擾其他元素的位置。
1. 但是依靠margin來重疊有很大的 局限性 ，圖片如下：
這是設(shè)置了 黃色div塊的margin-top 才實現(xiàn)的，你也可以設(shè)置 藍(lán)色div的margin-bottom。 如果你設(shè)置黃色div的margin-bottom就不能實現(xiàn)重疊的效果。
2. 當(dāng)兩個div的position為 relative 時，可以同時使用盒模型和定位來實現(xiàn)重疊。使用定位來選擇位置時，優(yōu)先級為topbottom，leftright，優(yōu)先級高的會屏蔽低的。
3. 當(dāng)兩個div的position為 absolute 時，那么父元素必須設(shè)置一個 定位 屬性（不能為默認(rèn)的static），這樣子div才能相對于父div布局。
a href="#Bot"Bottom/a 要點擊的地方寫這個。
a name="Bot" 在網(wǎng)頁內(nèi)容靠底部的目的地寫這個。
就可以轉(zhuǎn)向啦。
重慶分公司
重慶分公司
