web前端複習第一課

                                                  網頁結構

<!-- 文檔聲明 -->
<!DOCTYPE html>
<!-- 根目錄 -->
<html lang="en">
<!-- 頭部 -->
<head>
	<!-- 指定字符集 -->
	<!-- UTF-8國際通用編碼格式,包括了所有國家的字符 -->
	<meta charset="UTF-8">
	<!-- 指定網頁的標題 -->
	<title>百度一下</title>
</head>
<!-- 身體 -->
<body>
	<h1>你好</h1>
	<h1> 雙標籤 </h1>

	
</body>
</html>

                                                 HTML標籤

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		span{
			color: red;
		}
		div{
			width: 200px;
			height: 200px;
			background-color: #f00;
		}
	</style>
</head>
<body>
	<!-- 標籤要寫在body裏 -->

	<!-- 標籤分爲兩類:
			雙標籤: h1~h6    p   span   div  b  strong  i  em   s   del   u   ins  a
			單標籤: br   hr    img

	 -->
	<!-- 標題標籤 -->
	<h1>我是1級<span>標題</span></h1>
	<h2>我是2級標題</h2>
	<h3>我是3級標題</h3>
	<h4>我是4級標題</h4>
	<h5>我是5級標題</h5>
	<h6>我是6級標題</h6>
	<!-- 段落標籤 -->
	<p>Lorem <br>換行標籤 amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	</p>

	<p>consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident</p>
	<!-- 水平線標籤 -->
	<hr>
	<span>定義行內區域</span>
	<div>定義塊級區域</div>

	<!-- 註釋快捷鍵:  ctrl+/   -->

	<b>定義粗體文本</b>
	<strong>定義粗體文本</strong>
	<i>斜體</i>
	<em>斜體</em>
	<s>刪除線</s>
	<del>刪除線</del>
	<u>下劃線</u>
	<ins>下劃線</ins>
	<!-- 超鏈接(重點) -->
	<a href="http://www.baidu.com" target="_blank">百度一下,你就知道</a>
	<!-- href裏面寫#,阻止頁面跳轉 -->
	<a href="#">百度一下,你就知道</a>
	<!-- 本地頁面跳轉 -->
	<a href="01-網頁結構.html" title="標題">本地頁面跳轉</a>
	

	<!-- 相對路徑 -->
	<!-- 在頁面中插入圖片 -->
	<img src="img1.jpg" alt="我是這張圖片" title="顯示提示文字" width="200">
	<!-- 找兄弟的子元素(往下找用 / ) -->
	<img src="img/img1.jpg">

	<!-- 找父親的兄弟(往上找 ../ ) -->
	<img src="../../img1.jpg">

	<img src="../../img/img1.jpg">

	<!-- 絕對路徑 -->
	<img src="C:\Users\41616\Pictures\Burner-4k.jpg" width="500">

	<!-- 網絡圖片 -->
	<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589801452803&di=8787c8a1e90fcffc4cd3ab1f8bdf4820&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F0%2F586e154595341.jpg" width="300">
</body>
</html>

                                                    特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<!-- 不管編輯器裏面多少空格,都縮小從一個 -->
	hello&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;word
	<p>&lt;  &copy;</p>
</body>
</html>

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章