天天看點

前端學習筆記(HTML&CSS)(01)HTML

前端學習筆記(HTML&CSS)(01)

HTML

從今天開始,會開始記錄一下學習前端HTML的相關知識。

什麼是HTML

HTML是一種用來描述網頁的一種語言

1. HTML:指超文本标記語言,Hyper Text Markup Language;

2. HTML 不是一種程式設計語言,而是一種标記語言

3. 标記語言是一套标記标簽 (markup tag)

4. HTML使用标記标簽來描述網頁

5. HTML文檔包含了HTML 标簽及文本内容

6. HTML文檔也叫做 web 頁面

HTML執行個體

<!doctype html>
		<html>
			<head>
				<meta charset="utf-8">
				<title>十安的前端學習</title>
			</head>
			
			<body>
				<h1>十安的标題</h1>
				<h2>十安的标題</h2>
				<h3>十安的标題</h3>
		
				<p>這是一個段落。</p>
				<p>這是另外一個段落。</p>
			</body>
		</html>
           

HTML執行個體分析

HTML文檔聲明

<!-- 文檔聲明,聲明目前網頁的版本 -->
      <!DOCTYPE html>
           

聲明有助于浏覽器中正确顯示網頁。

網絡上有很多不同的檔案,如果能夠正确聲明HTML的版本,浏覽器就能正确顯示網頁内容。

doctype 聲明是不區分大小寫的,以下方式均可:

<!DOCTYPE html> 
		<!DOCTYPE HTML>
		<!doctype html>
		<!Doctype Html>
           

HTML标簽聲明

HTML 标記标簽通常被稱為 HTML 标簽 (HTML tag)。

HTML 标簽是由尖括号包圍的關鍵詞,比如 < html >,

HTML 标簽通常是成對出現的, 比如 < b > 和 < /b >

标簽對中的第一個标簽是開始标簽,第二個标簽是結束标簽開始和結束标簽也被稱為開放标簽和閉合标簽

<标簽> 内容 </标簽>
           
  1. 根标簽
<!-- html的根标簽(元素),網頁中的所有内容都要寫根元素的裡邊 -->
   		<html>
   		</html>
           
  1. 網頁頭部标簽
<!-- head是網頁的頭部,head中的内容不會在網頁中直接出現,主要用來幫助浏覽器或搜尋引擎來解析網頁 -->
   		<head>
   		</head>
           
  1. 字元集标簽
<!-- meta标簽用來設定網頁的中繼資料,這裡meta用來設定網頁的字元集,避免亂碼問題 -->
   	<meta charset="utf-8">
           
  1. 标題欄
<!-- title中的内容會顯示在浏覽器的标題欄,搜尋引擎會主要根據title中的内容來判斷網頁的主要内容 -->
   	<title>十安的前端學習</title>
           

執行個體展示

前端學習筆記(HTML&amp;CSS)(01)HTML
  1. 網頁主體
<!-- body是html的子元素,表示網頁的主體,網頁中所有的可見内容都應該寫在body裡 -->
	<body>
	</body>
           
  1. 标題

    請確定将 HTML 标題 标簽隻用于标題。不要僅僅是為了生成粗體或大号的文本而使用标題。

    搜尋引擎使用标題為您的網頁的結構和内容編制索引。

    因為使用者可以通過标題來快速浏覽您的網頁,是以用标題來呈現文檔結構是很重要的。

    應該将 h1 用作主标題(最重要的),其後是 h2(次重要的),再其次是 h3,以此類推。

<!-- h1網頁的一級标題 -->
<!--HTML 标題(Heading)是通過<h1> - <h6> 标簽來定義的。-->
		<h1>十安的标題</h1>
		<h2>十安的标題</h2>
		<h3>十安的标題</h3>
           
前端學習筆記(HTML&amp;CSS)(01)HTML

7. 段落

<!--HTML 段落是通過标簽 <p> 來定義的。-->
		<p>這是一個段落。</p>
		<p>這是另外一個段落。</p>
           

執行個體展示

前端學習筆記(HTML&amp;CSS)(01)HTML