HTML5常见新增标签

最新推荐文章于 2024-06-24 14:21:19 发布

Doe

最新推荐文章于 2024-06-24 14:21:19 发布

阅读量803

点赞数

分类专栏： # html5学习笔记文章标签： html

本文链接：https://blog.csdn.net/weixin_43613849/article/details/116668492

版权

html5学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、header

功能：header标签定义页面的页眉信息。【主要用于定义结构，一般来说也可以使用其他方式来创建头部，但使用header就标注出了这个结构是头部，比其他多出了语意】
例子：比如一些网上商城的顶部logo信息

示例：

复制代码<body>
    <header id="header" class="" style="background-color: orange;">
        <div style="float:left">
            Logo
        </div>
        <div style="float:right">
            <span>登录</span>
            <span>登录</span>
        </div>
        <div style="clear:both"></div>
    </header><!-- /header -->
</body>

2、nav

定义导航链接。【主要用于定义结构，一般来说也可以使用其他方式来创建导航，但使用nav就标注出了这个结构是导航，比其他多出了语意】

复制代码<nav class="">
        <ul>
            <li><a href="#">食品</a></li><!--
         --><li><a href="#">电器</a></li><!--
         --><li><a href="#">电子数码</a></li><!--
         --><li><a href="#">书籍</a></li>
        </ul>
    </nav>

3、article

功能：定义一个独立的内容【虽然本质上它还是网页中的内容，但特别的是，它就像浏览论坛时浏览某一个帖子一样，它有自己的相对独立的内容，比如它可以有标题（比如帖子的标题）、可以有页尾（比如底部的评论回复区）】
article比p，比div多了语意，虽然理论上都可以使用div来实现，但多出了语意。【比如一本书可以一章可以有多个段落，但可以有几章，而article的语意就像章节，它的内容是独立的，而不是仅仅的“段落”】

复制代码<article>
        <header id="header" class="">
            头部：菜鸡互啄区
        </header><!-- /header -->
        <h2>是道德的沦丧，还是。。。</h2>
        贪玩蓝月，你没玩过的全新版本
        <footer>
            底部：欢迎评论
        </footer>
    </article>

4、footer

功能：用来定义页尾。【主要用于定义结构，一般来说也可以使用其他方式来创建页脚，但使用footer就标注出了这个结构是页脚，比其他多出了语意】

复制代码<footer>
        <div style="float:left;margin-right: 10px;">
            <div style="font-weight: bold;">合作伙伴</div>
            <div>支付宝</div>
            <div>baidu</div>
        </div>
        <div style="float:left">
            <div style="font-weight: bold;">帮助信息</div>
            <div>企业信息</div>
            <div>联系方式</div>
        </div>
    </footer>

5、section

功能：定义网页的中的“区块”【比p多出语意“区块”，而又比div少出样式之意，div更多的用来定义样式，而session可以用来做结构划分】
【如果article是一篇文章的话，那么session可以某块围绕一个论点的文章内容】

<section>
        <h3>小标题：如何学习马克思</h3>
        <p>...巴拉巴拉</p>
</section>

6、aside

功能：aside标签定义其所处内容之外的内容。【aside有语意“其他的内容”，比如说一篇文章有一些其他的相关内容，比如谈到贝叶斯模型，但本文不是主要谈论贝叶斯模型而仅仅以贝叶斯作为一个小点，而又想给出“其他的内容”来描述贝叶斯模型的时候，就可以使用aside】

<section>
         <p>xxx可以用到贝叶斯模型、马尔可夫模型xxx</p>
        <aside>
            <h3>贝叶斯模型</h3>
            <p>贝叶斯模型是xxxx</p>
        </aside>
        <aside>
            <h3>马尔可夫模型</h3>
            <p>马尔可夫模型是xxxx</p>
        </aside>
</section>

7、datalist

datalist标签用来定义选项列表
【就像QQ好友列表中，可以输入部分信息来查找到对应的好友】
【datalist需要与input输入框配合】
【input中的值可以不是datalist中的】

<form action="" method="get">
        <input type="text" name="user" list="userlist" />
        <datalist id="userlist">
            <option value="Admin"></option>
            <option value="Bdmin"></option>
            <option value="Cdmin"></option>
            <option value="Ddmin"></option>
            <option value="AAdmin"></option>
           <!--  也可以像下面一样写, -->
            <option>牛牛</option>
            <option>熊大</option>

        </datalist>
        <input type="submit" >
</form>

8、audio

功能：可以用来定义音乐。
属性：
src:定义要播放的音乐的url地址
contorls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）
autoplay:定义音乐自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay="autoplay"】
loop:定义循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop="loop"】

【这些属性的设置既可以仅仅使用contorls,也可以使用controls="controls"】

<audio src="一眼万年.mp3" controls autoplay ></audio>

有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某音乐，所以需要“多个源”

