中國流量最大的網(wǎng)站排行百度推廣開戶流程
HTML標(biāo)簽（上）
目標(biāo)：
-能夠說出標(biāo)簽的書寫注意規(guī)范
-能夠?qū)懗鯤TML骨架標(biāo)簽
-能夠?qū)懗龀溄訕?biāo)簽
-能夠?qū)懗鰣D片標(biāo)簽并說出alt和title的區(qū)別
-能夠說出相對(duì)路徑的三種形式
目錄：
- HTML語法規(guī)范
- HTML基本結(jié)構(gòu)標(biāo)簽
- 開發(fā)工具
- HTML常用標(biāo)簽
- HTML中的注釋和特殊字符
1.HTML語法規(guī)范
1.1基本語法概述
- HTML標(biāo)簽是由尖括號(hào)包圍的關(guān)鍵詞，例如
- HTML標(biāo)簽通常是成對(duì)出現(xiàn)的，例如和，我們稱為雙標(biāo)簽。標(biāo)簽中的第一個(gè)是開始標(biāo)簽，第二個(gè)是結(jié)束標(biāo)簽。
- 有些特殊的標(biāo)簽必須是單個(gè)標(biāo)簽（極少情況），例如
,我們稱為單標(biāo)簽。
1.2標(biāo)簽關(guān)系
雙標(biāo)簽關(guān)系可以分為兩類：包含關(guān)系和并列關(guān)系。
2.HTML基本結(jié)構(gòu)標(biāo)簽
2.1第一個(gè)HTML網(wǎng)頁
每個(gè)網(wǎng)頁都會(huì)有一個(gè)基本的結(jié)構(gòu)標(biāo)簽（也稱為骨架標(biāo)簽），頁面內(nèi)容也是在這些基本標(biāo)簽上書寫。
3.開發(fā)工具
3.1 vscode的使用
1.新建文件并存儲(chǔ)為 .html 文件
2.輸入 ! 按tab鍵，生成頁面骨架結(jié)構(gòu)
3.利用插件在瀏覽器中預(yù)覽頁面：
單擊右鍵，點(diǎn)擊open in default browser
3.2 插件的安裝
3.3 VScode工具生成骨架標(biāo)簽新增代碼
文檔類型聲明標(biāo)簽
文檔類型聲明，作用是告訴瀏覽器使用哪種HTML版本來顯示網(wǎng)頁 這句代碼的意思是：當(dāng)前頁面采取的是HTML5版本來顯示網(wǎng)頁注：
- 聲明位于文檔中最前面的位置，處于標(biāo)簽之前。
- 不是一個(gè)HTML標(biāo)簽，它就是文檔類型聲明標(biāo)簽
lang語言種類
用來定義當(dāng)前文檔顯示的語言。
- en定義語言為英語
- zh-CN定義語言為中文
簡單來說。定義為en就是英文網(wǎng)頁，定義為zh-CH就是中文網(wǎng)頁。
其實(shí)對(duì)于文檔顯示來說，定義為en的文檔也可以顯示中文，定義為zh-CH的文檔也可以顯示英文。
這個(gè)屬性對(duì)瀏覽器和搜索引擎來說還是有作用的。
必須寫，采用UTF-8來保存文字，如果不寫就會(huì)亂碼
4.HTML常用標(biāo)簽
4.1標(biāo)簽語義
學(xué)習(xí)標(biāo)簽是有技巧的，重點(diǎn)是記住每個(gè)標(biāo)簽的語義。簡單理解就是指標(biāo)簽的含義，即這個(gè)標(biāo)簽是用來干嘛的。
根據(jù)標(biāo)簽的語義，在合適的地方給一個(gè)最為合理的標(biāo)簽，可以讓頁面結(jié)構(gòu)更清晰。
4.2 標(biāo)題標(biāo)簽
-
(重要)
為了使網(wǎng)頁更具有語義化，經(jīng)常在頁面中用到標(biāo)題標(biāo)簽。HTML提供了6個(gè)等級(jí)的網(wǎng)頁標(biāo)題，即
-
.
<h1> 我是一級(jí)標(biāo)題</h1>
單詞head的縮寫，意為頭部、標(biāo)題。
標(biāo)簽語義：作為標(biāo)題使用，并且根據(jù)重要性遞減
特點(diǎn)：
1.加了標(biāo)題的文字會(huì)變的加粗，字號(hào)也會(huì)依次變大。
2.一個(gè)標(biāo)題獨(dú)占一行。
<!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>標(biāo)題標(biāo)簽<h1>標(biāo)題標(biāo)簽</h1><h1>標(biāo)題一共六級(jí)選</h1><h2>文字加粗一行顯</h2><h3>由大到小依次減</h3><h4>從重到輕隨之變</h4><h5>語法規(guī)范書寫后</h5><h6>具體效果刷新見</h6>
</body></html>
4.3 段落和換行標(biāo)簽（重要）
在網(wǎng)頁中，要把文字有條理的顯示出來，就需要將這些文字分段顯示。在HTML標(biāo)簽中，
標(biāo)簽用于定義段落，它可以將整個(gè)網(wǎng)頁分為若干個(gè)段落。
<p> 我是一個(gè)段落標(biāo)簽 </p>
標(biāo)簽語義：可以把HTML文檔分割為若干段落
特點(diǎn)：
1.文本在一個(gè)段落中會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)換行
2.段落和段落之間保有空隙
在HTML中，一個(gè)段落中的文字會(huì)從左到右依次排列，直到瀏覽器窗口的右端，然后才自動(dòng)換行。如果希望某段文本強(qiáng)制換行顯示，就需要使用換行標(biāo)簽
<br />
單詞break的縮寫，意為打斷、換行。
特點(diǎn)：
1.
是個(gè)單標(biāo)簽
2.
標(biāo)簽只是簡單的開始新的一行，跟段落不太一樣，段落之間會(huì)插入一些垂直的間距。
4.4文本格式化標(biāo)簽
在網(wǎng)頁中，有時(shí)需要為文字設(shè)置粗體、斜體或下劃線等效果，這時(shí)就需要用到HTML中的文本格式化標(biāo)簽，使文字以特殊的方式顯示。
標(biāo)簽語義：突出重要性，比普通文字更重要。
更推薦使用前面的標(biāo)簽，語義更強(qiáng)。
重點(diǎn)記住加粗和傾斜。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本格式化標(biāo)簽</title>
</head><body>我是<strong>加粗</strong>的文字我是<b>加粗</b>的文字我是<em>傾斜</em>的文字我是<i>傾斜</i>的文字我是<del>刪除線</del>我是<s>刪除線</s>我是<ins>下劃線</ins>我是<u>下劃線</u>
</body></html>
4.5 和 標(biāo)簽
<div>這是頭部</div>
<span>今日價(jià)格</span>
div 是division的縮寫，表示分割、分區(qū)。span意為跨度、跨距。
特點(diǎn)：
1.
2. 標(biāo)簽用來布局，一行上可以多個(gè),小盒子。
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和span標(biāo)簽</title>
</head><body><div>我是一個(gè)div標(biāo)簽我一個(gè)人單獨(dú)占一行</div><div>我是一個(gè)div標(biāo)簽我一個(gè)人單獨(dú)占一行</div><span>百度</span><span>新浪</span><span>搜狐</span>
</body></html>
div是大盒子，span是小盒子，沒有語義都是用來布局的。、
4.6 圖像標(biāo)簽和路徑（重點(diǎn)）
1.圖像標(biāo)簽
在HTML標(biāo)簽中，標(biāo)簽用于定義HTML頁面中的圖像。
<img src="圖像URL"/>（單標(biāo)簽，img后加空格和/）
src是標(biāo)簽的必須屬性，它用于指定圖像文件的路徑和文件名
將圖片插入文件中：
第一步必須先把圖像文件和html文件放到一起，這樣就可以把圖片插入網(wǎng)頁文件中。
<body><img src="img.jpg" />
</body>
<!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><h4>圖像標(biāo)簽的使用</h4><img src="img.jpg" />
</body></html>
圖像標(biāo)簽的其他屬性：
alt：
title：
alt和title都是顯示文字，alt只有在圖片不能正常顯示時(shí)出現(xiàn)，title是鼠標(biāo)放到圖片上就顯示。
width，height
<body><h4>圖像標(biāo)簽的使用</h4><img src="img.jpg" /><h4>alt 替換文本 圖像顯示不出來的時(shí)候用文字替換：</h4><img src="img1.jpg" alt="我是pink老師" /><h4>title 提示文本 鼠標(biāo)放在圖像上，提示的文字：</h4><img src="img.jpg" alt="我是pink老師" title="我是pink老師思密達(dá)" /><h4> width 給圖像設(shè)置寬度：</h4><img src="img.jpg" alt="我是pink老師" title="我是pink老師思密達(dá)" width="500" /><h4> height 給圖像設(shè)置高度：</h4><img src="img.jpg" alt="我是pink老師" title="我是pink老師思密達(dá)" height="100" />
</body>
border：設(shè)置圖像的邊框粗細(xì)
<h4> border 給圖像設(shè)定邊框：</h4><img src="img.jpg" alt="我是pink老師" title="我是pink老師思密達(dá)" height="100" border="15" />
圖像標(biāo)簽注意點(diǎn)
- 圖像標(biāo)簽可以擁有多個(gè)屬性，必須寫在標(biāo)簽名的后面。
- 屬性之間不分先后順序，標(biāo)簽名與屬性、屬性與屬性之間均以空格分開。
- 屬性采取鍵值對(duì)的格式，即key=“value”的格式，屬性=“屬性值”。
2.路徑（前期鋪墊知識(shí)）
- 目錄文件夾和根目錄
- VSCode打開目錄文件夾
1）目錄文件夾和根目錄：
實(shí)際工作中，我們的文件不能隨便亂放，否則用起來很難快速的找到他們，因此我們需要一個(gè)文件夾來管理他們。
新建一個(gè)網(wǎng)站：
-桌面新建一個(gè)文件夾，命名為web。（這個(gè)文件夾就是目錄文件夾）
**目錄文件夾：**就是普通文件夾，里面只不過存放了我們做頁面所需要的相關(guān)素材，比如html文件、圖片等。
-在web文件夾里面新建一個(gè)index.html文件
-在web文件夾里面新建一個(gè)images文件夾，用來存放圖片
**根目錄：**打開目錄文件夾的第一層就是根目錄
2）VSCode打開目錄文件夾
文件—打開文件夾—選擇目錄文件夾
后期非常方便管理文件
路徑
頁面中的圖片會(huì)非常多，通常我們會(huì)新建一個(gè)文件夾來存放這些圖像文件（images），這時(shí)再查找圖像，就需要采用“路徑”的方式來指定圖像文件的位置。
路徑可以分為：
1.相對(duì)路徑
2.絕對(duì)路徑
相對(duì)路徑
**相對(duì)路徑：**以引用文件所在位置為參考基礎(chǔ)，而建立出的目錄路徑。
這里簡單來說：圖片相對(duì)于HTML頁面的位置
**同一級(jí)路徑：**直接使用即可。
下一級(jí)路徑:
想要使用images文件里的圖片
上一級(jí)路徑：
絕對(duì)路徑
絕對(duì)路徑：是指目錄下的絕對(duì)位置，直接到達(dá)目標(biāo)位置，通常是從盤符開始的路徑。
例如：“D：\web\img\logo.gif”或完整的網(wǎng)絡(luò)地址“http://www.itcast.cn/images/logo.gif”(在網(wǎng)絡(luò)中復(fù)制圖片的地址）
MAC顯示文件路徑的方法：右鍵—顯示簡介，即可看到文件路徑
<!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><img src="/Users/zhanghanyue/Desktop/前端基礎(chǔ)/img.jpg" />
</body></html>
使用網(wǎng)絡(luò)中存在的圖片：
復(fù)制網(wǎng)頁中圖片的地址，直接使用：
4.7 超鏈接標(biāo)簽（重點(diǎn)）
在HTML標(biāo)簽中，標(biāo)簽用于定義超鏈接，作用是從一個(gè)頁面鏈接到另一個(gè)頁面。
目錄：
–鏈接的語法格式
–鏈接的分類
- 鏈接的語法格式：
<a href="跳轉(zhuǎn)目標(biāo)" target="目標(biāo)窗口的彈出方式">文本或圖像</a>
單詞anchor的縮寫，意為：錨
屬性：
**href：**用于指定鏈接目標(biāo)的url地址，（必須屬性）當(dāng)為標(biāo)簽應(yīng)用href屬性時(shí)，它就具有了超鏈接的功能。
**target：**用于指定鏈接頁面的打開方式，其中_self為默認(rèn)值 當(dāng)前窗口打開頁面，_blank為在新窗口中打開頁面。
- 鏈接的分類：
目錄：
-1. 外部鏈接：例如< a href= “http://www.baidu.com”>百度
-2. 內(nèi)部鏈接：網(wǎng)站內(nèi)部頁面之間的相互鏈接，直接鏈接內(nèi)部頁面名稱即可，例如首頁
-3. 空鏈接：如果當(dāng)時(shí)沒有確定鏈接目標(biāo)時(shí)，首頁。用#代表是一個(gè)空鏈接。（當(dāng)不確定要跳轉(zhuǎn)到哪個(gè)頁面時(shí)，用#代替）
4. 下載鏈接：
-如果href里面的地址是一個(gè)文件或者壓縮包，會(huì)下載這個(gè)文件。
**5. 網(wǎng)頁元素鏈接：**在網(wǎng)頁中的各種網(wǎng)頁元素，如文本、圖像、表格、音頻、視頻等都可以添加超鏈接。
**6.錨點(diǎn)鏈接：**點(diǎn)擊鏈接，可以快速定位到頁面中的某個(gè)位置。
· 在鏈接文本的href屬性中，設(shè)置屬性值為 #名字 的形式，如第二集
· 找到目標(biāo)位置標(biāo)簽，里面添加一個(gè)id屬性=剛才的名字，如：
第二集介紹
鏈接標(biāo)簽使用步驟：
-鏈接標(biāo)簽
-在標(biāo)簽間加名字，騰訊
-a里有必須屬性 href，在href里加上地址 騰訊
-第二個(gè)屬性可以指定新窗口的打開方式， 騰訊
內(nèi)部鏈接：
不需要加http，在同一目錄下的內(nèi)部鏈接直接寫名字。
<h4>2.內(nèi)部鏈接：網(wǎng)站內(nèi)部頁面之間的相互鏈接</h4><a href="gsjj.html" target="_blank">公司簡介</a>
空鏈接：
<h4>3.空鏈接：#</h4><a href="#">公司地址</a>
下載鏈接：
-先把img.jpg壓縮一下
-img.zip
<h4>4.下載鏈接：地址鏈接的是文件 .exe 或者是 zip 等壓縮包形式 </h4><a href="img.jpg.zip">下載文件</a>
網(wǎng)頁元素鏈接：
-把圖片當(dāng)文字用即可
<h4>5.網(wǎng)頁元素的鏈接</h4><a href="http://www.baidu.com"><img src="img.jpg"></a>
-點(diǎn)擊出現(xiàn)的圖片即可跳轉(zhuǎn)到對(duì)應(yīng)的鏈接。
錨點(diǎn)鏈接：
例：在個(gè)人生活和主要作品處添加錨點(diǎn)鏈接，點(diǎn)擊跳轉(zhuǎn)到對(duì)應(yīng)位置
5.HTML中的注釋和特殊字符
5.1 注釋
如果需要在HTML文檔中添加一些便于閱讀和理解但又不需要顯示在頁面中的注釋文字，就需要使用注釋標(biāo)簽。
HTML中的注釋以" "結(jié)束。
快捷鍵：ctrl+/
5.2特殊字符
在HTML頁面中，一些特殊的符號(hào)很難或者不方便直接使用，此時(shí)我們就可以使用下面的字符來代替。
重點(diǎn)記住：空格、大于、小于這三個(gè)
