HTML5标签

1. 废弃的标签

acronym

applet

basefont

big

center

dir

font

frame

frameset

noframes strike

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 自

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>

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>