视频来源:麦子学院   讲师:朱朝兵

  1. HTML5概念:HTML即超文本标记语言(HyperText Makeup Language),是一种语法简单,结构清晰的解释型文档,不同于其他编程语言。
  2. HTML5新增的网页结构
    header元素表示页面中的一个内容区块或者整个页面的标题
    nav元素表示页面中导航链接部分
    article元素表示页面中一块与上下文不相关的独立内容,比如一篇文章中的文章?【表示理解无能】
    section元素表示页面中的一块内容区块,比如章节的页眉页脚,也可以和Hn等一起使用,标示出文档的结构,不带标题的内容区块不建议使用section
    aside元素表示article元素的内容之外的,和内容相关的辅助信息
    footer元素表示页面或者页面中一块区域的页脚,比如文章创建时间,作者,联系方式等等
    1. article元素的使用方法

      <article>
      <header>
      <h1>article元素的使用方法</h1>
      <p>创建时间:<time pubdate >2017/11/27</time></p>
      <!-- 使用pubdate属性,表示这个时间是当前内容的发布日期(比如<time>所在的<article>) -->
      </header>
      <p><b>Article</b>是一个独立的区域</p>
      <section>
      <h2>读者评论</h2>
       <article>
        <header>
         <h3>读者:Yolo</h3>
         <p><time pubdate datetime="2017-11-27 18:39">两小时前</time></p>
        </header>
        <p>很精彩的文章!</p>
       </article>
      </section>
      <footer>
       <p><small>版权所有</small></p>
      </footer>
      </article>
    2. section元素的使用方法
      <article>
      <h1>产品</h1>
      <p>产品列表</p>
      <section>
      <h2>产品A</h2>
      <p>产品A的介绍</p>
      </section>
      <section>
      <h2>产品B</h2>
      <p>产品B的介绍</p>
      </section>
      </article>

        *当一段内容比较独立时使用article,当想把独立内容划分为几段时用section

    3. aside元素的使用方法
      使用方法一、作为主要内容的附属信息部分
      <header>
      <h1>国庆节去成都看熊猫</h1>
      </header>
      <article>
      <h2>大熊猫基地</h2>
      <p>大熊猫基地有很多大熊猫</p>
      <aside>
      <h3>名词解释:</h3>
      <dl>
      <dt>大熊猫</dt>
      <dd>大熊猫是国家一级保护动物</dd>
      <dt>大熊猫基地</dt>
      <dd>大熊猫基地在四川卧龙</dd>
      </dl>
      </aside>
      </article> 使用方法二、作为全局页面站点的附属信息
      <aside>
       <h1>网站公告:</h1>
       <p>国庆节放假通知</p>
       <p>中秋节放假通知</p>
      </aside>
    4. nav元素的使用方法
      1、传统的导航条
      2、侧边栏导航
      3、内页导航
      4、翻页操作
    5. time元素及pubdate属性
      <p>发布时间:<time datetime="2017-11-27" pubdate>2017年11月27日</time></p>
      

       *用来给机器识别的,便于搜索引擎,爬虫解析

    6. header元素
      <style type="text/css">
       *{margin: 0;padding: 0}
       body{font-family: '微软雅黑';text-align: center;}
       a{
        color: #f60;
        text-decoration: none;
       }
       nav{
        height: 48px;
        background: #f60;
       }
       nav li{
        background: #000;
        float: left;
        border-radius: 5px;
        list-style: none;
        padding: 5px 10px;
        margin:10px;
       }
       </style>
      <header>
      <hgroup>
      <h1>HTML5视频教程</h1>
      <a href="">手机版</a>
      <a href="">论坛</a>
      </hgroup>
      <nav>
      <ul>
      <li><a href="">首页</a></li>
      <li><a href="">手机版</a></li>
      <li><a href="">论坛</a></li>
      </ul>
      </nav>
      </header>
    7. hgroup是将标题和它的子标题进行分组的元素,hgroup元素一般会把h1-h6元素进行分组。比如在一个内容区块的标题和它的子标题是一组。通常情况下,文章只有一个主标题时,是不需要hgroup元素的

      <article>
      <header>
      <hgroup>
      <h1>文章主标题</h1>
      <h2>文章子标题</h2>
      </hgroup>
      <p>发布时间:<time datetime="2017-11-27">2017年11月27日</time></p>
      </header>
      <p>文章正文</p>
      </article>
    8. footer元素

      <style type="text/css">
      *{margin: 0;padding: 0;}
      body{
      font-family: '微软雅黑';
      text-align: center;
      }
      a{
      text-decoration: none;
      color: #555;
      }
      </style> <div class="footer">
      <p>
      <a href="">版权信息</a> |
      <a href="">关于我们</a> |
      <a href="">联系我们</a> |
      <a href="">站点地图</a> |
      </p>
      <p>麦子学院版权所有</p>
      </div>

      *也可以为article元素或者section元素添加footer元素,注脚

    9. address元素用来在页面中呈现联系信息,包括文档的作者,邮箱、地址、电话信息等,也可以用来展示和文章相关的联系人的所有联系信息

      <article>
      <header>
      <h1>HTML5与CSS视频教程</h1>
      </header>
      <p>这里是文章正文部分</p>
      <footer>
      <address>
      <a href="" title="朱朝兵">朱朝兵</a>
      <a href="" title="麦子学院">麦子 学院</a>
      </address>
      <p>时间:<time datetime="2017-11-27">2017年11月27日</time></p>
      </footer>
      </article>
    10. figure元素是一种元素的组合,带有可选标题。figure元素用来表示页面上一块独立的内容。如果删除不影响网页内容。
      figcaption元素表示figure元素的标题,它属于figure元素。figcaption元素必须书写在figure元素内部。一个figure元素只允许放置一个figcaption元素。

      <figure>
      <img src="data:images/0.jpg" title="pic0">
      <img src="data:images/1.jpg" title="pic1">
      <img src="data:images/2.jpg" title="pic2">
      <figcaption>可爱的小动物</figcaption>
      </figure>
    11. details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性,true子元素展开,默认false子元素收缩。
      summary元素从属于details元素。(目前只有谷歌的chrome浏览器支持!)

      <details>
      <summary>HTML5+CSS视频教程</summary>
      <p>该视频来源于麦子学院</p>
      </details>
    12. mark元素表示页面中需要突出或高亮显示的内容。通常在引用原文时使用mark元素,目的是引起读者注意。比如搜索关键词时对搜索结果中的关键词高亮显示。

      <h2>以下是关于<mark>HTML5</mark>的搜索结果</h2>
      <section>
      <article>
      <h2><a href=""><mark>HTML5</mark>百度百科</a></h2>
      <p>正文</p>
      </article>
      <article>
      <h2><a href=""><mark>HTML5</mark>中国:中国最大的HTML5中文门户</a></h2>
      <p>正文</p>
      </article>
      </section>
    13. progress元素代表一个任务的完成进度。value属性表示已完成了多少工作量,max属性表示共有多少工作量。value和max属性只能指定为有效的浮点数,必须大于0.

      <p>
      当前任务完成进度
      <progress value="79" max="100"></progress>
      </p>
    14. meter元素表示规定范围内的元素值。value属性表示实际值,默认为0;min表示最小值;max最大值;low规定范围的下限值;high规定范围的上限值;optimum最佳属性值,必须在min和max之间,可以大于high

      <p>
      硬盘实际使用情况
      <meter value="90" min="0" max="100" low="50" high="80" optimum="90" ></meter>
      </p>
  3. HTML5废除的元素
    big……
    不再使用frame框架,对于frameset,frame,noframes元素,由于frame框架对页面可用性存在负面影响,html5已经不支持frame框架,只支持iframe框架
    废除rb元素,使用ruby代替

  

