div元素

1.div元素与布局

1.元素的分类

块元素:主要特征是会产生换行效果，自动与其他元素分离成两行；通常可以作为容器在内部添加其他元素。
已经学过的块元素有：

h1~h6;hr;ul;ol;p;table.........

内联元素:不会产生换行效果，会和其他元素并联排列；
已经学过的内联元素有：

b;i;br;img;.........

2.div元素和布局

div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；并且可以通过CSS设置样式来完成复杂的页面的布局

    <div style="width: 100%;height: 708px">
            <div style="background: green;width: 100%;height: 10%">我是标题</div>
            <div style="background: yellow;width: 20%;height: 80%;float: left;">我是导航栏</div>
            <div style="background: blue;width: 80%;height: 80%;float: left;">我是iframe内联框架</div>
            <div style="background: gray;width: 100%;height: 10%;clear: left;">我是尾部</div>
        </div>

效果图.gif

2.通用属性

通用属性

通用属性（全局属性）可以用于任何的HTML5元素；通用属性有十几种

1.id属性

id属性用于指定元素的识别名称，相当于一个人的身份证，是唯一的，同一个文档中不能有重复的id；一般配合CSS和JavaScript来选择元素。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            #div1{width: 100%;height: 708px}
            #div2{background: green;width: 100%;height: 10%}
            #div3{background: yellow;width: 20%;height: 80%;float: left;}
            #div4{background: blue;width: 80%;height: 80%;float: left;}
            #div5{background: gray;width: 100%;height: 10%;clear: left;}
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">我是标题</div>
            <div id="div3">我是导航栏</div>
            <div id="div4">我是iframe内联框架</div>
            <div id="div5">我是尾部</div>
        </div>
    </body>
    </html>

2.class属性

class属性用于指定元素的类别名称，可以使用class元素给同一个文档中的多个元素进行归类，CSS就可以通过class个同一类元素设置统一的样式。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style type="text/css">
            .class1{background: green;}
            #div1{width: 100%;height: 708px}
            #div2{width: 100%;height: 10%}
            #div3{background: yellow;width: 20%;height: 80%;float: left;}
            #div4{background: blue;width: 80%;height: 80%;float: left;}
            #div5{width: 100%;height: 10%;clear: left;}
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2" class="class1">我是标题</div>
            <div id="div3">我是导航栏</div>
            <div id="div4">我是iframe内联框架</div>
            <div id="div5" class="class1">我是尾部</div>
        </div>
    </body>
    </html>

3.style属性

stlyle属性用于给元素设定样式（内联样式或内部样式表）.

4.title属性

title属性用于显示省略的内容（或补充/提示说明的内容）：当光标移动到元素内容上时显示title里的内容.

    <div id="div3" title="title设置">我是导航栏</div>

5.dir属性

dir属性用于设定元素标签内容的文字方向.在讲文本样式的 bdo元素时候用过。

<bdo dir="rtl">文字走向</bdo>
<p dir="rtl">我是段落</p>

效果图.png

6.lang属性

lang属性用于指定语言，比如中文还是英文：zh-cn/en;除了在html标签中设置，它还可以在特定元素中使用，改变该元素使用的语言.

其他通用属性

其他通用元素还有：

accesskey:元素快捷键
tabindex：元素移动顺序
draggable：元素拖动
contenteditable:元素是否允许编辑
hidden:隐藏元素
spellchcheck：元素检查
contextmenu:元素快捷菜单
data-yourvalue：自定义属性

关于属性值的几点补充：

name和id属性：属性值必须是大小写英文字母开头；

其余部分可以包含字母、数字、下划线、点等符号；

属性值是区分大小写的

属性值为数值时，必须输入正整数，不可谓0

width,height是属性值：如果设置为正整数时，单位默认为px（像素），不需要要加上单位；但是在style中必须注明单位，否则会出错