HTML基礎(1)

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

HTML簡介

HTML(超文本標記語言——HyperText Markup Language)是構成Web世界的基石。它描述并定義了一個網頁的內容。其他除HTML以外的技術則通常用來描述一個網頁的表現/展示效果(CSS)或功能(JavaScript)。
也就是說,HTML這個標簽語言,僅僅用來描述網頁里面的內容,不去分配網頁的樣式和功能。這種方式能使我們的代碼層次分明,便于維護。

HTML標簽

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

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

注釋標簽

突然發現這個標簽好萌有沒有,額。。。這個是注釋標簽 和C語言里的//是一個意思,用于在代碼里面注釋某些東西的,這個最好理解。

<!DOCTYPE>標簽

這個一般寫HTML5的時候會自動生成,<!DOCTYPE> 用于聲明文檔類型,<!DOCTYPE> 聲明必須是 HTML 文檔的第一行,位于 <html> 標簽之前。一般的寫法如下

<!DOCTYPE html>
<html>
<head>
<title>文檔的標題</title>
</head>

<body>
文檔的內容
</body>
</html>

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

<html>標簽

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

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

<h1>~<h6>標簽

標題(Heading)元素擁有六個不同的級別,<h1> 是最高級的,而 <h6> 則是最低的級別。這個就和Markdown一樣,用起來很簡單,但是我查資料的過程中,發現了一些要注意的細節

  • 不要為了減小標題的字體而使用低級別的標題, 而是使用 CSS font-size 屬性。
  • 避免跳過某級標題:始終要從 <h1> 開始,接下來使用 <h2> 等等。
  • 使用 <section> 元素的時候,為了方便起見你應該考慮著去避免重復在一個頁面上使用 <h1>,<h1> 應該用來表示頁面的標題,其他的標題當從 <h2> 開始。 使用 section 當時候,應當每個 section 都使用一個 <h2>。

<br>標簽

這個標簽是強制換行的標簽,是將文本信息換行的標簽。<br> 標簽是空標簽(意味著它沒有結束標簽,因此這是錯誤的:<br></br>)。需要注意的細節是

不要使用<br>來增加行距;請改用CSS margin特性或<p>元素。

<body>標簽

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

<p>標簽

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

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

<ul>,<ol>,<li> 標簽

  • unordered list(ul),所以這個標簽就是一個無序的列表,用來展示沒有順序相關的文本或事件的羅列。
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • ordered list (ol),所以這個標簽就是一個有序列表,用于展示有順序的123這樣的文本和事件的羅列。
<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>
  • list(li),從以上兩端代碼可以看出,<li>標簽,是配合<ul>和<ol>標簽進行使用的,表示的是列表中的項目。必須配合使用。

<strong>標簽

strong屬性是用于把文本定義為強調的內容,但是HTML里面是不會對這個強調的內容做任何樣式的改變,可以在CSS中,對strong定義的文本進行樣式的定制,例如加粗修改顏色等操作。HTML中只是單純的將這部分內容強調出來。

<span>標簽

一直聽說某些人可以就靠<span>和<div>就能實現頁面,那這個span究竟是干嘛的呢。<span>標簽是行內元素,他需要定義一個class,來配合CSS對其進行樣式的改變,單獨在HTML中,是沒有任何樣式的改變,不定義class的時候也沒有意義,與其他文本沒有任何差異。

<div>標簽

<div>標簽和<span>標簽差不多的意思,不同的是一個是行內元素,一個是塊元素,<div>標簽可以讓開發者根據自己的理解或用戶的需求,對網頁頁面進行區域的劃分,用<div>包裹起來,以此來區分網頁不同功能,不用用途的區域,方便對某一區域進行操作或樣式的改變。
這個標簽也需要CSS配合來進行樣式的改變。

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

這一篇博客就先寫到這里,還有幾個棘手的標簽,放到下一篇博客來具體的分析和理解,比這篇博客要介紹的詳細的多,但是梳理起來也相對麻煩的多,下一篇主要講解iframe,a,form,input,button,table標簽的屬性和細節,包栝HTTP請求的部分。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,796評論 1 92
  • HTML標題HTML標題由 至 標簽定義。 定義了最重要的標題。 定義了最不重要的標題: HTML段落HTML段落...
    空城阿風閱讀 385評論 0 0
  • 本文主要是起筆記的作用,內容來自慕課網. 認識CSS樣式 CSS全稱為“層疊樣式表 (Cascading Styl...
    0o凍僵的企鵝o0閱讀 2,662評論 0 30
  • 現在的我已經跨過了十九歲這個門檻,不知不覺馬上就要二十了,不知道為什么總感覺自己還小,但是時間卻不斷提醒著我,你已...
    南方古鎮閱讀 232評論 0 2
  • 時代變遷很快,五年前的今天我,還在初中的宿舍和當時的兄弟吹著牛逼,這個時刻,當時的我還沒有睡覺,因為我記得那晚上我...
    原原點閱讀 465評論 0 0