Html5属性与元素(第二讲)

1、Html5Html5属性与元素（属性与元素（二）二）前端技术开发2016.11.16v Html5 Html5与之前版本的不同与之前版本的不同v 新增的元素和废除的元素新增的元素和废除的元素v 新增的属性和废除的属性新增的属性和废除的属性 目录目录视觉设计视觉设计 可以省略标签的元素可以省略标签的元素 拥有拥有boolbool值的属性值的属性 省略属性的引用符省略属性的引用符前端页面实现前端页面实现1. Html51. Html5与之前版本的不同与之前版本的不同前端开发 视觉设计 Html5的语法与之前的Html语法在某种程度上达到了一定的兼容性。例如，有时可以看到“标签没有结束符”等现象，在

2、Html5中不将这些视为错误，而是“允许这些现象存在，并明确记录在Html5规范中”。下面具体看看Html5与之前版本的不同： 1.1.可以省略标签的元素（可以省略标签的元素（3 3种情况种情况） （1）不允许写结束标记的元素有： input、link、area、base、br、col、hr、command、embed、img、keygen、meta、param、source、track、wbr等； （2）可省略结束标签的元素有： li、dt、dd、p、rt、rp、option、optgroup、colgroup、thead、tbody、tfoot、tr、td、th等； （3）可省略整个标签的

3、元素有： html、head、body、colgroup、tbody等。注：虽然这些元素可以省略，但实际上却是隐式存在的，在DOM树上它是存在的。前端开发 视觉设计 2 2. .拥有拥有boolbool值的属性：值的属性： 拥有布尔值（boolean）的属性，例如disabled和readonly等，通过省略属性的值来表达值为“true”，如果要表达值为“false”，则直接省略属性本身即可。此外，当写明属性值为“true”时，可以将属性名设定为属性值，也可以将属性值设为空字符串。前端开发 视觉设计 3 3. .省略属性的引用符省略属性的引用符： 设置属性值时，可以使用双引号或单引号来引用。在

4、Html5中进一步进行了改进，只要属性值不包含字符串、单引号、双引号、“”、“=”等字符，都可以省略属性的引用符。 新增的结构元素新增的结构元素 新增的行内（新增的行内（inlineinline）语义元素）语义元素 新增的块级（新增的块级（blockblock）语义元素）语义元素 新增的新增的inputinput元素的类型元素的类型 新增的多媒体元素与交互性元素新增的多媒体元素与交互性元素 废除的元素废除的元素前端页面实现前端页面实现2. 2. 新增的元素和废除的元素新增的元素和废除的元素前端开发 视觉设计HTML5互设计2.1 新增的结构元素在HTML5中，新增了以下与结构相关的元素：s s

5、ectionection元素：元素：section元素表示页面或应用程序中的一个区块，比如章节、页眉、页脚或文档中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。内容内容HTML4互设计前端开发 视觉设计HTML5互设计articlearticle元素：元素：article元素表示页面中的一块独立的内容，如博客中的一篇文章或者报纸中的一篇文章。内容内容HTML4互设计前端开发 视觉设计HTML5互设计headerheader元素：元素：header元素表示页面中一个内容区块或整个页面的标题。内容内容HTML4互设计前端开发 视觉设计HTML5互设计nav

6、nav元素：元素：nav元素表示页面中导航链接的部分（导航栏）。内容内容HTML4互设计前端开发 视觉设计HTML5互设计footerfooter元素：元素：footer元素表示整个页面或者页面中的一个内容区块的标注。一般来说，它会包含作者的姓名、创作日期以及创建者联系信息。内容内容HTML4互设计前端开发 视觉设计HTML5互设计2.2 新增的行内（inline）语义元素在HTML5中，新增了以下与行内的语义相关的元素：markmark元素：元素：mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键字。

7、内容内容HTML4互设计前端开发 视觉设计HTML5互设计timetime元素：元素：time元素表示日期或时间，也可以同时表示两者。内容内容HTML4互设计前端开发 视觉设计HTML5互设计metermeter元素：元素：meter元素表示度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。内容前端开发 视觉设计HTML5互设计progressprogress元素：元素：progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。例如：下载进度提示。前端开发 视觉设计HTML

8、5互设计2.3 新增的块级（block）语义元素在HTML5中，新增了以下与块级的语义相关的元素：asideaside元素：元素：aside元素主要表示article元素的内容之外的与article元素的内容相关内容。内容内容HTML4互设计前端开发 视觉设计figurefigure元素：元素：figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用元素为figure元素组添加标题。 fruit The person have an apple. fruit The person have an apple.前端开发 视觉设计2.4 新增的input元素的类型在HTM

