您的位置:时时app平台注册网站 > web前端 > HTML5新添标签【彩世界网址】

HTML5新添标签【彩世界网址】

2019-11-14 16:43

aside:

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

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

    彩世界网址 1

 


3、atricle 一篇文章

nav:

  • 定义导航链接。【主要用于定义结构,一般来说也可以使用其他方式来创建导航,但使用nav就标注出了这个结构是导航,比其他多出了语意】
  • 彩世界网址 2
  • 示例:

    <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

 


4、section 文章中的章节

  section元素用于对网站或应用程序中页面上的内容进行分块。一个section元素通常由内容及其标题组成。但section元素并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div而非section元素。

通常不推荐没有标题内容使用section元素

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>
  • 彩世界网址 4彩世界网址 5

 


1、新增类型:网址  邮箱  日期  时间  星期  数量  范围  电话  颜色  搜索

  a、<label>网址:</label><input type="url" name=" " required>
  b、<label>邮箱:</label><input type="email" name=" " required>
  c、<label>日期:</label><input type="date" name=" ">
  d、<label>时间:</label><input type="time" name=" ">
  e、<label>星期:</label><input type="week" name=" ">
  f、<label>数量:</label><input type="number" name=" ">
  g、<label>范围:</label><input type="range" name=" " >
  h、<label>电话:</label><input type="tel" name=" " >
  i、<label>颜色:</label><input type="color" name=" ">
  j、<label>搜索:</label><input type="search" name=" ">

header

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

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

    彩世界网址 6

 

 


1、audio标签  支持格式:ogg、wav、mp3

对应的属性:

  a、autoplay  自动播放

  b、controls 显示播放器

  c、loop  循环播放器

  d、preload 预加载

  e、multed 静音

如:<audio src="source/audio.mp3" autoplay controls loop preload></audio>

<audio autoplay controls loop preload>

  <source src="source/audio.wav" type="">

  <source src="source/audio.mp3" type="">

</audio>

source标签的作用是提供多个媒体文件地址,如果一个地址的文件不兼容,就使用下一个地址。

video:

功能:定义一个视频

属性:

  • src:指定视频的url
  • controls:定义是否使用播放控件(控件有声音大小、停止播放等按钮)彩世界网址 7【这些属性的设置既可以仅仅使用contorls,也可以使用controls="controls"】
  • autoplay:定义视频自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay="autoplay"】
  • loop:定义视频循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop="loop"】
  • 其他:可以设置标签的width,heigh

示例:

<video src="K:cloudmusicMVTaylor Swift - Sparks Fly.mp4"  controls></video>

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

<video autobuffer autoloop loop controls>
        <source src="0.mp4">
        <source src="K:cloudmusicMVTaylor Swift - Sparks Fly.mp4">

    </video>

 

5、aside 侧边栏

aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条,以及其他类似的有区别主要内容的部分。

第一种是在article元素内部使用

<article>
    <h1>语法</h1>
    <p>文章的正文....</p>
    <aside>
        <h1>名词解释</h1>
        <p>这是一个对语言很重要的内容题</p>
    </aside>
</article>

第二种是在article元素外部使用

<aside>
    <nav>
        <h2>评论</h2>
        <ul>
            <li><a href="javascript:void(0);">2017-7-31</a></li>
            <li><a href="javascript:void(0);">张三:好好学一下!</a></li>
        </ul>
    </nav>
</aside>

audio:

功能:可以用来定义音乐。

属性:

  • src:定义要播放的音乐的url地址
  • contorls:定义是否使用播放控件(控件有声音大小、停止播放等按钮)彩世界网址 8【这些属性的设置既可以仅仅使用contorls,也可以使用controls="controls"】
  • autoplay:定义音乐自动播放【这些属性的设置既可以仅仅使用autoplay,也可以使用autoplay="autoplay"】
  • loop:定义循环播放【这些属性的设置既可以仅仅使用loop,也可以使用loop="loop"】

示例:

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

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

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

 

 

html5增加了audio和video标签,提供了在页面上插入音频和视频的标准方法

补充:

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

二、HTML5新增表单控件

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>
    

    彩世界网址 9

 


2、nav 页面导航

  nav元素是一个可以用作页面导航的连接组,其中的导航元素链接到其他页面或当前页面的其他部分。并不是所有的连接组都要被放进nav元素,只需要将主要的、基本的连接组放进nav元素即可。

注:html5中不能使用menu元素来代替nav元素

nav元素应用场景:

  传统导航条、侧边栏导航、页内导航、翻页操作

<article>
    <header>
        <h1>HTML5与CSS3的历史</h1>
        <nav>
            <ul>
                <li><a href="javascript:void(0);">HTML5历史</a></li>
                <li><a href="javascript:void(0);">CSS3的历史</a></li>
                <li><a href="javascript:void(0);">Ajax的历史</a></li>
            </ul>
        </nav>
    </header>
    <section>
        <h1>html5历史</h1>
        <p>一些文字说明....</p>
    </section>
    <section>
        <h1>css3历史</h1>
        <p>一些文字说明....</p>
    </section>
    <footer>
        <a href="">删除</a>
        <a href="">修改</a>
    </footer>
</article>
<footer>
    <p><small>版权声明:</small></p>
</footer>

article:

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

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

    彩世界网址 10

 


2、新增常用表单控件属性

新增的属性:

list

  • 功能:与datalist配合使用,用来显示输入框的提示选项(已经在datalist中演示了怎么使用了)

placeholder

  • 功能:设置输入框的提示彩世界网址 11【图中的用户名会随着输入自动消失,如果没有内容就又会显示出来】
  • 示例:
    <form action="" method="post">
            <input type="text"  placeholder="用户名">
            <input type="submit" >
        </form>
    

