html续

html续

统一资源定位符(URL)(重点)

超链接(重点)

  • 名称：a

  • 说明：超链接，可以完成点击跳转功能

  • 属性：

    • href：指定跳转地址

    • title：光标放上去时的提示信息

    • target：指定跳转打开的方式

      • _self：覆盖当前页面，默认的

      • _blank：在新页面中打开

      • _top：覆盖嵌套的最顶层打开页面

      • _parent：覆盖父级页面

    • name：设置锚点，用于跳转定位

      • 设置后就可以在其他a标签的href中指定该位置

      • 如：<a href="#p5"></a> <a name="p5">第5章</a>

      • 说明：不但可以在一个网页中跳转，还可以跨页面跳转。

      • 01-chaolianjie.html
<html>
    <head></head>
    <body>
        <a href="http://www.baidu.com" title="百度" target="_self">百度一下</a>
        <a href="http://www.baidu.com" title="百度" target="_blank">百度一下</a>
        <a href="#p5">第5章</a>
        <p><a name="p1">第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a name="p5">第5章</a><a href="#p1">返回第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p><p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第8章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
        <p><a>第1章</a>北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。北京时间3月27日，据NBA官网报道，NBA官方公布了上周的NBA东西部最佳球员，骑士队的勒布朗-詹姆斯和马刺队的拉马库斯-阿尔德里奇分别当选。</p>
    </body>
</html>

     02-maodian.html

<a href="01-chaolianjie.html#p5">去第5章</a>

多媒体标签

  • img：图片(重点)

    • src：指定图片资源位置

      • 相对路径：只写文件名或者指定目录下的文件等

      • 绝对路径：使用/开头，或者指定完整URL

    • width：设置宽度

    • height：设置高度

    • title：设置提示信息，图片加载失败是也会显示

  • audio：音频

    • controls：控制按钮

    • loop：是否循环播放

    • autoplay：是否自动播放

  • video：视频

    • 属性与audio一致，但是多出来一些

    • 多出来：width、height

    • 同时设置宽高，不成比例的地方会显示空白

    • 03-duomeiti.html
<html>
    <head>
        <meta charset="utf-8" />
        <title>多媒体测试</title>
    </head>
    <body>
        <img src="http://img3.xiazaizhijia.com/walls/20160708/mid_2f172c09d079701.jpg" width="300px" height="200px" title="美女"/>
        <br />
        
        <audio src="小苹果.mp3" controls loop></audio>
        <br />
        
        <video src="搞笑视频.mp4" controls width="200px" height="300px"></video>
    </body>
</html>

表格(table)

  • 说明：类似于excel的格式

  • table：表格标签，所有表格的东西都要放在其中

    • border：边框尺寸

    • width：宽度

    • height：高度

    • align：对齐方式(left、center、right)

    • bgcolor：背景色

    • bordercolor：边框颜色

  • tr：表格中的一行

    • bgcolor：背景色

    • align：水平对齐方式(left、center、right)

    • valign：垂直对齐方式(top、middle、bottom)

  • td：一行中的一列，也就是一个单元格

    • rowspan：行合并

    • colspan：列合并

  • th：与td相似，但是会加粗，用于强调，设置表头

  • caption：表的标题，用于描述整个表格的用途

  • 04-table.html
<html>
    <head>
        <title>表格</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <table border="1" bordercolor="red" width="500px" height="300px" align="center" cellspacing="0" cellpadding="10" bgcolor="blue">
            <caption>学生信息统计表</caption>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
            </tr>
            <tr align="center">
                <td colspan="2">1</td>
                <td align="right" rowspan="2">3</td>
            </tr>
            <tr valign="middle">
                <td>4</td>
                <td>5</td>
            </tr>
        </table>
    </body>
</html>

分帧(iframe)

  • 说明：就是一个页面中包含另一个页面

  • 属性：

    • frameborder：有无边框(0、1)

    • scrolling：滚动条(no、yes、auto)

    • name：指定名字，可以用于a标签跳转的目标

    • width、height、src

05-iframe.html

<html>
    <head>
        <title>分帧iframe</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <a href="http://www.baidu.com" target="test">百度一下</a><br />
        <iframe name="test" src="06-test.html" width="800px" height="600px" frameborder="1" scrolling="yes"/>
    </body>
</html>

06-test.html

<p>这是一个新页面</p>

分帧(frameset)

  • 说明：替代body定义网页框架，而且可以指定尺寸或比例

  • frameset：分帧结构

    • rows：上下分配尺寸，可以通过像素，也可以设置百分比，*表示其他剩余部分

    • cols：左右分配尺寸，用法同上

    • noresize：禁止重新设置大小

    • frameborder：是否显示每一帧的边框

    • border：帧的边框宽度

    • bordercolor：边框的颜色

  • frame：每一帧，可以添加一个页面

  • noframes：针对不支持framset的浏览器的设置

  • 07-frameset.html
<html>
    <head>
        <title>分帧frameset</title>
        <meta charset="utf-8" />
    </head>
    <frameset rows="100, *" noresize frameborder="1" border="20" bordercolor="red">
        <frame src="http://www.baidu.com" />
        <frameset cols="20%, *">
            <frame src="http://www.163.com" />
            <frame src="http://www.sohu.com" />
        </frameset>
        <noframes>
            <body>大哥，你的浏览器有点low啊</body>
        </noframes>
    </frameset>
</html>

08-frameset.html

<html>
    <head>
        <title>分帧测试</title>
        <meta charset="utf-8" />
    </head>
    <frameset rows="50, *">
        <frame src="08-top.html" />
        <frameset cols="20%, *">
            <frame src="08-left.html" />    
            <frame src="08-right.html" name="right" />    
        </frameset>
    </frameset>
</html>

08-left.html

<html>
    <head>
        <title>left</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="green">
        <a href="http://www.baidu.com" target="right">百度一下</a><br />
        <a href="http://www.sohu.com" target="right">搜狐新闻</a>
    </body>
</html>

08-right.html

<html>
    <head>
        <title>right</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="blue">
    
    </body>
</html>

08-top.html

<html>
    <head>
        <title>top</title>
        <meta charset="utf-8" />
    </head>
    <body bgcolor="red">
    
    </body>
</html>

表单(form)(非常重要)

  • 说明：收集用户信息，经常用于用户的注册、登录等场景

  • form：表示表单标签，所有要提交的数据都必须放在其中

    • action：指定提交的地址

    • method：指定提交的方式，get、post、put、delete

      • get：提交时参数会出现在URL中

      • post：提交时参数不会出现在URL中

  • input：输入框，表单中的最重要的组成部分

    • type:

      • text：普通文本，默认

      • password：密文文本

    • name：设置input的名字，否则无法提交数据

09-form.html

<html>
    <head>
        <title>表单</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <form action="09-test.html" method="post">
            用户名:<input type="text" name="username" /><br />
            密&nbsp;&nbsp;&nbsp;码:<input type="password" name="password" /><br />
            <input type="submit" />
        </form>
    </body>
</html>

09-test.html

<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        登录验证中...
    </body>
</html>

练习：

  • 写一个3*3的表格，需要有标题、表头、内容显示，要求合并1和4，8和9

  • 写一个分帧页面，点击有联动的效果，功能不限

  • 写一个表单，能使用post方法进行提交

    • 自学input的其他类型和新的标签

    • 完成：用户名、密码、性别(单选)、爱好(复选)、省份(下拉)、简介(文本域)、提交按钮

    • 若想对齐，可以将上面的内容放在表格中

posted @ 2018-04-07 17:13  pythonsonline  阅读(152)  评论(0)  编辑  收藏  举报