HTML 提示:使用小写属性
属性和属性值对大小写不敏感。
不过,万维网联盟在其 HTML 4 推荐标准中推荐小写的属性/属性值。
而新版本的 (X)HTML 要求使用小写属性。
属性值应该始终被包括在引号内。双引号是最常用的,不过使用单引号也没有问题。
在某些个别的情况下,比如属性值本身就含有双引号,那么您必须使用单引号,例如:
name='Bill "HelloWorld" Gates'HTML标签:
<sub>subscript</sub>--向下显示subscript
This text contains
<sup>superscript</sup>--向上显示superscript
这是
预格式文本。
它保留了 空格
和换行。
</pre>--保留预文本格式,适合显示计算机代码
<kbd>Keyboard input</kbd>
<tt>Teletype text</tt>
<samp>Sample text</samp>
<var>Computer variable</var>--这些标签常用于显示计算机/编程代码
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>-在 HTML 文件中写地址
<acronym title="World Wide Web">WWW</acronym>--缩写
Here is some Hebrew text
</bdo>--如果您的浏览器支持 bi-directional override (bdo),下一行会从右向左输出 (rtl)
这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。这是长的引用。
</blockquote>
<q>
这是短的引用。
</q>--使用 blockquote 元素的话,浏览器会插入换行和外边距,而 q 元素不会有任何特殊的呈现
1.HTML 链接 - name 属性
name 属性规定锚(anchor)的名称。
您可以使用 name 属性创建 HTML 页面中的书签。
书签不会以任何特殊方式显示,它对读者是不可见的。
当使用命名锚(named anchors)时,我们可以创建直接跳至该命名锚(比如页面中某个小节)的链接,这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
命名锚的语法:
<a name="label">锚(显示在页面上的文本)</a>
提示:锚的名称可以是任何你喜欢的名字。
提示:您可以使用 id 属性来替代 name 属性,命名锚同样有效。
实例
首先,我们在 HTML 文档中对锚进行命名(创建一个书签):
<a name="tips"
>基本的注意事项 - 有用的提示</a>
然后,我们在同一个文档中创建指向该锚的链接:
<a href="#tips">有用的提示</a>
您也可以在其他页面中创建指向该锚的链接:
<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>
在上面的代码中,我们将 # 符号和锚名称添加到 URL 的末端,就可以直接链接到 tips 这个命名锚了。
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
2.无序列表
无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。
无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul> <li>Coffee</li> <li>Milk</li> </ul>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
同样,有序列表也是一列项目,列表项目使用数字进行标记。
有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol> <li>Coffee</li> <li>Milk</li> </ol>
浏览器显示如下:
- Coffee
- Milk
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
3.垂直框架
<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>
4.水平框架
<frameset rows="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>
5.混合框架
<frameset rows="50%,50%">
<frame src="/example/html/frame_a.html noresize="noresize" ">--设置该属性使窗体无法移动
<frameset cols="25%,75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
6.导航框架
<frameset cols="120,*">
<frame src="/example/html/html_contents.html">
<frame src="/example/html/frame_a.html" name="showframe">
</frameset>
7.内联框架
<body>
<iframe src="/example/html/demo_iframe.html" width="200" height="200" frameborder="0"></iframe>
<p>某些老式的浏览器不支持内联框架。</p>
<p>如果不支持,则 iframe 是不可见的。</p>
</body>--frameborder="0"删除边框
8.Frame作为链接的目标
<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>
9.声音播放
<embed height="100" width="100" src="/i/horse.mp3"></embed>
<object height="100" width="100" data="/i/horse.mp3"></object>
10.使用雅虎媒体播放器
<p><a href="/i/song.mp3">播放 mp3</a></p>
<p><a href="/i/bird.wav">播放 wav</a></p>
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
11.视频播放
<video width="320" height="240" controls="controls"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.ogg" type="video/ogg" /> <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240"> <embed src="movie.swf" width="320" height="240" /> </object> </video>12.优酷视频播放器
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>