<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>练习Html5文本</title>
</head>
<body>
<!-- 标题 主要用到的标签<h1><h2><h3><h4><h5><h6>-->
<h1>古诗</h1>
<h2>春晓</h2>
<h3>孟浩然</h3>
<p>春眠不觉晓,处处闻啼鸟。</p>
<p>夜来风雨声,花落知多少。</p>
<!-- 段落 网页正文用段落文本来表现 -->
<article>
<h1>古诗</h1>
<h2>春晓</h2>
<h3>孟浩然</h3>
<p>春眠不觉晓,处处闻啼鸟。</p>
<p>夜来风雨声,花落知多少。</p>
</article>
<!-- 强调 strong重要 em语气弱一点 -->
<p><strong>注意言行<em>(监控范围)</em></strong></p>
<!-- 注解small可以用来表示细则、旁注、例如、免责声明、注意事项、法律等 -->
<p>全场打折,满100元赠送小礼品<small>所有解释权归商家所有</small></p>
<!-- b表示粗体 i表示斜体 -->
<p><b>粗体</b><i>斜体</i></p>
<!-- sup上标,可以用来商标符号、指数、编号等
sub下标,化学符号 -->
<p><b><i>x</i></b><sub>1</sub>=1</p>
<p>3<sup>2</sup>=9</p>
<!--dfn元素标识专用术语-->
<p><dfn id="def-internet">Internet</dfn>是一个全球互联网络系统</p>
<dl>
<dt><dfn><abbr tirle="World-Wide Web">WWW</abbr></dfn></dt>
<dd>万维网是个互联的超文本文档访问系统,他建立在<a href="#def-internet">
Internet</a>之上。</dd>
</dl>
<!--kbd提示用户输入-->
<ol>
<li>使用<kbd>TAB</kbd>键,切换到提交按钮</li>
<li>点按<kbd>RETURN</kbd>或<kbd>ENTER</kbd>键</li>
</ol>
<!--samp程序或者系统的示例输出-->
<p>一旦浏览器中预览,则显示<samp>Hello World!</samp></p>
<!-- var变量或占位符的值 -->
<p>爱因斯坦称为是最好的<var>E</var>=<var>m</var><var>C</var><sup>2</sup>
,</p>
<!-- 编辑提示 -->
<ul>
<li><del>删除项目</del></li>
<li>列表项目</li>
<li><del>删除项目</del></li>
<li><ins>插入项目</ins></li>
</ul>
<!-- cite 元素可以标识引用或参考的对象,如图书、歌曲、点意、演唱会或
音乐会、规范、报纸或发连文件等名称 -->
<p>他正在看<cite>红楼梦</cite></p>
<!-- 引述的两种方式,一个是引用长段落,一个是引用短段落 -->
<p><blockquote>智慧是什么呢,就是这样子坚持并且努力下去,相信自己有一天
,一定会成功,水滴石穿,所有的努力都不会白费的。这个引述的方式就是可以让段落
都自动缩进,而另一种方式是自动有双引号。</blockquote></p>
<p><q>水滴石穿</q></p>
<!-- 实现换行显示 -->
<p>北京市<br/>海淀区<br/>北京大学<br/></p>
<!-- 高亮显示 -->
<acticle>
<h2>静夜思</h2>
<h3>李白</h3>
<p>床前明月<mark>光</mark>,疑是地上<mark>霜</mark></p>
</acticle>
<!-- 进度 -->
<p>进度安排:<progress max="100" value="35">35%</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=newVelue;
}
</script>
<!-- 刻度 -->
<p>项目的完成状态:<meter value="0.80">80%完成</meter></p>
<p>汽车损耗程度:<meter low="0.25" high="0.75" optimum="0" value="0.21">
21%</meter></p>
<p>十公里竞走里程:<meter min="0" max="13.1" value="5.5" title="Miles">
4.5</meter></p>
<p>我们每天早上<time datetime="2021-01-05">9:00</time>上课</p>
<address>北京8号<a href="http://localhost:8088/test2/index.jsp">首页</a>
</address>
</body>
</html>