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是一種標記...