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中必须注明单位，否则会出错
网友评论