标签：控件 浏览器 定义 标签 pro 基础 文档 HTML5
第二章：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>
标签：控件,浏览器,定义,标签,pro,基础,文档,HTML5 来源： https://blog.csdn.net/jan_ping/article/details/122746516
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。