02_HTML5+CSS详解第一天的更多相关文章

  1. 02_HTML5+CSS详解第四天

    依旧是CSS部分贴个CSS主要知识点总结的链接:http://blog.csdn.net/html5_/article/details/26098273 [自己的笔记做得好乱,以前一直以为是字丑的原因 ...

  2. 02_HTML5+CSS详解第三天

    WebStorage简单的网页留言板用到的函数有3个1.saveStorage函数使用"new Date().getTime()"语句来获取当前的日期和时间戳,然后使用localS ...

  3. 02_HTML5+CSS详解第二天

    html5大纲分析工具:https://gsnedders.html5.org/outliner/ <section> <h1>HTML部分</h1> <se ...

  4. CSS详解

    Web前端开发css基础样式总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-255 ...

  5. 前端技术之_CSS详解第一天

    前端技术之_CSS详解第一天 一html部分 略.... 二.列表 列表有3种 2.1 无序列表 无序列表,用来表示一个列表的语义,并且每个项目和每个项目之间,是不分先后的. ul就是英语unorde ...

  6. jquery的css详解(二)

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  7. IIS负载均衡-Application Request Route详解第一篇: ARR介绍(转载)

    IIS负载均衡-Application Request Route详解第一篇: ARR介绍 说到负载均衡,相信大家已经不再陌生了,本系列主要介绍在IIS中可以采用的负载均衡的软件:微软的Applica ...

  8. PE文件格式详解,第一讲,DOS头文件格式

    PE文件格式详解,第一讲,DOS头文件格式 今天讲解PE文件格式的DOS头文件格式 首先我们要理解,什么是文件格式,我们常说的EXE可执行程序,就是一个文件格式,那么我们要了解它里面到底存了什么内容 ...

  9. DIV+CSS详解

    DIV+CSS详解 ✪DIV+CSS"这种叫法其实是一种不准确的叫法 在做笔记的最前面必须先给大家纠正一个错误,就是"DIV+CSS"这种叫法其实是一种不准确的叫法,是国 ...

