1. 概念
Html是一种超文本标记语言;
2.html注释
<!--注释内容-->
注释的作用：代码说明;
3.语法结构
1.符号
尖括号<>;所有的HTML语言都必须括在其中;
2.标签格式
双标签：成对出现<标签名></标签名> <titile>HTML语言</title>
单标签：<br/>
*双标签通常用于包含内容的元素,单标签表示无内容的元素;
3. 结构
3个组成部分：标签 属性 值
<标签名 属性="值" 属性="值">...</标签名 >
4.规范
1.标签名和属性名都使用小写;
2.属性的值用双引号括起来;
3.标签的使用符号嵌套规则;
5.编写网页的流程
1.找参考
2.准备素材/建站
3.添加内容元素
4.标签结构化
6.基本结构
<html>
<head>
</head>
<body>
</body>
</html>
7.css样式
1.行内样式
通过标签style属性来设定css样式，css代码位于HTML标签的标记中;
仅对当前使用的标签有效;
2.内嵌样式
将css放在页面的head区域中，使用 <style></style>标签进行调用;
仅对当前页面有效,不能跨页面使用;
3.外部样式
单独的css样式文件 （.css）,在网页的head区域通过 <link>标签关联css文件;
<link>标签的rel属性指定为stylesheet,href属性指定css文件的路径;
实现了html结构和css样式完全分离,多个网页可以调用1个样式文件;
4.就近原则
行内样式>内嵌样式>外部样式
8.css基础语法
组成部分：
对象{样式声明}
基本格式：
选择符{属性:值;}
选择符(对象)：
以html标签作为css的对象（标签本身,标签的特定属性id或class,标签的某种状态（伪类））;
9.标签选择符
1.id选择符(#id名)
以html标签的唯一标识符id属性的值作为对象;
在html语言中：id属性是html中的通用属性，但是id的值的命名是唯一的,不允许重复；
css语言中：#代表后面的名称代表是id的值,id选择符主要用于针对具有唯一性的html对象;
2.class选择符(.class名)
将一组css样式归纳为一个类,做为css应用的对象；
html语言中：class属性是html标签的通用属性，可以定义多个,类名之间以空格分隔；
css语言中：class选择符主要用于需要调用相同的css样式的多个html对象;
3.标签选择符
主要对网页文档中的基础标签进行统一的标准化设定；
优先级：
id选择符>class选择符>标签选择符
id和class命名规则
1.id属性和class属性的值命名都为自定义；
2.不允许用数字开头，不允许使用特殊符号;
3.命名最好具有语义化，可使用-或_来连接词组;
10.组合选择符
1.通配选择符（*）
适配文档中的所有的html对象；
用于定义html文档中所以对象的基础样式（消除浏览器默认设置的基础样式）
根据就近原则，要放在css代码的首行；（从上至下读，先加载默认的在做其他特殊的操作）
最常用的用法： *{margin:0;padding: 0;} 消除所有html标签默认存在的内外边距；
2.包含选择符（父级对象 子级对象）
根据html对象的嵌套关系，指定某个元素的子级元素的样式；
选择符对象可以是多重包含，即一层层的包含下去，样式仅作用在最后的内部对象；
元素对象之间用空格分割；
3.群组选择符（对象1,对象2....）
将相同的样式用于多个选择符对象，选择符对象之间用逗号隔开;
h1,h2,h3,h4{color:blue;}
4.指定选择符(标签名.class类名)
将class类选择符和标签选择符结合在一起使用；
主要适用于在使用了某个class类的所有html对象中特别指定某一标签;
p.h1{color:blue}
11.css属性和值
1.css参考手册;
http://t.mb5u.com/css3/
2.常见的取值：
数值单位 ：px(像素)/ew(倍数（相对父元素）)/%（百分比）
方向：top/right/left/bottom/center
色彩：16进制代码（#RRGGBB或#RGB）0-9/a-z/基本色彩单词；
引用路径：url(文件路径)
3.值的一些写法规则
1.表示长宽高的数值必须带上单位；
2.表示色彩的十六进制代码前面必须用#号；
3.一个属性如果有多个值，值与值之间用空格分隔；
4.如果指定多个方向按上右下左的顺序排列；
12.盒子模型（box model）
content:内容
内容区域设定：
widht:宽度
height:高度
宽度和高度的设定可以是具体的数值（带单位）也可以是百分比设置;
宽度和高度是设置内容的宽度和高度；不是整个盒子的宽度和高度;
padding：
内边距的设定用来控制盒子中装载的内容到盒子的边缘（边框）之间的距离；
盒子的内边距占据的是盒子里面的空间，最小为0,不允许出现负值；
margin：
外边距的设定用来控制盒子外围四周的距离，不属于盒子本身的范畴；
外边距的主要用途是控制盒子的位置,所以可以出现负值；
border：
大部分的元素对象在默认情况下是没有边框的；
要设定边框必须同时设定三个要素：宽度，样式和色彩；
border:red 1px solid;
复合属性:
border-width:边框的宽度
border-style:边框的样式
border-color:边框的颜色
复合属性
border-top-color:
具有方向性的符合属性可以在一个声明中设置所以方向的定义;
方向性复合属性的值的缩写方法：
1个值 ：4个方向 margin：10px 所以的4个边距都是10px；
2个值：上下/左右 margin：5px 10px 上下边距5px，左右边距10px；
3个值：上/左右/下 margin：5px 10px 15px 上边距5px,左右边距10px,下边距15px;
4个值：上/右/下/左 margin：5px 10px 15px 20px 上边距5px,右边距10px,下边距15px，右边距20px;
13.盒子模型的计算
标准盒子尺寸计算
盒子自身尺寸：
内容的宽高+两侧内边距+两侧边框
盒子在页面中占位尺寸：
内容的宽高+两侧内边距+两侧边框+两侧的外边距
当盒子的宽度和高度无法确认数值的时候怎么办？
设置一个边框为30px,宽度为浏览器的50% 的盒子不能实现；
解决办法：框架盒子
框架盒子
直接将宽/高属性设定为盒子自身的调整尺寸，如果带有内边距或边框，则通过缩小内容的区域来实现
box-sizing :盒子类型设置（css3）
值 content-box ：设置盒子为标准盒子类型(默认) 尺寸=widht/height+padding+margin+border
border-box：设置盒子为框架盒子；尺寸=width/height
1.实现一个两栏并列的网页布局（float）
2.其中左列30%宽，右列70px
3.两个盒子中的内容距离盒子边缘有一点的空白距离;
14.块状元素和行间元素
1.块状元素（block）
1.独占一行（该元素前后的其他内容都要换行）
2.直接适合盒子模型的所有的css属性
2.行间元素 （inline）
1.宽度由装载的内容决定的,宽度设置无效
2.由于受到行的限制，高度及上下方向的边距设置无效
不同：
块状元素可以嵌套块状元素，也可以嵌套行间元素；
行间元素不能嵌套块状元素,只能嵌套行间元素;
块状元素本身即是盒子，行间元素需要转换后变成"盒子";
3. css：display属性
值 说明 作用
block 对象呈现为块状元素 为了便于使用css盒模型属性
inline 对象呈现为行间元素 实现html块状元素和行间元素的互换
inline-block 对象呈现为行间-块状元素 实现同在一行中的元素能适用盒子模型属性
none 对象呈现为“无” 实现元素在页面中“消失”
html标签都有自己的默认的display设置，块状元素：默认为block;行间元素默认为：inline;
inline-block
1.本身是inline元素，但视觉表现上是按照block效果呈现,及可以直接使用于盒子模型属性;
2.典型的例子：<img><input>
3.这类的html元素通常是代表页面中外部引入文件，或直接定义好的插件;
15.盒子模型思维构建网页布局
1.盒模型思维：
1.通过css的siplay属性，可以使所有html标签对象都变身完美的盒子
2.通过各种“盒子”相互嵌套、并列，实现界面的布局
2.构建网页布局的思路和步骤
1.使用盒子模型思维进行页面或板块的分析
2.html--使用符合布局语义的标签进行结构化;
3.css---控制标签的尺寸和定位;
16.H5中的布局标签
1.Html是具有语义化的语言,针对页面的布局,有一类标签代表各种意义的"布局盒子"；
2.所有的布局标签都主要是用来构建页面的内容区域，是双标签类型，，默认显示为块状元素;
3.<div>标签 布局（盒子）
4.HTML5新增的常用的布局标签
<header></header>页面/区域头部
<footer></footer>页面/区域底部
<nav></nav> 导航
<section></section> 文档中的章节，区段，板块等（类似div，但主要针对文档区域）
<aside></aside> 侧边栏
<article></article> 文章/文档
5.hmtl5的优势
页面代码更加简单，高效
新布局标签本身具有语义明确告知浏览器其在页面总的位置和结构意义，增强了对搜索引擎的友好性，提升SEO的价值;
6.缺点
老版本的浏览器不支持HTML5这类的布局标签,如IE8或更早的版本;
从兼容的角度出发,目前多数任然使用<div>标签构建传统的布局;
17.float属性
1.将页面元素浮动起来（让块状元素左右排版），使其能够向左或向右排列;
值：left 元素本身向左浮动
right 元素本身向右浮动
none(默认值)
原理：
浮动元素将脱离默认的文档流，漂浮在默认的文档流之上；
浮动的元素会向左或向右移动,直到它的外边缘碰到父级元素或这个元素之前的另一个浮动的元素的边框为止;
特点：一旦元素浮动起立了，就可以直接适用于css盒子模型属性;
不管元素如何浮动，始终以父级容器或它前面同一层次并且并列的元素作为参考（和父元素对齐）;
对内容的影响：
尽管浮动的元素脱离了默认的文档流，但仍然会影响到默认文档流中的盒子里面的内容(图文),这些内容会给浮动元素留出占位;
clear:
作用：规定元素的某一侧不允许存在浮动元素（消除其他浮动元素对其产生的影响）
值：
both 两侧不允许存在浮动元素
left 清除左侧的浮动元素
right 清除右侧的浮动元素
none 无清除效果 默认值
设置了clear 的元素将不再向前一浮动元素对齐，换行重新开始；
解决网页中的“塌陷”问题
如果父元素只包含了浮动元素 ，那么在未设置高度时，则父元素高度塌缩为零;
1.创建一个用来清除浮动的css样式类（.clearfix）
2.针对包裹的全是浮动元素的父级容器使用
.clearfix{zoom:1}//IE浏览器的专用属性（针对IE）
.clearfix:after{//伪对象选择符 （在这个对象被浏览器渲染后添加一定的内容）
content:".";//添加内容写在这里的属性值 这个属性是专门配合伪类对象,必须写;
display:block;//将添加的内容转换为块级元素
visibility:hidden;//可视化属性；控制元素是否可见;无论是否可见，保留物理空间；和display属性不同;
height:0;//将添加进去的内容的高度设置为0；消除其占位；
clear:both;//将添加去的内容作为清除浮动的对象，实现外围对象中由内容存在，因此可以自动判断高度;