HTML
一、概述
1、什么是 HTML：超文本标记语言，使用一对尖括号括起来，实现特殊的效果定义，用于编写网页（后缀为.html、.htm的文件）
2.
运行：浏览器
IE、firefox、chrome、opera、safari
3、HTML是一种解释性的语言：代码错误，试图解释，造成不可预料的奇怪效果
编译性的语言：后台代码
解释性的语言：不检查错误 -----使用浏览器调试找错误
二、基础语法
1、双标记：有开始也有结束标记，比如111<h1>aaa</h1>222
2、单标记：只有开始标记
<br> 或者 <br />
-----标记可以嵌套，形成复杂的页面，注意嵌套的顺序
-----不区分大小写，严格区分中英文字符
3、属性：定义在开始标记里，用空格隔开，属性名=“属性值”，多个属性，之间依然用空格隔开
4、html页面的标准格式
<!DOCTYPE .....>---文档类型声明
<html>-----整个页面
<head></head>---页面的整体定义
<body></body>---页面内容
</html>
三、文本
1、能够在页面上显示的文本内容：普通文本、标记文本
2、普通文本：直接书写直接显示
空格折叠的现象：将编辑时候的多个空格和多个换行，合成一个空格展示
特殊字符：有特定意义的字符、键盘无法录入的------使用“字符实体”替代
< 表示 < less than > 表示 > greater than
3、<h1>---标题文本（大字体、加粗、独占一行，行间距）,常用于页面上的突出显示的文本。<h2>---<h6>也是标题
4、<p></p>---段落，被它所包含的文本，自成一个段落，且拥有行间距
5、<br />--换行，相当于回车符
6、<b></b>--加粗显示；<i></i>--斜体显示；<u></u>--下划线显示
7、<div></div>---内容独占一行，不会带来其他效果，常用于页面内容的分组，实现特定的样式定义
8、<span></span>---常用于标出一行中的某些文本，定义特定的样式
四、图像和链接
1、图像 <img src=url" "/>
2、关于地址
对于web程序而言，不能使用d:\images\a.jpg这种路径－－》资源文件，服务器端发来，位于缓存区域。应该使用相对路径或者绝对路径
３、相对路径:相对于当前网页文件而言
<img src="a.jpg" /> <img src="images/b.jpg" /> <img src="../images/c.jpg" />
4、绝对路径(全路径)
<img src="http://www.jd.com/a.jpg" />
5、链接
<a href="http://www.tmooc.cn" target="_blank">点击的内容</a>
锚点链接 name="name" href="#name" target="_blank"
五、列表
1、有序列表 <ol><li></li></ol>
2、无序列表 <ul><li></li></ul>
3.自定义列表 <dl><dt></dt><dd></dd></dl>
六、表单
1、定义一个表单，如果没有form，无法使用submit提交
2、 input type=text 普通文本框；password 密码框；radio 单选框；checkbox 多选框；button 普通按钮；submit 提交按钮；reset 重置按钮；file 文件域
( name 组名、value 选项值、checked 默认选中项。
一组单选框组名必须相同。并且只能定义其中一项默认选中。)
3、select 选择菜单，option 定义菜单项，如果option不定义value，则将option中间的文本字段作为value提交。
默认为单行的下拉菜单。用size属性可定义行数。用multiple定义可多选
4、textarea 文本域 多行文本框 rows 行数 cols 列数。<textarea>初始值</textarea>
5、label文本标签 可以用for属性与某个表单元素绑定。for的值为其他元素的 id 属性
CSS
一、css概述
1、html 控制样式的弊端
相同的样式效果，通过不同的属性或标记来完成的<body text=""></body>
程序 可维护性、可重用性 不高
2、通过 CSS 解决上述问题
可以让 各个元素 都使用统一的 样式声明 从而提高程序的可重用性和可为维护性
3、什么是CSS
CSS ：Cascading Style Sheet ,层叠样式表、级联样式表，简称为 样式表
作用：为html元素去定义样式。
1) 能够实现 内容与表现相分离
2) 提高代码的可重用性和可维护性
重用性：可以让多个元素 使用相同的样式
维护性：一个元素的样式改变，其他元素也可以跟着变
4、HTML 与 CSS 之间的关系：一个完整的页面 = HTML + CSS
1）HTML 主要负责显示内容（搭建网页的结构）
2）CSS 主要负责构建HTML样式的定义
HTML属性与CSS样式的使用原则：
1）W3C建议尽量使用CSS样式 取代 HTML 属性
2）HTML中的专有属性，无法通过css取代的只能选择html属性(rowspan、colspan)
5、CSS样式表的使用
1、使用方式：
1）内联方式，也称为 ：内联样式 、行内样式。将样式属性定义在HTML元素中。
特点：只能控制某一个元素的显示效果
语法:<标记 style="样式属性:值;样式属性:值;"></标记>
常用属性： color : 文本颜色，取值 表示颜色的英文单词 style="color:red;"
2）内部样式表：将“样式规则”放在<style>的元素内。
特点：将所有的样式内容放在<head></head>中的<style></style>元素内。
<style></style>中添加若干"样式规则"。
6、溢出处理
使用尺寸属性控制元素的大小时，如果内容所需控件大小元素本身的控件，会导致内容溢出
属性: overflow -----> overflow-x : 横向溢出处理； overflow-y : 纵向溢出处理
作用：当内容溢出元素时，如何处理
取值： 1)visible : 默认值，溢出可见；2)hidden : 溢出隐藏；3)scroll : 滚动，在元素内部显示滚动条，内容溢出，滚动条可用，内容不溢出，滚动条不可用；4) auto : 自动，内容溢出则显示滚动条，内容不溢出，不显示滚动条
7、边框属性
1、简写方式： border:width style color; (四个方向)
width:边框宽度；style:边框样式,实线(solid),虚线(dotted),虚线(dashed)；color:边框颜色,还可以取 transparent
2、单边定义： border-left/right/top/bottom :width style color;
border-方向:width style color;
3、单属性定义： border-color : color; 四个边框的颜色
4、单边框 单属性定义： border-方向-属性:值;
方向：top / bottom / left /right； 属性：color / width / style
5、边框的组成：
边框是由四个三角形(元素宽度和高度都为0) 或 梯形组成(元素宽度和高度不为0)
6、边框倒角：边框倒圆角，将直角转换成圆角的操作
属性:border-radius；取值：具体数值 或 百分比数字
取值数量：
1个值 ：表示的是四个角圆角半径
4个值 ：从左上角开始 ， 顺时针方向的 四个角的圆角半径
单独定义:
border-top-left-radius:左上角
border-top-right-radius:右上角
border-bottom-left-radius:左下角
border-bottom-right-radius:右下角
7、边框阴影： 属性：box-shadow ； 取值：多个属性值所组成的列表
h-shadow：阴影的水平位置（水平位置偏移量），取值为正 向右偏移；取值为负 向左偏移。
v-shadow：阴影的垂直位置（垂直位置偏移量），取值为正 向下偏移；取值为负 向上偏移。
了解：1)blur：可选属性，阴影的模糊距离；2)spfread：可选，阴影尺寸
3)color：可选，阴影颜色；4)insert：可选，将外部阴影改为内部阴影
例：box-shadow:h-shadow v-shadow blir color;0px 0px 1px red;
8、轮廓： 属性：outline 取值：width style color
单属性：outline-width、 outline-style、 outline-color； 常用模式：outline:0px;
二、背景
1、背景颜色
属性：background-color
取值：可设置为合法的颜色单位值 或 transparent
注意：默认情况下，背景(颜色、图像)是从边框位置处就开始填充
2、背景图片
属性：background-image
取值：url("图像URL")
background-image:url("xxxx/xxx.jpg");
background-image:url(‘xxxx/xxx.jpg‘);
background-image:url(xxxx/xxx.jpg);
3、背景平铺（重复）
属性：background-repeat
取值：repeat : 即水平方向又垂直方向平铺(默认值)
no-repeat : 没有平铺
repeat-x : 仅水平方向平铺
repeat-y : 仅垂直方向平铺
4、背景图片尺寸
属性：background-size
取值：value1 value2 : 宽度 高度
value1% value2% : 当前元素的宽和高的占比
cover : 覆盖，将背景图像扩展至足够大，直到背景图已经覆盖了元素的所有区域。有可能导致背景图不能完整的显示在元素中
contain: 包含，将背景图扩大，直到背景图已经碰都某一个边缘位置（右、下）,背景图能够完完整整的显示在元素中，不一定能覆盖到所有的区域
5、背景图片固定
默认情况，背景图片会随着滚动条而发生滚动，可以通过背景图片固定的方式解决此问题，让背景图保持在网页的可视化窗口的某个固定为止处不随着滚动条发生位置变化。
注意：尽量将背景图片加给body元素 属性：background-attachment
取值：scroll ：背景会随滚动条发生滚动（默认值）；
fixed : 固定，背景不会随着内容而发生滚动。
6、背景定位
改变 背景图片 在元素中的位置
属性：background-position
取值：x y : x水平偏移位置,值为正 向右移动，值为负，向左移动
y垂直偏移位置,值为正 向下移动，值为负，向上移动
x% y% : 左上角 : 0% 0%； 右下角 : 100% 100%； 居中显示 : 50% 50%
关键字： x : left,center,right ； y : top,center,bottom
CSS Sprite : 将多个背景图合并到一张里面去，根据需求情况，通过 背景定位 对背景图片进行偏移，从而找到要显示的图像
目的：减少对服务器的请求次数
操作步骤：
1.根据想要看的图像，在页面创建一个与它一模一样大小的元素
2.通过background-position对大图进行位置的移动，正好将想要看到的小图放到创建好的元素中
7、背景属性
将以上几个属性全部综合到一起,通过一个属性描述所有的值
属性:background
取值：color url() repeat attachment position;
常用值：background:url() repeat position;
常用方式：background:url(Images/user.png) no-repeat -120px -240px;
三、渐变
1、渐变语法：
渐变：指的是两种或多种颜色之间的平滑过渡
属性：background-image
取值：
linear-gradient() -- 线性渐变 repeating-linear-gradient() -- 重复线性渐变
radial-gradient() -- 径向渐变 repeating-radial-gradient() -- 重复径向渐变
例：background-image:linear-gradient(); -- 显示线性渐变颜色
*2、线性渐变
属性：background-image
取值:linear-gradient(angle,color-point1,color-point2,...)
angle:指定渐变的方向(角度)
to top : 向上 --> 0deg to right : 向右 --> 90deg
to bottom : 向下 --> 180deg to left : 向左 --> 270deg
color-point :表示颜色的数值 和 位置 例：red 0% 、red 10px；
background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);
3、径向渐变
属性：background-image
取值: radial-gradient();
radial-gradient([size at position],color-point1,color-point2,....);
size at postion :可以省略不写
size : 标识的圆的半径 以 px 为单位
position : 圆心的位置：top,left,right,bottom,center、具体数值、百分比
4、重复渐变
repeating-linear-gradient(angle,color-point); repeating-radial-gradient();
color-point: 位置取具体的数值或者不到100%的数字
5、浏览器兼容性
对于不支持的浏览器版本，需要添加不同的浏览器前缀来解决渐变的问题
Firefox ： -moz- ； chrome和Safari ： -webkit- ； opera ： -o-
例：#d1{background-image:-moz-linear-gradient(to top,red 0%,green 50%,blue 100%);}
四、文本格式化
1、字体属性
1、指定字体(非重要)
font-family:value1,value2,value3....; 例：font-family:"微软雅黑","宋体","Arial";
2、字体大小(重要)
font-size: 16px; 取值：px或pt作为单位的值
3、字体加粗(非重要)
相当于 : <b></b> font-weight:normal/bold/无单位数字(400-900);
无单位数字：400 - normal 900 - bold
4、字体样式(非重要)
相当于 ：<i></i> 功能：斜体 显示文字 font-style : normal / italic;
5、小型大写字母(非重要) font-variant:normal/small-caps;
6、字体属性 font:font-style font-variant font-weight font-size font-family;
常用设置方式：
font:12px "微软雅黑","Arial"; font:12px/24px(行高) "microsoft yahei";
2、文本属性
1、文本颜色 (重要) color:value;
2、文本水平排列方式(重要) 相当于：html 属性中的 align
text-align:left / right / center/justify（两边对齐）
功能：能够控制当前元素内所有的文本、行内元素、行内块、水平对齐方式。
3、文字线条修饰 属性：text-decoration
取值：none 无线条(重要)、underline 下划线(重要)、overline 上划线(非重点)
line-through 删除线(非重点) --> <s></s>
4、行高(重要)：一行文本所占据的高度是多少
如果行高大于文本大小的话，那么这行文字将呈现出垂直居中的显示方式
属性：line-height 取值：以 px 为单位的值
5、首行文本缩进(非重要) 属性：text-indent 取值：以 px 为单位的值
6、文本阴影(非重要) text-shadow:h-shadow v-shadow blur color;
h-shadow:水平投射距离、v-shadow:垂直投射距离、blur:模糊距离、color:颜色
五。显示
1.显示方式（行内元素、块级元素、行内块。。）
1.什么是显示方式，即元素默认的显示方式
块级（block）：div、p、h1-h6、dl...
行内（inline）：span、a、s、b、s、i、u、sub、sup
行内块（inline-block）：img、input...
功能：可以通过 display 属性修改元素框的默认显示方式
属性：display
取值：none : 让生成的元素没有框，让元素脱离文档流，在页面上不显示元素(隐藏)，并且不占据页面空间，（隐藏元素，并且不占据页面空间）。
block : 让元素表现的像块级元素一样
使用场合：1.将行内元素 改变成块级元素，修改宽和高。2.将块级元素隐藏后，再显示出来
inline : 让元素表现的像行内元素一样
使用场合：将行内元素隐藏后，再显示出来。注意：不要将块级元素改成行内元素。
inline-block : 行内块。按行内元素显示，具备块级元素的特点。本身是行内元素：一行内能够显示多个。具备块级元素特点：允许改宽和高。
使用场合：1.将行内元素更改为行内块，以便修改宽和高
总结：display 常用方式：1、隐藏元素以及显示元素，可以通过 display:none的方式隐藏，如果需要显示的话，按照自己默认的方式显示出来即可。比如：div : display:block;
2、如果程序中，想修改行内元素的尺寸时使用：float:left / right; display:block / inline-block;