随机推荐

  1. SLAVE为什么一直不动了

    导读 遇到SLAVE延迟很大,binlog apply position一直不动的情况如何排查? 问题描述 收到SLAVE延迟时间一直很大的报警,于是检查一下SLAVE状态(无关状态我给隐去了):   ...

  2. java 重定向和转发的区别

    注:原创链接  http://www.cnblogs.com/shenliang123/archive/2011/10/27/2226892.html response.sendredirect(&q ...

  3. python文件处理相关函数

    用open()创建文件 open('a.txt','wt') 用exists()检查文件是否存在 os.path.exists() 用isfile()检查是否为文件 os.path.isfile(na ...

  4. WPF Binding学习(二)

    Binding作为数据的桥梁,连通业务逻辑层的对象(源对象)和UI的控件对象(目标对象).在这座桥梁上,我们不仅可以控制在源对象与目标对象是双向通行还是单向通行.还可以控制数据的放行时机,甚至可以在这 ...

  5. deeplearning.ai 人工智能行业大师访谈 Pieter Abbeel 听课笔记

    1. Pieter Abbeel小时候想做一个篮球运动员 - -!上学的时候喜欢数学和物理,上大学之后很自然的学工程.Pieter定义工程问题是"解决实际中应用物理和数学的问题". ...

  6. Gulp开发教程(翻译)

    Building With Gulp =================== 原文地址 翻译出处 原创翻译,有不当的地方欢迎指出.转载请指明出处.谢谢! 对网站资源进行优化,并使用不同浏览器测试并不是 ...

  7. 几道数位DP

    因为这几天写的几道数位DP大多都太水..而且也确实没什么好讲所以就扔到一起了. [hdu4772]Good Numbers 要求统计区间内 各位数之和能被10整除 的数的个数. 练手,f[i][j][ ...

  8. c++(线性结构的处理)

    我们知道,在内存中的空间都是连续的.也就是说,0x00000001下面的地址必然是0x00000002.所以,空间上是不会出现地址的突变的.那什么数据结构类型是连续内部空间呢,其实就是数组,当然也可以 ...

  9. flume1.8 开发指南学习感悟

    概述: Apache Flume是一个分布式.可用的系统,用于从许多不同的sources有效的收集并移动大量日志数据用于集中存储数据. 架构及数据流动模型: flume实际上就是一个Agent.Age ...

  10. Spark环境搭建(中)——Hadoop安装

    1. 下载Hadoop 1.1 官网下载Hadoop http://www.apache.org/dyn/closer.cgi/hadoop/common/hadoop-2.9.0/hadoop-2. ...