一、HTML - 超文本標記語言（Hyper Text Markup Language）
- html代碼都寫在標籤裏面，瀏覽器就是這種語言的執行環境
- 它執行html書寫的代碼都將結果渲染到瀏覽器窗口中
- 所有的代碼都寫在html標籤下，它是最頂級的標籤
- 標籤基本上都有開始標籤和結束標籤，標籤還可以有屬性
# 使用快捷鍵 --- ！+ tab-可以快速生成html的格式文檔，就如下面的格式所示
<!DOCTYPE html> # 文檔類型聲明，說明頁面使用的是HTML5的規範
<html> #
<head> # 頭文件 head標籤中的內容不會顯示在瀏覽器的主窗口中
# 這裏主要包含了網頁的元數據信息
<meta charset="UTF-8"> # 元文件
<title>墨墨的神祕小窩</title> # 這裏的title標籤代表網頁的標題
<style type="text/css"> # 負責渲染
height: 1px;
color: red);
font: arial;
</style>
</head>
<body> # 正文文件 body標籤中的內容就是要顯示在瀏覽器窗口中的信息
<h1>你好，美女</h1> # 一級標題標籤，一共用7級標題
<hr /> # 定義水平線
<button></button>
<script type="text/javascript"> # 跟js交互，一般放在body的最後
function foo(){
window.alert('hello, blonde girl')
}
</script>
</body>
</html>
二、前端的三大部分
- 1、標籤（tag/element） - 承載內容
- 2、層疊樣式表(CSS) - 顯示/渲染頁面
- 3、JavaScript - 交互式行爲，跟Java沒什麼關係
三、標籤詳細介紹
<p> --- 定義段落
<a> --- 定義超文本鏈接
<br> --- 定義換行
<em> --- 定義強調文本
<strong> --- 定義強調文本
<sub> --- 定義下標文本
<sup> --- 定義上標文本
<del> --- 定義被刪除文本
<ins> --- 定義被插入文本
<q> --- 定義短的引用
<img> --- 定義圖像
# 定義無序列表
<ur>
<li>劉明湘</li> # 定義列表的項目
<li>蔡佩軒</li>
<li>曾敏傑</li>
</ur>
# 定義有序列表
<ol>
<li>劉明湘</li> # 定義列表的項目
<li>蔡佩軒</li>
<li>曾敏傑</li>
</ol>
# 定義列表詳情
dl>
<dt>劉明湘</dt> # 定義列表中的項目
<dd>劉明湘是我最喜歡的歌手之一</dd> # 定義定義列表中項目的描述
<dt>蔡佩軒</dt>
<dd>蔡佩軒是我最喜歡的歌手之一</dd>
<dt>曾敏傑</dt>
<dd>曾敏傑是我最喜歡的歌手之一</dd>
</dl>
# 鏈接一個的定義圖像---林志玲
<img src="img/linzhiling.jpg"/>
# 定義一個超鏈接--頁面鏈接---Facebook - target屬性表示去新的頁面
<a href="https://www.facebook.com/" target="_blank">拜訪一下扎克伯格</a>
# 下面是一對，配合起來使用：錨點在最上面（body下面），錨鏈接在最下面，另一個body的上面
# 錨點
<a id="top"></a>
# 錨鏈接
<a href="#top">回頂部</a>
# 功能性鏈接---郵箱
<a href="mailto:[email protected]">有事情，請聯繫墨墨</a>
# 功能性鏈接---QQ聊天
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=10001&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:957658:53" alt="點我聊一聊" title="點我聊一聊"/></a>
