Html笔记 3

最新推荐文章于 2024-01-18 19:00:14 发布

一只学酥

最新推荐文章于 2024-01-18 19:00:14 发布

阅读量140

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/wu_yan_zu/article/details/51165039

版权

笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

框架属性

通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份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

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录