H5+CSS3

最新推荐文章于 2022-07-12 17:59:58 发布

Pao pao Pao

最新推荐文章于 2022-07-12 17:59:58 发布

阅读量375

点赞数 1

文章标签： HTML5

本文链接：https://blog.csdn.net/weixin_45960404/article/details/103411821

版权

HTML标签的改变

新的文档类型申明
新增的HTML5标签
删除的HTML标签
重新定义的HTML标签
新的布局
兼容低版本浏览器

文档类型申明的改变

在h4的时候申明是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">

而到了H5就变成了这样

<!DOCTYPE html>

新增的H5标签

 	<!--header 头部标签-->
    <header>
    </header>
    <!--nav 导航标签-->
    <nav>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </nav>
    <!--main 主体部分-->
    <main>
        <!--侧边栏结构-->
        <aside>
            <!-- hgroup 标题组-->
            <hgroup>
                <h1>1111111</h1>
                <h2>2222222</h2>
                <h3>3333333</h3>
            </hgroup>
            <!--对话框 需open打开才能使用 dtdd表示对话双方 -->
            <dialog>
                <dt>你吃饭了嘛</dt>
                <dd>没有</dd>
                <dt>不吃饭对身体不好</dt>
                <dd>qiong！</dd>
            </dialog>
        </aside>
        <!--一有标题的一整个区域块-->
        <section>
            <!-- article 文章-->
            <article>
            <h1>我的梦想</h1>
            <p>还上班这而不发哦我能否去看望，空气窝囊废读卡器你的。还上班这而不发哦我能否去看望，空气窝囊废读卡器你的。还上班这而不发哦我能否去看望，空气窝囊废读卡器你的。</p>
            </article>
            <!-- figure 定义新闻媒体以及标题的一个组件-->
            <figure>
                <img src="" alt="">                                 <!--图片-->
                <figcaption>新闻媒体标题</figcaption>               	<!--标题-->
                <p>呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸呸</p>     <!--段落-->
            </figure>
            <figure>
                <img src="" alt="">
                <dt>擦三次洒出洒出</dt>                           <!-- 也可用dt来代替figcaption来写标题-->
                <p>阿三打扫打扫打扫</p>
            </figure>
        </section>
    </main>
    <!--footer尾部标签-->
    <footer></footer>

div、section、article的区别使用

针对一个块内容做样式化，三者并无区别。
div、section、article，语义是从无到有的，逐渐增强的。
div是无任何语义的，仅仅用做样式化或者脚本化；对于一段主题性的内容，则就适用section；例如一段主题性内容脱离上下文后仍是完整且独立存在的一段内容，则就适合用article。
div：
定义：文档中的分区或节。
使用场合：作为布局以及样式化时使用（三者并无区别，但div更常用）
section：
定义：文档中的节，一般是具有标题性的。
使用场合：文章的章节、标签对话框中的标签页、或者论文中有编号的部分。
article：
定义：独立的自包含内容。一般来说，article会有标题部分（包含在header内），有时也会包含footer。
使用场合：一段内容脱离了所在的语境，仍是完整的、独立的，则应该用article标签。

删除的HTML标签

纯表现的元素：
例如：font，big，center, s，u等；

对可用性产生负面影响的元素：
例如：frame，frameset，noframes；

重新定义的HTML标签

HTML元素 HTML5中的意义
b 代表内联文本，通常是粗体，没有传递表示重要的意思
i 代表内联文本，通常是斜体，没有传递表示重要的意思
dd 可以同details与figure一同使用，定义包含文本，dialog也可用
dt 可以同details与figure一同使用，汇总细节，dialog也可用
hr表示主题结束，而不是水平线，虽然显示相同
menu 重新定义用户界面的菜单，配合commond或者menuitem使用
small 表示小字体，例如打印注释或者法律条款
strong 表示重要性而不是强调符号

兼容低版本IE

<!--[if lte IE 9]>
  <script>
   (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
  </script>
  <![endif]-->

<!--[if lt IE 9]>
   <script src="../js/html5.js"></script>
  </script>
<![endif]-->