multiple

  • 功能:设置可以选择多个值
  • 示例:
    <input type="file" multiple="multiple" >
    

required

  • 功能:设置输入框为必填框【当提交的时候,如果没有填上就会显示成红色或者给予提示】彩世界网址 12
  • 示例:

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

autocomplete

  • 功能:设置下次是否自动完成【如果设置了,那么下次输入时会有上次输入的提示】彩世界网址 13
  • 【注意:输入框需要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>
    

 

autofocus:

  • 功能:设置是否自动获取焦点
  • 示例:

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

pattern:

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

 

 

 


一、h5新增的主要语义化标签如下:

新增的input属性(常用的):

 

 

7、time元素与微格式

<time datetime="2017-7-31">2017-7-31</time>
<time datetime="2017-7-31T20:00">2017-7-31</time>
<time datetime="2017-7-31T20:00Z">2017-7-31</time>
<time datetime="2017-7-31T20:00 09:00">2017-7-31</time>

<article>
    <header>
        <h1>苹果</h1>
        <p>发布日期
            <time datetime="2017-2-1" pubdate>2017-2-1</time>
        </p>
        <p>舞会时间
        <time datetime="2017-3-1">2017-3-1</time>
        </p>
    </header></article>

本文内容:

  • header
  • nav
  • article
  • footer
  • section
  • aside
  • datalist
  • 音频标签:
    • audio
  • 视频标签:

    • video
  • 插入媒体标签:
    • embed
  • 新增input属性

 

首发日期:2018-04-25


PC端兼容h5新标签的方法,在页面中引入一下js文件

<script  type="text/javascript"  src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

补充:

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

3、可选择第三方播放器

  a、cyberplayer

  b、tencentPlayer

  c、youkuPlayer

新增的type值:

date:

  • 功能:可以选择日期彩世界网址 14
  • 示例:

time:

  • 功能:可以选择时间的输入框彩世界网址 15
  • 示例:

month:

  • 功能:可以选择年份月份的输入框彩世界网址 16
  • 示例:
    <input type="month" name="selectmonth" >
    

week:

  • 功能:可以选择XX年XX周的输入框彩世界网址 17
  • 示例:
    <input type="week" name="selectweek" >
    

search

  • 功能:比普通的文本框增加了一个可全部删除的按钮彩世界网址 18【可以点击右边的x来清除所有内容】
  • 示例:
    <input type="search" >
    

range

功能:这是一个可拖动的滑动框彩世界网址 19

属性:

  • min:定义滑动块的最小值
  • max:定义滑动块的最大值
  • value:定义默认值
  • step:定义最小滑动距离

示例:

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

url

  • 功能:这个输入框能校验url的合法性彩世界网址 20【当提交的时候才会检测】
  • 示例:
    <form action="" method="post" >
            <input type="url" >
            <input type="submit" >
        </form>
    

email

  • 功能:这个输入框能够校验email的合法性彩世界网址 21
  • 示例:
    <form action="" method="post" >
            <input type="email" >
            <input type="submit" >
        </form>
    

number

  • 功能:这个输入框能校验输入的是否全部是数字彩世界网址 22
  • 示例:
    <form action="" method="post" >
            <input type="number" >
            <input type="submit" >
        </form>
    

 

 

8、address元素

用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等、address不只用来呈现电子邮箱或真实地址,还用来
展示跟文档相关的联系人的所有联系信息

<address>
    <a href="#">作者</a>
    <time datetime="2017-7-31">2017-7-31</time>
</address>

三、HTML5音频audio和视频video

session:

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

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

    彩世界网址 23

 

 


3、表单内元素的属性

formtarget属性:在HTML5中,可以对提交按钮分别使用formtarget属性来指定提交后在何处打开所需加载的页面。

formaction属性:在HTML5中,可以为所有的提交按钮,增加不同的formaction属性,使单击不同的按钮时可以将表单提交到不同的页面。

formmethod属性:可以为每个表单元素增加formmethod属性,分别指定不同的提交方法。get/post

formenctype属性:在HTML5中,可以使用formenctype属性对表单元素分别指定不同的编码方式。text/plain、multipart/form-data、application/x-www-form-urlencoded

autofocus属性:为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该控件自动获得光标焦点。

required属性:可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字。

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>

 


1、header 页面头部、页眉

header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如

总结:

  a、不要将section元素作为设置样式的页面容器。

  b、如果article元素、aside元素、nav元素更符合使用条件,就不要使用section元素

  c、没有标题内容不要使用section元素。

<input  type="text"  placeholder="请输入用户名"  autofocus  autocomplete="off">

  a、placeholder  设置文本框默认提示文字  

  b、autofocus  自动获得焦点

  c、autocomplete  设置是否有联想关键词下拉,一般设置为"off",将其关掉   如:autocomplete="off"

9、hgroup元素

hgroup元素是将标题及其子标题进行分组的元素。hgroup元素通常会将h1~h6元素进行分组,譬如一个内容区块的标题及其子元素算一组

<hgroup>
    <h2>文章主标题</h2>
    <h3>文章子标题</h3>
</hgroup>

2、video标签  支持格式:ogg、mp4、webM

对应的属性:

  a、width

  b、height

  c、Poster

如:<video src="source/audio.mp3" autoplay controls loop preload width="600" height="400"></video>

6、footer 页面底部、页脚

footer元素可以作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。

<footer>
    <ul>
        <li>版权信息</li>
        <li>关注我们</li>
        <li>联系我们</li>
    </ul>
</footer>

本文由时时app平台注册网站发布于web前端,转载请注明出处:HTML5新添标签【彩世界网址】

关键词: