html的小结

最新推荐文章于 2022-08-21 00:43:57 发布

woyuanliulian

最新推荐文章于 2022-08-21 00:43:57 发布

阅读量118

点赞数

分类专栏： Web前端文章标签： web

本文链接：https://blog.csdn.net/woyuanliulian/article/details/80934114

版权

Web前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--attr-->
<p>
    <abbr title="你好abbr">abbr</abbr>表示包含的文本是一个更长的单词或者短语的缩写形式，浏览器可能根据这个改变文本的显示方式
<!--在ie6以下不支持attr这种使用所以-->
    <br>

    <span title="你好"><abbr title="你好abbr">abbr</abbr></span>表示包含的文本是一个更长的单词或者短语
    的缩写形式，浏览器可能根据这个改变文本的显示方式
<!--上面这个span的没有测试-->
</p>

<!--插入和删除文本  ins  del-->
<p>
    <cite>你好</cite>
    <ins cite="www.baidu.com">ins定义插入到文档中的文本</ins>
    <br>

    <cite>测试del</cite>
    <del datetime="2018-7-5">del定义文档中已经被删除的文本</del>

</p>

<!--文本流方向  bdo 是文档倒叙  dir这个属性表示倒叙-->
<bdo dir="ltr">床头明月光</bdo><!--从左到右-->
<bdo dir="rtl">床头明月光</bdo><!--从右到左-->

<!--html5新增的标签  ie8以下不支持-->
<!--mark  高亮文字-->
<article>
    <h1><mark>MDN</mark>是一个很好的平台</h1>

</article>

<!--进度信息 progress-->
<section>
    <p>百分比进度：<progress id ="progress" max="100" value="5"><span>0</span>%</progress></p>
    <input type="button" value="点击" οnclick="setValue()" >
    <script>
        var pro  =  document.getElementById("progress");
        function setValue() {
            var text = document.getElementsByTagName("span")[0].textContent;
            for(var i = 0 ;i<=100;i++){
                forValue(i) ;
            }
        }
        function forValue(index) {
            pro.value = index;

        }

    </script>

</section>

<!--刻度标签-->
<meter value="3" min="0" max="10">是</meter>

<br>

<!--发布时间-->

<time datetime="2017-03-12">2017年3月12号</time>

<!--address 联系文本-->

<footer>
    <section>
        <address>
            <a href="#" title="author">web开发指南</a>
            <time datetime="2018-07-05">2018年07月05号</time>
        </address>

    </section>

</footer>

<!--文本注释  ruby-->



</body>
</html>

woyuanliulian

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html的小结

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;!--attr--
复制链接

扫一扫