首页 前端知识 二、HTML5

二、HTML5

2025-03-13 15:03:54 前端知识 前端哥 131 870 我要收藏

一、HTML5简介

        1、什么是HTML5

        HTML5 是新一代的 HTML 标准,2014年10月由万维网联盟(W3C)完成标准制定。
        官网地址:
                W3C 提供: https://www.w3.org/TR/html/index.html
                
WHATWG 提供:https://whatwg-cn.github.io/html/multipage

        HTML5在侠义上是指新一代的HTML标准,在广义上是指:整个前端

        2、HTML5 优势

        1、针对JavaScript,新增了很多可操作的接口。
        2、新增了一些语义化标签、全局属性
        3、新增了多媒体标签,可以很好的替代 flash。
        4、更加侧重语义化,对于SEO 更友好。
        5、可移植性好,可以大量应用在移动设备上。

        3、HTML5兼容性

        支持:Chrome、Safari、Opera、Firefox 等主流浏览器。
        IE浏览器必须是9及以上版本才支持HTML5,IE9仅支持部分HTML5新特性。

        

二、新增语义化标签

        1、新增布局标签
标签名语义单/双标签
header整个页面,或部分区域的头部
footer整个页面,或部分区域的底部
nav导航
article文章、帖子、杂志、新闻、博客、评论等。
section页面中的某段文字,或者文章中的某段文字(里面文字通常里面会包含标题)
aside侧边栏
main文档的主要内容(WHATWG没有语义,IE不支持),几乎不用
hgroup包裹连续的标题,如文章主标题、如文章主标题、副标题的组合(W3C将其删除)

         上面的标签其实没有什么实际的效果,可以理解为有了语义的div。

        关于 article 和 section :

  1、artical 里面可以有多个section。
  2、section 强调的是分段或分块,如果你想将一块内容分成几段的时候,可使用section元素。
  3、article 比 section 更强调独立性,一块内容如果比较独立、比较完整,应该使用 article 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>尚品</h1>
    </header>
    <hr>
    <!-- 主导航区 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
    </nav>
    <!-- 主要内容 -->
     <div class="page-content">
                 <!-- 侧边栏导航 -->
                 <aside style="float: right;">
                    <nav>
                        <ul>
                            <li><a href="#">秒杀专区</a></li>
                            <li><a href="#">会员专区</a></li>
                            <li><a href="#">领取优惠卷专区</a></li>
                            <li><a href="#">品牌专区</a></li>
                        </ul>
                    </nav>
                  </aside>
        <!-- 文章 -->
         <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式:通过做梦</h3>
                <p>你要这么做梦:XXXXXXXXXXXXX</p>
            </section>
            <section>
                <h3>第二种方式:通过彩票</h3>
                <p>你要这么买彩票:XXXXXXXXXXXXX</p>
            </section>
         </article>
         <hr>
         <!-- 页脚 -->
          <footer>
            <nav>
                <a href="#">友情链接1</a>
                <a href="#">友情链接2</a>
                <a href="#">友情链接3</a>
            </nav>
          </footer>
     </div>
</body>
</html>

        2、新增状态标签
        2.1 meter 标签

        语义:定义已知范围内的标量测量。也被称为 gauge 尺度,双标签,例如:电量、磁盘用量等。
        常用属性如下:

属性描述
high数值规定高值
low数值规定低值
max数值规定最大值
min数值规定最小值
optimum数值规定最优值
value数值规定当前值
        2.2 progress标签

        语义:显示某个任务完成得进度的指示器,一般用于标识进度条,双标签,例如:工作完成进度等。
        常用属性如下:

属性描述
max数值规定目标值
value数值规定当前值
    <span>手机电量</span>
    <meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter><br>
    <span>当前进度:</span>
    <progress max="100" value="20"></progress>

                                        

        3、新增列表标签
标签名语义单\双 标签
datalist用于搜索框的关键字提示
details用于展示问题和答案,或对专有名词进行解释
summary写在 details 的里面,用于指定问题或专有名词

    <form action="#">

        <input type="text" list="mydata">

        <button>搜素</button>

    </form>

<input type = "text" list = "mydata" >
转载请注明出处或者链接地址:https://www.qianduange.cn//article/23467.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!