欢迎光临
我的个人博客网站

HTML新增属性

  

 

HTML5 新增属性

  HTML5 的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是 IE9+ 以上版本的浏览器才支持;

 

  1、HTML5 新增的语义化标签

    以前布局基本用 div 来做,但div 对于搜索引擎来说,是没有语义的。

    新增的语义化标签:

<body>     <header> 头部标签 </header>     <nav>    导航标签  </nav>     <article> 内容标签 </article>     <section> 定义文档某个区域 </section>     <aside>   侧边栏标签 </aside>     <footer>  尾部标签  </footer> </body> <div class=“header”> </div>  <div class=“nav”> </div>  <div class=“content”> </div>  <div class=“footer”> </div>

 

    注意:

      这种语义化标准主要是针对搜索引擎的 ,这些新标签页面中可以使用多次 ,

      在 IE9 中,需要把这些元素转换为块级元素;

 

  2、HTML5 新增的多媒体标签

    新增的多媒体标签主要包含两个: 1、视频:<video> 2、音频:<audio>

    特点:

      HTML5在不使用插件的情况下,也可以原生的支持音频格式文件的播放,可以很方便的在页面中嵌入音频和视频,而不再去使用 flash 和其他浏览器插件(flash常常崩溃)但支持格式有限;

 

    1、视频:<video>

      当前 <video> 元素支持三种视频格式: 尽量使用 mp4格式 ,低版本不支持:

      (1)语法:

<video src="文件地址" controls="controls"> </video> 

 

    // 播放录像     <video controls="controls" width="300">          <source src="move.ogg" type="video/ogg" >          <source src="move.mp4" type="video/mp4" >      </ video >

  

      (2)常见属性

属性 描述
src url 视频url地址
controls controls 播放控件
autoplay autoplay 自动播放,谷歌默认muted
loop loop 循环播放
width pixelx(像素) 播放器宽度
height pixelx(像素) 播放器高度
preload auto(预先加载) none(不加载) 预先加载(有autoplay忽略)
poster imgurl 加载等待的画面图片,默认第一帧
muted muted 静音播放,谷歌默认

      (3)案例:

<style>     video {         width: 100%;     } </style> <body>     <video src="media/mi.mp4" autoplay="autoplay" muted="muted" loop="loop" poster="media/pic.jpg">     </video> </body>

 

 

    2、音频: <audio>

      当前 <audio> 元素支持三种音频格式:主要是用mp3

      (1)语法:

  <audio src="文件地址" controls="controls"></audio>        < audio controls="controls" >            <source src="happy.mp3" type="audio/mpeg" >            <source src="happy.ogg" type="audio/ogg" >            您的浏览器暂不支持 <audio> 标签。      </ audio>

 

      (2)属性:

属性 描述
src url 视频url地址
autoplay autoplay 自动播放,谷歌默认muted
controls controls 播放控件
loop loop 循环播放

        谷歌浏览器把音频和视频自动播放禁止了;

 

    3、多媒体

      1、插入音频、视频和flash

        语法:

<embed src=”多媒体文件地址” width=””> </embed>

 

      2、插入背景音乐

<bgsound src=”背景音乐的地址”/>

  

      loop可选值:

        Loop=”2”表示重复两次;

        loop=”infinite”表示无限循环;

        loop=”-1”无限次;

 

  3、 HTML5 新增的 input 类型

    1、新增类型

属性值 说明:限制用户输入的类型
type=”email” 邮件类型
type=”url” 地址类型
type=”date” 日期类型
type=”time” 时间类型
type=”month” 月份类型
type=”week” 周类型
type=”color” 生成一个颜色表单
type=”number” 数字类型(常用)
type=”tel” 手机号码(常用)
type=”search” 搜索框(常用)

 

    2、新增表单属性

属性 说明
required required 表单拥有该属性表示内容不能为空,必填
placeholder 提示文本 表单的提示信息,不占位
autofocus autofocus 页面加载完自动聚焦到指定表单
autocomplete off/on 当用户在字段键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项;默认打开,如 autocompplete=”on”需要放在表单内,同时加name属性,成功提交
multiple multiple 多选文件提交
<style>         /* 可以通过以下设置方式修改placeholder里面的字体颜色:  */         input::placeholder {             color: pink;         } </style> <body>     <form action="">         <ul>             <li>数量:<input type="number"></li>             <li>手机号码:<input type="tel"></li>             <li>搜索:<input type="search"></li>         </ul>     </form> </body>

 

 

HTML标签附录

HTML大概有七八百个标签

