2021-11-11

HTML5标签

1.1 废弃的标签

      acronym
      applet
      basefont
      big
      center
      dir
      font
      frame
      frameset
      noframes
      strike

1.2 新增标签
1.2.1 语义和结构标签

a. 注释注解标签

<ruby>
 英雄
  <rt>ying xiong</rt>
</ruby

 b. 描述文档细节

<details>
  <!-- 定义标题的 -->
  <summary>中国医生</summary>
  本片根据2020年抗击新冠肺炎疫情真实事件改编。讲述中国各地的白衣逆行者在这场浩大战役中纷纷挺身而出、争分夺秒、浴血奋战在武汉前线，不顾自身安危守护国人生命安全的震撼故事
</details>

 c. 进度条

<progress value="0" max="100" id="pro">请升级浏览器</progress>
 已完成<span id="res">0%</span>
  <script>
    setInterval(function(){
      var pro=document.getElementById('pro')
      var res=document.getElementById('res')
      pro.value ++
      // proValue ++;
      res.innerHTML=(pro.value / 100 * 100) + '%'
      if(pro.value==100){
         alert('上传完成')
         clearInterval(t)
     }
   },500)
  </script>

 d. 导航链接标签 nav

<nav>
  <a href="#">首页</a>
  <a href="#">关于我们</a>
  <a href="#">新闻资讯</a>
  <a href="#">联系我们</a>
</nav>

 e. 布局结构标签
     header 定义文档的页眉部分
     main 定义网页的主要内容部分
     section 定义文档中的区段
     article 文章内容部分
     aside 定义其所处内容之外的内容，个人理解 侧边栏
     footer 文档中的页脚部分

 f. 内嵌框架标签 iframe

     src 定义显示文档的url地址
     frameborder 是否显示框架周围的边框 0 表示不显示 1表示不显示
     marginHeight 定义顶部和底部的边距
     marginWidth 定义左侧和右侧的边距
     scrolling 是否显示滚动条 yes 显示 | no 不显示 | auto 自动

1.2.2 媒体标签

 a. 视频标签 video
     controls 是否显示播放面板
     autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性
     muted 静音输出
     poster 在视频为播放前，显示的图像(封面)
     loop 设置视频循环播放

<!---->
<video src="sucai/tianwen.mp4" controls autoplay muted>
浏览器不支持该标签，请升级浏览器
</video>
<!--通过source标签引入视频资源-->
<video controls loop poster="sucai/shanheling.jpg">
 浏览器不支持该标签，请升级浏览器
    <source src="sucai/tianwen.mp4" type="video/mp4"/>
    <source src="sucai/tianwen.ogg" type="video/ogg"/>
    <source src="sucai/tianwen.webm" type="video/webm"/>
</video>

 b. 音频标签 audio
    controls 是否显示播放面板
    autoplay 自动播放 由于浏览器会拦截自动播放声音的视频，因此需要加上 muted 属性
    muted 静音输出
    loop 设置视频循环播放

<audio id="music" src="sucai/wuji.mp3" controls loop></audio>

1.2.3 表单相关

 a. 表单信息分组 

<!-- disabled  禁用整组表单元素-->
<fieldset disabled>
<legend>
   分组标题
  </legend>
</fieldset>

  b. 新增输入框类型

      email 邮箱 提交时对输入的内容进行邮箱格式验证，允许空值提交
      url 网址 需添加网址协议，如：http或者https
      number 数字类型 整数
      tel 手机号 移动端生效
      color 调色板 收集的数据是16进制表示的颜色方式
      date 日期控件
      month 月份控件 选择月份
      week 周控件 选择 一年中的多少周
      time 时间控件 选择一天中的时间

邮箱类型：<input type="email" name="">
网址类型：<input type="url" name="">
number：<input type="number" name="">
tel：<input type="tel" name="">
color：<input type="color" name="color">
date：<input type="date" name="">
month：<input type="month" name="">
week：<input type="week" name="">
time：<input type="time" name="">

 c. 新增属性
     palceholder 设置输入框的提示信息
     readonly 设置为只读属性
     required 设置为必填
     pattern 限制输入的值需满足该属性设置的正则表达式 待调试
     multiple 允许一个以上的值 常用于多文件上传
     autofocus 文档准备完成，自动获得焦点

d. 新增标签
     label 为 input 元素定义标注

性别:<label>
 <input type="radio" name="sex"> 男
</label>
  <input type="radio" name="sex" id="female"><label for="female">女</label>

     datalist 定义选项列表

<input type="text" name="province" list="province">
<datalist id="province">
  <option>北京</option>
  <option>天津</option>
  <option>河北</option>
</datalist>