HTML5 第1堂课一些元素总结

最新推荐文章于 2022-06-20 21:28:20 发布

原创最新推荐文章于 2022-06-20 21:28:20 发布 · 343 阅读

CC 4.0 BY-SA版权

本文详细介绍了HTML5新增的语义化标签，如header、nav、article、aside、section、footer等，以及页面交互元素details、summary、progress、meter、time和mark的使用方法。通过实例展示了这些元素如何增强网页结构和用户体验。

一、如何在HTML中引入样式表

1、行内式
<标签名 style=“属性1：属性值1；属性2：属性值2；属性3：属性值3；”>内容</标签名>
2、内嵌式

3、链入式

二、 HTML5的元素标签

header：表示页面中一个内容区块或整个页面的标题。
nav：表示页面中导航链接的部分。
article：表示页面中一块与上下文不相关的独立内容，比如一篇文章。
aside：表示

标签元素内容之外的、与

与标签内容相关的辅助信息。可用作文章侧栏。

<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>

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>

footer：表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

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

bgroup:表示对整个页面或页面中的一个内容区块的标题进行组合。
figure：表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。

<figure>
  <p>内江师院</p>
  <img src="nejiangshiyuan.jpg" width="350" height="234" />
</figure>

figcaption：定义

标签的标题。

三、页面交互元素

details、summary：标签用于描述文档或文档某个部分的细节，目前只有谷歌浏览器支持标签，可以与标签配合使用，标签用于定义这个描述文档的标题。
progress：用于定义任何内型任务的运行进度，可以使用标签显示javascript中时间函数的进程。

<body>
<p id="pTip">开始下载</p>
<progress value="0" 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>

meter：用于定义度量衡，仅用于已知最大值和最小值的度量
文本层次语义元素。

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

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

time：定义日期或时间，也可以两者同时。

<body>
<p>我每天早上 <time>8:00</time>吃早饭。</p>

<p>我在 <time datetime="2020-01-25">我生日这天</time> 许了一个愿。</p>
</body>

mark：主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，典型应用是搜索结果中高亮显示搜索关键字。

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