html5新增结构标签
header 头部
nav 导航
section 区域
article 文章
aside 侧边栏
figure 一组多媒体内容
figcaption 多媒体内容的标题
footer 底部
hgroup 区块的相关信息
dialog 对话框 / 会话框
sublime安装emmet插件,可以使用tab键快速补全标签
<!DOCTYPE html> <html lang="en"head> meta charset="UTF-8"title>html5</style> *{ margin:0; padding font-size14px; } .container background#ccc .content width1000px0 auto dl300px floatleft text-aligncenter margin-right50px dl:last-child dl img} bodyheader> div class="logo"></divnav> a href="#">导航a> sectionhgrouph1>文章标题h3>文章作者h4>文章描述aside>侧导航1>侧导航2>侧导航3article> 文章内容 figurefigcaption>视频标题="video">视频dialogdt>A的评论dd>B的评论> footer>底部版权html>
补充1:header article section footer aside 不建议嵌套使用
补充2:header section footer > aside figure nav... > div
前面3个级别较高,习惯于写在外层
audio直接使用,无法播放音乐,必须加上autoplay="autoplay"
loop="-1" 无限循环
controls="controls" 控制组件
audio src="audio.wav" autoplay="autoplay" loop="-1" controls="controls">您的浏览器不支持该标签audio>
type表示转码
controlssource ="test.ogg" type="audio/ogg"="test.mp3"="audio/mpeg"="test.wav"="audio/wav" 您的浏览器不支持音频播放 >
video标签,必须设置controls才能播放
video ="source/pal4.mp4">您的浏览器不支持video标签video>
多个src源
="controls" width="600"="video/mp4"source>
embed可以支持flash动画播放,然鹅我的谷歌浏览器已经不支持flash了,应该已经凉凉了,不去管它
embed ="source/HappyBirthday.swf">
状态标签meter
value代表当前值
min 最小值
max 最大值
low 较低值
high 较高值
optimum 标准值
(位于较低较高之间的值,显示为绿色;否则显示为黄色)
不填写以上参数,以百分比计算,默认为0-100%
meter value="220" min="20" max="380" low="200" high="240" optimum="220"meter="180"="400"="0"br="0.75">75%>
过程标签 progress
不设置value值,则显示为不断加载的动画
progress ="30"="100"progressmax>
输入框下拉提示(可输入,可选择)datalist
input placeholder="选你所爱" list="mylist"datalist idoption ="喵1">喵1option="喵2">喵2="喵3">喵3="喵4">喵4="喵5">喵5datalist>
内容的展开和收拢 details + summary
detailssummary>收拢喽p 这是展开的内容鸭鸭鸭~ > hrdetails open="open">
ruby 给文字加注释
rt 包裹在ruby标签内,里面写拼音
rp 解决浏览器不兼容问题,该标签的内容不要嵌套在rt标签内
让我们来ruby>聊rt>liao天叭 让我们来rp>(><>)>天叭
mark 黄色底色表示强调
好可爱的小mark>猫咪>呀
oninput 事件,监听文本框的输入变化
form oninput="sum.value=parseInt(price.value)*parseInt(num.value)"type="text" value="1000" name="price" id="price"* ="number"="1"="num"="num"= output name="sum" for="price num"outputform>
重定义标签
dd 标题
dt 描述
不仅仅是自定义标签dl 中使用
也可在detail figure中使用
也可在dialog中使用
hr 不仅仅是水平线,也表示当前主题结束
menu 菜单标签,可以与command和menuitem搭配使用
small 小字体,表示打印注释或者法律条款
strong 表示很重要
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。