html5小白——HTML5文本（进度progress，刻度meter，预定义格式pre）

约定不等于承诺〃 2023-06-25 08:29 154阅读 0赞

<!DOCTYPE html>
    <html>
    <head>
    	<title>进度条</title>
    </head>
    <body>
    <style type="text/css">
    	.red{
        color:#0000;}
    </style>
    
    <p><span id="red"><u><mark>HTML</mark></u></span>是通向WEB技术世界的钥匙。</p>
    
    <section>
    	<p>百分比进度：<progress id="progress" max="100"><span>0</span>%</progress></p>
    	<input type="button" onclick="click1()" value="显示进度"/>
    </section>
    <script>
    function click1(){
        
    	var progress = document.getElementById('progress');
    	progress.getElementsByTagName('span')[0].textContent = "0" ;
    	for(var i=0;i<=100;i++)
    		updateProgress(i);
    }
    function updateProgress(newValue){
        
    	var progress = document.getElementById('progress');
    	progress.value = newValue;
    	progress.getElementsByTagName('span')[0].textContent = newValue;
    }
    </script>
    
    <section>
    	<meter value="3" min="0" max="10">十分之一</meter>
    	<meter value="0.6">60%</meter>
    </section>
    
    <section>
    	<time datetime="2019-12-27" pubdate>2017年11月13日</time>
    </section>
    
    <address>
    	<a href="www.baidu.com">百度</a>
    </address>
    
    <section>
    	<bdo dir="rtl">床头明月光，疑是地上霜</bdo>
    </section>
    
    <p>本站旧地址为：<wbr>>sjdfjsfjkfskjfskfjalfafkn</p>
    
    <ruby>
    	少<rt>shao</rt>
    </ruby>
    <ruby>
    	向<rt>xiang</rt>
    </ruby>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5--预定义字符&实体字符

预定义字符&实体字符预定义字符简介： HTML中预定义字符是指：<，>，&等有特殊含义（<，>，用于链接签，&用于转义），不能直接使用。转义字符串/实体字符

Myth丶恋晨/ 2023年10月10日 09:55/ 0 赞/ 38 阅读

相关 HTML5＜meter＞标签

描述该`<meter>`元素表示已知范围内的标量测量值或分数值。这也称为量规。 -------------------- 句法 `<meter>`标签的基本语

旧城等待，/ 2023年10月01日 17:24/ 0 赞/ 22 阅读

相关 TP5.1 预定义环境变量

在 TP5.1 中部分之前版本的预定义常量如 APP\_PATH、ROOT\_PATH 等被定义为了项目的环境变量. 目前预定义的环境变量包括 (以项目路径 E:\\wam

心已赠人/ 2023年08月17日 15:38/ 0 赞/ 141 阅读

相关 html5小白——HTML5文本（进度progress，刻度meter，预定义格式pre）

<!DOCTYPE html> <html> <head> <title>进度条</title> </head> <body>

约定不等于承诺〃/ 2023年06月25日 08:29/ 0 赞/ 155 阅读

相关 html5小白——html5基础（简单个人博客模板）

<!DOCTYPE html> <html> <head> <title>个人博客</title> </head> <body

「爱情、让人受尽委屈。」/ 2023年06月19日 13:28/ 0 赞/ 34 阅读

相关 Html5之基础-4 HTML文本

一、HTML 文本标记概述文本标记的作用（1）文本是网页上的重要组成部分（2）直接书写的文本会用浏览器默认的样式显示（3）包含在标记中的文本则会

╰+攻爆jí腚メ/ 2022年10月02日 13:51/ 0 赞/ 180 阅读

相关 html5 progress元素

progress元素是HTML5中新增的状态交互元素，用来表示页面中某个任务完成的进度，IDL定义如下： interface HTMLProgressElement

短命女/ 2022年08月02日 09:51/ 0 赞/ 246 阅读

相关 HTML5--1HTML简介和基本格式

一，HTML简介 1什么是 HTML？ HTML 是用来描述网页的一种语言。 •HTML 指的是超文本标记语言 (Hyper Text Markup Language)

╰半橙微兮°/ 2022年01月30日 05:31/ 0 赞/ 260 阅读

相关 HTML 5 进度条

.pro progress{ -webkit-appearance:none; } .pro ::-webkit-progress

小鱼儿/ 2021年09月17日 01:16/ 0 赞/ 488 阅读

相关 HTML <progress> 进度条

HTML5之前没有自带的进度条效果，只能通过JavaScript结合CSS模拟实现。大家知道，版本的更新通常意味着功能的增强与便利性的提高，HTML也不例外。 HT...

小灰灰/ 2020年05月15日 18:20/ 0 赞/ 1010 阅读