9、L5中，新增了许多input元素的类型，列举如下：e emailmail：email类型需要输入E-mail地址的输入框；urlurl：url类型需要输入URL地址的输入框；numbernumber：number类型需要输入数值的输入框；Data PickersData Pickers（数据检出器）：（数据检出器）：HTML5拥有多个可供选择日期与时间的新型输入框：date- 选取年、月、日month- 选取年、月week- 选取周、年time- 选取时间（小时和分钟）datetime- 选取时间、日、月、年（UTC时间）datetime-local 选取时间、日、月、年（本地时间）前端开发

10、视觉设计2.5 新增的多媒体元素与交互性元素新增video和audio元素，顾名思义，分别是用来插入视频和音频的。值得注意的是可以在开始标签和结束标签之间放置文本内容，这样在旧的浏览器中就可以显示出不支持该标签的提示信息。这些标签的增加是为了提高页面的交互体验。 您的浏览器不支持video标签。前端开发 视觉设计HTML5互设计detailsdetails元素：元素：details元素表示用户要求得到并且可以得到的细节信息。它可以与元素配合使用，元素提供标题或图例，标题是可见的，用户点击标题时，会显示出details。同时应该是元素的第一个子元素。 HTML5 How to learn Htm

11、l5 ?前端开发 视觉设计HTML5互设计menumenu元素：元素：menu元素表示菜单列表，当希望列出表单控件时使用该标签。 black green前端开发 视觉设计2.6 废除的元素由于种种原因，在Html5中废除了很多元素，下面简单介绍一下被废除的元素：1、可以使用css代替的元素 对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为了画面服务的，而在Html5中提倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代；2、不可以使用frame框架 对于frameset元素、f

12、rame元素与nofrances元素，由于frame框架对页面存在负面影响，在html5中已不再支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上三个元素废除；前端开发 视觉设计3、只有部分浏览器支持的元素： 对于applet、bgsound、blink、marguee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marguee元素，只被IE浏览器支持，所以在Html5中被废除。 其中，applet元素可由embed元素替代，bgsound元素可由audio元素替代，marguee可由JavaScript来实现。 新

13、增与链接相关的属性新增与链接相关的属性 新增与表单相关的属性新增与表单相关的属性 新增的新增的其他属性其他属性 废除的属性废除的属性前端页面实现前端页面实现3.3.新增的属性和废除的属性新增的属性和废除的属性前端开发 视觉设计mediamedia属性属性：为与元素增加media属性，该属性规定目标URL是为什么类型的媒介/设备进行优化的，只能在href属性存在时使用；sizessizes属性属性：为元素增加了新属性sizes，该属性可以与icon元素结合使用（通过rel属性），该属性指定关联图标（icon元素）的大小；targettarget属性属性：为元素增加了target属性，主要目的是保

14、持与元素的一致性，同时target元素在web应用程序中，尤其是在与iframe结合使用时，是非常有用的。3.1 与链接相关的属性前端开发 视觉设计(1)placeholder属性 当用户还没有输入值的时候，input输入框中可以通过placeholder属性向用户显示描述性说明或提示信息，除普通的text文本框之外，email、number、url等其他类型的输入框也都支持placeholder属性。 在Firefox等支持placeholder属性的浏览器中，提示文字会以浅灰色的样式显示在输入框中，当页面失去焦点切换到输入框中，或者输入框中有值时，提示信息会消失。3.2 与表单相关的属性前

15、端开发 视觉设计 在不支持placeholder的浏览器中运行时，该属性会被忽略，以输入框的默认方式显示，同时在输入框输入内容之后，也不会显示。前端开发 视觉设计(2)autocomplete属性 浏览器通过autocomplete属性来确定是否应该保存输入值以备将来使用，例如不保存的代码： autocomplete属性应该用来保护敏感的用户数据，避免本地浏览器对它们进行不安全地存储，对于autocomplete属性，可以指定on、off与不指定三个值。其中，不指定时，使用浏览器的默认值；属性为on时，可以显示指定候补输入的数据列表。前端开发 视觉设计(3)autofocus属性 给文本框、选

16、择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点，一个页面中只能有一个控件具有该属性。 注：只有当一个页面是以使用某个控件为主要目的时，才对该控价使用autofocus属性，例如搜索页中的搜索文本框。前端开发 视觉设计(4)list属性 在html5中，为单行文本框添加一个list属性，该属性的值为某个datalist元素的id。datalist元素也是html5新增元素，该元素类似于选择框（select），但当用户想要设置的值不在选择列表之内时，允许其自行输入。该元素本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。Text： 下拉列表1 下拉列表2 下拉列表3前端开发

