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

最新推荐文章于 2024-09-10 14:15:01 发布

奔跑的盒饭

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量1.5k

点赞数

分类专栏： html 文章标签： html 新手入门

本文链接：https://blog.csdn.net/u010662488/article/details/48737031

版权

html 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

一、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>