HTML前端開發

2021-10-07 16:30:14 字數 2668 閱讀 6020

文章中的"<>"將會用引號代替

文件型別 doctype

這是為了讓瀏覽器知道我們使用的html版本,一般會在網頁的最上端新增乙個doctype宣告,告訴瀏覽器網頁的版本

html5 : 「!doctype html」doctype大小寫均可

如果不寫文件宣告,則會導致有些瀏覽器進入怪異模式(quirks mode) 無法正常顯示;為了相容舊頁面,瀏覽器中設定了兩種模式 :

標準模式(standards mode)

怪異模式(quirks mode)

怪異模式解析網頁時會產生一些不可預期的行為

亂碼問題

亂碼出現的原因: ansi自動以系統的語言儲存, 字符集不同

計算機只認識0 1 ,在計算機中儲存的內容都需要轉換為0 1 兩進製編碼來儲存,包括網頁中的內容,在讀取內容時,需要將二進位制編碼轉為正確的內容

**編碼: **依據一定的規則,將字元轉換為二進位制編碼的過程

**解碼: **依據一定的規則,將二進位制編碼轉換為字元的過程

**字符集: **編碼和解碼所採用的規則

常見的字符集: ascⅱ碼,iso-8859-1, gbk,gb2312,utf-8

常用的標籤

1.根標籤 「html」 「/html」

**在網頁開始有一對根標籤 " html" 「/html」**有且只有一對,而且網頁中的所有內容都要寫到根標籤下

根標籤的兩對子標籤

① head標籤:「head」 「/head」

head標籤中的內容不會在網頁中直接顯示

head標籤也有一對子標籤: title標籤

「title」 "/title"標籤中的內容在標籤頁的標題中顯示當搜尋引擎在搜尋頁面的時候,會首先檢索title中的內容

② body標籤:「body」 「/body」

頁面中的所有的內容都應該寫在body標籤內

2. meta標籤 (自結束)

標籤格式:「meta /」

①可以用來設定網頁關鍵字:

「meta name=「description」 content=「發布h5等相關資訊」 /」

搜尋引擎在檢索頁面的時候,會同時檢索頁中的關鍵字和描述,但是這兩個值不會影響頁面在搜尋引擎中的排名

②使用meta可以用來做請求的重定向:

3.標題標籤 「h1」 「/h1」

在html中標題標籤一共有六級標題標籤

標籤格式:「h1」 「/h1」 ~「h6」 「/h6」

在顯示效果上,h1最大,但是我們主要關心標籤的語義,我們使用的標籤都是語義化的,6級標題中,h1最重要,表示乙個網頁中的主要內容,對於搜尋引擎,h1重要性僅次於"title"標籤,會影響網頁在搜尋引擎的排名,一般頁面中只寫h1-h3

4.段落標籤 「p」 「/p」

使用p標籤來表示乙個段落,但是p標籤中的內容獨佔一行,並不會換行,而且在html中,多個空格與換行只會被當作是乙個空格來解析,多個換行也一樣,這時候用br標籤來進行換行,br標籤是自結束標籤格式:「br /」

5.分隔線標籤 「hr /」

加分割線的標籤," hr /",可以在頁面中形成一條水平線

6.標籤 「img /」

使用img標籤來向網頁中引入乙個外部,img也是乙個自結束標籤

屬性:標籤中的屬性必須要有值,且值必須要加引號,單引號雙引號都可以

src: 設定乙個外部的路徑

可以使用絕對路徑與相對路徑:

相對路徑:如果是不在同乙個資料夾下,可以使用 …/ 進行返回一級資料夾,目前我們使用的都是相對路徑,如果是網頁與分別位於不同磁碟,要使用絕對路徑

alt: 可以用來設定在不能顯示的時候,對的描述,實際上是可有可無的,搜尋引擎可以通過alt屬 性來識別不同的,如果不寫alt屬性的話,搜尋引擎不會收錄該

width: 可以用來設定修改的寬度,一般會用px作為單位

height: 可以用來修改的高度,一般使用px作為單位

寬度和高度兩個屬性如果只是修改其中乙個則會保留原始比例對寬高都進行調整

一般開發中除了自適應的頁面,不建議設定width和height格式

常用:jpeg(jpg),gif,png

**jpeg:**支援顏色比較多,可以壓縮,但是不支援透明背景,一般用來儲存**等顏色豐富的

**gif:**支援的顏色少,只支援簡單的透明,支援動態,只支援直線的透明,用於顏色單一或者是動態圖

**png:**支援的顏色多,並且支援複雜透明(使用較多)

效果不一致,選用效果好的,一致選擇小的,顏色單一,十有**用gif.

7.超連結標籤 「a」 「/ a」

使用超練級跳轉到指定頁面

屬性:

前端開發 html

前端必學的 html 文字 css 裝飾 js動態效果 http協議 超文字傳輸協議 用來規定服務端和瀏覽器之間資料互動的格式 四大特性 1.基於請求響應 2.基於tcp ip作用於應用層之上的協議 3.無狀態 不儲存使用者的資訊 4.無 短連線 請求一次響應一次,請求資料格式 請求首行 標示htt...

前端開發 HTML元素

html元素 開始標籤常被稱為起始標籤 opening tag 結束標籤常稱為閉合標籤 closing tag html 元素語法 巢狀的html元素 html 文件由巢狀的 html 元素構成。這是第乙個段落。以上例項包含了三個 html 元素。元素 這是第乙個段落。這個 元素定義了 html 文...

基礎Html前端title開發記錄

前端確實是短板,不過功夫不負有心人,只要肯學習,一定能掌握。下面是基本的html css配置要點,記錄一下 1 去掉干擾因素 在 中處理,避免後面遇到很多意向不到的相容問題 2 對於螢幕中的每乙個不同的區域都設定為乙個div,大塊包小塊 3 margin中的auto能夠快速水平居中,但需注意不要跟浮...