小白的Html入门学习计划(二) -- Html中的元素和属性

        作为一个Android开发者，现在越来越多的场景使用到了混合开发，Html在移动设备上也展现了其优势，为了符合市场的需求，提升我们的能力，了解一定的前端知识还是很有必要的，现开始做一份自己的Html+js的记录博客，参考经典书籍《Html5+CSS3+JavaScript从入门到精通》及个人学习过程中一些查阅的资料，记录属于自己的知识博客。

        本篇文章记录Html4和Html5中的元素和属性，多为一些需要记忆的知识。

一、Html4的元素

        Html4中一共有91个元素，这些元素都是根据特定内容、结构或特性定义的。具体分为结构元素。内容元素和修饰元素三大类。

        1、结构元素

        结构元素用于构建网页文档的结构，多指块状元素。如div、span、ol等

        2、内容元素

        内容原宿定义了元素在文档中表示内容的语义，一般只指本格式化元素，它们多是行内元素。如a、abbr、address等。

        3、修饰元素

        修饰元素定义了文本的显示效果。如：b、i、big等。

        关于元素的相信信息和作用，此处不再一一列举，可以参考Html标签

二、Html4属性

        Html4元素包含的属性有很多，可以分为核心属性，语言属性，键盘属性，内容属性和延伸属性等类型。

        1、核心属性

        核心数形主要包括class（定义类规则或样式规则）、id（定义元素的唯一标识）、style（定义元素的样式声明）。

        tips:html、head、title、base、meta、param、script、style这些元素一般位于文档的头部区域，用来定义网页元信息，不含有核心数形。

        2、语言属性

        语言属性主要用来定义元素的语言类型，包括两个属性lang（定义元素的语言代码或编码）和dir（定义文本方向，包括ltr和rtl取值分别表示从左向右会从右向左）。

        tips:frameset、frame、iframe、br、hr、base、param、script这些元素没有语言属性。

        3、键盘属性

        键盘属性定义元素的键盘访问方法，包括两个属性accesskey（定义访问某元素的键盘快捷键）和tabindex（定义元素的Tab键索引编号）。

        4、内容属性

        内容属性定义元素包含内容的附加信息，这些信息对于元素来说具有重要补充作用，避免元素本身包含信息不全而被误解。其包含alt（定义元素的替换文本）、title（定义元素的提示文本）、longdesc（定义元素包含内容的大段描述信息）、cite（定义元素包含内容的引用信息）和datetime（定义元素包含内容的日期和时间）五个属性。

        5、其他属性

        其他属性有很多，主要定义元素的相关信息。比如 rel（定义当前页面与其他页面的关系）、rev（定义其他页面和当前页面之间的链接关系）。

三、Html5元素

        Html5在Html4的基础上新增了很多新元素，根据标记内容的类型不同，这些新元素被分为几种类型。

        1、结构元素

        HTML5定义了一组新的语义化结构标记来描述网页内容。虽然语义化结构标记也可以使用HTML4标记进行替换，但是它可以简化HTML页面设计，明确的语义化更适合搜索引擎检索和抓取。

        新增的语义化标记元素如下：

        header        表示页面中一个内容区域或整个页面的标题

        footer         表示整个页面或页面中一个内容区块的脚注。通常，它会包含创作者的姓名，创作日期和创作者联系信息。

        section        表示页面中的一个内容区块，如章节、页眉、页脚或页面中的其它部分，它可以与h1、h2、h3、h4、h5、h6等元素结合使用，标示文档结构。

        article        表示页面中的一块与上下文不相关的独立内容，如博客中的一篇文章或报纸中的一篇文章。

        aside         表示article元素内容之外的，与article元素的内容相关的辅助信息。

        nav            表示页面中导航链接的部分。

        main         表示网页中的主要内容，主要内容区域指与网页标题或应用程序中本页面主要功能直接相关或进行扩展的内容。

        figure        表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。可以使用figcaption元素为figure元素组添加标题。

        2、功能元素

        HTML5新增了很多功能元素，部分如下（所有元素请参考Html标签中的new部分）：

        hgroup        用于对整个页面或页面中一个内容区块的标题进行组合

        video           定义视频，比如电影片段或其他视频流

        audio           定义音频，比如音乐或其他音频流

        embed        用来插入各种多媒体，格式可以使Midi、Wav、AIFF、AU、MP3等

        mark           主要用来在视觉上向用户呈现那些需要突出显示或高亮显示搜索关键词

        dialog         定义对话框或窗口

        bdi              定义文本的文本方向，使其脱离其周围文本的方向设置

        figcaption   定义figure元素的标题

        time            表示日期或时间，也可以同时表示两者

        canvas        表示图形，如图表和其它图像

        output        表示不同类型输出，比如脚本的输出

        source        为媒介元素（比如video和audio）定义媒介资源

        menu          表示菜单列表

        3、表单元素

        通过type属性，Html5位input元素新增了很多类型，有以下类型供大家使用（图片来自input属性）

四、Html5属性

        Html5新增和删除了很多属性，如autofocus和placeholder等表单属性，还有一些链接属性和其它属性，建议大家参考Html标签，对于需要实现的功能，查找对应标签的属性来进行学习开发。

        Html5还新增了八个全局属性，具体如下（图片来自Html5全局属性）

    

        关于Html中元素标签和属性的知识就到此为止了，关于这方面的知识，我们应该在使用中去进行学习记忆，只靠淡出的记忆效率不高，这篇文章也主要是简单几率一下，实际使用可以参考一些资料站，查看完整的API，帮助我们快速进行开发。

        下一篇将会带来CSS相关的知识，敬请期待！