第一部分基础知识
一html基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页</title>
</head>
<body>
</body>
</htm l>
注释：第一行是声明，声明网页是标准html5网页。浏览器看到这句话，就会按html5标准网页进行解析。
二常用标签
[if !supportLists]1、 [endif]标题标签<h1></h1> ……<h6></h6>
[if !supportLists]2、 [endif]段落标签<p></p>
[if !supportLists]3、 [endif]水平线标签<hr>
[if !supportLists]4、 [endif]换行标签<br>
[if !supportLists]5、 [endif]图像标签<img src=”图片路径”>
三、css中的三种基础选择器
1、标签选择器，直接使用标签名命名的选择器。
例：h1{color:red;}
<h1>标题一的文字
2、id选择器，使用#加上id值命名的选择器。
例：#p1{color:green;}
<p id="p1">这是一段文字</p>
3、类选择器，使用. 加上class值命名的选择器。
例：.red{color:red;}
<p class="red">这是一段文字</p>
四、CSS添加到HTML中的三种方式
1、内嵌样式，将样式代码写在<style>和</style>之间。例如下图所示。
2、行内样式，直接在标签中使用style属性添加样式。
例如<p style=”color:red;”>段落文字设置为红色。</p>
3、链接样式,将样式代码写在css.css文件中，然后使用link将其链接到html中。
例如：
五、文本属性
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页</title>
<link href="css.css" rel="stylesheet">
</head>
<body>
<h1>标题一的文本</h1>
<h2 class="h">标题二的文本</h2>
<h3 class="h">标题三的文本</h3>
<hr color="red" width="500px" align="left"/>
<p id="p1">这是一段文字这是这是一段文字这是一段恩子稳定的故事防守打法是发发方式地一段恩子稳定的故事<br>防守打法是发发方式地方是。</p>
<p id="p2">这是一段文字这是这是一段文字这是一段恩子稳定的故事防守打法是发发方式地一段恩子稳定的故事<br>防守打法是发发方式地方是。</p>
<p style="color:red;font-size:20px">式地一段恩子稳定的故事</p>
</body>
</html>
css.css
h1{color:red;text-align:center;text-decoration:line-through;text-shadow:-3px -3px 2px green;}
#p1{color:green;text-indent:2em;line-height:30px}
#p2{color:purple;text-indent:2em;letter-spacing:30px;}
.h{color:orange;font-size:14px;}
六、字体属性
使用字体属性可以方便的控制网页中各种各样的字体。
七、背景属性
第二部分布局知识
[if !supportLists]1、 [endif]网页设计（photoshop软件）
[if !supportLists]2、 [endif]html5新增布局标签
[if !supportLists]3、 [endif]div标签
[if !supportLists]4、 [endif]盒模型
[if !supportLists]5、 [endif]display属性
[if !supportLists]6、 [endif]浮动属性
[if !supportLists]7、 [endif]定位属性
1、网页设计（photo shop软件）
[if !supportLists]1） [endif]logo设计
ctrl+alt+a qq截图的组合键
[if !supportLists]2） [endif]网页设计
a)photoshop软件中，点文件/新建
b）打开选好的网页，用qq截图快捷键，ctrl+alt+a 截图。
C)回到ps中，按组合键ctrl+v (粘贴)
d)在图层面板中选中操作的图层。
e)在工具栏中选择矩形工具。
F)在画布拖选要选择的区域，然后按delete键，可以删除图层中不需要的内容。
G）工具栏中的移动工具可以移动图层。
H）工具栏中的油漆桶可以填充选区颜色。
I）工具栏中的文本工具用于书写文字。
J）工具栏中的前景色，用于选择填充的色彩。
K）取消选区，使用组合键ctrl+d
l)ctrl+t 修改选区大小
ps文件的保存，按ctrl+s保存一份源文件，扩展名为psd。
再在文件菜单下传存储为，选扩展名为jpg，保存一份。
2、html5新增布局标签（语义化）
header：用于包含放在页面头部的内容，具有引导和导航作用。
------------------------------------------------------------------
main:用于包含文档的主要内容。main元素在文档中是唯一的。元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
----------------------------------------------------------------------------------nav：用于定义导航链接，具有导航性质的链接放在nav元素内。
------------------------------------------------------------------
article：经常用于定义一篇日志、一条新闻或用户评论。代表文档、页面或者应用程序中与上下文不相关的独立部分。
------------------------------------------------------------------
aside：用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
Ø被包含在article元素内作为主要内容的附属信息。
Ø在article元素之外使用，作为页面或站点全局的附属信息部分。
------------------------------------------------------------------
section：用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。
Ø不要将section元素用作设置样式的页面容器，那是div的特性。
Ø如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
Ø没有标题的内容区块不要使用section元素定义。
-------------------------------------------------------------
footer：用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。
3、div标签（div+css）
<div class=”main”></div>
4、盒模型
width
height
background-color
margin：外边距
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
margin:10px(同时设置四个边的外边距为10px)
margin:10px 20px (设置上下外边距10px，左右外边距20px)
margin:10px 20px 30px (设置的是上外边距10px 左右外边距20px 下外边距30px)
margin:10px 20px 30px 40px(设置的上10px 右20px 下30px 左40)
margin-top: 16px;等价于margin:16px 0 0 0;
padding：内填充
border：边框
border:solid 1px gray;
用于设置边框，三个属性值分别为1、边框的线型（实线solid 点画线 dotted虚线dashed）2、边框的粗细3、边框的颜色
border-bottom:下边框线
Emmet
div.logo 按tab键
<div class="logo"></div>
5、标准流网页
按照标签的书写顺序，从上到下，从左到右排列
改变标准流，让其左右显示。方法一，使用 display属性。
display属性：
改变元素的默认类型。
使用display: inline-block;
两个盒子间会有一条缝隙，去掉缝隙的方法，让第一个盒子的结束标签和第二个盒子的开始标签连在一起。
元素默认三种类型：
[if !supportLists]1） [endif]块元素：block （header footer nav div）
独占一行，有宽和高
[if !supportLists]2） [endif]行内块元素:inline-block ( img )
有宽和高，在一行可容纳多个，行不够宽了，就折行到下一行。
[if !supportLists]3） [endif]行内元素:inline （span）
没有宽和高，内容决定宽和高，一行容纳多个，一行不够宽了，折行到下一行。
vertical-align 改变元素的垂直对齐方式。
text-align 文本的对齐方式left/center/right
line-height:取值和height的值一致，可实现单行文本垂直居中对齐
按ctrl+/ 在代码中添加注释。
Ps中，截取图片的快捷键
用选取工具，选取截取的区域---》ctrl+C（复制）---》ctrl+N（新建）---》ctrl+v（粘贴）---》ctrl+s（保存，jpg/gif/png）
设置块元素水平方向上的左右居中的方法：
[if !supportLists]1、 [endif]center标签，可以让所有包裹在其中的内容水平居中。
[if !supportLists]2、 [endif]margin:0 auto;（上下外边距为0，左右自动调整为左右外边距相等）
(margin:10px;盒子的上、右、下、左四个边的外边距都为10px
margin:10px 20px;盒子的上下外边距为10px,左右外边距为20px。
)
浮动布局
float属性可实现浮动布局。
float:left 左浮动
float:right右浮动
float:none不浮动
清除浮动的影响
clear属性
clear:left; 清除左浮动
clear:right;清除右浮动
clear:both;清除左右浮动
塌陷性：父元素里面的元素设置为float属性，那么父元素认为里面没有内容，如果没定义父元素高度的前提下，父元素就塌陷了。
包含选择器：
实现左右布局：
[if !supportLists]1、 [endif]display：inline-block
[if !supportLists]2、 [endif]float:left
列表标签：ulli
无序列表：
<ul>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发大都是发送到发沙发发方式发是</li>
</ul>
有序列表：
<ol>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发大都是发送到发沙发发方式发是</li>
</ol>
Emmet语法：div.notice-left+div.notice-right
按tab键
<div class="notice-left"></div>
<div class="notice-right"></div>
*：span*2 按tab键会得到代码：
超级链接：href是链接的地址 target是链接的目标窗口
<a href="http://www.baidu.com" target="_blank">
链接内容(图片，文字)
</a>
链接的文字会默认有样式，修改链接文字的样式。使用伪类。
a:link:链接伪类
a:visited:鼠标点完链接内容
a:hover:鼠标滑过链接内容
a:active：鼠标点在链接内容上不动
正确顺序：lvha
HTML 中有用的字符实体
<div class="aa"> 对应的结果
<div class="aa">
定位属性position，取值有relative、absolute、fixed
position:relative
相对定位
相对自己原来的位置发生位移变化，不脱离文档流
配合使用的属性：top bottom left right
position:absolute
绝对定位
默认情况下相对body定位，脱离文档流。
经常和relative配合使用，实现灵活定位。
配合使用的属性：top bottom left right
position:absolute
再深入的理解。
设置absolute的元素会逐层向上，寻找包围它的设置了position属性的元素，进行定位，如果包围它的元素都没有设置position属性，则会相对body定位。
position:fixed
固定定位
默认情况下是相对于窗口左上角定位，脱离文档流。
期末：画个思维导图
做大作业
（设计制作一个网站主页，题材不限内容丰富，排版合理）
联系电话：13898872245（微信）
第一部分基础知识
一html基本结构
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页</title>
</head>
<body>
</body>
</htm l>
注释：第一行是声明，声明网页是标准html5网页。浏览器看到这句话，就会按html5标准网页进行解析。
二常用标签
[if !supportLists]1、 [endif]标题标签<h1></h1> ……<h6></h6>
[if !supportLists]2、 [endif]段落标签<p></p>
[if !supportLists]3、 [endif]水平线标签<hr>
[if !supportLists]4、 [endif]换行标签<br>
[if !supportLists]5、 [endif]图像标签<img src=”图片路径”>
三、css中的三种基础选择器
1、标签选择器，直接使用标签名命名的选择器。
例：h1{color:red;}
<h1>标题一的文字
2、id选择器，使用#加上id值命名的选择器。
例：#p1{color:green;}
<p id="p1">这是一段文字</p>
3、类选择器，使用. 加上class值命名的选择器。
例：.red{color:red;}
<p class="red">这是一段文字</p>
四、CSS添加到HTML中的三种方式
1、内嵌样式，将样式代码写在<style>和</style>之间。例如下图所示。
2、行内样式，直接在标签中使用style属性添加样式。
例如<p style=”color:red;”>段落文字设置为红色。</p>
3、链接样式,将样式代码写在css.css文件中，然后使用link将其链接到html中。
例如：
五、文本属性
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网页</title>
<link href="css.css" rel="stylesheet">
</head>
<body>
<h1>标题一的文本</h1>
<h2 class="h">标题二的文本</h2>
<h3 class="h">标题三的文本</h3>
<hr color="red" width="500px" align="left"/>
<p id="p1">这是一段文字这是这是一段文字这是一段恩子稳定的故事防守打法是发发方式地一段恩子稳定的故事<br>防守打法是发发方式地方是。</p>
<p id="p2">这是一段文字这是这是一段文字这是一段恩子稳定的故事防守打法是发发方式地一段恩子稳定的故事<br>防守打法是发发方式地方是。</p>
<p style="color:red;font-size:20px">式地一段恩子稳定的故事</p>
</body>
</html>
css.css
h1{color:red;text-align:center;text-decoration:line-through;text-shadow:-3px -3px 2px green;}
#p1{color:green;text-indent:2em;line-height:30px}
#p2{color:purple;text-indent:2em;letter-spacing:30px;}
.h{color:orange;font-size:14px;}
六、字体属性
使用字体属性可以方便的控制网页中各种各样的字体。
七、背景属性
第二部分布局知识
[if !supportLists]1、 [endif]网页设计（photoshop软件）
[if !supportLists]2、 [endif]html5新增布局标签
[if !supportLists]3、 [endif]div标签
[if !supportLists]4、 [endif]盒模型
[if !supportLists]5、 [endif]display属性
[if !supportLists]6、 [endif]浮动属性
[if !supportLists]7、 [endif]定位属性
1、网页设计（photo shop软件）
[if !supportLists]1） [endif]logo设计
ctrl+alt+a qq截图的组合键
[if !supportLists]2） [endif]网页设计
a)photoshop软件中，点文件/新建
b）打开选好的网页，用qq截图快捷键，ctrl+alt+a 截图。
C)回到ps中，按组合键ctrl+v (粘贴)
d)在图层面板中选中操作的图层。
e)在工具栏中选择矩形工具。
F)在画布拖选要选择的区域，然后按delete键，可以删除图层中不需要的内容。
G）工具栏中的移动工具可以移动图层。
H）工具栏中的油漆桶可以填充选区颜色。
I）工具栏中的文本工具用于书写文字。
J）工具栏中的前景色，用于选择填充的色彩。
K）取消选区，使用组合键ctrl+d
l)ctrl+t 修改选区大小
ps文件的保存，按ctrl+s保存一份源文件，扩展名为psd。
再在文件菜单下传存储为，选扩展名为jpg，保存一份。
2、html5新增布局标签（语义化）
header：用于包含放在页面头部的内容，具有引导和导航作用。
------------------------------------------------------------------
main:用于包含文档的主要内容。main元素在文档中是唯一的。元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。
----------------------------------------------------------------------------------nav：用于定义导航链接，具有导航性质的链接放在nav元素内。
------------------------------------------------------------------
article：经常用于定义一篇日志、一条新闻或用户评论。代表文档、页面或者应用程序中与上下文不相关的独立部分。
------------------------------------------------------------------
aside：用来定义当前页面或者文章的附属信息部分，它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条等其他类似的有别于主要内容的部分。
aside元素的用法主要分为两种：
Ø被包含在article元素内作为主要内容的附属信息。
Ø在article元素之外使用，作为页面或站点全局的附属信息部分。
------------------------------------------------------------------
section：用于对网站或应用程序中页面上的内容进行分块，一个section元素通常由内容和标题组成。
Ø不要将section元素用作设置样式的页面容器，那是div的特性。
Ø如果article元素、aside元素或nav元素更符合使用条件，那么不要使用section元素。
Ø没有标题的内容区块不要使用section元素定义。
-------------------------------------------------------------
footer：用于定义一个页面或者区域的底部，它可以包含所有通常放在页面底部的内容。
3、div标签（div+css）
<div class=”main”></div>
4、盒模型
width
height
background-color
margin：外边距
margin-top:上外边距
margin-bottom:下外边距
margin-left:左外边距
margin-right:右外边距
margin:10px(同时设置四个边的外边距为10px)
margin:10px 20px (设置上下外边距10px，左右外边距20px)
margin:10px 20px 30px (设置的是上外边距10px 左右外边距20px 下外边距30px)
margin:10px 20px 30px 40px(设置的上10px 右20px 下30px 左40)
margin-top: 16px;等价于margin:16px 0 0 0;
padding：内填充
border：边框
border:solid 1px gray;
用于设置边框，三个属性值分别为1、边框的线型（实线solid 点画线 dotted虚线dashed）2、边框的粗细3、边框的颜色
border-bottom:下边框线
Emmet
div.logo 按tab键
<div class="logo"></div>
5、标准流网页
按照标签的书写顺序，从上到下，从左到右排列
改变标准流，让其左右显示。方法一，使用 display属性。
display属性：
改变元素的默认类型。
使用display: inline-block;
两个盒子间会有一条缝隙，去掉缝隙的方法，让第一个盒子的结束标签和第二个盒子的开始标签连在一起。
元素默认三种类型：
[if !supportLists]1） [endif]块元素：block （header footer nav div）
独占一行，有宽和高
[if !supportLists]2） [endif]行内块元素:inline-block ( img )
有宽和高，在一行可容纳多个，行不够宽了，就折行到下一行。
[if !supportLists]3） [endif]行内元素:inline （span）
没有宽和高，内容决定宽和高，一行容纳多个，一行不够宽了，折行到下一行。
vertical-align 改变元素的垂直对齐方式。
text-align 文本的对齐方式left/center/right
line-height:取值和height的值一致，可实现单行文本垂直居中对齐
按ctrl+/ 在代码中添加注释。
Ps中，截取图片的快捷键
用选取工具，选取截取的区域---》ctrl+C（复制）---》ctrl+N（新建）---》ctrl+v（粘贴）---》ctrl+s（保存，jpg/gif/png）
设置块元素水平方向上的左右居中的方法：
[if !supportLists]1、 [endif]center标签，可以让所有包裹在其中的内容水平居中。
[if !supportLists]2、 [endif]margin:0 auto;（上下外边距为0，左右自动调整为左右外边距相等）
(margin:10px;盒子的上、右、下、左四个边的外边距都为10px
margin:10px 20px;盒子的上下外边距为10px,左右外边距为20px。
)
浮动布局
float属性可实现浮动布局。
float:left 左浮动
float:right右浮动
float:none不浮动
清除浮动的影响
clear属性
clear:left; 清除左浮动
clear:right;清除右浮动
clear:both;清除左右浮动
塌陷性：父元素里面的元素设置为float属性，那么父元素认为里面没有内容，如果没定义父元素高度的前提下，父元素就塌陷了。
包含选择器：
实现左右布局：
[if !supportLists]1、 [endif]display：inline-block
[if !supportLists]2、 [endif]float:left
列表标签：ulli
无序列表：
<ul>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发大都是发送到发沙发发方式发是</li>
</ul>
有序列表：
<ol>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发送到发顺丰大都是发送到发沙发发方式发是</li>
<li>新闻发大都是发送到发沙发发方式发是</li>
</ol>
Emmet语法：div.notice-left+div.notice-right
按tab键
<div class="notice-left"></div>
<div class="notice-right"></div>
*：span*2 按tab键会得到代码：
超级链接：href是链接的地址 target是链接的目标窗口
<a href="http://www.baidu.com" target="_blank">
链接内容(图片，文字)
</a>
链接的文字会默认有样式，修改链接文字的样式。使用伪类。
a:link:链接伪类
a:visited:鼠标点完链接内容
a:hover:鼠标滑过链接内容
a:active：鼠标点在链接内容上不动
正确顺序：lvha
HTML 中有用的字符实体
<div class="aa"> 对应的结果
<div class="aa">
定位属性position，取值有relative、absolute、fixed
position:relative
相对定位
相对自己原来的位置发生位移变化，不脱离文档流
配合使用的属性：top bottom left right
position:absolute
绝对定位
默认情况下相对body定位，脱离文档流。
经常和relative配合使用，实现灵活定位。
配合使用的属性：top bottom left right
position:absolute
再深入的理解。
设置absolute的元素会逐层向上，寻找包围它的设置了position属性的元素，进行定位，如果包围它的元素都没有设置position属性，则会相对body定位。
position:fixed
固定定位
默认情况下是相对于窗口左上角定位，脱离文档流。
