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 规定是否应该翻译元素内容。
原文转载：http://www.shaoqun.com/a/528577.html
亚马逊 海外购：https://www.ikjzd.com/w/998
打折网：https://www.ikjzd.com/w/74
HTML5新增属性 HTML5的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性基本是IE9+以上版本的浏览器才支持； 1、HTML5新增的语义化标签 以前布局基本用div来做，但div对于搜索引擎来说，是没有语义的。 新增的语义化标签：<body><header>头部标签</header><nav&
易佰：易佰
reverb：reverb
护肤品怎么入驻速卖通？2020速卖通护肤品行业招商准入资质：护肤品怎么入驻速卖通？2020速卖通护肤品行业招商准入资质
亚马逊产品被跟卖？怎样防止跟卖？亚马逊大卖家教你防跟卖秘诀：亚马逊产品被跟卖？怎样防止跟卖？亚马逊大卖家教你防跟卖秘诀
亚马逊中国成为被执行人 执行标的23420：亚马逊中国成为被执行人 执行标的23420
No comments:
Post a Comment