html5标签

最新推荐文章于 2022-08-21 18:06:51 发布

FreeeLinux

最新推荐文章于 2022-08-21 18:06:51 发布

阅读量754

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/FreeeLinux/article/details/78554390

版权

前端开发专栏收录该内容

15 篇文章 0 订阅

订阅专栏

新增的标签

结构标签

<article> 标记定义一篇文章
<header> 标记定义一个页面或者一个区域的头部
<nav> 标记定义导航链接
<section> 标记定义一个区域
<aside> 标记定义页面内容部分的侧边栏
<hgroup> 标记定义文件中的一个区块的相关信息（已废弃）
<figure> 标记定义一组媒体内容以及他们的标题
<figcaption> 标记定义figure元素的标题
<footer> 标记定义一个页面或者一个区域的底部
<dialog> 标记定义一个对话框（会话框）类似微信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构标签</title>
    <style type="text/css">
        footer {
            height: 50px;
            background: #abcdef;
            line-height: 50px;
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #00B7FF;
        }
    </style>
</head>
<body>

<header>
    <div>Logo</div>
    <nav>
        <a href="index.html">首页</a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
    </nav>
</header>
<section>
    <hgroup>
        <h1>树下的猫</h1>
        <h3>文/艾米</h3>
    </hgroup>
    <aside>
        <a href="#se1">Session one</a>
        <a href="#se2">Session two</a>
        <a href="#se3">Section three</a>
    </aside>
    <article>
        <p>啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
            啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</p>
    </article>
</section>
<section>
    <figure>
        <figcaption>树下的猫咪怎么生活</figcaption>
        <div class="video">...</div>
    </figure>
</section>
<section>
    <dialog>
        <dt>张三：嗯，内容还不错</dt>
        <dd>李四：还好吧，就是主题不突出</dd>
    </dialog>
</section>
<footer>
    @CopyRight All Reserved.
</footer>

</body>
</html>

级别：header/section/footer > aside/article/figure/nav > div/ifgcaption

多媒体标签

<video> 标记定义一个视频
<audio> 标记定义音频内容
<source> 标记定义媒体资源
<canvas> 标记定义图片
<embed> 标记定义外部的可交互的内容或者插件，比如flash

audio标签：

<!--方法一-->
<!--<audio src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" autoplay="autoplay" loop="1" controls="controls">您的浏览器该退休了，换Chrome吧！</audio>-->

<!--方法二-->
<audio autoplay="autoplay">
    <source src="./Eminem%20-%20Walk%20On%20Water%20(Clean).mp3" type="audio/mpeg"></source>
</audio>

video标签：

<!--<video src="./1-1.mp4" autoplay="autoplay" controls="controls"></video>-->

<video src="./1-1.mp4" controls="controls">
    <source src="1-1.mp4" type="video/mp4">
</video>

web应用标签

状态标签

<meter> 状态标签（实时状态显示：气压，气温）
<progress> 状态标签（任务过程：安装、加载）

<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="0.75"></meter>

optimum正常值为220，低于200会出现黄色警告。

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

列表标签

由于<select>下拉框的界面太丑了，所以我们要用新的:)，而且还支持模糊匹配。

现在我们用：
1. <datalist> 为input标签定义一个下拉列表，配合option
2. <details> 标记定义一个元素的详细内容，配合summary

<input type="text" placeholder="请选择您喜欢的手机品牌" list="phoneList">
<datalist id="phoneList">
    <option value="iPhone"></option>
    <option value="Samsung"></option>
    <option value="Huawei"></option>
    <option value="htc"></option>
    <option value="meizu"></option>
</datalist>

详细信息支持展开:

<details>
    <p>
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
        啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
    </p>
</details>

通过open=”open”属性设置默认是否打开详情。

其他标签

<ruby> 标记定义注释或者音标
<rt> 标记定义对ruby的注释内容文本

<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题。</p>

<mark> 标记定义有标记的文本（黄色选中状态）
<output> 标记定义一些输出类型，计算表单结果配合oninput事件

<p>妈妈叫我回家买<mark>牛奶</mark></p>

直接实时计算两个input标签的结果，并显示：

<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
    <input type="text" id="price" value="5000">*
    <input type="number" id="number" value="1">=
    <output name="totalPrice" for="price number"></output>
</form>

<keygen> 标记定义表单里一个生成的键值（加密信息传送）
<time> 标记定义一个日期/时间，目前所有主流浏览器都不支持。

删除的标签

纯表现的标签

Basefont、big、center、font、s、strike、tt、u
因为结构与表现分离，表现我们要用css完成。

对可用性产生负面影响的元素

frame、frameset、noframes

产生混淆的元素

acronym、applet、isindex、dir

新增的属性

input

date:<input type="date" name="date">
month:<input type="month" name="month">

还有color属性等一大堆东西。

form

autocomplete

<form action="index.html" autocomplete="on">
    <input type="text" name="text">
    <input type="text" name="email" autocomplete="off">
    <input type="submit" name="submit">
</form>

autofocus

   <input type="text" name="text" autofocus="autofocus">

输入框默认获得焦点。

multiple

规定输入域中可选择多个值
html <input type="file" name="file" multiple="multiple">

placeholder

提供一种提示，描述输入域所期待的值
适用于input的type属性为：
text、search、url、telephone、email、password

required

表单校验

   <input type="email" required="required">

适用于：
text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file.

link

ol

<ol start="5">
    <li></li>
    <li></li>
    <li></li>
</ol>

其他属性

定义页面离线应用文件：

<html manifest="cache.manifest">

FreeeLinux

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5标签

新增的标签结构标签多媒体标签web应用标签状态标签列表标签其他标签删除的标签纯表现的标签对可用性产生负面影响的元素产生混淆的元素新增的属性inputformautocompleteautofocusmultipleplaceholderrequiredlinkol其他属性新增的标签结构标签<article> 标记定义一篇文章<header> 标记定义一
复制链接

扫一扫