<audio loop controls>
        <source src="bg.mp3"> <!-- 当第一个无法播放时，播放第二个源的音乐 -->
        <source src="一眼万年.mp3">
</audio>

标签中间可以有内容，这个内容只有在不支持audio标签的浏览器中才会显示

9、video

功能：定义一个视频
属性：
src:指定视频的url
controls:定义是否使用播放控件（控件有声音大小、停止播放等按钮）
autoplay:定义视频自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay="autoplay"】
loop:定义视频循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop="loop"】
其他：可以设置标签的width,heigh

【这些属性的设置既可以仅仅使用contorls,也可以使用controls="controls"】

<video src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4"  controls></video>

同样的，有时候可以使用“兼容模式”，由于有些网页不支持某些格式或无法播放某视频，所以需要“多个源”

<video autobuffer autoloop loop controls>
        <source src="0.mp4">
        <source src="K:\cloudmusic\MV\Taylor Swift - Sparks Fly.mp4">
</video>

10、embed

功能：embed标签用来定义插入的内容（媒体内容），比如可以插入swf
属性：
src:定义插入的内容的来源url
type:定义插入的内容的类型，值为各种MIME 类型

示例：

<embed src="动画演示.swf" ></embed>

如何在网页中插入“网易云音乐”:

<embed  src="//music.163.com/outchain/player?type=2&id=28293971&auto=0&height=66" ></embed>

11、新增的input属性（常用的）

11.1、新增的type值

11.1.1 、date

功能：可以选择日期

示例：

<input type="date" />

11.1.2、time

功能：可以选择时间的输入框

示例：

<input type="time" name="selecttime" >

11.1.3、month

功能：可以选择年份月份的输入框

示例

<input type="month" name="selectmonth" >

11.1.4、week

功能：可以选择XX年XX周的输入框

示例：

<input type="week" name="selectweek" >

11.1.5、search

功能：比普通的文本框增加了一个可全部删除的按钮

示例：

<input type="search" >

【可以点击右边的x来清除所有内容】

11.1.6、range

功能：这是一个可拖动的滑动框
属性:
min:定义滑动块的最小值
max:定义滑动块的最大值
value:定义默认值
step:定义最小滑动距离

示例：

<input type="range" min="0" max="10" step="1">

11.1.7、url

功能：这个输入框能校验url的合法性

示例：

<form action="" method="post" >
        <input type="url" >
        <input type="submit" >
</form>

【当提交的时候才会检测】

11.1.8、email

功能：这个输入框能够校验email的合法性

示例：

<form action="" method="post" >
        <input type="email" >
        <input type="submit" >
</form>

11.1.9、number

功能：这个输入框能校验输入的是否全部是数字

示例：

<form action="" method="post" >
        <input type="number" >
        <input type="submit" >
</form>

11.2、新增的属性

11.2.1、list

功能：与datalist配合使用，用来显示输入框的提示选项（已经在datalist中演示了怎么使用了）

11.2.2、placeholder

功能：设置输入框的提示

示例：

<form action="" method="post">
        <input type="text"  placeholder="用户名">
        <input type="submit" >
</form>

【图中的用户名会随着输入自动消失，如果没有内容就又会显示出来】

11.2.3、multiple

功能：设置可以选择多个值

示例：

<input type="file" multiple="multiple" >

11.2.4、required

功能：设置输入框为必填框【当提交的时候，如果没有填上就会显示成红色或者给予提示】

示例：

<form action="" method="post">
        <input type="text"  placeholder="用户名" required="required">

        <input type="submit" >
</form>

【当提交的时候，如果没有填上就会显示成红色或者给予提示】

11.2.5、autocomplete

功能：设置下次是否自动完成【如果设置了，那么下次输入时会有上次输入的提示】
【注意：输入框需要name属性才能使得autocomplete生效】
也可以把autocomplete放到form中作为属性，代表整个表单都可以autocomplete，（然后也可以在某个输入框中设置autocomplete="off"来特定的不autocomplete）

示例：

<form action="" method="get" autocomplete="on" >
        <input type="text"  placeholder="用户名" required="required" autocomplete="on" name="username">
        <input type="submit" >
</form>

11.2.6、pattern

功能：可以用来验证输入框的输入是否合法【考虑到行为样式结构相分离，像这样的表单验证应该由javascript完成，所以这里不介绍】

作者：progor

原文链接：https://www.cnblogs.com/progor/p/8945071.html#header

Doe

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5常见新增标签

1、header功能：header标签定义页面的页眉信息。【主要用于定义结构，一般来说也可以使用其他方式来创建头部，但使用header就标注出了这个结构是头部，比其他多出了语意】例子：比如一些网上商城的顶部logo信息示例：复制代码<body> <header id="header" class="" style="background-color: orange;"> <div style="float:left">
复制链接

扫一扫

专栏目录