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

随机推荐

『开源协议』Creative Commons Attribution 3.0 License . 协议的个人理解，并转载分享 4000个精美可商用小图标
为什么会研究 Creative Commons Attribution 3.0 License Creative Commons Attribution 3.0 License 简称 CC3,是一种 ...
Android和servlet通过json完成登录
1.主要过程:Android端发送json数据,servlet接收后解析json数据,通过连接数据库比较并返回json数据到Android端.整个效果: 2.Android端网络连接使用OKHttp开 ...
java刷题（1-5）
第一题:在一个数组中找出三个数相加之和为0,且不重复的集合 import java.lang.reflect.Array; import java.security.PublicKey; import ...
Official VirusTotal Plugin for IDA Pro 7
Official VirusTotal Plugin for IDA Pro 7 该插件在IDA Pro右键菜单(反汇编和字符串窗口)中添加了一个新的" VirusTotal"条目 ...
Kafka常用topic操作命令汇总
offset topic consumer-group consumer producer producer-golang topic 工具 https://cwiki.apache.org/conf ...
Cheat Sheet pyspark RDD（PySpark 速查表）
【WPF学习】第四十二章透明
WPF支持真正的透明效果.这意味着,如果在一个性质或元素上层叠另外几个形状或元素,并让所有这些形状和元素具有不同的透明度,就会看到所期望的效果.通过该特性能够创建透过上面的元素可以看到的的图像背景,这 ...
Luogu P1330 封锁阳光大学 (黑白染色)
题意: 无向图,给一个顶点染色可以让他相邻的路不能通过,但是相邻顶点不能染色,求是否可以让所有的路不通,如果可以求最小染色数. 思路: 对于无向图中的每一个连通子图,都只有两种染色方法,或者染不了,直 ...
批处理(BAT) Ping监控, 结果记录入日志文件
::执行效果 @echo off ::等待用户输入需要监控IP set /p ip=Input the IP required to monitor: echo executing...... :st ...
【题解】P1908 逆序对——归并算法
先吐槽这题做了两天,昨天讲分治,老师用归并讲了一遍,今天又用树状数组讲了一遍归并不难,啊啊啊我居然才调出来思路归并两个数组时,对于第二个数组的元素a[c2],它与第一个数组中目前还没归到总数组 ...

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

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

随机推荐

热门专题