HTML——0412

HTML结构

1.1 HTML文件基本结构

1.!DOCTYPE html 表示当前文档使用html5的标准进行解析；
2. html标签是根标签；
3. head标签引入相关配置、描述文件；
4. meta 使用utf-8的编码规则，防止中文乱码；
5. title标签写的是页面的标题；
6. body标签写页面的显示内容；

1.2盒模型

盒模型是每一个标签都是一个矩形，像一个盒子，所以HTML页面布局可以理解为多个盒子嵌套排列而成。

1.2.1组成

1.简单组成

width 宽度
height 高度
backgroundcolor 背景颜色

2.border 边框

border：线宽 线性 线色
solid 实线 dashed 虚线 dotted点线 double 双线
border-radius 圆角
border-width 边框宽度
border-height 边框高度
注：边框会增加盒模型的面积

3.padding 内边距

顺时针赋值，从上开始
padding-top 上内边距
padding-right 右内边距
padding-bottom 下内边距
padding-left 左内边距

注：内边距会增加盒模型的面积

4.margin 外边距

顺时针赋值，从上开始
margin-top 上外边距
margin-right 右外边距
margin-bottom 下外边距
margin-left 左外边距
出现的两个问题：
1.叠压现象： 常态下，两者之间的间距以大值为准；
2.塌陷问题：
产生原因：父级的第一个子级是块标签，并且使用了margin或margin-top
解决方案：
1.不使用margin-top，在父级使用padding-top
2.在父级使用border
3.在父级使用overflow:hidden(溢出隐藏)

1.3其他知识点

1.3.1 区分div 用class

.d1{} class选择器，权重10
div{} 标签选择器，权重1
id用 “#” 权重 id（100）>class(10)>tag(1)

1.4案例

1.4.1 案例1

#代码如下：

1.4.2 案例2 五环