HTML5 标签实例

html 5 学习
1.<p></p> #段落元素定义
2.<h1></h1> #标题 h1代表大号的字体。依此变小
3.<br /> #实例 代表直接换行。
<p>
To break<br />lines<br />in a<br />
</p>
4.居中排列
<h1 align="center">This is heading 1</h1> ##right右 center #居中
5.标签定义水平线
<p>hr 标签定义水平线:</p>
<hr />
6.注释
<!--这是一段注释。注释不会在浏览器中显示。-->
7.背景颜色
<body bgcolor="yellow">
8.HTML 链接
<a href="http://www.w3school.com.cn">This is a link</a>

9.HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<img src="w3school.jpg" width="104" height="142" />
10.文本格式化
<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>

11.预格式文本
此例演示如何使用 pre 标签对空行和空格进行控制
<pre>
这是
与格式文本
和换行
</pre>
<p>pre 标签很适合显示计算机代码</p>
<pre>
for i = 1 to 10
print i
next i
</pre>

12.“计算机输出” 标签
<code>Computer code</code>
<br />
<kbd>Keyboard input</kbd>
<br />
<tt>Teletype text</tt>
<br />
<samp>Sample text</samp>
<br />
<var>Computer variable</var>
<br />

<p>
<b>注释:</b>这些标签常用于显示计算机/编程代码。
</p>

13.地址
此例演示如何在 HTML 文件中写地址。

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

14.删字效果
<p>一打有 <del>二十</del> <ins>十二</ins> 件。</p>

<p>大多数浏览器会改写为删除文本和下划线文本。</p>

<p>一些老式的浏览器会把删除文本和下划线文本显示为普通文本。</p>


15.超链接
<p>
<a href="/index.html">本文本</a> 是一个指向本网站中的一个页面的链接。</p>

<p><a href="http://www.microsoft.com/">本文本</a> 是一个指向万维网上的页面的链接。</p>

16.图片作为链接
<p>
您也可以使用图像来作链接:
<a href="/example/html/lastpage.html">
<img border="0" src="/i/eg_buttonnext.gif" />
</a>
</p>
17.在新的浏览器窗口打开链接
本例演示如何在新窗口打开一个页面,这样的话访问者就无需离开你的站点了。
<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>

<p>如果把链接的 target 属性设置为 "_blank",该链接会在新窗口中打开。</p>

18.链接到同一个页面的不同位置
本例演示如何使用链接跳转至文档的另一个部分

<p>
<a href="#C2">查看 Chapter 4。</a>
</p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2><a name="C2">Chapter 2</a></h2>
<p>This chapter explains ba bla bla</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>

19.跳出框架
<p>被锁在框架中了吗?</p>

<a href="/index.html"
target="_top">请点击这里!</a>

20.创建电子邮件链接
本例演示如何如何链接到一个邮件。(本例在安装邮件客户端程序后才能工作。)
<p>
这是邮件链接:
<a href="mailto:someone@microsoft.com?subject=Hello%20again">发送邮件</a>
</p>

<p>
<b>注意:</b>应该使用 %20 来替换单词之间的空格,这样浏览器就可以正确地显示文本了。
</p>
21.垂直框架
本例演示:如何使用三份不同的文档制作一个垂直框架。
<html lang="en">
<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>
<head>

22.混合型框架
<!DOCTYPE html>
<html lang="en">
<frameset rows="50%,50%">
<frame src="./frame_a.html">
<frameset cols="25%,75%">
<frame src="./frame_b.html">
<frame src="./frame_c.html">
</frameset>
</frameset>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>

</body>
</html>

23.含有 noresize="noresize" 属性的框架结构
本例演示 noresize 属性。在本例中,框架是不可调整尺寸的。在框架间的边框上拖动鼠标,你会发现边框是无法移动的。
<frameset rows="50%,50%">
<frame src="./frame_a.html" noresize="noresize" />
<frameset cols="80%,20%">
<frame src="./frame_b.html" />
<frame src="./frame_c.html" />
</frameset>
</frameset>

24.导航框架
新建三个html文件,分别命名为a.html、b.html、c.html里面内容随便写如

a.html

<html>

<body>

<h1>This is a heading1</h1>

</body>

</html>

2
再新建一个contents.html内容如下

<html>

<body>

<a href="a.html" target="showframe">a</a><br/>

<a href="b.html" target="showframe">b</a><br/>

<a href="c.html" target="showframe">c</a>

</body>

</html>

3
再新建一个1.html内容如下

<html>

<frameset cols="120,*">

<frame src="contents.html">

<frame src="a.html"name="showframe">

</frameset>

</html>

25.内联框架
本例演示如何创建内联框架(HTML 页中的框架)。
<body>
<iframe src="./1.png"></iframe>
<p>test</p>
</body>

26.使用框架导航跳转至指定的节
https://www.cnblogs.com/919czzl/p/4685211.html
posted @ 2018-11-12 17:29  Mr.zou  阅读(679)  评论(0编辑  收藏  举报