Html笔记 3

来源：互联网发布：中国知网专利数据库编辑：程序博客网时间：2024/06/05 15:48

框架属性

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。

框架结构标签（<frameset>）点击打开链接

<span style="font-size:18px;"><html><frameset cols="25%,50%,25%">  <frame src="/example/html/frame_a.html">  <frame src="/example/html/frame_b.html">  <frame src="/example/html/frame_c.html"></frameset></html></span>

如果要水平排列把cols改成rows

使用<noframes>标签点击打开链接

为不支持框架的浏览器显示文本（本来<frameset>不能同<body>同时使用）

<noframes><body>您的浏览器无法处理框架！</body></noframes>

含有 noresize="noresize" 属性的框架结构点击打开链接
框架是不可调整尺寸的。在框架间的边框上拖动鼠标，你会发现边框是无法移动的。

<span style="font-size:18px;"><html><frameset cols="50%,*,25%">  <frame src="/example/html/frame_a.html" noresize="noresize" />  <frame src="/example/html/frame_b.html" />  <frame src="/example/html/frame_c.html" /></frameset></html></span>

内联框架

列表

有序列表点击打开链接

<html><body><ol>  <li>咖啡</li>  <li>牛奶</li>  <li>茶</li></ol><ol start="50">  <li>咖啡</li>  <li>牛奶</li>  <li>茶</li></ol> </body></html><span style="color:#ff0000;"></span>

type="1 " A a I

无序列表点击打开链接

<html><body><h4>一个无序列表：</h4><ul>  <li>咖啡</li>  <li>茶</li>  <li>牛奶</li></ul></body></html>

自定义列表点击打开链接

<dl>

<dt>

</dt>

</dl>

块

HTML 块元素
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>,<div>

点击打开链接

<html><body><p>This is a paragraph.</p><div style="color:#00FF00">  <h3>This is a header</h3>  <p>This is a paragraph.</p></div></body></html>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

<p><span style="color:red">随便写点什么</span></p>

布局

点击打开链接

<span style="font-size:14px;"><html><head><style type="text/css">div#container{width:500px}div#header {background-color:#99bbbb;}div#menu {background-color:#ffff99;height:200px;width:150px;float:left;}div#content {background-color:#EEEEEE;height:200px;width:350px;float:left;}div#footer {background-color:#99bbbb;clear:both;text-align:center;}h1 {margin-bottom:0;}h2 {margin-bottom:0;font-size:18px;}ul {margin:0;}li {list-style:none;}</style></head><body><div id="container"><div id="header"><h1>Main Title of Web Page</h1></div><div id="menu"><h2>Menu</h2><ul><li>HTML</li><li>CSS</li><li>JavaScript</li></ul></div><div id="content">Content goes here</div><div id="footer">Copyright W3School.com.cn</div></div></body></html></span>

表单

文本域密码域点击打开链接

<html><body><form>用户：<input type="text" name="user"><br />密码：<input type="password" name="password"></form><p>请注意，当您在密码域中键入字符时，浏览器将使用项目符号来代替这些字符。</p></body></html>

单选按钮点击打开链接

<html><body><form>男性：<input type="radio" checked="checked" name="Sex" value="male" /><br />女性：<input type="radio" name="Sex" value="female" /></form><p>当用户点击一个单选按钮时，该按钮会变为选中状态，其他所有按钮会变为非选中状态。</p></body></html>

复选框点击打开链接

<span style="font-size:18px;"><html><body><form>我喜欢自行车：<input type="checkbox" name="Bike"><br />我喜欢汽车：<input type="checkbox" name="Car"></form></body></html></span>

确认按钮和动作属性（Action）

<form name="input" action="html_form_action.asp" method="get">Username: <input type="text" name="user" /><input type="submit" value="Submit" /></form>

创建按钮

<form><input type="button" value="Hello world!"></form>

下拉列表点击打开链接

<html><body><form><select name="cars"><option value="volvo">Volvo</option><option value="saab">Saab</option><option value="fiat" selected="selected">Fiat</option><option value="audi">Audi</option></select></form></body></html>

文本域点击打开链接

<textarea>(不在<form>里)

<html><body><textarea rows="10" cols="30">The cat was playing in the garden.</body>

0 0