HTML5标签
2019-02-15 本文已影响0人
浮巷旧人
html5结构标签(块状元素) —— 有意义的div
<header> —— 标记定义一个页面或一个区域的头部
<nav> —— 标记定义导航链接
<section> —— 标记定义一个区域
<article> —— 标记定义一篇文章
<aside> —— 标记定义页面内容部分的侧边栏
<hgroup> —— 标记定义文件中一个区块的相关信息
<figure> —— 标记定义一组媒体内容以及它们的标题
<figcaption> —— 标记定义 figure 元素的标题
<dialog> —— 标记定义一个对话框(会话框)类似微信
<footer> —— 标记定义一个页面或一个区域的底部
建议:
第一点补充: header/section/aside/article/footer,不要嵌套使用,(自身不嵌套自身)
第二点补充:header/section/footer(级别最高,放在外层(一层))> aside/article/figure/hgroup/nav(级别其次,并且互不嵌套,放在上一层的内部(二层)) > div/figcaption(级别最低,放在内层(三层))
- 多媒体标签:
<video> —— 标记定义一个视频
<audio> —— 标记定义音频内容
<source> —— 标记定义媒体资源
<canvas>——标记定义图片
<embed>——标记定义外部的可交互的内容或插件,比如flash
<audio>和<video>是双标签,里面可以插入一段文本,在浏览器不支持该标签时显示;
<source>标签用来解决音频和视频的兼容性问题,它是一个单标签;
<source src="音频或视频的来源" type="video或audio/转码格式">
video标签的属性:
src地址
autoplay自动播放
controls控制器
width宽
height高
- 状态标签
<meter> —— 状态标签(实时状态显示:气压、气温)
<progress> —— 状态标签(任务过程:安装、加载) - 列表标签:
<datalist> —— 为input标记定义一个下拉列表,配合option
<details> —— 标记定义一个元素的详细内容,配合summary
<datalist>标签配合<input>标签使用:
<input type="text" list="值"> (list是input的一个属性)
<datalist id="值"> (id的值必须和input的list属性值相同)
<option value="值">值</option> (选取value或文本的值,如果value值为空,则不显示,可以不写value属性)
</datalist> - 注释标签:
<ruby> —— 标记定义注释或音标
<rt> —— 标记定义对ruby的注释内容文本
<rp> —— 告诉不支持ruby元素的浏览器如何显示 - 其他标签
<mark> —— 标记定义有标记的文本(黄色选中状态)
<output> —— 标记定义一些输出类型,计算表单结果配合oninput事件
<mark>标签给它所包含的内容默认添加一个黄色的背景和黑色的字体颜色,起到突出内容的作用,(可以通过css更改颜色) - 重定义标签:
显示不变,只是表达的含义进行了重新定义的标签
<b> —— 代表内联文本,通常是粗体,没有传递表示重要的意思
<i> —— 代表内联文本,通常是斜体,没有传递表示重要的意思
<dd> —— 可以同details与figure一同使用,定义包含文本,dialog也可用
<dt> —— 可以同details与figure一同使用,汇总细节(标题),dialog也可用
注:<dt>作为标题,<dd>作为描述
< hr> —— 表示主题结束,而不是水平线,显然显示相同,但是增加了语义化
<menu> —— 重新定义用户界面的菜单,配合<command>或者<menuitem>使用
<small> —— 表示小字体,例如打印注释或者法律条款,<big>标签被删除
<strong> —— 表示重要性而不是强调符号