DOM，href，书签，表格，列表，按钮，框架，表单，自动刷新，link，label简单操作

来源：互联网发布：网络推广要什么证书编辑：程序博客网时间：2024/06/06 00:41

一、DOM简介
document.getElementById(str)得到Id为str的HTML标签的对象.(DOM对象：Document Object Model文档对象模型)
整个HTML是Document对象的一部分
head,body,p,div,li等所有html标签都是DOM树中的节点
可以取DOM树中的节点，也可创建新的节点，类似操作树，DOM改变后，浏览器会重新渲染整个页面

二、href跳转
href跳转到外网的url地址格式http://www.baidu,.com必须用http://和/包围，否则是在当前路径的尾部添加地址
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
如果把链接的 target 属性设置为 “_blank”，该链接会在新窗口中打开。
target=”_top”打开的页面跳出框架（iframe）

三、网页书签
网页书签，用#访问name

<p>    <a href="#C4">查看 Chapter 4。</a></p><h2><a name="C4">Chapter 1</h2><p>This chapter explains ba bla bla</p>

四、创建表格

<table border="1"><caption>aa</caption><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>&nbsp;</td><td>row 2, cell 2</td></tr></table>

五、创建列表

定义列表（列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。）<h4>一个无序列表：</h4><ul>  <li>咖啡</li>  <li>茶</li>  <li>牛奶</li></ul>

六、单选按钮
单选按钮设置name一样，则只能从其中选择一个

<input type="radio" name="a" value="firstname"/><input type="radio" name="a" value="lastname"/>

七、iframe框架
框架显示将屏幕显示区域水平分为两部分，再将第二部分垂直分为两部分
假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize=”noresize”。
为不支持框架的浏览器添加 <noframes> 标签。

重要提示：不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用！不过，假如你添加包含一段文本的 <noframes> 标签，就必须将这段文字嵌套于
<body></body> 标签内。（在下面的第一个实例中，可以查看它是如何实现的。）

<html><frameset noresize="noresize" rows="50%,50%"><frame  src="/example/html/frame_a.html"><frameset cols="25%,75%"><frame src="/example/html/frame_b.html"><frame src="/example/html/frame_c.html"></frameset></frameset></html>

内联框架：直接写（frameborder=”0”删除边框）

<iframe src="/example/html/demo_iframe.html" width="2000" height="200" frameborder="0"></iframe>

框架跳转到书签

<a href="/example/html/link.html#C10" target="showframe">带有锚的链接</a>

url在框架中打开

<!DOCTYPE html><html><body><iframe src="/example/html/demo_iframe.html" name="iframe_a"></iframe><p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p><p><b>注释：</b>由于链接的目标匹配 iframe 的名称，所以链接会在 iframe 中打开。</p></body></html>

八、简单的表单

<form action="http://www.example.com/test.asp" method="post/get"><input type="text" name="lastname"value="Nixon" size="30" maxlength="50"><input type="password">aa<br/><input type="checkbox" checked="checked">hello<br/><input type="radio" checked="checked">bye<br/><input type="submit"><input type="reset"></form>

九、不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。

十、自动刷新或跳转
设置文档在十秒后自动跳转到http://www.w3school.com.cn

<meta http-equiv="Refresh" content="10;url=http://www.w3school.com.cn" />

十一、设置默认跳转页面

<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：<head><base href="http://www.w3school.com.cn/images/" /><base target="_blank" />

十二、<link>标签
定义与外部资源资源之间的联系（rel 属性指示被链接的文档是一个样式表）

<head><link rel="stylesheet" type="text/css" href="mystyle.css" /></head>

十三、
<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就

会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。

<form>  <label for="male">Male</label>  <input type="radio" name="sex" id="male" />  <br />  <label for="female">Female</label>  <input type="radio" name="sex" id="female" /></form>

0 0