datalist控件的使用_HTML5元素的使用

HTML5规范半元素分为三大类：无数据元素、流元素、短语元素。

① 元数据元素用来HTML文档的基本结构，以及就如何处理文档向浏览器提供信息和指示。

② 短语元素是HTML的基本成分。

③ 流元素是短语元素的超集。这就是说，所有短语元素都是流元素，但并非所有流元素都是短语元素。

一、HTML元素选用原则：

1、少变可为多——判断该用多少需要经验，有条经验法则是：问问自己打算如何发挥一个元素的语义作用，如果不能马上答出就不用这个元素。

2、别误用元素——每个元素针对的是一种特定类型的内容。对内容进行标记时，只宜将元素用于它们原定的用途，不要创造自有的语义。如果找不到适合自己所要含义的元素，可以考虑使用通用元素，并县域用全局属性class表明其含义。CSS样式不是类属性唯一的用途。

3、具体为佳，一以贯之——用来标记内容的元素应该选择最为具体的那个。如果已有元素能恰当表明内容的类型，就不要使用通用元素。

4、对用户不要想当然——有人可能觉得HTML文档的用户关心的只是它在浏览器中的呈现结果，所以不用为标记的语义准确性劳神。呈现与语义分离原则的目的完全是为了让HML文档更易于程序化处理。

二、元素的分类：

1. 文档和元数据元素——

① base：设置相对URL的基础(类型：元数据)

② body：表示HTML文档的内容(类型：无)

③ DOCTYPE：表示HTML文档的开始(类型：无)

④ head：包含文档的元数据(类型：无)

⑤ html：表示文档中HTML部分的开始(类型：无)

⑥ link：定义与外部资源(通常是样式表或网站图标)的关系(类型：元数据)

⑦ meta：提供关于文档的信息(类型：元数据)

⑧ noscript：包含浏览器禁用脚本或不支持脚本时显示的内容(类型：元数据、短语)

⑨ script：定义脚本程序，可以是文档内嵌的也可以是外部文件中的(类型：元数据、短语)

⑩ style：定义CSS样式(类型：元数据)

⑾ title：设置文档标题(类型：无数据)

2. 文本元素：

① a：生成超链接(类型：短语、流)

② abbr：缩略语(类型：短语)

③ b：不带中着重意味地标记一段文字(类型：短语)

④ br：表示换行(类型：短语)

⑤ cite：表示其他作品的标题(类型：短语)

⑥ code：表示计算机代码片段(类型：短语)

⑦ del：表示从文档中删除的文字(类型：短语、流)

⑧ dfn：表示术语定义(类型：短语)

⑨ em：表示着重强调的一段文字(类型：短语)

⑩ i：表示与周边内容生性不同的一段文字，例如来着另一种语言的词语(类型：短语)

⑾ ins：表示加入文档的文字(类型：短语、流)

⑿ kbd：表增用户输入内容(类型：短语)

⒀ mark：表示一段因为与上下文中另一词语相关而被突出显示的内容(类型：短语)

⒁ q：表示引自他处的内容(类型：短语)

⒂ rq：与ruby元素结合使用，标记括号(类型：短语)

⒃ rt：与ruby元素结合使用，标记注意符号(类型：短语)

⒄ ruby：表示位于表意文字上方或右方的注意符号(类型：短语)

⒅ s：表示文字已不再准备(类型：短语)

⒆ samp：表示计算机程序的输出内容(类型：短语)

⒇ small：表示小号字体内容(类型：短语)

21) span：一个没有自己的语义的通用元素。可以用在希望应用一些全局属性却又不想引入额外语义的情况(类型：短语)

22) strong：表示重要内容(类型：短语)

23) sub：表示下标文字(类型：短语)

24) sup：表示上标文字(类型：短语)

25) time：表示时间或日期(类型：短语)

26) u：不带强调或着重意味地标记一段文字(类型：短语)

27) var：表示程序或计算机系统中的变量(类型：短语)

28) wbr：表示可安全换行的地方(类型：短语)

3. 用于分组的元素：

① blockquote：表示引自他处的大段内容(类型：流)

② dd：用在dl元素之中，表示定义(类型：无)