17、 视觉设计(5)min和max属性 通过设置min和max属性，可以将range输入框的数值范围限定在最小值和最大值之间，这两个属性既可以只设置一个，可以同时设置两个，也可以都不设置，输入控件会根据设置的参数对值范围作出相应调整。例如，创建一个表示型大小的range控件，值范围从0%-100%。/ 默认min为0，max为100前端开发 视觉设计(6)step属性 对于输入型控件，设置其step属性能够制定输入值递增或递减的梯度，例如按如下方式表示型大小range控件的step属性设置为5： 设置完成后，控件可接受的输入值只能是初始值与5的倍数之和，也就是说只能输入0、5、10.100，至于是

18、输入框的形式还是滑动条的形式，则由浏览器来决定。 step属性的默认值取决于控件的类型，对于range控件，step默认值为1，为配合step属性，html5引入了stepUp和stepDown两个函数对其进行控制，这两个函数的作用分别是根据step属性的值来增加或减少控件的值。前端开发 视觉设计(7)required属性 一旦为某输入型控件设置了required属性，那么此项为必填项，否则无法提交表单，以文本输入框为例，要将其设置为必填项，按照如下方式添加required属性即可： 注：required属性是最简单的一种表单验证方式。前端开发 视觉设计(8)email输入类型 email类型

19、的input元素是一种专门用来输入email地址的文本框，提交时如果文本框中的内容不是email地址格式的文字，则不允许提交，但并不检查email地址是否存在，和所有的输入类型一样，用户可能提交带有空字段的表单，除非该字段加上了required属性。前端开发 视觉设计(9)url输入类型 url类型的input元素是一种专门用来输入url地址的文本框，提交时如果该文本框的内容不是url地址格式的文字，则不允许提交。前端开发 视觉设计(10)date类型 date输入类型是比较常见的一种元素，我们经常看到网页中要求我们输入的各种各样的日期，例如生日、购买日期、订票日期等。date类型的input

20、元素以日历的形式方便用户输入。前端开发 视觉设计(11)time类型 time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器，可能是简单的文本框，只在提交时检查是否在其中输入有效的时间，也可以以时钟形式出现。前端开发 视觉设计(12)datetime输入类型 datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。前端开发 视觉设计(13)datetime-local输入类型 datetime-local类型的input元素是一种专门用来输入本地日期和时间

21、的文本框，并且在提交时会对输入的日期和时间进行有效性检查。前端开发 视觉设计(14)month输入类型 month类型的input元素是一种专门用来输入月份的文本框，并且在提交时会对输入的月份进行有效性检查。前端开发 (15)week输入类型 week类型的input元素是一种专门用来输入周号的文本框，并且在提交时会对输入的周号进行有效性检查。有的浏览器会提供一种辅助输入的日历，可以在该日历中选取日期，选取完毕文本框中自动显示周号。前端开发 视觉设计(16)number输入类型 number类型的input元素是一种专门用来输入数字的文本框，并且在提交时会检查其中的内容是不是数字，它与min、

22、max、step属性能很好地协作。前端开发 视觉设计(17)range输入类型 range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性和max属性，可以设定最小值和最大值（默认为0和100），它还具有step属性，可以指定每次拖动的布幅。前端开发 视觉设计(18)search输入类型 search类型的input元素是一种专门用来输入搜索关键词的文本框。search类型和text类型仅仅在外观上有区别，同时外观可以通过css样式表来改写。(19)tel输入类型 tel类型的input元素被设计为用来输入电话号码的专用文本框，它没有特殊的校验规则，它甚至不强调只输

23、入数字，因为很多电话号码常常带有额外的字符，例如：12-89564752，但是在实际的开发过程中，可以通过pattern属性来指定对输入的电话号码格式进行验证。前端开发 视觉设计(20)color输入类型 color类型的input元素用来选取颜色，它提供一个颜色选择器。前端开发 视觉设计Html5中除了上面介绍的与链接和表单相关的属性之外，还增加了下面的属性：reversedreversed属性属性：为元素增加属性reversed，它指定列表倒序显示。li元素的value属性与ol元素的start属性因为它不是被显示在界面上的，所以不建议使用；charsetcharset属性属性：为元素增加了charset属性，该属性已经被广泛支持，而且为文档的字符编码的指定提供一种比较良好的方式；typetype属性与属性与labellabel属性属性：为增加两个新的属性type与label，label属性为菜单定义一个可见的标注，type属性让菜单可以以上下文菜单、工具条、列表等三种形式显示；scopedscoped属性属性：为元素增加了scoped属性，用来规定样式的作用范围，譬如只对页面上某个树起作用。3.3 其他属性前端开发 视觉设计Html4中使用的属性中使用的属性使用该属性的元素使用该属性的元素Html5中的替代方案中的替代方案ch