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

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</title>

    <style>

        *{

            margin:0;

            padding:0;

            font-size:14px;

        }

        .container{

            background:#ccc;

        }

        .content{

            width:1000px;

            margin:0 auto;

        }

        dl{

            width:300px;

            float:left;

            text-align:center;

            margin-right:50px;

        }

        dl:last-child{

            margin-right:0;

        }

        dl img{

            width:300px;

        }

    </style>

</head>

<body>

    <header>

        <div class="logo"></div>

        <nav>

            <a href="#">导航</a>

            <a href="#">导航</a>

            <a href="#">导航</a>

            <a href="#">导航</a>

            <a href="#">导航</a>

        </nav>

    </header>

    <section>

        <hgroup>

            <h1>文章标题</h1>

            <h3>文章作者</h3>

            <h4>文章描述</h4>

        </hgroup>

        <aside>

            <a href="#">侧导航1</a>

            <a href="#">侧导航2</a>

            <a href="#">侧导航3</a>

        </aside>

        <article>

            文章内容

        </article>

    </section>

    <section>

        <figure>

            <figcaption>视频标题</figcaption>

            <div class="video">视频</div>

        </figure>

    </section>

    <section>

        <dialog>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

        </dialog>

        <dialog>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

        </dialog>

        <dialog>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

            <dt>A的评论</dt>

            <dd>B的评论</dd>

        </dialog>

    </section>

    <footer>底部版权</footer>

</body>

</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表示转码

    <audio controls>

        <source src="test.ogg" type="audio/ogg">

        <source src="test.mp3" type="audio/mpeg">

        <source src="test.wav" type="audio/wav">

        您的浏览器不支持音频播放

    </audio>

video标签，必须设置controls才能播放

<video src="source/pal4.mp4" autoplay="autoplay" controls="controls">您的浏览器不支持video标签</video>

多个src源

    <video controls="controls" width="600">

        <source src="source/pal4.mp4" type="video/mp4"></source>

    </video>

embed可以支持flash动画播放，然鹅我的谷歌浏览器已经不支持flash了，应该已经凉凉了，不去管它

<embed src="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>

    <meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>

    <meter value="400" min="20" max="380" low="200" high="240" optimum="220"></meter>

    <meter value="0" min="20" max="380" low="200" high="240" optimum="220"></meter>

    <br>

    <meter value="0.75">75%</meter>

过程标签 progress

不设置value值，则显示为不断加载的动画

    <progress value="30" max="100"></progress>

    <progress max="100"></progress>

输入框下拉提示（可输入，可选择）datalist

    <input placeholder="选你所爱" list="mylist">

    <datalist id="mylist">

        <option value="喵1">喵1</option>

        <option value="喵2">喵2</option>

        <option value="喵3">喵3</option>

        <option value="喵4">喵4</option>

        <option value="喵5">喵5</option>

    </datalist>

内容的展开和收拢 details + summary

    <details>

        <summary>收拢喽</summary>

        <p>

            这是展开的内容鸭鸭鸭~

        </p>

    </details>

<hr>

    <details open="open">

        <summary>收拢喽</summary>

        <p>

            这是展开的内容鸭鸭鸭~

        </p>

    </details>

ruby 给文字加注释

rt 包裹在ruby标签内，里面写拼音

rp 解决浏览器不兼容问题，该标签的内容不要嵌套在rt标签内

    让我们来<ruby>聊<rt>liao</rt></ruby>天叭

    <br>

    让我们来<ruby>聊<rp>(</rp><rt>liao</rt><rp>)</rp></ruby>天叭

mark 黄色底色表示强调

好可爱的小<mark>猫咪</mark>呀

oninput 事件，监听文本框的输入变化

    <form oninput="sum.value=parseInt(price.value)*parseInt(num.value)">

        <input type="text" value="1000" name="price" id="price">*

        <input type="number" value="1" name="num" id="num">=

        <output name="sum" id="sum" for="price num"></output>

    </form>

