<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>无序列表</title>

    <!--

    什么是列表

     列表就是信息资源的一种展示形式。它可以使信息结构化和条理化，并以列表的样式显示出来，

     以便浏览者能更快捷地获得相应的信息！

     01.前面有默认的实心圆

     02.每个li独占一行

     03.适用于我们的新闻列表，导航栏

    -->

</head>

<body>

<ul>

    <li>好好学习</li>

    <li>好好学习</li>

    <li>好好学习</li>

</ul>

</body>

</html>

无序列表

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>有序列表</title>

    <!--

      01.有顺序，前面默认是阿拉伯数字

      02.适用与试卷 和问卷调查！

    -->

</head>

<body>

   <ol>

       <li>好好学习</li>

       <li>好好学习</li>

       <li>好好学习</li>

   </ol>

</body>

</html>

有序列表

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>自定义列表</title>

    <!--

       01.每个dt  dd都独占一行

       02.默认前面没有任何标记

       03.适用于一个标题下，有多个列表项的场景

    -->

</head>

<body>

  <dl>

      <dt>C盘</dt>

      <dd>文件1</dd>

      <dd>文件2</dd>

      <dt>D盘</dt>

      <dd>文件1</dd>

      <dd>文件2</dd>

  </dl>

</body>

</html>

自定义列表

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>表格</title>

    <!--

      01.简单易用，便于阅读

      02.结构简单

      table中的属性：

       01.border： 边框的像素

       02.cellpadding 设置内容和单元格之间的距离

       03.cellspacing 设置单元格和单元格之间的距离

       04.bgcolor  整个表格的背景色    #ffc0cb :代表的是16进制的颜色码

       05.width   表格在浏览器中的宽度比

 td节点中的

     align="left"     默认

     align="right"

     align="center"

    -->

</head>

<body>

    <table border="1px" cellpadding="5px" cellspacing="5px"

            bgcolor="pink" width="50%">

        <tr>

             <td>第1行的第1列</td>

             <td>第1行的第2列</td>

             <td>第1行的第3列</td>

        </tr>

        <tr>

             <td>第2行的第1列</td>

             <td>第2行的第2列</td>

             <td>第3行的第3列</td>

        </tr>

    </table>

</body>

</html>

表格

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>跨行跨列</title>

    <!--

    都必须写在td中

        rowspan :跨行

        colspan:跨列

    -->

</head>

<body>

  <table border="1px" cellpadding="5px">

        <tr>

            <td colspan="3"  align="center"> 学生成绩表</td>

        </tr>

        <tr>

             <td rowspan="2">张三</td>

             <td>math</td>

             <td>80</td>

        </tr>

        <tr>

             <td>java</td>

             <td>90</td>

        </tr>

        <tr>

             <td rowspan="2">李四</td>

             <td>math</td>

             <td>85</td>

        </tr>

        <tr>

             <td>java</td>

             <td>95</td>

        </tr>

  </table>

</body>

</html>

跨行跨列

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>高级表格</title>

</head>

<body>

<table border="1" cellspacing="0" width="70%">

   <caption>年终数据报表</caption>  <!--标题-->

      <thead bgcolor="red">   <!--页眉-->

          <tr>

               <th>月份</th>

               <th>收入</th>

          </tr>

      </thead>

        <tbody bgcolor="pink">  <!--主体-->

        <tr>

            <td>1月份</td>

            <td>5000</td>

        </tr>

        <tr>

            <td>2月份</td>

            <td>5000</td>

        </tr>

        <tr>

            <td>3月份</td>

            <td>6000</td>

        </tr>

        <tr>

            <td>4月份</td>

            <td>8000</td>

        </tr>

        </tbody>

        <tfoot bgcolor="green">  <!--页脚-->

           <tr>

               <td>平均月收入</td>

               <td>6000</td>

           </tr>

           <tr>

               <td>总收入</td>

               <td>24000</td>

           </tr>

        </tfoot>

</table>

</body>

</html>

高级表格

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>音频标签</title>

    <!--

    audio:音频标签

    controls：是否显示 控制条

    autoplay：是否自动播放

    -->

</head>

<body>

   <audio controls autoplay>

        <source src="../audio/music.mp3">

   </audio>

</body>

</html>

音频标签

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>视频标签</title>

    <!--

    video:视频标签

    controls：是否显示 控制条

    autoplay：是否自动播放

    -->

</head>

<body>

  <video controls  autoplay src="../video/video.mp4"> </video>

</body>

</html>

视频标签

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>结构元素</title>

    <!--

     用于网页的布局：

      header: 头部区域

      section：html页面中的一块独立的部分

      footer：脚部区域

      nav:导航菜单

      article:独立的文章内容

      aside：常用于侧边栏

    -->

    <style type="text/css">

        header{

             height: 20px;

            border: 1px solid red;

        }

        section{

            height: 1000px;

            border: 1px solid black;

        }

        footer{

            height: 50px;

            border: 1px solid blue;

        }

    </style>

</head>

<body>

  <header>

  </header>

 <section>

 </section>

 <footer>

 </footer>

</body>

</html>

结构元素

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>内联框架</title>

    <!--

    src ：指的是 我们需要引入的外部文件地址

   需求：

     用户点击不同的超链接，在iframe框架中 显示不同的页面！

    -->

