一个完整的HTML文件,应该至少包含html元素,body元素,以及里面的内容。 为注释
一、基本元素
标题:标题会自动粗体,大写其中的内容,并且带有换行效果。一般会使用<h1> 到 <h6> 分别表示不同大小的标题。如:<h1>标题1</h1>
段落:<p>标签即表示段落,自带换行效果
粗体:<b>、<strong>都可以用来实现粗体的效果,推荐使用后者
斜体:<i>和<em>都可以表示斜体效果
预格式:<pre>
删除效果:<del>
下划线:<ins>
图像:<img src=haha.jpg alt="如果文件不存在,就显示这段文字" />
超链:<a href="http://www.haha.cn" target="_blank" title="跳转到http://www.haha.com">haha</a>。使用图片:<a href="http://www.haha.com"><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
常用场景: