html回顧及vue.js在html中使用(一)
牢騷
好長時間沒有寫關於html的程式碼,好多知識都忘得差不錯了,業務需要vue.js，順便回顧下html的知識。
html框架
瞭解html的都明白，html是超文字標記語言，姑且理解為標籤語言。
最基本的寫法結構:
圖例層：
程式碼層：
<html>
<head>
</head>
<body>
</body>
</html>head標籤：
頭部標籤能處理什麼呢？
title標籤、base標籤、link標籤、meta標籤、script標籤 以及 style標籤
title標籤：
這是一個測試頁面
執行結果：
base標籤：
指定目標地址或者基連結
例如：
程式碼：
執行:
本例中我們有設定絕對地址，圖片也能顯示出來，因為我設定了base.預設為base下的圖片.
link標籤：
定義文件與外部資源之間的關聯。
程式碼：
定義外部連結樣式(.css檔案)跟.html檔案同級目錄即可(或者放在一個資料夾下).
外部樣式：outside.css
.html檔案：
執行：
meta標籤：
規定了字元編碼格式、文件描述作者時間等等、文件關鍵字、重定向等等。
描述資訊在哪呢？
開啟瀏覽器的開發者選項
咦,margin報警高 非法，沒有寫單位，太粗心，新增單位px
相關資訊在head meta中描述了，不做詳解。
script標籤：
比較重要的一個標籤，拆分html很重要的內容,實現互動，響應改變。
js位置：
head body都可以,一般外部script引入放在head標籤中或者body顯得不雜亂。
簡單測試：
放入同一個資料夾下
外部js–mtest.js:
.html:
onclick 觸發myFunction(),而該方法引入外部js.
執行結果：
實現點選按鈕改變文字。
具體使用js前需要了解DOM.
DOM是什麼？
DOM –文件物件模型，樹形模型。
處理那些事務呢?
使得JavaScript能處理很多事情
JavaScript 能夠改變頁面中的所有 HTML 元素
JavaScript 能夠改變頁面中的所有 HTML 屬性
JavaScript 能夠改變頁面中的所有 CSS 樣式
JavaScript 能夠對頁面中的所有事件做出反應
JavaScript要去影響html,首先我們要獲取影響的html元素。
DOM可以實現：
通過 id 找到 HTML 元素
var x=document.getElementById(“intro”);
————————————
通過標籤名找到 HTML 元素
var x=document.getElementById(“main”);
var y=x.getElementsByTagName(“p”);
————————————
通過類名找到 HTML 元素
存在類名相同情況，尋找具體一個有點繁瑣，不細說。
通過類名查詢 HTML 元素在 IE 5,6,7,8 中無效
js與DOM合作做事：
1、js使用DOM改變HTML輸出流
<script>
document.write(Date());
</script>2、js使用DOM改變 HTML 內容
<script>
document.getElementById("p1").innerHTML="New text!";
</script>3、js使用DOM改變 HTML 屬性
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>4、js使用DOM改變 HTML 樣式
<h1 id="id1">My Heading 1</h1>
<button type="button" onclick="document.getElementById('id1').style.color='red'>
點選這裡
</button>5、js使用DOM處理事件
HTML 事件的例子：
a、當用戶點選滑鼠時
b、當網頁已載入時
c、當影象已載入時
d、當滑鼠移動到元素上時
e、當輸入欄位被改變時
f、當提交 HTML 表單時
g、當用戶觸發按鍵時
比如，點選改變文字：
<h1 onclick="this.innerHTML='謝謝!'">請點選該文字</h1>以及其他狀態變化的情況，不祥述。
6、js使用DOM節點新增/刪除
新增：
<!DOCTYPE html>
<html>
<body>
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("這是新段落。");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
</body>
</html>實現建立新元素p標籤，並在div標籤後追加節點。
刪除：
<div id="div1">
<p id="p1">這是一個段落。</p>
<p id="p2">這是另一個段落。</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>找到div的子節點p1並刪除.
JS語法下一篇回顧。