<!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. 59.phpstudy升级Mysql的正确姿势

    phpstudy升级Mysql的正确姿势 phpstudy很糟心,不能选择mysql的版本,所以就强制升级. 下载mysql 首先要到官网上去下载你想要的mysql版本. 下载网址:Mysql官网地址 ...

  2. dfs进阶

    当自己以为自己深搜(其实就是暴力啦)小成的时候,发现没有题目的积累还是很难写出程序,自己真的是太年轻了:总结一下就是做此类题看是否需要使用vis数组优化以及继续搜索的条件或者满足答案的条件.以下为2题 ...

  3. eclipse添加spring boot 插件

    在使用eclipse开发时,一般需要添加spring boot的管理插件,这样更方便我们开发,在写application.yml或properties配置的时候,也有相关的提示,而且还可以从配置文件中 ...

  4. Solr入门介绍

    solr入门案例 solr是apache下的一个全文检索引擎系统. 我们需要在服务器上单独去部署solr, 通过它的客户端工具包solrJ, 就是一个    jar包, 集成到我们项目中来调用服务器中 ...

  5. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

  6. UValive4195 Heroes of Money and Magic

    斜率优化 想骂人了,马格吉最后调了半小时 TMD造数据的人是SB吧? 我写  while(scanf("%d%d",&n,&m)!=EOF&&n) ...

  7. SpringMVC 允许跨域访问 也可以选择限制指定IP 允许访问 对象的数据传输

    java ajax

  8. Linux 系统日志

    查看日志服务 大部分Linux发行版默认的日志守护进程为 syslog,位于 /etc/syslog 或 /etc/syslogd 或/etc/rsyslog.d,默认配置文件为 /etc/syslo ...

  9. Python爬虫(四)——开封市58同城数据模型训练与检测

    前文参考: Python爬虫(一)——开封市58同城租房信息 Python爬虫(二)——对开封市58同城出租房数据进行分析 Python爬虫(三)——对豆瓣图书各模块评论数与评分图形化分析 数据的构建 ...

  10. Java.lang.IllegalStateException: Cannot call sendRedirect() after the response has been committed

    在使用response重定向的时候,报以下错误:Java.lang.IllegalStateException: Cannot call sendRedirect() after the respon ...