用html语言定义盒子类,html5基础笔记（一）

html:HyperText Markup Language(超级文本标记语言)

超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网(WWW)盛行的原因之一，其主要特点如下：

1.简易性： 超级文本标记语言版本升级采用超集方式，从而更加灵活方便。

2.可扩展性： 超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。

3.平台无关性： 虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网(WWW)盛行的另一个原因。

4.通用性： 另外，HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。

标准html主体结构标签

markdown这部分内容复制不过来，只能截图，来自我的有道云笔记

用于编写css代码-->

HTML语法(重点)： 1.注释 注释不能嵌套 2.标签 双标签

单标签

在HTML5中，单标签可以不用加结束标记符/

标签不区分大小写，推荐小写

属性 属性一般出现在标签中，属于标签的一部分，通常是属性名和属性值一起出现 例:

但也有单独的属性 例: 属性值可以写单引号，双引号，甚至不加引号都可以 推荐双引号

html代码的格式 不管多少个空格，回车或者tab制表符，浏览器都只会解析成一个空格

块级标签/行内标签 块级标签:跟同级的兄弟块依次竖直排列，左右撑满 div dl fieldset - form form h1 h2 h3 h4 h5 h6 hr ......

行内标签:只能容纳文本或其他内联元素 : a  abbr  acronymb bdo big br citecodedfn  em  font  i ......

字体使用标签 标题标签:

来自我的有道云笔记

实体字符(常用)： < < > > © 版权控制   空格

来自我的有道云笔记

列表标签(重点)

//自定义列表项//定义列表的标题 t:title

//定义列表的描叙 d:description

来自我的有道云笔记

表单标签(系列)(重点)

来自我的有道云笔记

来自我的有道云笔记

表单新增内容(H5)(重点)

来自我的有道云笔记

来自我的有道云笔记

来自我的有道云笔记

HTML中的颜色设置

1.英语单词 red、green、blue、black、white、pink、orange、purple lightblue...

2.以16进制表示 10进制 0~9 16进制 09af

3.以#开头，后面跟#红绿蓝#000 黑色#fff 白色  可以写成#ffffff#115599 可以简写为#159

-- (已经淘汰)框架集标签

frameset 设置框架集，不能与body同在。使用时必须去掉body标签

来自我的有道云笔记

(h5)新增结构标签(重点)

header 标题标签

nav 导航栏标签

article 文章

section 主体部分

aside侧边栏部分

main 不能多次使用main标签，也不能嵌套到article和section中

footer 页脚

(h5)其他新增标签

来自我的有道云笔记

盒子模型(重点)：

1.1 定义： 任何一个元素都可以抽象一个盒子模型， 盒子里面可以嵌套盒子

1.2 组成： 元素内容(有宽高)、内边距(补白)、边框、外边距(补白)

1.3 相关属性： width height 盒子的宽高 border 盒子的边框 padding 盒子的边框距离盒子的内容的距离 margin 盒子的边框距离上一个盒子或父元素的距离，可以为负值

1.4 盒子模型的宽高 盒子的宽 = 内容的宽 + 左右内补白 + 左右边框

其中包括元素的内容(content)，元素的内边距(padding)，元素的边框(border)，元素的外边距(margin)四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

IE盒子模型

content部分包含了 border 和 pading;

w3c标准盒子模型

content不包含border

来自我的有道云笔记

上下两个盒子双外边距的堆叠问题

当两个相邻元素之间为兄弟关系时 一个有下边距 一个有上边距那么这两个间距较大的保留 另外一个取消效果,只有垂直方向的 margin 才会折叠解决方法:

1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠(注意这里指的是上下相邻的元素)

2.创建了块级格式化上下文的元素，不和它的子元素发生 margin 折叠(注意这里指的是创建了BFC的元素和它的子元素不会发生折叠)

触发BFC的因素是float(除了none)、overflow(除了visible)、display(table-cell/table-caption/inline-block)、position(除了static/relative)

关于BFC:BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。(http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html)

完美解决Css 盒模型的四大兼容性问题

Css盒模型包括6个基本属性，其中width和height属性定义内容区域的宽度和高度，在内容区域的外面包括了三层界面属性---------padding,border,margin,在使用这个盒内使用background属性填充padding和内容区域的背景。

现在基本上所以的浏览器都主动向css标准靠拢，在支持css2css3方面都有很多努力。在微软推出ie8以上的版本中可以说是彻底的支持了css2标准。

下面我们介绍一下几个盒模型应用时经常遇到的几个问题

1.ie元素浮动时边界误差问题

在ie6浏览器预览浮动元素时，浮动的边界实际显示为指定边界的2倍，对于ie6边界的显示错误，我们可以设置浮动元素的display属性为inline,这样就可以避免边界加倍显示的问题。

2.非ie浏览器中怎么让父级元素适应子元素高度

在非ie浏览器中，怎么让父级元素的高度随子元素的高度自适应变化呢？首先我们需要定义父级元素的overflow属性，并且显示声明父级元素自适应调整陶都。 我们来看看目前哪些浏览器能解析自适应高度，非ie浏览器如opera,ntescape,firefox这些都不能够解析，而ie7取消了元素高度自适应；所以，我们为了实现自适应高度，应该增加overflow:auto的声明，但为了与ie不同版本解析兼容，我们还必须增加一个辅助元素，定义clear:both属性，这样就强制了元素的高度。

3.元素低边界不被解析

在css规定中，没有定义float属性的父元素不会自动计算高度，要让其计算出高度，就必须在子元素的最后添加一个辅助元素，并且设置clear:both。所以，我们不能设置父元素overflow:auto属性，而是要设置成父元素浮动属性float:left或者float:right.

4子元素在ie溢出

对于这个问题，子元素在ie中溢出，我们可以使用cssheck技巧，我们可以通过定义一个单独在ie浏览器中被解析的样式，如1px,解析父元素的继承性。上面的四点式盒模型中嵌套父子元素、相邻关系中一个css应用中的难点。当我们使用display属性不一致时，错乱与兼容性问题就时常困扰着我们，就要我们在不断的实践中融会贯通，多多练习！