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 ...

随机推荐

1222: 计算x^1+x^2+x^3+……+x^n的值
#include <stdio.h>int main(){ int x,n,i,j; long long sum,g;while(scanf("%d%d",&x ...
Linux之时间同步操作
Linux之时间同步操作时间同步操作应用的命令 yum进行软件安装,软件安装过程中如遇到询问,一律选择y,ntp是时间同步命令 [root@localhost ~]# yum -y install ...
javabst1
(单选题)下列概念中不包括任何实现,与存储空间没有任何关系的是() A)类 B)接口 C)抽象类 D)对象 2.(单选题)HTTP状态码中表示请求资源不存在的是(). A)100 B)200 C)30 ...
Qt qApp
qApp A global pointer referring to the unique application object. It is equivalent to the pointer re ...
关于centos7下networkManager关闭操作
由于network和NetworkManager服务会出现冲突,而且NetworkManager通常会比较先启动,所以为了防止NetworkManager的启动导致我们直接配置的网络环境失效,我们需要 ...
CCF_201503-2_数字排序
自己写个排序的cmp. #include<iostream> #include<cstdio> #include<algorithm> using namespac ...
对char *f=new char[4]赋初值
用new 开辟的可以直接指向字符串常量,但是之后就不能进行修改了比如 char * f=new char[4]; f="ab"; f[0]='0'//错误但是可以输出f[0]; ...
TCP、UDP 协议的区别
TCP 面向连接可靠传输形式:字节流传输效率:慢所需资源:多首部字节:20-60 应用场景:要求通讯数据可靠(如文件传输.邮件传输) UPD 无连接不可靠传输形式:数据报文段传输效率: ...
移植freertos到stm32 f103 的基本流程和总结
为什么要在stm32 f103上面移植freertos stm32 f103 以他的全面的文档,亲民的价格,强大的功能.成为无数微设备的方案首选.在市场上有极大的使用量.市场占有率也是非常的高.f ...
一起了解 .Net Foundation 项目 No.2
.Net 基金会中包含有很多优秀的项目,今天就和笔者一起了解一下其中的一些优秀作品吧. 中文介绍中文介绍内容翻译自英文介绍,主要采用意译.如与原文存在出入,请以原文为准. ASP.NET MVC, ...

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

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

随机推荐

热门专题