Html5文本的学习

学习来源

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

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值