前言

HTML,CSS这些技术是实现网页开发的基本技术，通常情况下，设计师、WEB前端(HTML5开发)工程师、后台(PHP、JAVA)开发工程师的人员需要掌握，属于工作的必备技能。
HTML（ HyperText Markup Language ）超文本标记语言，是一种告诉浏览器每个网页组成是什么的程式语言。你可以利用它来定义网站中的文章内容、标题、连结、图片等，让浏览器知道网站整个架构的呈现。
CSS （Cascading Style Sheets）层叠样式表，是一种能为网页增添样式的电脑语言。换句话说，它就是能为你的网站修改字体样式、颜色、网页背景、甚至是华丽的动画与 3D 效果、让你增添设计感的工具。
响应国家号召，认真学习教育部写给全国大学生的信，好好待在家学习，不聚餐不串门不去公共场所，为抗击新型冠状病毒奉献自己的力量

一.组成结构

<doctype...> 说明文档类型分strict.dtd  transitional.dtd 
<html>  
<head>     给机器 搜素引擎看
</head>  
<body>     给人看，主要写东西的地方
</body>
</html>

1.布局

用div划分布局用css来控制显示，控制id用#idname,控制class用.classname
div可以通过声明id和class来控制，id不能重复，class可重复。
float为漂浮标签，在需要并排显示的时候使用
田字格布局实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>划分布局</title>
<style>
	#main{
		width: 200px;
		height: 200px;
		background: red;
		float: left;
	}
	#second{
		width: 200px;
		height: 200px;
		background: green;
		float: left;
	}
	#third{
		width: 200px;
		height: 200px;
		background: blue;
		float: left;
		clear: left;
	}
	#forth{
		width: 200px;
		height: 200px;
		background: pink;
		float: left;
	}
</style>
</head>

<body>
 <div id="main">1</div>
<div id="second">2</div>
<div id="third">3</div>
<div id="forth">4</div>
</body>
</html>

2.新手易犯错误

不加doctype.低版本的IE解析出错
id用数字声明.页面不显示
文件编码与charset声明不一致

二.盒模型

盒模型分为3个概念，分别为外边距（margin）,边框（border）以及内边距（padding）

1.margin

margin可实现div四周的外边距设定，如果margin: 10px;那么所在div模块的上下左右与其他模块或者网页总边框将有10px的距离。如果想要上下左右的外边距各不相同，可以使用margin-top;margin-bottom;margin-left;margin-right;来分别定义给值，或者你还可以使用一种更加便捷的方式，可以通过margin:10px 20px 30px 40px;即给margin四个不同的值来实现，此时注意margin将从上开始以顺时针的方向旋转给值，所以此时的上右下左的外边距分别为10px,20px,30px,40px.如果margin没有给四个不同的值，那么对应没有设定值的方向的外边距将以它的对边外边距为准。
要使边框变透明background:rgba(200,200,200,0.5)运用RGBA，红色和绿色和蓝色三个百分比都为200，a为参数，可以设置成0到1之间的数字，但是千万不要为负值
margin重叠问题：相邻的上下普通元素，其距离不是简单的边距相加，而是取最大的边距值。

2.border

border可实现div四周边框设定。同margin的定义方法类似，不同在于，border有3个要素分别为大小，形状（实线，虚线，双线等），颜色.
用CSS画圣诞树

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS画圣诞树</title>
<style>
#first{
	width:0px;
	height:0px;
	border-top:70px solid white;
	border-left:70px solid white;
	border-bottom:70px solid green;
	border-right:70px solid white;
	float:left;
	margin-left:30px;
	}
#second{
	width:0px;
	height:0px;
	border-top:100px solid white;
	border-left:100px solid white;
	border-bottom:100px solid green;
	border-right:100px solid white;
	}
#third{
	width:60px;
	height:70px;
	background:#393;
	float:left;
	margin-left:70px;
}
</style>
</head>

<body>
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
</body>
</html>

三.内联元素

	独占一行	能设宽高	竖直方向的margin,padding
块状元素	是	是	有，可以设置
内联元素	否	否	没有，也不可以设置

