html5新增结构标签
header 头部
nav 导航
section 区域
article 文章
aside 侧边栏
figure 一组多媒体内容
footer 底部
hgroup 区块的相关信息
dialog 对话框 / 会话框
sublime安装emmet插件,可以使用tab键快速补全标签
<!@H_502_32@DOCTYPE html> <html @H_502_32@lang="en"head> Meta @H_502_32@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 @H_502_32@class="logo"></divnav> a @H_502_32@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 @H_502_32@src="audio.wav"@H_502_32@ autoplay="autoplay"@H_502_32@ loop="-1"@H_502_32@ controls="controls">您的浏览器不支持该标签audio>
type表示转码
controlssource @H_502_32@="test.ogg"@H_502_32@ type="audio/ogg"="test.mp3"@H_502_32@="audio/mpeg"="test.wav"@H_502_32@="audio/wav" 您的浏览器不支持音频播放 >
video标签,必须设置controls才能播放
多个src源
="controls"@H_502_32@ width="600"="video/mp4"source>
embed可以支持flash动画播放,然鹅我的谷歌浏览器已经不支持flash了,应该已经凉凉了,不去管它
embed @H_502_32@="source/HappyBirthday.swf">
状态标签meter
value代表当前值
min 最小值
max 最大值
low 较低值
high 较高值
optimum 标准值
不填写以上参数,以百分比计算,默认为0-100%
meter @H_502_32@value="220"@H_502_32@ min="20"@H_502_32@ max="380"@H_502_32@ low="200"@H_502_32@ high="240"@H_502_32@ optimum="220"meter="180"@H_502_32@="400"@H_502_32@="0"@H_502_32@br="0.75">75%>
过程标签 progress
不设置value值,则显示为不断加载的动画
输入框下拉提示(可输入,可选择)datalist
input @H_502_32@placeholder="选你所爱"@H_502_32@ list="mylist"datalist @H_502_32@idoption @H_502_32@="喵1">喵1option="喵2">喵2="喵3">喵3="喵4">喵4="喵5">喵5datalist>
内容的展开和收拢 details + summary
ruby 给文字加注释
rt 包裹在ruby标签内,里面写拼音
rp 解决浏览器不兼容问题,该标签的内容不要嵌套在rt标签内
让我们来ruby>聊rt>liao天叭 让我们来rp>(><>)>天叭
mark 黄色底色表示强调
好可爱的小mark>猫咪>呀
oninput 事件,监听文本框的输入变化
form @H_502_32@oninput="sum.value=parseInt(price.value)*parseInt(num.value)"type="text"@H_502_32@ value="1000"@H_502_32@ name="price"@H_502_32@ id="price"* ="number"@H_502_32@="1"@H_502_32@="num"@H_502_32@="num"= output @H_502_32@name="sum"@H_502_32@ for="price num"outputform>
重定义标签
dd 标题
dt 描述
也可在detail figure中使用
也可在dialog中使用
hr 不仅仅是水平线,也表示当前主题结束
menu 菜单标签,可以与command和menuitem搭配使用
small 小字体,表示打印注释或者法律条款
strong 表示很重要