<!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. css3动态计算元素的高度及宽度

    1.px     像素,我们在网页布局中一般都是用px. 2.百分比     百分比一般宽泛的讲是相对于父元素,自适应网页布局越来越多,百分比也经常用到了 3.Viewport 当已知一个div的高度 ...

  2. HTTPS学习笔记一----HTTPS的基础理论知识

    首先推荐一本书,<HTTP权威指南>我就是看这本书入门的,对http协议有了更好的理解,学习https的理论知识我认为需要了解以下几点,需要一步步的深入学习: 1.HTTPS的基本概念? ...

  3. linux以16进制查看文件

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

  4. Nginx 解析PHP的原理 | CGI、FastCGI及php-fpm的关系

    Nginx解析PHP的原理,CGI/FastCGI以及PHP-Fpm的关系. 一.PHP+Nginx应运而生的场景.随着互联网的发展,用户对此接受面广,数据流的增大使得Web端的运行承载压力日益增大, ...

  5. CSS 初知

    CSS 初知 举例 人 { 身高:175cm; 体重:70kg; 肤色:黄色 } 描述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通 ...

  6. Docker Kubernetes Volume 本地数据卷

    Docker Kubernetes Volume 本地数据卷 emptyDir 当Pod分配到Node时,首先创建一个空卷,并挂载到Pod中的容器. Pod中的容器可以读取和写入卷中的文件. 当Pod ...

  7. 前后端分离不可缺少的神器 NGINX

    样例讲解 1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake ...

  8. PHP快速排序（递归）

    日常的排序算法中,快速排序是其中一种.实现起来相对简单. 假设有一个数组,有若干(N)个元素(数字且无序),需要对其进行从小到大的排序. 快速排序的思路是怎么样的呢? 取一个中间值,然后,用其他数组元 ...

  9. python学习笔记：*args和**kwargs使用原理？

    一.*args和**kwargs原理 先看个例子: def test(*args,**kwargs): print("args =",args) print("kwarg ...

  10. 2018.9.22 NOIP模拟赛

    *注意:这套题目应版权方要求,不得公示题面. 从这里开始 Problem A 妹子 Problem B 旅程 Problem C 老大 因为业务水平下滑太严重,去和高一考NOIP模拟,sad... P ...