HTML基础元素

块级元素：

     特点：独占一行、默认宽度100%、高度为子元素内容决定、可以通过css设置宽高；

垂直分布，margin和padding的上下左右均对其有效，可以自动换行，默认排列方式从上到下

     元素：html、body、div、p、h1~h6、ul->li、ol->li、dl->dd/dt、 header、footer、nav、article、section、aside...

行内元素：

        特点：与其他元素共享一行、宽高由自身决定、不能用css设置宽高、行内元素中不可以嵌套块级元素；

水平分布，对margin仅设置左右方向有效，上下无效；padding设置上下左右都有效，即会撑大空间,行内元素尺寸由内含的内容决定，不会自动进行换行

        元素：span、a、img、strong、b、i、em、sub、sup...

基础标签的使用：

        h标签：标题标签，有六级标签，从h1-h6依次变小

        p标签：段落标签，独占一行，段与段之间有一个间距（p标签是块级元素，常理来说，块级元素是可以嵌套块级元素和行内元素的，但是p标签是个特殊，它里面不能嵌套块级元素。）

        br标签：强制换行

        hr标签：在页面中生成一个分割线

        img标签：展示一张图片；img标签有很多属性：src：设置图片路径、alt：当图片显示不出来时的描述；img标签虽然是行内元素，但是可以对其设置宽高：width、height（如果不设置宽高，图片会按照默认的样式显示；调整其中一个，另一个会等比例调整）；title：当鼠标悬停时显示的表述

        a标签：属性：href：跳转链接、target：控制如何跳转。可以用a标签设置锚点，将href中设置#，则跳到页面顶部、设置#+其他元素id值，可跳转到该元素位置，可以跨页面跳转。base标签：写在html页面head处，设置target值，可控制该页面a标签跳转方式。

        em、i标签：斜体

        strong、b标签：加粗

        u标签：下划线

        div标签：一个纯粹的块元素，没有任何样式

        span标签：没有语义，用来选中文字并给文字设置样式

h5新增标签：

        video：播放视频。video标签的属性 src:告诉video标签需要播放的视频地址、autoplay:用于告诉video标签是否需要自动播放视频、controls:用于告诉video标签是否需要控制条、poster:用于告诉video标签视频没有播放之前显示的占位图片、loop:一般用于做广告视频，用于告诉video标签视频播放完毕之后是否需要循环播放、muted:静音、width/height:和img标签中的一模一样、onerror:当视频音频加载失败时触发(默认事件οnerrοr="myFunction()")

        audio：播放音频

h5新增语义化标签：（相当于div class='xxx'，语义不同）

        

        header：是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含搜索表单或logo。

        nav：是一个可以用作页面导航的链接组，其中导航元素链接到其他页面或当前页面的其他部分。

        article：代表文档，页面或应用程序中独立的，完整的，可以独自被外部引用的内容，也可以嵌套使用。可以是一篇博客或者报刊中的文章，一篇论坛帖子，一段用户评论或者独立的插件，或其他任和独立的内容。

        section：作为Html文档独立的功能。

        aside：元素用来表示当前页面或文章的附属信息部分，它可以包含当前页面或主要内容相关的引用，侧边栏，广告，导航条，以及其他类型的有别于主要内容的部分。

        footer：元素作为其上层父级内容区块或是一个根区块的脚注。footer通常包括其相关区块的脚注信息，如作者，相关阅读连接以及版权信息等。与header类似，一个页面中也未限定footer元素的个数。

        address：元素用来在文档中呈现联系信息，包括文档作者或文档维护者名字，他们的网站链接，电子邮箱，真实地址，电话号码，以及跟文档相关的联系人的所有联系信息。 在不支持Html5的浏览器中，由于浏览器无法识别Html5新增标签，所以默认将这些标签设置为行内元素（display:inline）,为了兼容性，需要： section, article, aside, footer, header, nav, hgroup { display:block; } 但是上述方法有局限性，比如在IE8以及更早版本，是无法对未知元素进行样式的修饰，因此需要：

        figure& figcaption：figure元素是一种元素的组合，带有可选标题，figure元素用来表示网页上一块独立内容，将其从网页上移除后不会对网页上的其他内容产生任何影响，figure元素所表示的内容可以是图片，统计图或代码示例，也可以是音频插件，视频插件，统计表格等。figcaption元素表示figure元素的标题，它从属于figure元素，必须书写在figure元素内部。一个figure元素内最多只允许放置一个figcaption元素，但是允许放置多个其他元素。

多用于用作文档中插图的图像。

        details：details元素是一种用于标识该元素内部的子元素可以被展开,收缩显示的元素。details元素内并不仅限于放置文字，也可以放置表单,插件或对于一个统计图提供的详细数据表格。

        open属性：当该属性值为true时，该元素内部的子元素应该被展开显示；当该属性的值为false时，其内部的子元 素应该被收缩起来不显示。默认值为false

        summary子元素：summary元素从属于details，用鼠标单击summary元素中的内容文字时，details元素中的其他所有从 属元素将会展开或收缩。如果details元素内没有summary元素，浏览器会提供默认文字(详细信息)以供 单击。