③ div：一个没有任何既定语议的通用元素，是span元素在流元素中的对应物(类型：流)

④ dl：表示包含一系列术语和定义的说明列表(类型：流)

⑤ dt：用在dl元素之中，表示术语(类型：无)

⑥ figcation：表示figure元素的标题(类型：无)

⑦ figure：表示图片(类型：流)

⑧ hr：表示段落级别的主题转换(类型：流)

⑨ li：用在ul、ol和menu元素中，表示列表项(类型：无)

⑩ ol：表示有序列表(类型：流)

⑾ p：表示段落(类型：流)

⑿ pre：表示其格式应被保留的内容(类型：流)

⒀ ul：表示无序列表(类型：流)

4. 划分内容：

① address：表示文档或article的联系信息(类型：流)

② article：表示一段独立的内容(类型：流)

③ aside：表示与周边内容稍有牵涉的内容(类型：流)

④ details：生成一个区域，用户将其展开可以获得更多的细节知识(类型：流)

⑤ footer：表增尾部(类型：流)

⑥ h1~h6：表示标题(类型：流)

⑦ header：表示首部(类型：流)

⑧ hgroup：将一组标题组织在一起的导航元素(类型：流)

⑨ nav：表示有意集中在一起的导航元素(类型：流)

⑩ section表示一个重要的概念或主题(类型：流)

⑾ summary：用在details元素中，表示该元素内容的标题或说明(类型：无)

5. 制表：

① caption：表示表格的标题(类型：无)

② col：表示一列(类型：无)

③ colgroup：表示一组列(类型：无)

④ table：表示表格(类型：流)

⑤ tbody：表示表格主体(类型：无)

⑥ td：表示单元格(类型：无)

⑦ tfoot：表示表脚(类型：无)

⑧ th：表示标题行单元格(类型：无)

⑨ thead：表增标题行(类型：无)

⑩ tr：表示一行单元格(类型：无)

6. 创建表单

① button：表示可用来提交或重置表单的按钮(类型：短语)

② datalist：定义一组提供给用户的建议值(类型：流)

③ fieldset：表示一组表单元素(类型：流)

④ form：表示HTML表单(类型：流)

⑤ input：表示用来收集用户输入数据的控件(类型：短语)

⑥ keygen：生成一对公钥和私钥(类型：短语)

⑦ label：表示表彰元素的说明标签(类型：短语)

⑧ legend：表示fieldset元素的说明性标签(类型：无)

⑨ optgroup：表示一组相关的option元素(类型：无)

⑩ option：表示供用户选择的一个选项(类型：无)

⑾ output：表示计算结果(类型：短语)

⑿ select：给用户提供一组固定的选项(类型：短语)

⒀ textarea：用户可以用它输入多行文字(类型：短语)

7. 嵌入内容

① area：表示一个用于客户端分区响应图的区域(类型：短语)

② audio：表示一个音频资源(类型：无)

③ canvas：生成一个动态的图形画布(类型：短语、流)

④ embed：用插件在HTML文档中嵌入内容(类型：短语)

⑤ iframe：通过创建一个浏览上下文在一个文档中嵌入另一个文档(类型：短语)

⑥ img：嵌入图像(类型：短语)

⑦ map：定义客户端分区响应图(类型：短语、流)

⑧ meter：嵌入数值在许可值范围背景中的图形表示(类型：短语)

⑨ object：在HTML文档中嵌入内容。也可用于生成浏览上下文和生成客户端分区响应图(类型：短语、流)

⑩ param：表示将通过object元素传递给插件的参数(类型：无)

⑾ progess：嵌入目标进展或任务完成情况的图形表示(类型：短语)

⑿ source：表示媒体资源(类型：无)

⒀ svg：表示结构化矢量内容(类型：无)

⒁ track：表示媒体的附加轨道(例如：字幕)(类型：无)

⒂ video：表示视频资源(类型：无)

　随着互联网的突飞猛进，HTML5培工程师的薪资还会再上升一大截。如果你想学习这门高薪技术，千锋重庆培训欢迎你。千锋重庆提供两周免费试听课程，各位学员可以来试听。