内联元素又被称为行内元素，可以设置margin-left,但是高不可设置。
块状元素div：address-地址；blockquote-块引用；center-居中对齐；dir-目录列表；dl-定义列表；form-交互表单；fieldset-form控制组；hr-水平分割线；menu-菜单列表；ol-有序表单；p-段落；pre-格式化文本；table-表格；ul-无序列表；
内联元素span：a-锚点；abbr-缩写；acronym-首字；strong-粗体；big-大字体；br-换行；cite-引用；dfn-定义字段；em-强调；i-斜体；img-图片；input-输入框；textarea-多行文本输入框；label-表格标签；q-短引用；strike-中划线；u-下划线；var-定义变量；
内联元素与块状元素可以通过display互相转化。
display

display:block;变为块状元素
display:inline;变为内联元素
display:none;设置之后，该元素和该元素的子元素不再显示，等同于这段代码被删除，不占空间。
display:inline-block行内块元素显示，行内其他元素一行显示，只有这一个元素类支持verical-align，img，input
display:list-item将元素转成为列表，li的默认类型。

在网页的导航栏，常常将内联元素转化为块元素，因为导航栏就是由一个ul多个li做出来的，这样每项都是一个超链接。如果设为内联元素，那么只有鼠标点击文字才会实现跳转；转化为块元素之后，点击对应区域就可以实现跳转。
h标签
常出现在新闻标题，<h1><h2><h3><h4>包含起来的文字的是标题，每出现一个h标签都会自动换行，他们的字体会被放大和加粗，1、2、3、4，的字体会依次缩小。最小为h6
p标签
常出现在新闻段落,用p包含起来的文字会被自动换行，经过测试，发现不能包含div元素和ul，但是可以包含input这样的行内元素，同时也可以包含table这样的块元素。所以p不能包含块元素的结论是不完全对的
img标签
<img src="juhua.jpg" alt="菊花图" title="鼠标放上显示" /> #alt给引擎看，也给人看 img为自闭合 src引进网站的图片，将链接放上去
img到底是块状还是内联呢？
图片是内联替换元素，替换元素是可以设置宽和高，还有默认的margin border.如果去掉margin border 用display转为block

四.CSS控制

1.CSS控制段落文本

（1）text-indent:20px; 段落首字缩进20px;
（2）text-align:center; 段落居中;
（3）text-decoration:underline; 段落加下划线； line-through为删除线;
（4）letter-spacing: 20px; 字间距为20px;

2.用CSS控制文字大小字体及颜色　　

(1)font-style:italic;　控制文字为斜体;
(2)font-weight:bold;　控制文字为加粗;　　
(3)font-size:23px; 控制文字大小为23px;　　
(4)line-height:20px;　控制行高为20px;　　
(5)font-family:"SimHei"; 控制文字为黑体;　　
(6)font:italic bold 23px/20px "SimHei";　通过一行来控制注意顺序不能乱,且大小与行高之间用/;

3.CSS字体设置技巧　　

