什麼是網頁？
網站是指網際網路上根據一定的規則，使用HTML等制作的用于展示特定内容相關的網頁集合，而網頁是網站中的一頁，通常是HTML格式的檔案，它可以通過浏覽器來閱讀
網頁的組成
網頁是構成網站的基本元素，它通常由圖檔，連結，文字，聲音，視訊等元素組成。通常我們看到的網頁，常見以 .html 或 .htm 字尾結尾的檔案，是以将其稱為HTML檔案
什麼是HTML：
1.HTML指的是超文本标記語言（Hyper Text Markup Language），它用來描述網頁的一種語言
2.HTML不是一種程式設計語言，而是一種标記語言（markup language）标記語言是一套标記标簽（Markup tag）
網頁的總結：
1.網頁是圖檔，連結，文字和聲音等元素組成，其實就是一個html檔案（字尾名為html）
2.網頁生成制作：有前端人員書寫HTML檔案，然後打開浏覽器，就能看見網頁
3.HTML：超文本标記語言，用來制作網頁的一門語言，是有許多标簽組成的，比如圖檔标簽，連結标簽，視訊标簽等
常用的浏覽器：
IE 火狐 谷歌 蘋果 歐朋
浏覽器的作用
浏覽器是網頁顯示，運作的平台，常用的浏覽器 IE 火狐（Firefox） 谷歌（Google）Safari 和Opera 平時稱為五大浏覽器
IE Trident ie 獵豹安全 360極速 百度
Firefox Gecko 火狐浏覽器核心
Safari Webkit 蘋果浏覽器核心
Chrome/Opera Blink chrome/opera浏覽器核心 blink是weblit的分支
目前國内一般浏覽器都會采用weblit/blink核心 如360，uc，qq，搜狗等
web标準是由w3c組織和其他标準化組織制定的一系列标準的集合。w3c（網際網路聯盟）是最著名的标準化組織
遵循web标準的好處？
1.讓不同開發人員寫出頁面更标準，更統一
2.讓web的發展前景更廣闊
3.更容易被搜尋引擎搜尋
4.内容能被更廣泛的裝置通路
5.降低網站流量浪費
6.使網站更易于維護
7.提高頁面浏覽速度
web标準的構成？
主要分為三個方面 結構（structure）表現（presentation）和 行為（behavior）
結構：結構用于對網頁元素進行整理和分類，現階段主要學的是HTML
表現：表現用于設定網頁元素的版式，顔色，大小等外觀樣式，主要指的是css
行為：行為是指網頁模型的定義及互動的編寫，現階段主要學的是JavaScript
w3c标準的提出最佳體驗方案：structure presentation behavior
簡單了解：結構寫到HTML檔案中，表現寫到css檔案中 行為寫到JavaScript中 結構是身體 表現是外觀裝飾 行為是動作
HTML文法規則：
1.HTML标簽是由尖括号包括的關鍵字，例如<html>。
2.标簽通常是成對出現的，例如<html></html> 我們稱為雙标簽。
3.前一個标簽标示開始 /标簽标示結束标簽
4.少部分特殊标簽是單标簽 如：<br/> 我們稱為單标簽
标簽的關系： 雙标簽關系可以分為兩類：包含關系和并列關系
包含标簽：
<head> 可以了解為父子關系 head是父 title是子
<title></title>
</head>
包含标簽：
<head></head> 可以了解為兄弟關系
<body></head>
每個網頁都會有一個基本的結構标簽（也稱為骨架标簽）。頁面内容也是在這些基本标簽上書寫
<html></html> html标簽 頁面中最大的标簽，我們稱為 根标簽
<head></head> 文檔的頭部 注意在head标簽中我們必須要設定title标簽 title是标題标簽
<title></title> 文檔的标題 讓頁面擁有一個屬于自己的網頁标題 包含在head的内部
<body></body> 文檔的主體 元素包含文檔的所有内容，頁面的内容基本都是放在body當中
開發工具
VScode webstorm hbuilder 等
VScode的基本使用：
1.打開軟體 2.建立檔案 ctrl + n 3.儲存ctrl +s 注意要儲存為.html檔案
4.ctrl + 加号鍵 /減号鍵 可以放大或縮小視圖 5.生成頁面的骨架 輸入英文! 按下tab。
6.利用插件在浏覽器中預覽頁面，單機滑鼠右鍵，選中"Open In Default Browser"
html骨架分析：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
1.DOCTYPE
<!DOCTYPE html>
文檔類型聲明标簽，告訴浏覽器這個頁面采取html5版本顯示頁面
2.lang 語言種類
是用來定義目前文檔顯示的語言 en定義語言為英文 zh-CN定義語言為中文
簡單來說，定義en 就是英文網頁 ，定義zh-CN就是中文網頁
其實對于文檔顯示來說，定義成en也是可以顯示中文，反之也一樣 該屬性對浏覽器和搜尋引擎有作用
3.字元集
character set 是多個字元的集合 以便計算機能夠識别和存儲各種文字
在<head>标簽裡面，可以通過<meta>标簽
的charset屬性來規定HTML文檔應該使用哪種字元編碼。
charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字元.
語義化标簽：
學習标簽是有技巧的，重點是記住每個标簽的語義，簡單了解就是名額簽的含義，這個标簽是幹嘛用的
什麼是語義化标簽？
根據标簽的語義，在核實的地方給一個最為合适的标簽，可以讓頁面結構更清晰。
常用的标簽：
标題标簽<h1>-<h6> 為了使網頁更具有語義化，我們經常會在網頁中用到标題标簽 HTML提供了6個等級的網頁标簽 <h1>到<h6>
具體實作：
<h1> 我是一級标題 </h1>
特點：
1.加了标題的文字會變的加粗，字号也會依次變大。
2. 一個标題獨占一行。
來！！！左邊。。。右邊。。。中間：
<h1>标題一共六級選,</h1>
<h2>文字加粗一行顯。</h2>
<h3>由大到小依次減，</h3>
<h4>從重到輕随之變。</h4>
<h5>文法規範書寫後，</h5>
<h6>具體效果重新整理見。</h6>
段落标簽：
在 HTML 标簽中，<p>标簽用于定義段落，它可以将整個網頁分為若幹個段落。
具體實作：
<p> 我是一個段落标簽 </p>
特點：
1. 文本在一個段落中會根據浏覽器視窗的大小自動換行。
2. 段落和段落之間保有空隙。
換行标簽：在 HTML 中，一個段落中的文字會從左到右依次排列，直到浏覽器視窗的右端，然後才自動換行。如果希望某段文本強制換行顯示，就需要使用換行标簽 br
具體實作：
<br />
特點：
1. <br /> 是個單标簽。
2. <br /> 标簽隻是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
文本格式化标簽：
在網頁中，有時需要為文字設定粗體、斜體 或下劃線等效果，這時就需要用到 HTML 中的文本格式化标簽，使文字以特殊的方式顯示。
加粗 <strong></strong> 使得文本被加粗
傾斜 <em></em> 或 <i></i> 使得文本被傾斜
删除線 <del></del> 或 <s></s> 使得文本有删除線
下劃線 <ins></ins> 或 <u></u> 使得文本存在下劃線
div标簽和span标簽
是沒有語義的，它們就是一個盒子，用來裝内容的。
具體實作：
<div> 這是頭部 </div>
<span> 今日價格 </span>
特點：
1. <div> 标簽用來布局，但是現在一行隻能放一個<div>。 大盒子
2. <span> 标簽用來布局，一行上可以多個 <span>。小盒子
圖檔标簽：
在 HTML 标簽中，<img> 标簽用于定義 HTML 頁面中的圖像。
具體實作：
<img src="圖像URL" />
解釋：
src 是<img>标簽的必須屬性，它用于指定圖像檔案的路徑和檔案名。
所謂屬性：簡單了解就是屬于這個圖像标簽的特性。
圖檔标簽的其他屬性：
src 圖檔路徑 必須屬性
alt 文本 替換文本，圖檔不能顯示的文字
title 文本 提示文本，滑鼠放到圖像上，顯示的文字
width 像素 設定圖檔的寬度
height 像素 設定圖檔的高度
border 像素 設定圖檔的邊框粗細
圖像标簽注意點：
1.圖像标簽可以擁有多個屬性，必須寫在标簽名img的後面。
2.屬性之間不分先後順序，标簽名與屬性、屬性與屬性之間均以空格分開。
3.屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。
路徑：
分為相對路徑和絕對路徑：
路徑之相對路徑
相對路徑：以引用檔案所在位置為參考基礎，而建立出的目錄路徑。
這裡簡單來說，圖檔相對于 HTML 頁面的位置
舉例： 同級路徑 <img src="baidu.gif"/>
下一級路徑 <img src="images/baidu.gif"/>
上一級路徑 <img src="../baidu.gif"/>
特點：
相對路徑是從代碼所在的這個檔案出發，去尋找目标檔案的，而我們這裡所說的上一級 、下一級和同一級就是 圖檔相對于 HTML 頁面的位置。
路徑之絕對路徑：
絕對路徑：
1.是指目錄下的絕對位置，直接到達目标位置，通常是從盤符開始的路徑。
例如，“D:\web\img\logo.gif”或完整的網絡位址“http://www.itcast.cn/images/logo.gif”
連結标簽：
連結的文法格式
<a href="跳轉目标" target="目标視窗的彈出方式"> 文本或圖像 </a>
屬性：
1.href：用于指定連結目标的url位址
2.target:用于指定連結頁面的打開方式_self預設值 _blank新視窗打開
3.#：空連結
連結分類：
1.外部連結：例如
<a href="http://www.baidu.com" target="_blank" rel="external nofollow" >百度</a>
2.内部連結：網站内部頁面之間的互相連結，直接連結内部頁面名稱即可，例如
<a href="index.html" target="_blank" rel="external nofollow" >首頁</a>
3.空連結：如果當時沒有确定連結目标時，可以把href指定為# 如：
<a href="#" target="_blank" rel="external nofollow" >百度</a>
4.下載下傳連結：如果href裡面位址是一個檔案或壓縮包，會下載下傳這個檔案。
5.網頁元素連結：在網頁中的各種網頁元素，如文本，圖像，表格，音頻，視訊等都可以添加超連結
6.錨點連結：點外賣點選連結，可以快速定位到頁面中的某個位置
注解:
如果需要在 HTML 文檔中添加一些便于閱讀和了解但又不需要顯示在頁面中的注釋文字，就需要使用注釋标簽。
HTML中的注釋以“
<!--”開頭，以“ -->
”結束。
具體實作：
<!-- 注釋語句 -->
快捷鍵: ctrl + /
一句話: 注釋标簽裡面的内容是給程式猿看的, 這個代碼是不執行不顯示到頁面中的.
添加注釋是為了更好地解釋代碼的功能，便于相關開發人員了解和閱讀代碼，程式是不會執行注釋内容的
常用特殊符号：空格符  
大于号 < 小于号 >
第一天 複習基礎 沖沖沖
![門戶通專訪草根站長九天狼：做站貴在堅持[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)