前端基礎爲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>
這樣就實現了圖像鏈接