重定义标签

dd 标题

dt 描述

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

也可在detail figure中使用

也可在dialog中使用

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

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

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

strong 表示很重要

HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5的更多相关文章

2018.5.14 XML文档类型定义----DTD
1.DTD概述一个完全意义上的XML文件不仅仅是Well-fromed(格式良好的),而且还应该是使用了一些自定义的标记ValidatingXMl(有效的)文档也就是说他必须遵守文档类型的定义中已声 ...
HTML DOCTYPE文档类型举例说明
HTML DOCTYPE文档类型举例说明 HTML4.01文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如:font.b等),不可以使用框架 < ...
HTML5文档的各个组成部分分类
<!DOCTYPE html> <html lang="zh-cn"> ...
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义
DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...
有效的XML: DTD（文档类型定义）介绍(转)
文档类型定义和命名空间有效(Valid)的XML文档: 首先,XML文档是个格式正规的(Well-formed)XML文档:(见格式正规的XML:语法属性实体处理指令样式单 CDATA节). ...
!DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写
html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要. 一.概述 - TOP 让CSS样式表生效,DOCTYPE声明是必须的,以前TABLE布局的网 ...
XML之DTD（文档类型定义）
文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 声明元素在 DTD 中,XML 元素 ...
Umbraco文档类型定义多个template
利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...
HTML文档类型DTD与浏览器怪异模式
虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

随机推荐

ros之自定义服务数据
如何自定义服务数据 string name Uint8 age Uint8 sex Uint8 unknown =0 Uint8 male =1 Uint8 female = 2 (上面的是Reque ...
ipwry源码
qqwry.ipwry都是cnss(http://blog.csdn.net/cnss/article/details/136069)出品,终于找到了源码,下载地址:http://download.c ...
# 通过 DockerFile 打包镜像
在介绍 Docker 具体的操作前,先简要复习下 Docker 的架构,这样可以更好地帮助我们理解 Docker 中的各个命令. 首先我们一直对 Docker 这个叫法就有些误解,Docker 其实指 ...
CRC循环冗余检测C语言实现----花了几天时间乱写的
由于笔者目前正在上计算机网络的课,老师要我们编一下crc的循环检测过程,所以我想着刚好在学c,那就随便看看写不写的了,首先百度了一下网上资料,基本都是用位移运算符实现的,由于本人懒得去看一下位移运算, ...
python学习记录（五）
20180829--https://www.cnblogs.com/fnng/archive/2013/04/20/3032563.html 字典字典的使用现实中的字段及在Python中的字段都进 ...
Codeforces_794
A.统计两个guard之间的钞票数. #include<bits/stdc++.h> #define MOD 1000000009 using namespace std; int a,b ...
[github]添加fork me标识
下午用python在命令行画超载鸡,累死,以后慢慢再改吧. 偶然见看到别人博客园右上角有github的fork me图标,就找找,自己也弄上. 直接给官方博客地址:地址复制添加到需要的页面源码中,把 ...
HDU_1166_树状数组
http://acm.hdu.edu.cn/showproblem.php?pid=1166 树状数组入门题. #include<iostream> #include<cstring ...
这个 Spring 循环依赖的坑，90% 以上的人都不知道
1. 前言这两天工作遇到了一个挺有意思的Spring循环依赖的问题,但是这个和以往遇到的循环依赖问题都不太一样,隐藏的相当隐蔽,网络上也很少看到有其他人遇到类似的问题.这里权且称他非典型Spring ...
卫星轨道相关笔记SGP4
由卫星历书确定卫星轨道状态向量卫星历书的表示方法有2种: TLE(Two Line Element),和轨道根数表示方法由卫星历书计算出卫星轨道状态向量的方法有2种: SGP方法,NORAD的方法 ...

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

HTML5文档类型如何定义，有哪些标签，以及如何使用，从整体认识HTML5的更多相关文章

随机推荐

热门专题