</head>

<body>

  <a  href="http://www.jd.com" target="myIframe">京东</a>

  <a  href="http://www.taobao.com"  target="myIframe">淘宝</a>

  <a  href="http://www.baidu.com"  target="myIframe">百度</a>

    <iframe name="myIframe" src="http://www.baidu.com" scrolling="no"  width="500" height="500"></iframe>

</body>

</html>

内联框架

HTML5⑥的更多相关文章

  1. 使用HTML5开发Kinect体感游戏

    一.简介 我们要做的是怎样一款游戏? 在前不久成都TGC2016展会上,我们开发了一款<火影忍者手游>的体感游戏,主要模拟手游章节<九尾袭来 >,用户化身四代,与九尾进行对决, ...

  2. 读书笔记：《HTML5开发手册》--HTML5新的结构元素

    读书笔记:<HTML5开发手册> (HTML5 Developer's CookBook) 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰.之前在 ...

  3. HTML5 Boilerplate - 让页面有个好的开始

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  4. 戏说HTML5

    如果有非技术人员问你,HTML5是什么,你会怎么回答? 新的HTML规范... 给浏览器提供了牛逼能力,干以前不能干的事...(确切地说应该是给浏览器规定了许多新的接口标准,要求浏览器实现牛逼的功能. ...

  5. nw.js桌面软件开发系列 第0.1节 HTML5和桌面软件开发的碰撞

    第0.1节 HTML5和桌面软件开发的碰撞 当我们谈论桌面软件开发技术的时候,你会想到什么?如果不对技术本身进行更为深入的探讨,在我的世界里,有这么多技术概念可以被罗列出来(请原谅我本质上是一个Win ...

  6. Web大前端时代之：HTML5+CSS3入门系列

    准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...

  7. 07. Web大前端时代之：HTML5+CSS3入门系列~H5 地理位置

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...

  8. HTML5 介绍

    本篇主要介绍HTML5规范的内容和页面上的架构变动. 目录 1. HTML5介绍 1.1 介绍 1.2 内容 1.3 浏览器支持情况 2. 创建HTML5页面 2.1 <!DOCTYPE> ...

  9. HTML5 语义元素(一)页面结构

    本篇主要介绍HTML5增加的语义元素中关于页面结构方面的,包含: <article>.<aside>.<figure>.<figcaption>.< ...

  10. HTML5 input元素新的特性

    在HTML5中,<input>元素增加了许多新的属性.方法及控件.本文章分别对这三方面进行介绍. 目录 1. 属性 2. 方法 3. 新控件 1. 属性 <input>元素在H ...

随机推荐

  1. Parallels Desktop 重装系统

    安装教程,大家可以在网上找找 现在我想重装系统,怎么弄呢? 1.~/Documents/Parallels 目录下那个PVM后缀的文件直接删除 2.重装找开虚拟机,会弹出一个框,说找不到系统,点击删除 ...

  2. linux以16进制查看文件

    vim 先用vim -b data 以2进制打开文件,然后用xxd工具转化,在vim的命令行模式下: :%!xxd        --将当前文本转化为16进制格式 :%!xxd -r    --将16 ...

  3. function(){}、var fun=function(){}和function fun(){}的区别

    一.基本定义 1.函数声明:使用function声明函数,并指定函数名. function fun() { // ...... } 2.函数表达式:使用function声明函数,但未指定函数名,将匿名 ...

  4. EPOCH batchsize

    只有在数据很庞大的时候(在机器学习中,几乎任何时候都是),我们才需要使用 epochs,batch size,迭代这些术语,在这种情况下,一次性将数据输入计算机是不可能的.因此,为了解决这个问题,我们 ...

  5. 传值与传引用（C++）

    reference(引用) 是C++对C的一个扩充 int a; int &b = a;//声明b是一个整形的引用变量 C语言,函数的参数传递有2种形式:传值方式调用和传引用方式调用 传值方式 ...

  6. button theme

    children:[ButtonTheme.bar( child:ButtonBar( children:[ FlatButton... ], ),), ]

  7. Linux 文件系统结构、磁盘的管理

    1.linux文件系统内没有文件的创建时间. 2.个人版RHEL8.0,RHEL9.企业版RHEL5U4,RHEL5U5. 3.cat /etc/issue查看系统版本的文件. 4.ext2无法灾难恢 ...

  8. Linux Time_wait网络状态 调优

    Time_wait状态 表示收到了对方的FIN报文,并发送出了ACK报文,就等2MSL后即可回到CLOSED可用状态了. 如果FIN_WAIT_1状态下,收到了对方同时带FIN标志和ACK标志的报文时 ...

  9. rabbitmq安装与高可用集群配置

    rabbitmq版本:3.6.12 rabbitmq安装 1.安装openssl wget http://www.openssl.org/source/openssl-1.0.0a.tar.gz &a ...

  10. Java的程序执行过程与编译原理

    百度云:https://pan.baidu.com/s/16FVPI8PSqk5O8qufljCNHg 提取码:a2vr 一,文字步骤 1.编写源代码 2.进入cmd 3.输入javac将文件编译转换 ...