一個完整的HTML文件,應該至少包含html元素,body元素,以及里面的內容。 為注釋
一、基本元素
標題:標題會自動粗體,大寫其中的內容,并且帶有換行效果。一般會使用<h1> 到 <h6> 分別表示不同大小的標題。如:<h1>標題1</h1>
段落:<p>標簽即表示段落,自帶換行效果
粗體:<b>、<strong>都可以用來實現粗體的效果,推薦使用后者
斜體:<i>和<em>都可以表示斜體效果
預格式:<pre>
刪除效果:<del>
下劃線:<ins>
圖像:<img src=haha.jpg alt="如果文件不存在,就顯示這段文字" />
超鏈:<a target="_blank" title="跳轉到http://www.haha.com">haha</a>。使用圖片:<a ><img src="???"/></a>
表格:<table>。<tr>: 行、<td> :列。border:邊框。bgcolor:顏色。width:寬度。align/valign:td的對齊。colspan/rowspan:td的合并。
列表:無序<ul>,有序:<ol>
布局:<div><span>
字體:<font>。屬性:color、size
內聯框架:<iframe>
二、表單元素
文本框:<input type="text">。屬性:size、value、placeholder
密碼框:<input type="password">
表單:<form>。method="get"/"post"
單選框:<input type="radio" >。checked="checked"、name
復選框:<input type="checkbox">
下拉列表:<select>,<option>。屬性:size、ctrl/shift、selected
文本域:<textarea>。屬性:cols、rows
按鈕:<button>、<input type="button">、<input type="submit">、<input type="reset">、<input type="image" >
三、DOM
DOM把所有的html都轉換為節點:整個文檔、元素、元素屬性、元素內容、注釋
<html>
<body>
<div id="d1">hello HTML DOM</div>
</body>
<script>
function p(s){
document.write(s);
document.write("<br>");
}
var div1 = document.getElementById("d1");
p("文檔節點"+document);
p("元素"+div1);
p("屬性節點"+div1.attributes[0]);
p("內容節點"+div1.childNodes[0]);
</script>
</html>
獲取元素節點:document.getElementById、getElementsByTagName、getElementsByClassName、getElementsByName、attributes、childNodes、null
元素節點:nodeName、nodeValue、nodeType、innerHTML、id/value/className
樣式:一個元素節點的style屬性即對應的css
事件:onfocus、onblur、onmousedown、onmouseup、onmousemove、onmouseout、onkeydown、okeypress、onkeyup、onclick、ondblclick、onchange、onsubmit、onload、this、return false
節點關系:parentNode、previousSibling、nextSibling、childNodes、childNodes、children
創建節點:createElement、createTextNode、createAttribute
刪除節點:removeChild、removeAttribute、removeChild
替換節點:replaceChild
插入節點:appendChild、insertBefore
常用場景: