一 前端開發的HTML介紹

2021-10-23 12:42:00 字數 3112 閱讀 4940

2.常見的標籤

3.常用的html屬性

總結**如下(示例):

<

!doctype html>

<

!-- 文件宣告 --

>

"en"

>

<

!-- html開始標籤 --

>

<

!-- head開始標籤 --

>

"utf-8"

>

<

!-- meta標籤只有開始標籤 --

>

document<

/title>

<

!-- title標籤的開始和結束標籤寫在了同一行 --

>

p/*style內部為樣式,語法與html不同*/

<

/style>

<

/head>

<

!-- head結束標籤 --

>

<

!-- body開始標籤 --

>

我的第乙個網頁<

/p>

<

/body>

<

!-- body結束標籤 --

>

<

/html>

<

!-- html結束標籤 --

>

html標籤有上百個之多,我們只要掌握常見的html標籤,就可以完成豐富的網頁。而且我們在後續的專案開發當中,也是僅僅只使用這十幾個標籤而已。

在瀏覽網頁時我們經常會看到一篇文章的標題,或是文章中某一段落的標題。像這樣的標題,我們使用標題標籤h*(*代表著1-6六個數字)

**如下(示例):

一級標題標籤<

/h1>

二級標題標籤<

/h2>

**標題標籤<

/h3>

四級標題標籤<

/h4>

五級標題標籤<

/h5>

六級標題標籤<

/h6>

執行以上**我們發現,標題標籤會呈現一種加粗效果,h1字型大小最大,從h1-h6字型逐漸變小。

水果列表<

/h1>

蘋果<

/li>

香蕉<

/li>

士多啤梨<

/li>

<

/ul>

水果列表<

/h1>

蘋果<

/li>

香蕉<

/li>

士多啤梨<

/li>

<

/ol>

香港四大天王<

/dt>

劉德華<

/dd>

郭富城<

/dd>

黎明<

/dd>

張學友<

/dd>

<

/dl>

""

/a>

"demo01.html"

>點我跳轉到demo01.html檔案<

/a>

"#footer"

>點我跳轉到頁尾<

/a>

上面我們已經提到了html標籤的【屬性】,【屬性】用來進一步描述標籤。例如上面的三個例子,我們可以使用href屬性設定不同的a標籤鏈結到不同的位置。

​關於href屬性的值有示例**中的三種設定方式,使用方法如下所述:

跳轉到當前**(或本機檔案),可以直接填寫相對路徑或絕對路徑。

可以通過設定錨點的方式,讓網頁跳轉到當前頁面的指定位置。

""/a>

<

/li>

"">網易<

/a>

<

/li>

""/a>

<

/li>

<

/ul>

"檔案無法顯示"

>

img標籤涉及到兩個重要的屬性:

絕對路徑:是指完整的**

div標籤在網頁中沒有明確的語義,可以說它是乙個【無語義標籤】,div標籤常常用來作為乙個容器存放其他標籤,是乙個很重要的布局工具,它是個塊級元素(後面會講到塊級元素,行內元素以及行內塊的區別,這裡了解一下就可以了)

**如下(示例):

這是乙個容器<

/div>

span標籤與div標籤類似,同樣是乙個【無語義標籤】,通常用來存放文字內容。它是個行內元素。

**如下(示例):

我最喜歡的顏色是藍色<

/h1>

我最喜歡歡的顏色是藍色<

/span>

<

/h1>

在上面的第一行**中,所有的文字都存放在h1標籤當中,我們只能給這些文字統一設定樣式。如果我們希望只給藍色設定樣式,那麼就需要用到第二行的寫法。這樣我們就可以單獨給藍色兩個字設定樣式了。

如果需要單獨設定文字的樣式,又沒有什麼特別的語義,那麼就需要用到span標籤。

​除了上面講過的a標籤的href屬性和img標籤的src屬性和alt屬性,接下來我們再說兩個常用的屬性。

**如下(示例):

"top"

>id屬性就是標籤的身份證<

/div>

"box"

>class屬性可以給標籤分類<

/div>

"box"

>class屬性可以給標籤分類<

/div>

"box"

>class屬性可以給標籤分類<

/div>

id屬性就像標籤的身份證一樣,不能重複,例如我們已經編寫了乙個id為top的屬性,那麼後續的標籤中就不能再有id為top的標籤。我們可以通過id找到html文件中的唯一元素,並設定其樣式(第04節我們講解如何使用css選擇器找到指定元素)。

​class屬性可以將html標籤分類,我們可以通過box屬性找到所有class值為box的html標籤。

一 前端學習之HTML編寫靜態頁面

本人也是前端入門小白 先從html開始學起 最近花了3天時間學完html基礎 並練了乙個demo 算是溫習一下 1 如圖 2 首頁 日誌 相簿 收藏關於我 html初學者 王陽同學 努力到未能為力 拼搏到感動自己 為測試開發打下良好基礎 北京時間2019 0 27 22 13 真可惜!我不是漂亮女孩...

web優化(一 前端)

當我們在瀏覽器位址列中輸入乙個url的時候,網頁開始請求,我們在頁面上看到的內容就是許多個http請求從伺服器返回的資料展示,這些展示的快慢很大程度依賴前端的優化,怎樣做好前端的優化,我這裡總結了幾點 一 減少http請求,重複使用link 1 合併css js檔案 2 background 使用乙...

介紹Html 前端

html超文字標記語言 hypertext markup language,html 是一種用於建立網頁的標記語言。本質上是瀏覽器可識別的規則,我們按照規則寫網頁,瀏覽器根據規則渲染我們的網頁。對於不同的瀏覽器,對同乙個標籤可能會有不同的解釋。網頁檔案的副檔名 html或.htm html是一種標記...