zoukankan      html  css  js  c++  java
  • 02_HTML5+CSS详解第一天

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

    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="images/0.jpg" title="pic0">
        	<img src="images/1.jpg" title="pic1">
        	<img src="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代替

      

  • 相关阅读:
    168. Excel Sheet Column Title
    171. Excel Sheet Column Number
    264. Ugly Number II java solutions
    152. Maximum Product Subarray java solutions
    309. Best Time to Buy and Sell Stock with Cooldown java solutions
    120. Triangle java solutions
    300. Longest Increasing Subsequence java solutions
    63. Unique Paths II java solutions
    221. Maximal Square java solutions
    279. Perfect Squares java solutions
  • 原文地址:https://www.cnblogs.com/yolo-bean/p/7905675.html
Copyright © 2011-2022 走看看