此为自己学习笔记
HTML 基础标签实例
<p>段落</p>
<br/>换行
居中排列方式：
<h1 align="center"> this is a heading <h1>
水平线 ：
<hr/>
隐藏注释:
<!--这是一段隐藏注释>
背景颜色：
<body bgcolor="lightblue">
HTML 文本格式化实例
预格式文本：
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
地址：
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
缩写和首字母缩写： abbr acronym
<abbr title="etcetera">etc.</abbr>
<acronym title="World Wide Web">WWW</acronym>
<p>在某些浏览器中，当您把鼠标移至缩略词语上时，title 可用于展示表达的完整版本。</p>
<p>仅对于 IE 5 中的 acronym 元素有效。</p>
p>对于 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p>
文字方向： 反转 rtl bdo
<p>
如果您的浏览器支持 bi-directional override (bdo)，下一行会从右向左输出 (rtl)；
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
结果：txet werbeH emos si ereH
块引用：
<blockquote>浏览器会插入换行和外边距</blockquote>
<q>q 元素不会有任何特殊的呈现</q>
删除字效果和插入字效果：
<del>words</del>
<ins>words</ins>
HTML 链接实例
超链接：
<p>
<a href="www.baidu.com">百度</a> 是一个指向百度的链接。</p>
将图片作为连接：
<p>
您也可以使用图像来作链接：
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
在新窗口中打开连接：
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>
<p>如果把链接的 target 属性设置为 "_blank"，该链接会在新窗口中打开。</p>
连接到同一页面的不同位置：
<p><a href="#C4">查看 Chapter 4。</a>
</p>
<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>
<h2><a name="C4">Chapter 4</a></h2>
<p>This chapter explains ba bla bla</p>
HTML 框架实例
跳出框架：
<a href="/index.html" target="_top">点击跳出框架</a>
水平框架：
注意参数的写法
<frameset rows="22%,50%,30%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
垂直框架：
<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>
noframes:
noframes元素可为那些不支持框架的浏览器显示文本
<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">
<noframes>
<body>您的浏览器无法处理框架！</body>
</noframes>
</frameset>
混合框架结构：
<frameset 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
noresize="noresize"：
固定
<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>
导航框架：
导航框架包含一个将第二个框架作为目标的链接列表。名为 "contents.htm" 的文件包含三个链接
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
K---内联框架：
<iframe src="/i/eg_landscape.jpg"></iframe>
K--使用框架导航跳转至指定的结
HTML 表格实例
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>
表格标题:caption
<table>
<caption>表格标题</caption>
<tr>
<td>199</td>
<td>299</td>
<td>299</td>
</tr>
</table>
跨行或跨列的表格单元格：
<th colspan="2"></th>
<th rowspan="2"></th>
Cell padding来创建单元格内容与其边框之间的空白
<table border="1" cellpadding="10">
Cell spacing 增加单元格之间的距离
<table border="1" cellspacing="0">
向表格添加背景(单元格类似)
<table border="1" bgcolor="red">
<table border="1" background="/i/eg_bg_07.gif">
内容排列用align="参数"（left，right，top）
"frame" 属性来控制围绕表格的边框。
above,below,hisdes(上下)，visdes(左右)
<table frame="box">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
HTML 列表实例
无序列表：
不同类型设置type属性（<ul type="disc">， circle（圆），square（正方形））
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
有序列表：
不同类型设置type属性（<ol type="A">，a,i,I）
<ol start="50">
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
嵌套列表：把<ul>嵌套在<li>里边
<ul>
<li>11111111
<ul>
<li>222222</li>
<li>222222</li>
<li>222222
<ul>
<li>33333</li>
<li>33333</li>
<li>33333</li>
</ul>
</li>
</ul>
</li>
<li>11111111</li>
<li>11111111</li>
</ul>
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
</dl>
HTML 表单与输入实例
<input type=" checkbox" name="Bike">
男性：
<input type=" radio" checked="checked" name="Sex" value="male" />
<br />
女性：
<input type="radio" name="Sex" value="female" />
</form>
selected:默认选中
<from>
<select name="cars">
<option value="baoma">宝马</option>
<option value="benchi" selected="selected">奔驰</option>
<option value="aodi">奥迪</option>
</select>
</from>
文本域：
<textarea rows="",cols="">文本内容
</texarea>
按钮：
<input type="button" value="点击进入">
fieldset around data:带标题的框
<fieldset>
<legend>标题内容</lengend>
框里的内容
</fieldset>
表单实例：
带有输入框和确认按钮的表单
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
HTML 图像实例
<body background="/i/eg_background.jpg">
如果无法显示图像，将显示 "alt" 属性中的文本
<img src="/i/eg_goleft123.gif" alt="向左转" />
HTML中的样式：
<head>
<style type="text/css">
h1 {color: red}
p {color: blue}
</style>
</head>
<body>
<h1>header 1</h1>
<p>A paragraph.</p>
</body>
没有下滑线的连接：
<a href="/example/heml/lastpage.html" style="text-decoration:none">
这是一个没有下划线的连接
</a>
引入外部样式表：
<head>
<link rel="stylesheet" type="text/css" href="/html/csstest1.css" >
</head>
HTML 头部 (head) 实例
在新窗口中打开：
<base target="_blank" />
<a href="http://www.w3school.com.cn" target="_blank">
<a href="http://www.w3school.com.cn">（也会在新窗口中打开）
HTML 元信息 (meta) 实例
<meta name="author"
content="w3school.com.cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
</head>
HTML 脚本 (Script) 实例
<script type="text/javascript">document.write("<h1>Hello World!</h1>")
</script>
不支持javaScript脚本的
<noscript>Sorry, your browser does not support JavaScript!</noscript>
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
