• 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
  • 相关阅读:
    Shell脚本中循环语句for,while,until用法
    国内yum源的安装(163,阿里云,epel)
    express高效入门教程(4)
    express高效入门教程(3)
    express高效入门教程(2)
    express高效入门教程(1)
    dart快速入门教程 (8)
    dart快速入门教程 (7.4)
    dart快速入门教程 (7.3)
    dart快速入门教程 (7.2)
  • 原文地址:https://www.cnblogs.com/zoulixiang/p/9947831.html
Copyright © 2020-2023  润新知