<!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. Unity骨骼动画资源解析与优化

    一,背景 最近发现项目的动画文件有点大,不光内存大,而且文件也很大,所以从这2个方面下手处理 二,动画文件大小优化 为了优化动画文件大小,我们可以先分析下文件,Ctrl+D将动画文件从FBX拷贝出来, ...

  2. Mysql授权root用户远程登录

    默认情况下Mysql的root用户不支持远程登录,使用以下命令授权   [Charles@localhost ~]$ mysql -uroot -p123 MariaDB [(none)]> u ...

  3. Vue系列之 => 命名视图实现经典布局

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. ASP.NET页面之间传值的方式之Application（个人整理）

    Application  Application变量在整个应用程序生命周期中都是有效的,类似于使用全局变量一样,所以可以在不同页面中对它进行存取.它和Session变量的区别在于,前者是所有的用户共用 ...

  5. String 常用方法

    // 不会改变原字符串string.substring(startIndex, endIndex) —— 根据头尾位置返回一个字符串 string.substr(startIndex, length) ...

  6. JVM探秘2--详解内存溢出OutOfMemoryError异常

    JVM运行时内存被划分成多个区域,而除了程序计数器之外,其他几个区都会出现OutOfMemoryError异常,主要原因就是对应内存区域的内存不足以再分配内存,一般要么是内存泄漏了要么就是内存参数设置 ...

  7. Flutter 获取控件尺寸和位置

    1. 插件必须渲染好, final RenderBox box = globalKey.currentContext.findRenderObject(); final size = box.size ...

  8. yii2 使用多个数据库的案例

    配置: 'components' => [ 'db' => [ 'class' => 'yii\db\Connection', 'dsn' => 'mysql:host=ip; ...

  9. Mysql BLOB、BLOB与TEXT区别及性能影响、将BLOB类型转换成VARCHAR类型

    在排查公司项目业务逻辑的时候,见到了陌生的字眼,如下图 顺着关键字BLOB搜索,原来是Mysql存储的一种类型,从很多文章下了解到如下信息 了解 MySQL中,BLOB字段用于存储二进制数据,是一个可 ...

  10. vim自动补全头注释与说明

    做个笔记吧. .vimrc autocmd BufNewFile *.c,*.cpp,*.sh,*.py,*.java exec ":call SetTitle()" " ...