02_HTML5+CSS详解第一天

Posted 2020-10-15

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

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元素用来在页面中呈现联系信息，包括文档的作者，邮箱、地址、电话信息等，也可以用来展示和文章相关的联系人的所有联系信息