文字分为有衬线（serif常做正文）和无衬线（sans-serif常做标题）　　
当你设置的字体用户没有时，将默认显示仿宋体。
假如无衬线字体的美观度由高到低为:微软雅不黑,微软雅黑，黑体.那么在控制时，你可以技巧性的用font-family:’微软雅不黑’,’微软雅黑’,’黑体’;　　
如果连黑体都没有，可用font-family:’微软雅不黑’,’微软雅黑’,’黑体’,’sans-serif’;告诉浏览器自己选择一个无衬线字体
4.CSS设置背景图片　　
(1)background-color:green;　　背景色为绿色;　　
(2)background-image:url(small.jpg);　背景图片为small.jpg;默认重复多次至铺满(3)background-repeat:repeat-x;　横向铺满;只显示一张(no-repeat)
(4)background-attachment:fixed;　图片固定; 　　
(5)background-position:center top; 控制图片在上方最中央显示；
(6)background－position:0px -120px;　div不动，背景图往上移120px；
(7)一行控制时从上到下属性顺序不能变。　　　　　
5.CSS选择器
id选择器,class选择器，标签选择器，派生选择器，伪类选择器，通配选择器。
6.CSS优先级
控制的越精细优先级越高，优先级id>class>p>div
7.CSS的4种引入方式
(1)head部分写style
(2)div部分写style
(3)链接.css文件在.html写<link rel="stylesheet" href="./23.css" />
(4)在.css中再引入别的.css文件，在第一个css中第一行写@import url("23-2.css"); 如果第二个css为上一级目录，应写”../23-2.css”
8.CSS初始化
相同的元素在不同的浏览器中显示效果不同，为了避免这种情况，我们通过对css强制使所有元素一致，这个过程叫做CSS初始化
9.css画圆角
使用border-radius
五.替换元素
替换元素显示的内容需要浏览器去进行判断。例如浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，而如果查看(x)html代码，则看不到图片的实际内容；又例如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。
(x)html中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些元素往往没有实际的内容，即是一个空元素，例如：
<img src=”cat.jpg” /> <input type="submit" name="submit" value="提交" />
浏览器会根据元素的标签类型和属性来显示这些元素。可替换元素也在其显示中生成了框。
六.列表
有序列表<ol> 无序列表<ul> 更多属性见CSS参考手册
常让line-stype-type: none;即是列表前为空白，通过背景图来使其成为自己想要的图标
七.表格
table 表头
th 表头
tr 表行
td 单元格
新手在第一次写完代码在浏览器运行时，会发现一个问题，每一个都是独立的（seperate ）小单元格，很不美观，那我们应该如何解决这个问题呢？
常对table进行CSS写border-collapse：collapsse;使其融合更加好看美观
行内写colspan:4 相当于合并4个单元格注意此处为横跨4列；rowspan: 2 合并单元格竖跨2行
八.超链接及锚点，伪类，字符实体

超链接<a href="index.html" target="_blank"></a> 不写target属性时，点击链接是在本页面内显示。加了target实现跳转到另一个窗口页面显示。
链接远程地址也可访问。空链接<a href="#"></a>
锚点<a name="p1"></a> 相当于一个标记
用锚点加超链接可以实现页面内跳转到指定位置的效果.
伪类
CSS允许我们对a标签的4种状态设置各自的CSS特性，叫做CSS伪类。
注意：
1.active一般不写，因为点击了但是鼠标还没放，在日常生活中属于瞬间动作。
2.一定注意顺序，L(link 点击前)V(visited 点击后)H(hover 鼠标经过) A(active 点击中)
3.a：link 可以简写为a
字符实体
在html开发中有一些字符不适宜直接显示如大于号，小于号
一般的格式（&+实体名+；）
实体有很多，举几个例子：大于号> 小于号< 双引号"
<pre>写的啥样无论空格换行在浏览器都可以显示出相应的效果。

九.相对定位与绝对定位

使用position属性。
p标签有默认的margin
相对定位：元素在其原本正常位置偏移某些像素；

position:relative;
top:20px;
left:20px;

距原来位置的上边偏移20px;距原来的左边偏移20px

绝对定位：相对于父元素的top,rigth,left,bottom来定位;position:absolute;
用绝对定位时，父元素要求具有position属性，否则将依据父父，父的父的父…一直往上找，如果都没有，将依据body;为此，父元素常写position:relative;
效果跟从天上飘下来的一样，将覆盖父元素；

十.overflow溢出处理

overflow：visible;默认溢出显示
overflow：hidden;隐藏
overflow: scroll;滚动显示，旁边将出现滚动条
overflow: auto;在必要时才会内容被剪裁，会显示滚动条

当定义特别小元素时，加上overflow:hidden;效果最好

前言

一.组成结构

1.布局

2.新手易犯错误

二.盒模型

1.margin

2.border

三.内联元素

四.CSS控制

1.CSS控制段落文本

2.用CSS控制文字大小字体及颜色

3.CSS字体设置技巧

4.CSS设置背景图片

5.CSS选择器

6.CSS优先级

7.CSS的4种引入方式

8.CSS初始化

9.css画圆角

五.替换元素

六.列表

七.表格

八.超链接及锚点，伪类，字符实体

九.相对定位与绝对定位

十.overflow溢出处理

2.用CSS控制文字大小字体及颜色　　

3.CSS字体设置技巧　　

4.CSS设置背景图片　　