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的更多相关文章

  1. 2018.5.14 XML文档类型定义----DTD

    1.DTD概述 一个完全意义上的XML文件不仅仅是Well-fromed(格式良好的),而且还应该是使用了一些自定义的标记ValidatingXMl(有效的)文档也就是说他必须遵守文档类型的定义中已声 ...

  2. HTML DOCTYPE文档类型举例说明

    HTML DOCTYPE文档类型举例说明 HTML4.01文档过渡定义类型,此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签(例如:font.b等),不可以使用框架 < ...

  3. HTML5文档的各个组成部分分类

    <!DOCTYPE html><!--声明文档结构类型--> <html lang="zh-cn"><!--声明文档文字区域--> ...

  4. DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义

    DOCTYPE html PUBLIC 指定了 HTML 文档遵循的文档类型定义 今天看到一篇CSS应用的一个友好搜索,我按网页上的代码复制.粘贴后预览时总达不到效果,而直接拷贝他的实例却能达到效果, ...

  5. 有效的XML: DTD（文档类型定义）介绍(转)

    文档类型定义和命名空间 有效(Valid)的XML文档: 首先,XML文档是个格式正规的(Well-formed)XML文档:(见格式正规的XML:语法 属性 实体 处理指令 样式单 CDATA节). ...

  6. !DOCTYPE html文档类型声明简写 HTML5 DOCTYPE缩写

    html5之!DOCTYPE html文档类型声明简写,在HTML5中DOCTYPE简写非常重要. 一.概述   -   TOP 让CSS样式表生效,DOCTYPE声明是必须的,以前TABLE布局的网 ...

  7. XML之DTD（文档类型定义）

    文档类型定义(DTD)可定义合法的XML文档构建模块.它使用一系列合法的元素来定义文档的结构. DTD 可被成行地声明于 XML 文档中,也可作为一个外部引用. 声明元素 在 DTD 中,XML 元素 ...

  8. Umbraco文档类型定义多个template

    利用这个可以同时写PC端和手机端的网站, 在Template中,建立手机端的模板: 在文档类型中,同时选择两个模板,在浏览的时候在URL后加上Template的名称 + .aspx 就可以浏览到你写的 ...

  9. HTML文档类型DTD与浏览器怪异模式

    虽然在兼容IE6时候经常会注意到两个模式的区别,但是系统的理解起来,还没有认真总结过.看了一些网上的资料.结合自己的理解汇总了一下,放在这里备忘并分享给大家. 浏览器从服务端获取网页后会根据文档的DO ...

随机推荐

  1. 惠普电脑win10关闭自动调节亮度

    自动调节亮度真的太烦人了,突然从亮的画面变暗,又从暗的亮度变量,眼睛受不了.但是试了很多种方法都不行. 方法 第一种: 有一些电脑是有在设置--->显示界面--->有一个 关闭自动调节 按 ...

  2. 实验13：VLAN/TRUNK/VTP/

    实验10-1: 划分VLAN Ø    实验目的通过本实验,读者可以掌握如下技能:(1) 熟悉VLAN 的创建(2) 把交换机接口划分到特定VLAN Ø    实验拓扑 实验步骤要配置VLAN,首先要 ...

  3. Eureka注册中心高可用集群配置

    Eureka高可用集群配置 当注册中心扛不住高并发的时候,这时候 要用集群来扛: 我们再新建两个module  microservice-eureka-server-2002  microservic ...

  4. Selenium实现微博自动化运营：关注、点赞、评论

    目录 Selenium 是什么? 一.核心代码 二.步骤分解 1.打开浏览器 2.访问微博登录页 3.输入账号密码 4.点击登录 5.通过人机验证 6.打开我们的中公题库君首页 7.加一下关注 8.定 ...

  5. HYSBZ_1588_set

    http://www.lydsy.com/JudgeOnline/problem.php?id=1588 直接set做就好了,注意set的迭代器只能--之类的操作. OJ崩了,也不知道对错. #inc ...

  6. 【Detection】物体识别-制作PASCAL VOC数据集

    PASCAL VOC数据集 PASCAL VOC为图像识别和分类提供了一整套标准化的优秀的数据集,从2005年到2012年每年都会举行一场图像识别challenge 默认为20类物体 1 数据集结构 ...

  7. 深入理解ASP.NET Core依赖注入

    概述        ASP.NET Core可以说是处处皆注入,本文从基础角度理解一下原生DI容器,及介绍下怎么使用并且如何替换官方提供的默认依赖注入容器. 什么是依赖注入        百度百科中对 ...

  8. 编译生成protobuf的jar包

    编译生成protobuf的jar包 配置maven 安装maven,并修改maven源为阿里云 下载maven wget http://mirror.bit.edu.cn/apache/maven/m ...

  9. 安装ik分词插件

    下载IK安装包 https://github.com/medcl/elasticsearch-analysis-ik https://github.com/medcl/elasticsearch-an ...

  10. 开发时从宿主机连接容器中的MySQL

    从宿主机连接Docker容器中的MySQL 刚接触Docker,电脑安装Docker后,使用docker命令pull了一个MySQL5.6的Docker镜像,之后docker run启动创建容器. 可 ...