结构标签
- article 标记定义了一篇文章
- header 定义了一个页面或一个区域的头部
- nav 定义导航链接
- section 定义一个区域
- aside 定义页面内容部分的侧边栏
- hgroup 定义文件中一个区块的相关信息
- figure 定义一组媒体内容以及标题
- figcaption 定义figure元素的标题
- footer 定义一个页面或一个区域的底部
- dialog 定义了一个对话框，类似微信
补充：header/section/aside/article/footer 不要嵌套
header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
多媒体标签
1、video 定义一个视频。可以设置宽高
autoplay属性，自动播放；
controls，控制器（css无法改变默认控制器）
运行结果：
2、audio 定义一个音频。不用设置宽高
autoplay属性，自动播放；
loop，重复，loop=-1，无限循环
controls，控制器（css无法改变默认控制器）
运行结果：
3、source 定义媒体资源
4、canvas 定义图片
5、embed 插件
运行结果：
web应用标签
1、状态标签
（1）meter 实时状态显示：气压、气温等
运行结果：
（2）progress 任务过程：安装、加载等
运行结果：
2、列表标签
（1）datalist 为input定义一个下拉列表，配合option使用
运行结果：
（2）details 定义一个元素的详细内容，配合summary使用
运行结果：
其他标签
1、注释标签
（1）ruby定义注释或音标
运行结果：
（2）rt定义对ruby的注释内容文本
（3）rp告诉不支持ruby元素的浏览如何去显示
（4）mark定义有标记的文本
运行结果：
（5）output定义一些输出类型，计算表单结果配合oninput事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Oninput</title>
</head>
<body>
<!-- oninput事件可以实时监听文本框的输入变化 -->
<form oninput="totalprice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">10000
*<input type="number" id="number" value="1">
=<output name="totalprice" for="price number"></output>
</form>
<!-- <form oninput="totalprice.value=parseInt(price.value)*parseInt(number.value)">0
<input type="range" id="price" value="5000">10000
*<input type="number" id="number" value="1">
=<output name="totalprice" for="price number"></output>
</form> -->
</body>
</html>运行结果：
123
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
