欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML5部分元素标签的使用

程序员文章站 2022-06-12 12:42:34
...

HTML5
一、结构元素
1.header：表示页面中一个内容区块或整个页面的标题

 <header class="qui-header">
        <h1>国内旅游计划</h1>
</header>

HTML5部分元素标签的使用
2.nav：表示页面中导航链接的部分
3.aside：表示article标签元素内容之外的、与article标签内容相关的辅助信息。可用作文章侧栏

   <aside class="qui-aside">
    <section class="qui-aside">
        <nav class="qui-asideNav"></nav>
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">目的地</a></li>
            <li><a href="">酒店</a></li>
            <li><a href="">机票</a></li>
            <li><a href="">时间</a></li>
            <li><a href="">点评</a></li>
        </ul>
    </section>
</aside>

HTML5部分元素标签的使用
4.article：表示页面中一块与上下文不相关的独立内容，比如一篇文章
5.section：页面中的一个内容区块，比如章节、页眉、页脚或页面其他部分，可以和h1,h2…等元素结合起来使用，表示文档结构。

    <section class="container">
        <div class="plcRouteList">
            <a href=""><img src="img/fengjing.jpg" width="100%" alt="" class="pic"></a>
            <div class="bottom">
                <p class="face"><img src="images/touxiang.jpg" width="38" height="38" alt=""></p>
                <h2 class="title">我的旅游行程</h2>
            </div>
            <p class="day">14天</p>
            <div class="infos">
                <div>
                <em>城市</em>
                <p>昆明-香格里拉-*</p>
                </div>
            </div>
        </div>
    </section>

HTML5部分元素标签的使用
6.footer：表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

    <fotter class="qui-footerBasic">
        <p class="switchStyle">
           <span>手机版</span>
            <a href="">
                <span>电脑版</span>
            </a>
            <span><a href="">APP</a></span>
        </p>
</fotter>

HTML5部分元素标签的使用
HTML5部分元素标签的使用
7 . bgroup:表示对整个页面或页面中的一个内容区块的标题进行组合
8.figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元

<figure>
  <p>黄浦江上的的卢浦大桥</p>
  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>

HTML5部分元素标签的使用
9.figcaption：定义

标签的标题
二、页面交互元素：
1.details和summary：标签用于描述文档或文档某个部分的细节，目前只有谷歌浏览器支持标签，可以与标签配合使用，标签用于定义这个描述文档的标题

<style type="text/css">
        body{
            font-size:12px;
            padding:5px
        }
        summary{
            font-weight:bold;
        }
    </style>
</head>

<body>
<details open="open"> <summary>页面说明</summary>本页面生成于 2020-03-03</details>
</body>

HTML5部分元素标签的使用
2.progress：用于定义任何内型任务的运行进度，可以使用标签显示javascript中时间函数的进程


<body>
<p id="pTip">开始下载</p>
<progress value="30" max="100" id="proDownFile"></progress>
<input type="button" value="下载" class="inputbtn" onClick="Btn_Click();">
<script type="text/javascript">
    var intValue=0;
    var intTimer;
    var objPro=document.getElementById('proDownFile');
    var objTip=document.getElementById('pTip');
    //定时事件
    function Interval_handler(){
        intValue++;
        objPro.value=intValue;
        if(intValue>=objPro.max){
            clearInterval(intTimer);
            objTip.innerHTML="下载完成！";
        }else{
            objTip.innerHTML="正在下载"+intValue+"%";
        }
    }
    //下载按钮单击事件
    function Btn_Click(){
        intTimer=setInterval(Interval_handler,100);
    }
</script>
</body>

HTML5部分元素标签的使用
3.meter:用于定义度量衡，仅用于文本已知最大值和最小值的度量，文本层次语义元素

<body>
<meter value="3" min="0" max="10">十分之三</meter>

<meter value="0.6">60%</meter>
</body>

HTML5部分元素标签的使用
4.time：定义日期或时间，也可以两者同时

<body>
<p>我们在每天早上 <time>8:00</time> 开始上网课。</p>

<p>我在 <time datetime="2020-03-12">植树节</time> 种了一棵小树。</p>
</body>

HTML5部分元素标签的使用
5.mark：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字

<body>
<h5>抗击<mark>疫情</mark></h5>
<p class="p1">
    在疫情当前
    <mark>人人</mark>有责
    <mark>疫情期间</mark>不出门、不聚会
</p>
</body>

HTML5部分元素标签的使用

相关标签： 笔记

上一篇： 【蓝桥】入门训练 Fibonacci数列

下一篇： Postgresql 添加分区表(按月和按日通用)

推荐阅读