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

随机推荐

不停机替换线上代码？你没听错，Arthas它能做到
写在前边有没有这样一种感受,自己写的代码在开发.测试环境跑的稳得一笔,可一到线上就抽风,不是缺这个就是少那个反正就是一顿报错,线上调试代码又很麻烦,让人头疼得很.阿里巴巴出了一款名叫Arthas的工 ...
qt creator源码全方面分析(2-1-1)
目录 C++的策略/二进制兼容性问题定义 ABI注意事项可做与不可做库程序员的技巧位标志使用d指针故障排除在没有d指针的情况下将新数据成员添加到类中添加已重新实现的虚函数使用新类向 ...
18、DHCP
Dynamic Host Configuration Protocol DHCP的前身:Bootstrap DHCP的封装 DHCP基本知识点 1 .DHCP协议在RFC2131中定义,使用udp协议 ...
SpringBoot图文教程「概念+案例思维导图」「基础篇上」
有天上飞的概念,就要有落地的实现概念+代码实现是本文的特点,教程将涵盖完整的图文教程,代码案例每个知识点配套自测面试题,学完技术自我测试本文初学向,所以希望文中所有的代码案例都能敲一遍大哥大姐 ...
使用npm发布、查看、引用、删除自己的包[小白推荐]
前言怎么使用npm发布自己的组件包呢?博主看了不少相关的文章,都没有一个好的讲述.要么丢三落四,要么就是复杂到外行人根本看不懂,甚至无从下手.于是,在博主的潜心钻研下,终于成功了!所以,我打算写一 ...
java上传组件commons-fileupload的一些使用方法
在 http://www.apache.org,下载commons-fileupload-1.2.1.jar包,并把这个包加到工程中,以下是记录这个上传组件的一些使用方法. html测试页面,实现上传 ...
Airtest自动化测试工具介绍
官方网站:http://airtest.netease.com/ Airtest IDE: 跨平台的UI自动化测试编辑器,适用于游戏和App,详细参见官网文档:http://airtest.netea ...
CCF_ 201409-3_字符串匹配
水. #include<cstdio> #include<iostream> #include<cstring> using namespace std; int ...
POJ_1088_dfs
http://poj.org/problem?id=1088 dfs过程中,保存经历过的点的最大滑雪距离,依次遍历每一个点的最大距离即可. #include<iostream> #incl ...
Virus：病毒查杀
简介小伙伴们,大家好,今天分享一次Linux系统杀毒的经历,还有个人的一些总结,希望对大家有用. 这次遇到的是一个挖矿的病毒,在挖一种叫门罗币(XMR)的数字货币,行情走势请看 https://ww ...

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

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

随机推荐

热门专题