HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5

前端之家收集整理的这篇文章主要介绍了HTML5文档类型如何定义,有哪些标签,以及如何使用,从整体认识HTML5前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

html5新增结构标签

header 头部

nav 导航

section 区域

article 文章

aside 侧边栏

figure 一组多媒体内容

figcaption 多媒体内容标题

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才能播放

video @H_502_32@="source/pal4.mp4"@H_502_32@>您的浏览器不支持video标签video>

多个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值,则显示为不断加载的动画

    progress @H_502_32@="30"@H_502_32@="100"progressmax>

 

 

 输入框下拉提示(可输入,可选择)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

    detailssummary>收拢喽p
            这是展开的内容鸭鸭鸭~
        >

hrdetails @H_502_32@open="open">

 

 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  描述

不仅仅是自定义标签dl 中使用

也可在detail  figure中使用

也可在dialog中使用


 

hr 不仅仅是水平线,也表示当前主题结束

menu 菜单标签,可以与command和menuitem搭配使用

small 小字体,表示打印注释或者法律条款

strong 表示很重要

 

猜你在找的HTML相关文章