HTML第一天
我們接下來是進(jìn)行的網(wǎng)頁開發(fā)網(wǎng)頁的相關(guān)概念:
- 什么是網(wǎng)頁?
- 什么是HTML?
- 網(wǎng)頁的形成?
什么是網(wǎng)頁：
1.網(wǎng)站是指在因特網(wǎng)上根據(jù)一定的規(guī)則，使用 HTML 等制作的用于展示特定內(nèi)容相關(guān)的網(wǎng)頁集合。
2.網(wǎng)頁是網(wǎng)站中的一“頁”，通常是 HTML 格式的文件，它要通過瀏覽器來閱讀。
網(wǎng)頁的組成：
1.網(wǎng)頁是構(gòu)成網(wǎng)站的基本元素，它通常由圖片、鏈接、文字、聲音、視頻等元素組成。通常我們看到的網(wǎng)頁，常見以 .htm 或 .html 后綴結(jié)尾的文件，因此將其俗稱為 HTML 文件。
什么是HTML：
1.HTML 指的是超文本標(biāo)記語言 (Hyper Text Markup Language) ，它是用來描述網(wǎng)頁的一種語言。
2.HTML 不是一種編程語言，而是一種標(biāo)記語言 (markup language)。
標(biāo)記語言是一套標(biāo)記標(biāo)簽 (markup tag)。
網(wǎng)頁的總結(jié)：
1.網(wǎng)頁是圖片、鏈接、文字、聲音、視頻等元素組成, 其實就是一個html文件(后綴名為html)
2.網(wǎng)頁生成制作: 有前端人員書寫 HTML 文件, 然后瀏覽器打開,就能看到了網(wǎng)頁.
3.HTML: 超文本標(biāo)記語言, 用來制作網(wǎng)頁的一門語言. 有標(biāo)簽組成的. 比如 圖片標(biāo)簽 鏈接標(biāo)簽 視頻標(biāo)簽等…
瀏覽器：
常用的瀏覽器
- IE
- 火狐
- 谷歌
- 蘋果
- 歐朋
- 瀏覽器是網(wǎng)頁顯示、運行的平臺。常用的瀏覽器有 IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。平時稱為五大瀏覽器。
- 查看瀏覽器市場份額：http://#baidu.com/data/browser
瀏覽器內(nèi)核（渲染引擎）
- 負(fù)責(zé)讀取網(wǎng)頁內(nèi)容，整理訊息，計算網(wǎng)頁的顯示方式并顯示頁面
- 目前國內(nèi)一般瀏覽器都會采用 Webkit/Blink 內(nèi)核，如 360、UC、QQ、搜狗等。
web標(biāo)準(zhǔn)：
- Web 標(biāo)準(zhǔn)是由 W3C 組織和其他標(biāo)準(zhǔn)化組織制定的一系列標(biāo)準(zhǔn)的集合。W3C（萬維網(wǎng)聯(lián)盟）是國際最著名的標(biāo)準(zhǔn)化組織。
為什么需要Web標(biāo)準(zhǔn)：
- 瀏覽器不同，它們顯示頁面或者排版就有些許差異
- 遵循 Web 標(biāo)準(zhǔn)除了可以讓不同的開發(fā)人員寫出的頁面更標(biāo)準(zhǔn)、更統(tǒng)一外，還有以下優(yōu)點：
1.讓 Web 的發(fā)展前景更廣闊。
2.內(nèi)容能被更廣泛的設(shè)備訪問。
3.更容易被搜尋引擎搜索。
4.降低網(wǎng)站流量費用。
5.使網(wǎng)站更易于維護(hù)。
6.提高頁面瀏覽速度。
web標(biāo)準(zhǔn)的構(gòu)成：
主要包括 《結(jié)構(gòu)Structure》 、《表現(xiàn)（Presentation）》和《行為（Behavior）》三個方面。
Web 標(biāo)準(zhǔn)提出的最佳體驗方案：結(jié)構(gòu)、樣式、行為相分離。
簡單理解：結(jié)構(gòu)寫到 HTML 文件中， 表現(xiàn)寫到 CSS 文件中， 行為寫到 JavaScript 文件中
1.結(jié)構(gòu)類似身體
2.表現(xiàn)類似外觀裝飾
3.行為類似行為動作
4.相比較而言, 三者中結(jié)構(gòu)最重要.
HTML標(biāo)簽的導(dǎo)讀：
HTML語法規(guī)則：
1.HTML 標(biāo)簽是由尖括號包圍的關(guān)鍵詞，例如 <html>。
2.HTML 標(biāo)簽通常是成對出現(xiàn)的，例如 <html> 和 </html> ，我們稱為**雙標(biāo)簽**。
3.標(biāo)簽對中的第一個標(biāo)簽是開始標(biāo)簽，第二個標(biāo)簽是結(jié)束標(biāo)簽。
有些特殊的標(biāo)簽必須是單個標(biāo)簽（極少情況），例如 <br />，我們稱為單標(biāo)簽。
標(biāo)簽的關(guān)系：
雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系
包含標(biāo)簽：
<head>
<title> </title>
</head>
并列關(guān)系：
<head> </head>
<body> </body>
基本結(jié)構(gòu)標(biāo)簽：
每個網(wǎng)頁都會有一個基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上書寫
VSCode的使用：
1. 雙擊打開軟件。
2. 新建文件（Ctrl + N ）。
3. 保存（Ctrl + S ）, 注意移動要保存為 .html 文件
4. Ctrl + 加號鍵 ，Ctrl + 減號鍵 可以放大縮小視圖
5. 生成頁面骨架結(jié)構(gòu)。 輸入! 按下 Tab 鍵。
6. 利用插件在瀏覽器中預(yù)覽頁面：單擊鼠標(biāo)右鍵，在彈出窗口中點擊“Open In Default Browser”。
DOCTYPE
<!DOCTYPE html> 文檔類型聲明標(biāo)簽,告訴瀏覽器這個頁面采取html5版本來顯示頁面.
lang 語言種類
用來定義當(dāng)前文檔顯示的語言。
en定義語言為英語
zh-CN定義語言為中文
簡單來說,定義為en 就是英文網(wǎng)頁, 定義為 zh-CN 就是中文網(wǎng)頁
其實對于文檔顯示來說，定義成en的文檔也可以顯示中文，定義成zh-CN的文檔也可以顯示英文
這個屬性對瀏覽器和搜索引擎(百度.谷歌等)還是有作用的
字符集
1.字符集 (Character set)是多個字符的集合。以便計算機能夠識別和存儲各種文字。
2.在<head>標(biāo)簽內(nèi)，可以通過<meta> 標(biāo)簽的 charset 屬性來規(guī)定 HTML 文檔應(yīng)該使用哪種字符編碼。
3.<meta charset=" UTF-8" />
4.charset 常用的值有：GB2312 、BIG5 、GBK 和 UTF-8，其中 UTF-8 也被稱為萬國碼，基本包含了全世界所有國家需要用到的字符.
5.注意：上面語法是必須要寫的代碼，否則可能引起亂碼的情況。一般情況下，統(tǒng)一使用“UTF-8”編碼，盡量統(tǒng)一寫成標(biāo)準(zhǔn)的 "UTF-8"，不要寫成 "utf8" 或 "UTF8"。
語義化標(biāo)簽：
學(xué)習(xí)標(biāo)簽是有技巧的，重點是記住每個標(biāo)簽的語義。簡單理解就是指標(biāo)簽的含義，即這個標(biāo)簽是用來干嘛的。
什么是語義化標(biāo)簽：
根據(jù)標(biāo)簽的語義，在合適的地方給一個最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。
標(biāo)題標(biāo)簽
**標(biāo)題標(biāo)簽 <h1> - <h6>（重要）**
為了使網(wǎng)頁更具有語義化，我們經(jīng)常會在頁面中用到標(biāo)題標(biāo)簽。HTML 提供了 6 個等級的網(wǎng)頁標(biāo)題，即<h1> - <h6> 。
具體實現(xiàn)：
<h1> 我是一級標(biāo)題 </h1>
特點：
1.加了標(biāo)題的文字會變的加粗，字號也會依次變大。
2. 一個標(biāo)題獨占一行。
來?。?！左邊。。。右邊。。。中間：
<h1>標(biāo)題一共六級選,</h1>
<h2>文字加粗一行顯。</h2>
<h3>由大到小依次減，</h3>
<h4>從重到輕隨之變。</h4>
<h5>語法規(guī)范書寫后，</h5>
<h6>具體效果刷新見。</h6>
------pink老師
段落標(biāo)簽：
在網(wǎng)頁中，要把文字有條理地顯示出來，就需要將這些文字分段顯示。在 HTML 標(biāo)簽中，<p>標(biāo)簽用于定義段落，它可以將整個網(wǎng)頁分為若干個段落。
具體實現(xiàn)：
<p> 我是一個段落標(biāo)簽 </p>
特點：
1. 文本在一個段落中會根據(jù)瀏覽器窗口的大小自動換行。
2. 段落和段落之間保有空隙。
換行標(biāo)簽
在 HTML 中，一個段落中的文字會從左到右依次排列，直到瀏覽器窗口的右端，然后才自動換行。如果希望某段文本強制換行顯示，就需要使用換行標(biāo)簽 <br />。
具體實現(xiàn)：
<br />
特點：
1. <br /> 是個單標(biāo)簽。
2. <br /> 標(biāo)簽只是簡單地開始新的一行，跟段落不一樣，段落之間會插入一些垂直的間距。
文本格式化標(biāo)簽：
在網(wǎng)頁中，有時需要為文字設(shè)置粗體、斜體 或下劃線等效果，這時就需要用到 HTML 中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。
div和span標(biāo)簽
<div> 和 <span> 是沒有語義的，它們就是一個盒子，用來裝內(nèi)容的。
具體實現(xiàn)：
<div> 這是頭部 </div>
<span> 今日價格 </span>
特點：
1. <div> 標(biāo)簽用來布局，但是現(xiàn)在一行只能放一個<div>。 大盒子
2. <span> 標(biāo)簽用來布局，一行上可以多個 <span>。小盒子
圖片標(biāo)簽：
在 HTML 標(biāo)簽中，<img> 標(biāo)簽用于定義 HTML 頁面中的圖像。
具體實現(xiàn)：
<img src="圖像URL" />
解釋：
src 是<img>標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名。
所謂屬性：簡單理解就是屬于這個圖像標(biāo)簽的特性。
圖像標(biāo)簽注意點：
1.圖像標(biāo)簽可以擁有多個屬性，必須寫在標(biāo)簽名的后面。
2.屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
3.屬性采取鍵值對的格式，即 key=“value" 的格式，屬性 =“屬性值”。
路徑：
分為相對路徑和絕對路徑：
**路徑之相對路徑**
相對路徑：以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑。
這里簡單來說，圖片相對于 HTML 頁面的位置
特點：
相對路徑是從代碼所在的這個文件出發(fā)，去尋找目標(biāo)文件的，而我們這里所說的上一級 、下一級和同一級就是 圖片相對于 HTML 頁面的位置。
路徑之絕對路徑：
絕對路徑：
1.是指目錄下的絕對位置，直接到達(dá)目標(biāo)位置，通常是從盤符開始的路徑。
例如，“D:\web\img\logo.gif”或完整的網(wǎng)絡(luò)地址“http://www.itcast.cn/images/logo.gif”
鏈接標(biāo)簽：
鏈接的語法格式
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式"> 文本或圖像 </a>
屬性：
1.href：用于指定鏈接目標(biāo)的url地址
2.target:用于指定鏈接頁面的打開方式_self默認(rèn)值 _blank新窗口打開
3.#：空鏈接
鏈接分類：
1.外部鏈接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2.內(nèi)部鏈接:網(wǎng)站內(nèi)部頁面之間的相互鏈接. 直接鏈接內(nèi)部頁面名稱即可，例如 < a href="index.html"> 首頁 </a >。
3.空鏈接: 如果當(dāng)時沒有確定鏈接目標(biāo)時，< a href="#"> 首頁 </a > 。
4.下載鏈接: 如果 href 里面地址是一個文件或者壓縮包，會下載這個文件。
5.網(wǎng)頁元素鏈接: 在網(wǎng)頁中的各種網(wǎng)頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接.
6.錨點鏈接: 點我們點擊鏈接,可以快速定位到頁面中的某個位置.
在鏈接文本的 href 屬性中，設(shè)置屬性值為 #名字 的形式，如<a href="#two"> 第2集 </a>找到目標(biāo)位置標(biāo)簽，里面添加一個 id 屬性 = 剛才的名字 ，如：<h3 id="two">第2集介紹</h3>
注釋
如果需要在 HTML 文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。
HTML中的注釋以“”結(jié)束。
具體實現(xiàn)：
快捷鍵: ctrl + /
一句話: 注釋標(biāo)簽里面的內(nèi)容是給程序猿看的, 這個代碼是不執(zhí)行不顯示到頁面中的.
添加注釋是為了更好地解釋代碼的功能，便于相關(guān)開發(fā)人員理解和閱讀代碼，程序是不會執(zhí)行注釋內(nèi)容的
特殊字符：
在 HTML 頁面中，一些特殊的符號很難或者不方便直接使用，此時我們就可以使用下面的字符來替代。
[圖片上傳失敗...(image-9e6ecf-1637582813058)]
重點記?。嚎崭?、大于號、 小于號 這三個， 其余的使用很少，如果需要回頭查閱即可。
