HTML5+CSS3前端入門教程---從0開始通過一個商城例項手把手教你學習PC端和移動端頁面開發第2章HTML基礎知識

阿新 • • 發佈：2020-07-23

本教程案例線上演示

有路網PC端
 有路網移動端

免費配套視訊教程

教程配套原始碼資源

網頁開發工具

VSCode
或
WebStorm

HTML簡介

HTML：Hyper Text Markup Language

html文字的內部基本結構

<!--
	文件宣告，標識當前網頁的版本的
	該宣告標識網頁是遵循html5語法規範的
	編寫網頁時，一定要編寫的文件宣告，
	在某些瀏覽器中，如果不寫文件宣告，會導致瀏覽器進入到怪異模式
 -->
<!doctype html>
<!-- html網頁中根標籤，一個頁面中有且只有一個根標籤
	網頁中的所有內容都應該寫在根標籤的內部
 -->
<html>

	<!-- 
		網頁的頭部，head標籤中的內容，不會在頁面中直接顯示
		瀏覽器根據head中的內容來解析網頁，搜尋引擎也可以根據他們來檢索網頁
	 -->
	<head>
                <!-- 使用meta來設定頁面的字符集 -->
		<meta charset="utf-8" />
		<!-- 
			網頁的標題，一般會在頁面的標籤頭部顯示 
			所屬引擎在檢索一個網頁時，會主要檢索title中的內容
			並依據該內容，來判斷網頁的主要內容，
			title中的內容會影響到網站在搜尋引擎中的排名
		-->
		<title>我是title</title>

	</head>

	
	<!-- 網頁的主體，網頁中所有的可見內容，都應該寫在body中 -->

	<body>
		<h1>這是一個非常漂亮的網頁</h1>
	</body>
	
</html>

html的註釋

<html>  
    <head>  
        <title>網頁的標題</title>  
    </head>  
    <body>  
        <!--   
            註釋 HTML註釋中的內容，  
            不會在頁面中顯示，  
            但是可以在原始碼中檢視  
              
            通過註釋可以對程式碼進行解釋說明  
            一定要養成良好的編寫註釋的習慣  
            編寫註釋時，要求簡單明瞭  
  
            日期：  
            作者：  
            功能：  
  
            通過註釋可以將不希望在頁面中顯示程式碼隱藏  
            HTML註釋不能巢狀（所有的多行註釋都不能巢狀）  
              
        -->  
  
        <!-- 這是頁面的1級標題 -->  
        <h1>這是我的第二個網頁</h1>  
  
        <!-- 我是一個註釋 <!-- 我是註釋中的註釋 --> -->  
          
  
  
    </body>  
</html>

標題標籤，段落標籤，水平線，換行，加粗，斜體

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <title>常用的標籤</title>
</head>
<body>

<!-- 標題標籤
    在HTML一共有h1 ~ h6 六級標題
    6級標題中 h1最大 h6最小
    從h1 到 h6 重要性依次降低
    h1最重要，h2其次 依次遞減

    搜尋引擎檢索頁面時，h1僅次於title，也會影響到頁面在搜尋引擎中的排名
        一個頁面一般只有一個h1標籤

    一般頁面中只會使用h1 ~ h3

-->
<h1>一級標題標籤</h1>
<h2>二級標題標籤</h2>
<h3>三級標題標籤</h3>
<h4>四級標題標籤</h4>
<h5>五級標題標籤</h5>
<h6>六級標題標籤</h6>

<!-- 段落標籤 使用p標籤來表示一個段落
        段落標籤會獨佔一行，並和其他內容會有一個距離
-->
<p>第一次</p>
<p>今天天氣真不錯</p>
<hr />
<!--
    在HTML中，預設將多個空格和換行認為是一個空格
    使用br標籤來表示一個換行
-->
<p>
    床前明月光<br />
    疑是地上霜<br />
    舉頭望明月<br />
    低頭思故鄉<br />
</p>

<!-- 水平線，可以在頁面的指定位置輸出一條水平線 -->
<hr />

<!--加粗：<strong>…</strong>-->
<!--斜體：<em>…</em>-->

<strong>簡介</strong>
<p>
    <em>2008</em>年設立人才實訓中心<br/>
    <em>2009</em>年成為教育部軟體工程專業大學生實習基地<br/>
</p>

</body>
</html>

列表標籤

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>列表</title>
	</head>
	<body>
		<!-- 
			列表類似於購物清單
				HTML中一共有三種列表
				1.無序列表
					- 使用ul標籤來建立一個無序列表
					- 使用li向無序列表中新增列表項
					- 無序列表預設使用 圓點 來作為專案符號	
				2.有序列表
					- 有序列表和無序列表類似，不同的是它使用ol來建立其他的都和無序列表一樣
					- 有序列表使用有序的序號 作為專案符號	
				3.定義列表	
					- 定義列表用來對一些內容做解釋說明的
					- 使用 dl 來建立一個定義列表
					- 在dl中使用dt，來建立一個定義項
					- 使用dd來建立一個對定義項的描述
				
				
				- 列表之間可以互相巢狀，可以在有序列表中放無序列表，也可以在無序列表放有序列表
		-->
		<ul>
			<li>西紅柿</li>
			<li>大茄子</li>
			<li>小辣椒</li>
		</ul>
		
		<ol>
			<li>桃花源記</li>
			<li>岳陽樓記</li>
			<li>小石潭記</li>
			<li>醉翁亭記</li>
		</ol>
		
		<p>菜譜</p>
		<ul>
			<li>
				魚香肉絲
				<ol>
					<li>魚</li>
					<li>香</li>
					<li>肉絲</li>
				</ol>
			</li>
			<li>宮保雞丁</li>
			<li>青椒肉絲</li>
		</ul>
		
		<dl>
			<dt>武松</dt>
			<dd>景陽岡上的大虎英雄，戰鬥力99</dd>
			<dd>後來打死西門大官人，後逃逸，出家為僧</dd>
			<dt>武大</dt>
			<dd>著名餐飲企業家，戰鬥力0</dd>
		</dl>
		
	
	</body>
</html>

影象標籤

常見的影象格式
JPG
GIF
PNG
BMP

圖片的相對路徑

所謂相對路徑，就是相對於自己的目標檔案位置。例如上面的例子，“11111111.html” 檔案裡引用了“11ha.jpg”圖片，由於“11ha.jpg”圖片相對於“11111111.html”來說，是在同一個目錄的，那麼在“11111111.html”檔案裡使用以下程式碼後：

<img src=“11ha.jpg” alt=“小女孩” />

只要這兩個檔案的相對位置沒有變(也就是說還是在同一個目錄內)，那麼無論上傳到Web伺服器的哪個位置，在瀏覽器裡都能正確地顯示圖片。

當圖片在image資料夾裡時：

src="image/11ha.jpg" alt="小女孩" />

如果在image裡很深的資料夾，也可以一直羅列下去：

<img src="image/renwu/11ha.jpg" alt="小女孩" />

如果html檔案在比圖片深一層的資料夾裡：

<img src="../11ha.jpg" alt="小女孩" />

如果html檔案在比圖片深兩層的資料夾裡，就在前面再羅列兩個點“..”，深幾層羅列幾次。

<img src=“../../11ha.jpg” alt=“小女孩” />

圖片在html檔案上兩級image資料夾中的renwu資料夾裡

<img src=“../../image/renwu/11ha.jpg”/>