<!--...--> 定义注释。  <!DOCTYPE>     定义文档类型,所有H5都是打头。 <a>    定义锚。 <abbr>    定义缩写。 <acronym>    定义只取首字母的缩写。 <address>    定义文档作者或拥有者的联系信息。 <applet>    不赞成使用。定义嵌入的 applet。 <area>    定义图像映射内部的区域。 <article>    定义文章。 <aside>    定义页面内容之外的内容。 <audio>    定义声音内容。 <b>    定义粗体字。 <base>    定义页面中所有链接的默认地址或默认目标。 <basefont>    不赞成使用。定义页面中文本的默认字体、颜色或尺寸。 <bdi>    定义文本的文本方向,使其脱离其周围文本的方向设置。 <bdo>    定义文字方向。 <big>    定义大号文本。 <blockquote>    定义长的引用。 <body>    定义文档的主体。 <br>    定义简单的折行。 <button>    定义按钮 (push button)。 <canvas>    定义图形。 <caption>    定义表格标题。 <center>    不赞成使用。定义居中文本。 <cite>    定义引用(citation)。 <code>    定义计算机代码文本。 <col>    定义表格中一个或多个列的属性值。 <colgroup>    定义表格中供格式化的列组。 <command>    定义命令按钮。 <datalist>    定义下拉列表。 <dd>    定义定义列表中项目的描述。 <del>    定义被删除文本。 <details>    定义元素的细节。 <dir>    不赞成使用。定义目录列表。 <div>    定义文档中的节。 <dfn>    定义定义项目。 <dialog>    定义对话框或窗口。 <dl>    定义定义列表。 <dt>    定义定义列表中的项目。 <em>    定义强调文本。 <embed>    定义外部交互内容或插件。 <fieldset>    定义围绕表单中元素的边框。 <figcaption>    定义 figure 元素的标题。 <figure>    定义媒介内容的分组,以及它们的标题。 <font>    不赞成使用。定义文字的字体、尺寸和颜色。 <footer>    定义 section 或 page 的页脚。 <form>    定义供用户输入的 HTML 表单。 <frame>    定义框架集的窗口或框架。 <frameset>    定义框架集。 <h1> to <h6>    定义 HTML 标题。 <head>    定义关于文档的信息。 <header>    定义 section 或 page 的页眉。 <hr>    定义水平线。 <html>    定义 HTML 文档。 <i>    定义斜体字。 <iframe>    定义内联框架。 <img>    定义图像。 <input>    定义输入控件。 <ins>    定义被插入文本。 <isindex>    不赞成使用。定义与文档相关的可搜索索引。 <kbd>    定义键盘文本。 <keygen>    定义生成密钥。 <label>    定义 input 元素的标注。 <legend>    定义 fieldset 元素的标题。 <li>    定义列表的项目。 <link>    定义文档与外部资源的关系。 <map>    定义图像映射。 <mark>    定义有记号的文本。 <menu>    定义命令的列表或菜单。 <menuitem>    定义用户可以从弹出菜单调用的命令/菜单项目。 <meta>    定义关于 HTML 文档的元信息。 <meter>    定义预定义范围内的度量。 <nav>    定义导航链接。 <noframes>    定义针对不支持框架的用户的替代内容。 <noscript>    定义针对不支持客户端脚本的用户的替代内容。 <object>    定义内嵌对象。 <ol>    定义有序列表。 <optgroup>    定义选择列表中相关选项的组合。 <option>    定义选择列表中的选项。 <output>    定义输出的一些类型。 <p>    定义段落。 <param>    定义对象的参数。 <pre>    定义预格式文本。 <progress>    定义任何类型的任务的进度。 <q>    定义短的引用。 <rp>    定义若浏览器不支持 ruby 元素显示的内容。 <rt>    定义 ruby 注释的解释。 <ruby>    定义 ruby 注释。 <s>    不赞成使用。定义加删除线的文本。 <samp>    定义计算机代码样本。 <script>    定义客户端脚本。 <section>    定义 section。 <select>    定义选择列表(下拉列表)。 <small>    定义小号文本。 <source>    定义媒介源。 <span>    定义文档中的节。 <strike>    不赞成使用。定义加删除线文本。 <strong>    定义强调文本。 <style>    定义文档的样式信息。 <sub>    定义下标文本。 <summary><details> 元素定义可见的标题。 <sup>    定义上标文本。 <table>    定义表格。 <tbody>    定义表格中的主体内容。 <td>    定义表格中的单元。 <textarea>    定义多行的文本输入控件。 <tfoot>    定义表格中的表注内容(脚注)。 <th>    定义表格中的表头单元格。 <thead>    定义表格中的表头内容。 <time>    定义日期/时间。 <title>    定义文档的标题。 <tr>    定义表格中的行。 <track>    定义用在媒体播放器中的文本轨道。 <tt>    定义打字机文本。 <u>    不赞成使用。定义下划线文本。 <ul>    定义无序列表。 <var>    定义文本的变量部分。 <video>    定义视频。 <wbr>    定义可能的换行符。 <xmp>    不赞成使用。定义预格式文本。

 

 

属性 描述

accesskey    规定激活元素的快捷键。 class    规定元素的一个或多个类名(引用样式表中的类)。 contenteditable    规定元素内容是否可编辑。 contextmenu    规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 data-*    用于存储页面或应用程序的私有定制数据。 dir    规定元素中内容的文本方向。 draggable    规定元素是否可拖动。 dropzone    规定在拖动被拖动数据时是否进行复制、移动或链接。 hidden    规定元素仍未或不再相关。 id    规定元素的唯一 id。 lang    规定元素内容的语言。 spellcheck    规定是否对元素进行拼写和语法检查。 style    规定元素的行内 CSS 样式。 tabindex    规定元素的 tab 键次序。 title    规定有关元素的额外信息。 translate    规定是否应该翻译元素内容。  

 

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » HTML新增属性
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