HTML基礎(chǔ)(1)

我又出來(lái)趕博客了,這幾天接觸的知識(shí)量有點(diǎn)大,欠了能有10幾篇博客吧,我覺得我再不趕出來(lái),知識(shí)點(diǎn)就全忘記了,所以我決定百忙之中,抽出空來(lái),來(lái)整理一下我最近學(xué)到的知識(shí)點(diǎn),那么今天所講的呢,就是HTML的初體驗(yàn)。

HTML簡(jiǎn)介

HTML(超文本標(biāo)記語(yǔ)言——HyperText Markup Language)是構(gòu)成Web世界的基石。它描述并定義了一個(gè)網(wǎng)頁(yè)的內(nèi)容。其他除HTML以外的技術(shù)則通常用來(lái)描述一個(gè)網(wǎng)頁(yè)的表現(xiàn)/展示效果(CSS)或功能(JavaScript)。
也就是說(shuō),HTML這個(gè)標(biāo)簽語(yǔ)言,僅僅用來(lái)描述網(wǎng)頁(yè)里面的內(nèi)容,不去分配網(wǎng)頁(yè)的樣式和功能。這種方式能使我們的代碼層次分明,便于維護(hù)。

HTML標(biāo)簽

常見的HTML標(biāo)簽有:a、form、input、button、h1、p、ul、ol、small、strong、div、span、kbd、video、audio、svg等。

下面我就逐個(gè)的列舉,常用標(biāo)簽的用法和屬性(ps:主要是怕我自己忘記,這里么做個(gè)筆記)

注釋標(biāo)簽

突然發(fā)現(xiàn)這個(gè)標(biāo)簽好萌有沒(méi)有,額。。。這個(gè)是注釋標(biāo)簽 和C語(yǔ)言里的//是一個(gè)意思,用于在代碼里面注釋某些東西的,這個(gè)最好理解。

<!DOCTYPE>標(biāo)簽

這個(gè)一般寫HTML5的時(shí)候會(huì)自動(dòng)生成,<!DOCTYPE> 用于聲明文檔類型,<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標(biāo)簽之前。一般的寫法如下

<!DOCTYPE html>
<html>
<head>
<title>文檔的標(biāo)題</title>
</head>

<body>
文檔的內(nèi)容
</body>
</html>

用于選擇文檔類型的,HTML里面肯定是html啦。

<html>標(biāo)簽

主要告訴瀏覽器,我是一個(gè)html文檔。<html> 與\ </html> 標(biāo)簽限定了文檔的開始點(diǎn)和結(jié)束點(diǎn),在它們之間是文檔的頭部和主體。正如您所了解的那樣,文檔的頭部由 <head> 標(biāo)簽定義,而主體由 <body> 標(biāo)簽定義。

<html>
<head>這里是文檔的頭部</head>
<body>
  這里是文檔的主體
</body>
</html>

<h1>~<h6>標(biāo)簽

標(biāo)題(Heading)元素?fù)碛辛鶄€(gè)不同的級(jí)別,<h1> 是最高級(jí)的,而 <h6> 則是最低的級(jí)別。這個(gè)就和Markdown一樣,用起來(lái)很簡(jiǎn)單,但是我查資料的過(guò)程中,發(fā)現(xiàn)了一些要注意的細(xì)節(jié)

  • 不要為了減小標(biāo)題的字體而使用低級(jí)別的標(biāo)題, 而是使用 CSS font-size 屬性。
  • 避免跳過(guò)某級(jí)標(biāo)題:始終要從 <h1> 開始,接下來(lái)使用 <h2> 等等。
  • 使用 <section> 元素的時(shí)候,為了方便起見你應(yīng)該考慮著去避免重復(fù)在一個(gè)頁(yè)面上使用 <h1>,<h1> 應(yīng)該用來(lái)表示頁(yè)面的標(biāo)題,其他的標(biāo)題當(dāng)從 <h2> 開始。 使用 section 當(dāng)時(shí)候,應(yīng)當(dāng)每個(gè) section 都使用一個(gè) <h2>。

<br>標(biāo)簽

這個(gè)標(biāo)簽是強(qiáng)制換行的標(biāo)簽,是將文本信息換行的標(biāo)簽。<br> 標(biāo)簽是空標(biāo)簽(意味著它沒(méi)有結(jié)束標(biāo)簽,因此這是錯(cuò)誤的:<br></br>)。需要注意的細(xì)節(jié)是

不要使用<br>來(lái)增加行距;請(qǐng)改用CSS margin特性或<p>元素。

<body>標(biāo)簽

body么,顧名思義就是身體的意思,就是HTML的主體部分,HTML 主體元素 (<body>) 表示的是HTML文檔的主體內(nèi)容,任何一個(gè)HTML文檔,只允許存在一個(gè) <body> 元素。

<p>標(biāo)簽

paragraph,也就是段落的意思,所以<p>標(biāo)簽的作用就是展示一段文字。

\<p>This is some text in a very short paragraph\</p>

<ul>,<ol>,<li> 標(biāo)簽

  • unordered list(ul),所以這個(gè)標(biāo)簽就是一個(gè)無(wú)序的列表,用來(lái)展示沒(méi)有順序相關(guān)的文本或事件的羅列。
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • ordered list (ol),所以這個(gè)標(biāo)簽就是一個(gè)有序列表,用于展示有順序的123這樣的文本和事件的羅列。
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  • list(li),從以上兩端代碼可以看出,<li>標(biāo)簽,是配合<ul>和<ol>標(biāo)簽進(jìn)行使用的,表示的是列表中的項(xiàng)目。必須配合使用。

<strong>標(biāo)簽

strong屬性是用于把文本定義為強(qiáng)調(diào)的內(nèi)容,但是HTML里面是不會(huì)對(duì)這個(gè)強(qiáng)調(diào)的內(nèi)容做任何樣式的改變,可以在CSS中,對(duì)strong定義的文本進(jìn)行樣式的定制,例如加粗修改顏色等操作。HTML中只是單純的將這部分內(nèi)容強(qiáng)調(diào)出來(lái)。

<span>標(biāo)簽

一直聽說(shuō)某些人可以就靠<span>和<div>就能實(shí)現(xiàn)頁(yè)面,那這個(gè)span究竟是干嘛的呢。<span>標(biāo)簽是行內(nèi)元素,他需要定義一個(gè)class,來(lái)配合CSS對(duì)其進(jìn)行樣式的改變,單獨(dú)在HTML中,是沒(méi)有任何樣式的改變,不定義class的時(shí)候也沒(méi)有意義,與其他文本沒(méi)有任何差異。

<div>標(biāo)簽

<div>標(biāo)簽和<span>標(biāo)簽差不多的意思,不同的是一個(gè)是行內(nèi)元素,一個(gè)是塊元素,<div>標(biāo)簽可以讓開發(fā)者根據(jù)自己的理解或用戶的需求,對(duì)網(wǎng)頁(yè)頁(yè)面進(jìn)行區(qū)域的劃分,用<div>包裹起來(lái),以此來(lái)區(qū)分網(wǎng)頁(yè)不同功能,不用用途的區(qū)域,方便對(duì)某一區(qū)域進(jìn)行操作或樣式的改變。
這個(gè)標(biāo)簽也需要CSS配合來(lái)進(jìn)行樣式的改變。

<div style="color:#00FF00">
  <h3>This is a header</h3>
  <p>This is a paragraph.</p>
</div>

這一篇博客就先寫到這里,還有幾個(gè)棘手的標(biāo)簽,放到下一篇博客來(lái)具體的分析和理解,比這篇博客要介紹的詳細(xì)的多,但是梳理起來(lái)也相對(duì)麻煩的多,下一篇主要講解iframe,a,form,input,button,table標(biāo)簽的屬性和細(xì)節(jié),包栝HTTP請(qǐng)求的部分。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,109評(píng)論 1 92
  • HTML標(biāo)題HTML標(biāo)題由 至 標(biāo)簽定義。 定義了最重要的標(biāo)題。 定義了最不重要的標(biāo)題: HTML段落HTML段落...
    空城阿風(fēng)閱讀 445評(píng)論 0 0
  • 本文主要是起筆記的作用,內(nèi)容來(lái)自慕課網(wǎng). 認(rèn)識(shí)CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,749評(píng)論 0 30
  • 現(xiàn)在的我已經(jīng)跨過(guò)了十九歲這個(gè)門檻,不知不覺馬上就要二十了,不知道為什么總感覺自己還小,但是時(shí)間卻不斷提醒著我,你已...
    南方古鎮(zhèn)閱讀 247評(píng)論 0 2
  • 時(shí)代變遷很快,五年前的今天我,還在初中的宿舍和當(dāng)時(shí)的兄弟吹著牛逼,這個(gè)時(shí)刻,當(dāng)時(shí)的我還沒(méi)有睡覺,因?yàn)槲矣浀媚峭砩衔?..
    原原點(diǎn)閱讀 485評(píng)論 0 0

友情鏈接更多精彩內(nèi)容