前端入門(一)

    前端基礎爲HTML+CSS+JavaScript。

    套用俗點的話說,就是HTML是骨架,CSS是相貌,JavaScript是靈魂。HTML撐起了一個最爲基本的WEB頁面,CSS則是讓頁面更加漂亮,披上了一層漂亮的皮。JavaScript則是給頁面注入動態效果,讓頁面“活起來”。

    先從HTML講起吧。

<!DOCTYPE html>
<!-- html標籤,html界面標籤啓示於該 -->
<html>
<head>
	<!-- 頁面名字 -->
	<title>helloWorld</title>
	<!-- 字符編碼 -->
	<meta charset="utf-8">
</head>
<!-- 頁面主題 -->
<body>
<!-- p是段落標籤,一個標籤直接的文本就是一個段落,會自動換行 -->
<p>hello world</p>
<p>你好</p>
</body>
</html>

    這就是一個基本的hello world的htmll版本。

HTML 元素語法

  • HTML 元素以開始標籤起始(上文中的<p>、<html>等都是開始標籤)
  • HTML 元素以結束標籤終止(上文中的</p>、</html>等都是開始標籤)
  • 元素的內容是開始標籤與結束標籤之間的內容
  • 某些 HTML 元素具有空內容
  • 空元素在開始標籤中進行關閉(以開始標籤的結束而結束)
  • 大多數 HTML 元素可擁有屬性

3、4、5會在接下來的內容中進行演示

常用HTML標籤介紹

1.<img>標籤

作用:引入圖片

樣例:

<img src="./test.jpg" title="test"/>
src與title就是img標籤的屬性

src是圖片所在路徑,我使用的是相對路徑其中“.”代表文件當前目錄“..”代表上一級目錄

title是指定鼠標停留在img上出現的文字。

同時,我們可以看到與<p>元素以</p>結束不同,img元素沒有結束元,它的元素是空元素,即語法中的第四條"某些 HTML 元素具有空內容",所以“空元素在開始標籤中進行關閉(以開始標籤的結束而結束)”。

2.<a>標籤

作用:鏈接到別的頁面

樣例:

<!DOCTYPE html>
<html>
<head>
	<title>a標籤測試</title>
	<meta charset="utf-8"/>
</head>
<body>
<a href="http://www.runoob.com/">點此進入菜鳥編程頁面</a>
</body>
</html>

href就是點擊鏈接將會跳到的地址,既可以是自己的本地HTML文件也可以是網址

最後把<a>標籤和<img>標籤進行一些混合應用

<!DOCTYPE html>
<html>
<head>
	<title>a標籤測試</title>
	<meta charset="utf-8"/>
</head>
<body>
<a href="http://www.runoob.com/"><img src="./test.jpg"/></a>
</body>
</html>

這樣就實現了圖像鏈接
發佈了26 篇原創文章 · 獲贊 14 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章