一、HTML

1.简单的HTML结构介绍

<!DOCTYPE html>//说明用HTML5来显示网页
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

<!DOCTYPE> 文档类型声明标签：作用就是告诉浏览器是用那种版本的HTML来显示网页
lang=“en”:用来定义当前文档显示的语言，en定义语言为英语，zh-CN定义语言为中文
charset:可以通过meta标签的charset属性来规定HTML文档应该使用哪种字符机制。charset常用的值有：GB2312(简体中文)、BIG5(繁体中文)、GBK、UTF-8，其中UTF-8称为万国码，基本包含了全世界所有国家需要用到的字符

2.HTML常用标签

标题标签：<h1>-<h6>作为标题使用，加了标题的文字会变得更粗字号也会一次变大，并且一个标题占一行段落标签：将文字分段显示<p></p>换行标签：<br />强制换行文本格式化标签：
设置粗体<strong></strong>或者<b></b>
下划线<ins></ins>或者<u></u>
斜体<em></em>或者<i></i>
删除线<del></del>或者<s></s><div>和<span>标签：没有语义，就是一个盒子，用来装内容的
div是division的缩写，表示分割分区，<div>标签独占一行，可以看做一个大盒子
span意为跨度跨距，一行上可以有多个<span>，看做小盒子图像标签<img>：是一个单标签<img src="图像URL"  alt="替换文本"  title="" width="500" height=""/> 
src：指定图片的路径和文件名
alt：当图片显示不出来的时候的替换的文字
title：鼠标放到图片上显示的文字
width：设置图像宽度
height：设置图像高度
border：设置图像边框粗细超链接标签<a>：从一个页面链接到另一个页面
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>
href:用于指定链接目标的url地址，是一个必须的属性
target:用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开
链接类型：外部链接：一定是以http://www开始内部链接：即自己的文件内部的网页空连接：#下载链接：地址链接的是文件，比如说.exe或者是zip等压缩包形式<a href="img.zip">下载文件</a>网页元素链接：在网页中的各种网页元素，比如说文本、图像、表格、音频、视频等都可以添超链接，比如说<a href="http://www.baidu.com"><img src="img.jpg" /></a>锚点链接：点击链接就可以快速定位到页面中的某个位置在链接文本的href属性中，设置属性值为#名字的形式，比如<a href="#two">第二集</a>找到目标位置标签，在里面添加一个id属性=刚才的名字，如<h3 id="two">第二集介绍</h3>注释标签：Ctrl+/
空格：&nbsp;
大于：&gt
小于：&lt

3.表格

<table>   //用于定义表格的标签<tr>   //用于定义表格中的行<th>姓名</th> //表头单元格，文字加粗居中显示...</tr><tr>   //用于定义表格中的行<td>单元格内的文字</td>  //用于定义表格中的单元格...</tr>
</table>相关属性：
align:left center right 规定表格相对周围元素的对齐方式
border:1或""规定表格单元是否右边框，默认为""没有边框
cellpadding:规定单元格边缘与内容之间的空白，默认1像素
cellspacing:规定单元格之间的空白，默认2像素
width:规定表格的宽度使用场景：因为表格可能很长，为了更好的表示表格的含义，可以将表格分割成表格头部和表格主体两大部分
在表格标签中，分别使用<thead>表示表格的头部区域，用<tbody>表示表格的主体区域，这样可以更好的分清表格结构<table><thead><!--头部区域--><tr><th>排名</th><th>关键词</th><th>进入搜索</th></tr></thead><tbody><!--主体区域--><tr><td>1</td><td>鬼吹灯</td><td>搜索</td></tr><tr><td>2</td><td>步步惊心</td><td>搜索</td></tr></tbody></table>合并单元格：
跨行合并:rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"
如果是跨行合并，那么最上侧的单元格为目标单元格，写合并代码
如果是跨列合并，那么最左侧的单元格为目标单元格，写合并代码
合并单元格之后要删除多余的单元格<table width="500" height="249" border="1" cellspacing="0"><tr><td></td><td colspan="2"></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>

列表

列表就是用来布局的无序列表：<ul>标签表示无序列表列表项用<li>标签定义并且<ul>中只能放<li>标签而<li>相当于一个容器可以容纳所有元素<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol>标签表示有序列表<li>标签定义列表项<ol>中只能放<li><li>中可以容纳各种元素<ol><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>自定义列表：常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号<dl>用于定义自定义列表<dt>定义项目/名字<dd>定义描述每一个项目/名字<dl><dt>关注我们</dt><dd>新浪微博</dd><dd>官方微信</dd></dl>

四.表单

一个完整的表单由表单域、表单控件(表单元素)和提示信息组成

表单域：是一个包含表单元素的区域，标签用于定义表单域，以实现用户信息的收集和传递，会把范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">各种表单元素控件
</form>action：用于指定接收并处理表单数据的服务器程序的url地址
method:设置表单数据的提交方式，get/post
name:指定表单的名称以区分同一个页面中的多个表单域

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件，有以下几种：

input输入表单元素
select下拉表单元素
textarea文本域元素

1.input输入表单元素

input标签用于收集用户信息，在这个标签中包含一个type属性，根据不同的type属性值，输入字段有很多种形式(文本、复选框、掩码后的文本控件、单选按钮、按钮等)

input标签为单标签，type属性设置不同的属性值就可以用来指定不同的空间类型

button:定义可点击按钮(多数情况下用于通过JS启动脚本)
checkbox:复选框
file:定义输入字段和“浏览”按钮，供文件上传
hidden:定义隐藏的输入字段
image:定义图像形式的提交按钮
password:定义密码字段，该字段中的字符被掩码
radio:单选按钮
reset:重置按钮，重置按钮会清除表单中的所有数据
submit:提交按钮，提交按钮会把表单数据发送到服务器
text:定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符
name:定义input元素的名称
value:定义input元素的值
checked:规定首次加载的时候这个选项被选中
maxlength:规定输入字段中的字符的最大长度<form action=""><!--输入文本框-->用户名：<input type="text" name="username" value="请输入用户名" maxlength="5"><br /><!--输入密码-->密码：<input type="password" name="password"><br /><!--单选按钮 选项的name必须相同-->性别: 男<input type="radio" name="sex" value="男">  女<input type="radio" name="sex" value="女"><br /><!--复选框-->爱好：吃饭<input type="checkbox" name="hobby" value="吃饭" checked="checked"> 睡觉<input type="checkbox" name="hobby" value="睡觉"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"><br /><!--提交按钮--><input type="submit" value="提交"><!--重置按钮--><input type="reset" value="重置"><!--普通按钮 和JS搭配--><input type="button" value="获取验证码"><br><!--文件域 上传文件使用的-->上传头像:<input type="file" ></form>

lable标签：为input标签元素定义标注，比如说复选框的时候，那个框很小，但是只要使用lable标签就可以再点击选项的时候就选中框

<lable for="sex">男</lable>
<input type="radio" name="sex" id="sex"> 
lable标签里面的for属性和对应标签的id属性对应<label for="username">用户名：</label><input type="text" name="username" id="username" value="请输入用户名" maxlength="5"><br />
现在我点击用户名三个字就会选中输入框

2.select下拉表单元素

在页面中有多个选项让用户选择，并且想要节约页面空间的时候，就可以用下拉表单元素

在option中定义selected="selected"时，当前项即为默认选项

        家乡：<select name="" id="" ><option value="">北京</option><option value="">湖南</option><option value="" selected="selected">上海</option></select><br>

3.textarea文本域

当用户输入内容较多的时候，我们就可以使用textarea标签

个人介绍: <textarea rows="3" cols="20" ></textarea>

二、CSS

1.CSS选择器

选择器就是根据不同的需求把不同的标签选出来。选择器分为基础选择器和复合选择器两大类：

基础选择器：

基础选择器是由单个选择器构成的
基础选择器包括：标签选择器、类选择器、id选择器和通配符选择器
标签选择器：使用HTML标签名称作为选择器，按标签名称分类，为页面中某一标签指定统一的CSS样式

标签选择器：将某一类标签全部选出来，能够快速为页面中的同类型的标签设置统一的样式
<style>p {color: red;}</style><body><p>男生</p><p>女生</p>
</body>

类选择器：单独选择一个或者几个标签，类选择器用’.'进行标识，后面紧跟类名。我们可以给一个标签指定多个类名

 <style>.red {color: red;}.green {color: green;}.font35 {font-size: 35px;}</style>
<body><div class="red font35">刘德华</div><div class="green">张惠妹</div><div class="red">周迅</div>
</body>

id选择器：选择标有特定的id的元素，用’#'来定义

<style>#pink {color: pink;}</style>
<body><div id="pink">迈克尔</div>
</body>

通配符选择器：选择页面中所有的元素，用’*'选择

<style>* {color: pink;}
</style>
<body><div>迈克尔</div><div>我的</div>
</body>

复合选择器

复合选择器是由两个或者多个基础选择器通过不同的方式组合而成的。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等

后代选择器：又称包含选择器，可以选择父元素里面的子元素。写法就是把外层标签写在前面，内层标签在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代

将ul中li中的所有a标签选出来
<style>.nav li a {color: pink;}</style><body><ul class="nav"><li><a href="#">hello world</a></li><li><a href="#">hello world</a></li><li><a href="#">hello world</a></li></ul>
</body>元素1  元素2 {样式声明}
注：元素2可以使儿子也可以是孙子，只要是元素一的后代即可

子元素选择器：只能选择最近一级子元素，就是选亲儿子

元素1>元素2：选的是直接后代
<style>div>a {color: pink;}</style><body><div><a href="#">我是儿子</a><!--只选择出这个a标签--><p><a href="">我是孙子</a></p></div>
</body>

并集选择器：可以选择多组标签，同时为他们设置相同的样式，喜欢竖着写

元素1，元素2 {样式声明}<style>div,p,.pig {color: pink;}</style><body><div>熊大</div><p>熊二</p><span>光头强</span><ul class="pig"><li>小猪佩奇</li><li>猪爸爸</li><li>猪妈妈</li></ul>
</body>

伪类选择器：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或者选择第1个，第n个元素。书写的最大特点是用：表示，比如说 :hover、:first-child
链接伪类选择器：

a:link 选择所有未被访问的链接
a:visited 选择所有被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹起的链接）
注：1.按照LVHA(love hate)的顺序表名 :link :visited :hover :active
2.在实际工作中要给链接单独指定样式

focus伪类选择器：用于选取获得焦点的表单元素，焦点就是光标，一般情况input类的表单元素才能获取，因此这个选择器也主要相对于表单元素来说

 <style>input:focus {background-color: yellow;}</style><body><input type="text"><input type="text"><input type="text">
</body>

2.字体和文本属性

font-family设置字体系列：微软雅黑、宋体等等
font-size设置字号大小
font-weight设置字体粗细：400是不变粗，700是变粗
font-style设置字体样式：normal正常值，italic斜体

<style>p {font-family: Arial;font-size: 20px;font-weight: 700;font-style: italic;} </style>
<body><h2>标题</h2><p>每一个人</p><p>都很快乐</p><p>要加油</p>
</body>复合写法：不能更换顺序，不需要设置的属性可以省略，但是必须保留font-size和font-family
p {/* font:font-style  font-weight font-size/line-height font-family; */font:italic 700 16px Arial;}

color设置文本颜色
text-align设置文本对齐方式：left(默认) center right，如果是让图片居中，一定是设置图片的父元素
text-decoration设置文本装饰：underline(下划线) overline(上划线) line-through(删除线)
text-indent设置文本缩进：用来指定文本的第一行缩进，通常是将段落的首行缩进
line-height设置行间距：控制行与行之间的距离，行间距由上间距、文本高度和下间距构成的

p {/* font:font-style  font-weight font-size/line-height font-family; */font:italic 700 16px Arial;color: pink;text-align: left;text-decoration: underline;/* em是一个相对单位，是相对于当前元素一个文字的大小，如果当前元素没有设置大小就会按照父元素的1个文字大小 */text-indent: 2em;line-height: 200px;}/* 删除a标签里面的下划线 */a {text-decoration: none;}</style>
<body><h2>标题</h2><p>每一个人</p><p>都很快乐</p><p>要加油</p>
</body>

3.CSS引入方式

根据CSS样式书写的数学的位置，CSS样式表可以分为三类：

行内样式表(行内式)：直接写在html中的标签当中

<div style="color:red;font-size:12px;">努力学习</div>

内部样式表(嵌入式)：把CSS写到html页面的内部，将所有的CSS代码抽取出来，单独放到一个style标签中
外部样式表(链接式):将CSS文件引入到html页面中

1.新建一个.css文件
2.将这个.css文件引入到html页面中
<link rel="stylesheet" href="./style.css">

4.emmet语法

快速生成html结构语法：

 - 生成标签：直接输入标签名然后按tab键- 想要生成多个相同标签直接标签名*n,比如要div*3可以快速生成3的div- 如果有父子级可以用>，比如ul>li- 如果有兄弟关系的标签用+就可以，比如div+p- 如果生成带有类名或者id名的，直接写.demo或者#two tab键就可以了- 如果想在生成的标签内部写内容可以用{}表示- 如果生成的div类名是有顺序的，可以用自增符号$，比如说p.demo$*3<p class="demo1"></p><p class="demo2"></p><p class="demo3"></p>

快速生成CSS样式：直接用简写的形式然后tab键即可

5.元素显示模式

作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页
元素显示模式就是元素以什么方式进行显示，比如div自己占一行，一行可以放多个dpan
HTML元素一般分为块元素的行内元素两种类型

块元素：常见的有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
特点：- 自己独占一行- 高度 、宽度 、外边距以及内边距都可以控制- 宽度默认是容器(父级宽度)的100%- 是一个容器及盒子，里面可以放行内或者块级元素注：- 文字类的元素内不能使用块级元素- <p>标签主要用于存放文字，因此<p>标签不能放块级元素，特别是不能放<div>- 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他的块级元素

行内元素：常见的又<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>,其中<span>标签是最典型的行内元素，有的地方也将行内元素成为内联元素特点：- 相邻行内元素在一行上，一行可以显示多个- 高、宽直接设置是无效的- 默认宽度就是它本身内容的宽度- 行内元素只能容纳文本或者其他行内元素注：- 链接里面不能再放链接- 特殊情况链接<a>里面可以放块级元素，但是要给<a>转换一下块级模式最安全

行内块元素：通常有</img> <input/> <td>,它们同时具有行内元素和块元素的特点特点：- 和相邻行内元素在一行上，但是他们之间会有空白缝隙，一行可以显示多个(行内元素特点)- 默认宽度就是它本身内容的宽度- 高度、行高、外边距和内边距都可以控制

元素显示模式的转换：特殊情况下，我们需要元素模式的转换，就是一个模式的元素需要另一个模式的元素的特性，比如要增加链接a的触发范围，转换为块元素display:block,转换成行内元素display:inline,转换成行内块元素display:inline-block

一个小工具dnipaste的使用：

F1可以截图，同时测量大小，设置箭头，书写文字等等
F3在桌面置顶显示
点击图片，按alt取色（按shift可以切换取色模式）
按下esc取消图片显示

小练习：
让文字在盒子内垂直居中：line-height等于盒子的高度就行a {display: block;height: 40px;width: 230px;background-color: #55585a;font-size: 14px;color: white;text-indent: 2em;text-decoration: none;line-height: 40px;}a:hover {background-color: tomato;}<body><a href="#">手机 电话卡</a><a href="#">电视 盒子</a><a href="#">笔记本 平板</a><a href="#">出行 穿戴</a><a href="#">智能 路由器</a><a href="#">健康 儿童</a><a href="#">耳机 音响</a>
</body>

6.背景

背景属性可以设置背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等等

背景颜色：background-color
背景图片：background-image：url()，非常便于控制位置

div {height: 600px;width: 600px;background-image: url(./img/image.jpg);}

背景平铺：background-repeat:repeat|no-repeat|repeat-x|repeat-y。背景图片会压住背景颜色
背景图片的位置：background-position:x y,x和y坐标可以用方位名词(top center bottom left center right)或者精确单位。

方位名词：1.如果两个值都是方位名词，则两个值前后顺序无关，比如：left top和top left效果一致
2.如果只指定了一个方位名词，另一个值省略，那么第二个值默认居中对齐精确单位：1.第一个参数一定是x坐标，第二个一定是y坐标
2.如果只指定一个数值，那么该数值一定是x坐标，另一个默认垂直居中混合单位：如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是X坐标，第二个值是Y坐标

背景图像固定(背景附着)：background-attachment设置背景图像是否固定或者是随着页面的其余部分滚动 scroll(默认) | fixed
背景属性复合写法：背景颜色图片地址图片平铺图像滚动图片位置
背景色半透明：background:rgba(0,0,0,0.3)最后一个是透明度，取值范围在0-1之间，1是完全不透明，只是让背景色透明，里面的内容不受影响
背景图片常见于logo或者是一些装饰性的小图片或者是超大的背景图片，有点事非常便于控制位置

7.CSS的三大特性

CSS的三大特性：层叠性、继承性、优先级

层叠性：给相同的选择器设置相同的属性时，一个样式就会覆盖另一个冲突的样式，遵循的原则是就近原则，即哪个样式离结构近就执行哪个样式，样式不冲突就不会重叠
继承性：子标签会继承父标签的某些样式，主要继承跟文字相关的一些样式

行高的继承：
<style>body {color: pink;font: 12px/1.5 'Microsoft YaHei';}div {/*子元素继承了父元素body的行高1.5 是子元素的font-size的1.5倍*/font-size: 14px;}</style><body><div>粉红色的回忆</div><p>粉红色的回忆</p>
</body>如果子元素没有设置行高，则会继承父元素的行高为1.5，此时子元素的行高就是：当前子元素的文字大小*1.5

优先级：同一个元素指定多个选择器，就会有优先级的产生。如果选择器相同，就执行层叠性；如果选择器不同，就根据选择器的权重执行
选择器的权重：继承或者*<元素选择器<类选择器和伪类选择器<ID选择器<行内样式style<!important

<style>.test {color: red;}div {color: pink!important;/*这是权重最高的颜色*/}#demo {color: green;}</style><body><div class="test" id="demo" style="color:purple">你笑起来真好看</div>
</body>

权重叠加：如果是符合选择器，则会有权重叠加，需要计算权重。权重虽然有叠加，但是永远不会进位

选择器	选择器权重
继承或者*	0,0,0,0
元素选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式	1,0,0,0
!important	无穷大

 /*ul li 的权重是0,0,0,1+0,0,0,1=0,0,0,2*/ul li {color: green;}li {color: red;}/*.nav li的权重是0,0,1,0+0,0,0,1=0,0,1,1 所以现在显示粉色*/.nav li {color: pink;}</style>
</head>
<body><ul class="nav"><li>大猪蹄子</li><li>大肘子</li><li>猪尾巴</li></ul>

8.盒子模型

学习目标：

能够准确阐述盒子模型的4个组成部分
能够利用边框复合写法给元素添加边框
能够计算盒子的实际大小
能够利用盒子模型布局模块案例
能够给盒子设置圆角边框
能够给盒子添加阴影
能够给文字添加阴影

学习内容：

盒子模型
PS基本操作
综合案例
圆角边距
盒子阴影
文字阴影

网页布局的过程：
1.先准备好相关的网页元素，网页元素基本都是盒子Box
2.利用CSS设置好盒子样式，然后摆放到相应位置
3.往盒子里面装内容

盒子模型：网页布局要学习三大核心，那就是盒子模型、浮动和定位。盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个承装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，它包括边距、外边距、内边距和实际内容

border边框
content内容
padding内边距：设置盒子的边框和内容之间的距离
margin外边距：控制一个盒子与另一个盒子之间的距离

border边框：

可以设置元素的边框。边框由三部分组成，即边框宽度、边框样式、边框颜色 
border:border-width | border-style|border-color border-width:设置边框宽度，单位是px
border-style:solid实线、dashed虚线、dotted点线 
边框简写，比如border:1px solid red;
边框可以分开写：border-top border-buttom border-right border-left
表格的细线边框：border-collapse:collapse表示相邻边框合并在一起
边框会影响盒子的实际大小，边框会额外增加盒子的实际大小，因此我们可以测量盒子大小的时候不测量边框

padding内边距：

内边距可以设置盒子中内容和边框的距离
可以分开设置：padding-top、padding-bottom、padding-left、padding-right
简写：
padding:5px 表示上下左右都是5像素内边距
padding:5px 10px;表示上下内边距是5像素，左右内边距是10像素
padding:5px 10px 20px:表示上内边距为5像素，左右内边距为10像素，下内边距为20像素
padding:5px 10px 20px 30px;表示上内边距为5px,有内边距10px，下内边距20px,左内边距30px
padding会影响盒子实际大小
如果没有给盒子指定宽度和高度，那么padding就不会撑大盒子

margin外边距：

可以分开设置：margin-top、margin-buttom、margin-left、margin-right
margin的简写方式和padding一样外边距可以让块级盒子水平居中，但是必须满足两个条件：(1)盒子必须指定了宽度(2)盒子的左右外边距设置为auto如果让行内元素或者行内块元素水平居中就给其父元素添加text-align:center对于两个父子关系的块元素，父元素有上外边距同时子元素也有上外边距，那么此时两个上外边距会合并成一个外边距，解决方案：
(1)可以为父元素定义上边距
(2)为父元素定义上内边距
(3)为父元素添加overflow:hidden

圆角边框：

设置圆角边框 border-radius:length 数值越大弧度越明显

border-radius:length
参数值可以为数值或者百分比的形式
数值：表示用半径为这个数值的圆
圆角矩形设置为高度的一半
可以跟四个值：从左上开始顺时针设置
跟两个值：左上右下 右上左下
分开写，如：border-top-left-radius、border-buttom-left-radius

盒子阴影：

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow:必须，水平阴影的位置，允许负值
v-shadow:必须，垂直阴影的位置，允许负值
blur:可选，模糊距离，值越大表示越模糊，虚实
spread:可选，阴影的尺寸，影子的大小
color:可选，阴影的颜色
inset:可选，将外部阴影(outset)改为内部阴影

文字阴影:

text-shadow:h-shadow v-shadow blur color

h-shadow:必须，水平阴影的位置，允许负值
v-shadow:必须，垂直阴影的位置，允许负值
blur:模糊的距离
color:阴影颜色

9.浮动

学习目标：

能够说出为什么需要浮动
能够说出浮动的排列特性
能够说出3种最常见的布局方式
能够说出为什么要清除浮动
能够写出至少2两种清除浮动的方法
能够使用PS实现基本的切图
能够使用PS插件实现切图
能够完成基本布局

传统网页布局的三种方式：

标准流：按照规定好的默认方式进行排列
浮动
定位
一个网页基本都包含了以上三种布局方式

为什么需要浮动：因为有很多的布局效果是标准流没有办法实现的，此刻就可以利用浮动完成布局。浮动最典型的应用就是可以让多个块级元素在一行内排列显示

网页布局第一准则：多个块级元素纵向排列用标准流，多个块级元素横向排列用浮动

float属性用于创建浮动框，将其移动到一边，知道左边缘或者右边缘触及包含块或另一个浮动框的边缘
选择器 { float:属性值; }
属性值        描述
none         不浮动
left         元素向左浮动
right        元素向右浮动浮动元素的特点：
1.浮动元素会脱离标准流的控制
2.浮动的元素会一行内显示并且元顶部对齐
3.浮动的元素会具有行内块元素的特性
4.如果多个盒子都设置了浮动，则它们会安札属性值一行内显示并且顶端对齐排列
5.浮动的元素会具有行内块元素的特性。所以如果bu行内元素有了浮动，那么就不用转换为行内块元素就可以设置宽度和高度
6.如果块级盒子没有设置宽度，默认宽度就跟父级一样宽，但是添加了浮动之后，它的大小根据内容来决定
7.行内元素同理
8.网页布局：先用标准流的父元素排列上下位置，然后内部子元素采取浮动排列左右位置浮动布局的特点：
1.浮动和标准流的父盒子搭配：先用标准流的父元素排列上下位置，然后内部子元素采取浮动排列左右位置
2.一个元素浮动了，理论上其他的兄弟元素也浮动，但是浮动的盒子只会影响盒子后面的标准流，不会影响盒子前面的标准流
3.浮动的盒子不会有外边距合并的问题

清除浮动：
我们前面浮动的元素有一个标准流的父元素，他们有一个共同特点就是设置了高度。但是理想的状态是，让子盒子撑开父亲，有多少孩子，父盒子就有多高。但是子盒子浮动又不占有位置，最后父盒子高度为0，就会影响下面的标准流盒子。因此需要清除浮动。清除浮动的本质就是清除浮动元素造成的影响。如果父盒子本身有高度就不需要清除浮动。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

选择器 {clear：属性值；}
left:清除左侧浮动的影响
right:清除右侧浮动的影响
both:同时清除左右两侧浮动的影响清除浮动的方法：- 额外标签法- 父级添加overflow属性- 父级添加after伪元素- 父级添加双伪元素额外标签法：
在最后一个浮动的元素末尾添加一个空标签(必须是块级元素)，例如<div style="clear:both"></div>或者其他标签父级添加overflow:
属性值有:hidden（清除浮动）、auto、scrollafter伪元素法：
给父元素添加
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix {*zoom:1;}双伪元素清除浮动：
也是给父元素添加
.clearfix::before,
.clearfix:after {content: "";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom:1;
}

10.CSS书写顺序

布局定位属性：display/position/float/clear/visibility/overflow
自身属性:width/height/margin/padding/border/background
文本:color/font/text-decoration/test-align/vertical-align/white-space/break-word
其他属性：content/cursor/border-radius/bax-shadow/text-shadow/bacckground:linear-gradient…

11.CSS定位

学习目标：

能够说出为什么要用定位
能够说出定位的4种分类
能够说出4种定位各自的特点
能够说出为什么常用子绝父相布局
能够写出淘宝轮播图布局
能够说出显示隐藏的2种方式以及区别

定位可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中的某个位置并且可以压住其他盒子。定位=定位模式+边偏移。定位模式用于指定一个元素在文档中的定位方式，边偏移则决定了该元素的最终位置。

边偏移就是定位的盒子移动到的最终位置，有top、buttom、left、right四个属性

定位模式：static静态定位、relative相对定位、absolute绝对定位、fixed固定定位

relative相对定位：是元素在移动位置的时候，是相对它原来的位置来说的。并且原来在标准流的位置继续占有，后面的盒子不会跑到它移动之前的位置去。

absolute绝对定位：是在移动位置的时候，相对它的祖先元素来说的。

如果没有祖先元素或者祖先元素没有定位，就以浏览器为标准进行定位
如果祖先元素有定位（相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置
绝对定位不再只占有原先的位置

子绝父相：如果子级用绝对定位，那么父级就要用相对定位

子级绝对定位，不会占有位置，可以放到父盒子里面的任何一个地方，不会影响其他的兄弟盒子
父盒子需求加定位限制子盒子在父盒子的显示
父盒子布局时，需要占有位置，因此父亲只能是相对定位

fixed固定定位：元素固定于浏览器可视区的位置。主要的使用场景是可以在浏览器页面滚动时元素的位置不会改变。并且固定定位不占有原先的位置

固定定位——固定在版心右侧的位置：

让固定定位的盒子left:50%，到浏览器的可视区中心位置
让固定定位的盒子margin-left：版心宽度一半的距离，让盒子向右移动版心一半的距离到版心右侧

sticky粘性定位：以浏览器的可视窗口为参考点移动元素、粘性定位占有原先的位置。必须添加top、buttom、left、right中的一个才有效果

定位叠放次序z-index：在使用定位布局的时候，可能会出现盒子重叠的情况，可用z-index来控制盒子的前后次序。数值可以是正整数、负整数或0，数值越大，盒子越靠上。数值后面不能加单位。只有定位的盒子才有这个属性

绝对定位的盒子居中：

加了绝对定位的盒子不能通过margin:auto实现水平居中
实现水平居中：首先left:50%，然后margin-left:-盒子宽度的一半
实现垂直居中：首先top:50%，然后margin-top:-盒子高度的一半

定位的特性：

行内元素添加绝对或者固定定位，可以直接设置宽度和高度
块级元素添加绝对或者固定定位，如果不给宽度和高度，默认大小是内容的大小
浮动元素、绝对定位或者固定定位都不会触发外边距合并的问题
浮动元素只会压住它下面标准流的盒子但是不会压住下面标准流盒子里面的文字或者图片，而绝对定位或固定定位会压住下面标准流的所有内容

元素的显示与隐藏：

display显示与隐藏：none隐藏对象，block除了转换为块级元素之外还有显示元素的意思。隐藏元素，并且不再占有原来的位置
visibility显示与隐藏：visable可见，hidden隐藏，隐藏元素后继续占有原来的位置
overflow对溢出的部分进行显示与隐藏：visible显示溢出部分(默认)，hidden隐藏溢出的部分，scroll溢出的部分显示滚动条，auto在需要的时候添加滚动条（超出就有滚动条，不超出就没有滚动条）

12.CSS高级技巧

学习目标：

能够使用精灵图
能够使用字体图标
能够写出CSS三角
能够写出常见的CSS用户界面样式
能够说出常见的布局技巧

学习内容：

精灵图
字体图标
CSS三角
CSS用户界面样式
vertical-align属性应用
溢出的文字省略号显示
常见布局技巧

精灵图：
为了有效减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术。就是将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了
精灵技术主要针对于背景图片的使用，就是把多个背景小图片整合到一张大图片中，这个大图片也称作sprites 精灵图

字体图标iconfont：
展示的是图标，但是本质属于字体，可以添加阴影、改变颜色等等
字体图标下载：http://www.iconfont.cn/或者http://icomoon.io
字体图标的引入：将下载里面的fonts文件夹放到页面的根目录下面，然后再引入

@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?2pkz3x');src:  url('fonts/icomoon.eot?2pkz3x#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?2pkz3x') format('truetype'),url('fonts/icomoon.woff?2pkz3x') format('woff'),url('fonts/icomoon.svg?2pkz3x#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;
}

字体图标的追加：把压缩包里面的selection.json重新上传，重新下载压缩包并替换原来的文件

三角制作：

 <style>.box1 {width: 0;height: 0;border-top: 10px solid pink;border-right: 10px solid red;border-bottom: 10px solid blue;border-left: 10px solid green;}.box2 {width: 0;height: 0;border: 10px solid transparent;border-top-color:pink;}</style>
</head>
<body><div class="box1"></div><br><div class="box2"></div>
</body>

更改用户鼠标样式cursor：设置或者检索在对象上移动的鼠标指针的光标形状

default：默认
pointer：小手
move：移动
text：文本
not-allowed：禁止

取消表单的轮廓线：给表单添加outline:none

防止文本域拖拽：textarea设置resize:none

vertical-align：设置图片或行内块元素或者表单与文字垂直对齐，只针对于行内元素或行内块元素有效

baseline：元素放置在父元素的基线上
top：把元素的顶端与行中最高元素的顶端对齐
middle：把元素放置在父元素的中部
bottom：把元素的顶端与行中最低元素的顶端对齐

解决图片底部默认空白缝隙的问题：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐。解决办法：给图片添加vertical-align:middle/top/bottom或者把图片转换为块元素

单行溢出的文字省略号代替：

/*1.先强制一行内显示文本*/
white-space:nowrap;
/*2.超出的部分隐藏*/
overflow:hidden;
/*文字用省略号代替超出的部分*/
text-overflow:ellipsis;

多行溢出的文字省略号代替：(适合于webkit浏览器或者移动端)

overflow:hidden;
text-overflow:ellipsis;
/*弹性伸缩盒子模型显示*/
display:-webkit-box;
/*限制在一个块元素显示的文本的行数*/
-webkit-line-clamp:2;
/*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-box-orient:vertical;

margin负值的应用：将两个有边框的盒子合在一起边框细线

 ul li {float: left;list-style: none;width: 150px;height: 200px;border: 1px solid red;/*让所有的盒子先浮动再向左1px压住前一个盒子的边框*/margin-left: -1px;}

当鼠标经过某个盒子，让盒子边框变颜色：只要鼠标经过某个盒子提高当前盒子的层级即可，如果没有定位就加相对定位，如果有定位就加z-index

文字围绕浮动元素：在一个大盒子中放文字和图片，然后将图片浮动起来，浮动的元素不会压住文字，那么文字就可以环绕着图片了

<style>.box {width: 300px;height: 100px;background-color: aquamarine;margin: 0 auto;}.pic {float: left;}</style>
</head>
<body><div class="box"><div class="pic"><img src="../img/image.jpg" alt="" width="100px" height="60px"></div><p>每一天都不同，大家要加油加油驾驭哈哈哈哈哈哈</p></div>
</body>

行内块元素的巧妙应用：翻页

<style>.box {text-align: center;}.box a {display: inline-block;width: 36px;height: 36px;background-color: #f7f7f7;border: 1px solid #ccc;text-align: center;line-height: 36px;text-decoration: none;color: #333;}.box .prev,.box .next {width: 85px;}.box .current,.box .elp {background-color: #fff;border: none;}</style>
</head>
<body><div class="box"><a href="#" class="prev">> 上一页</a><a href="#" class="current">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#" class="elp">...</a><a href="#" class="next">< 下一页</a></div>
</body>

CSS三角强化：

 <style>.box1 {width: 0;height: 0;border-color: transparent skyblue transparent transparent;border-style: solid;border-width: 100px 50px 0 0;}</style>
</head>
<body><div class="box1"></div>
</body>

三、HTML5新增特性

新特性基本都是IE9+以上版本的浏览器才支持

1.新增的语义化标签

<header>：头部标签
<nav>：导航标签
<article>：内容标签
<section>：定义文档某个区域
<aside>：侧边栏标签
<footer>：尾部标签注意：
1.这种语义化标签主要是针对搜索引擎的
2.这些新标签可以在页面中使用多次
3.在IE9中，需要把这些元素转换成伟块级元素
4.移动端更喜欢用这些标签

2.视频标签

尽量使用MP4格式，因为大部分标签都支持MP4格式

<video src="文件地址" controls="controls"></video>autoplay属性：autoplay 设置视频就绪自动播放(谷歌浏览器需要添加muted属性)
controls属性：controls 向用户显示播放控件
width属性：像素 设置播放器宽度
height属性：像素 设置播放器高度
loop属性：loop 是否循环播放
preload属性：auto(预先加载视频) none(不应加载视频) 规定是否预加载视频，如果有了autoplay就忽略该属性
url:属性：视频url地址
poster属性：imgurl 加载等待的画面图片
muted属性：muted 静音播放

3.音频标签

尽量使用MP3格式

<audio src="文件地址" controls="controls"></audio>autoplay属性：autoplay 设置音频就绪自动播放
controls属性：controls 向用户显示播放控件
loop属性：loop 是否循环播放
url属性：音频url地址

4.新增input表单

type="email"：限制用户输入必须为email类型
type="url"：限制用户输入必须为URL类型
type="date"：限制用户输入必须为日期类型
type="time"：限制用户输入必须为时间类型
type="month"：限制用户输入必须为月类型
type="week"：限制用户输入必须为周类型
type="number"：限制用户输入必须为数字类型
type="tel"：手机号码
type="search"：搜索框
type="color"：生成一个颜色选择表单

5.新增表单属性

required：required 表单有该属性其内容不能为空
placeholder：提示文本 表单的提示信息，存在默认值将不显示
autofocus：autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单
autocomplete：off/on 当用户在字段开始输入的时候，浏览器基于之前输入过的值，应该显示出在字段中填写的选项。表单必须有name属性并且成功提交过。但这样不安全，所以一般设为off
multiple：multiple 可以多选文件提交

四、CSS3新增特性

1.新增属性选择器

可以根据元素的特性属性来选择元素
权重是10
类选择器、属性选择器、伪类选择器权重都是10

E[att]   选择具有att属性的E元素
E[att="val"]  选择具有att属性并且属性值等于val的E元素
E[att^="val"]  匹配具有att属性并且属性值以val开头的E元素
E[att$="val"]  匹配具有att属性并且属性值以att结尾的E元素
E[att*="val"]  匹配具有att属性并且属性值含有val的E元素

 <style>/*1.必须是input并且有value*/input[value] {color: pink;}input[type=password] {color: pink;}div[class^=icon] {color: aquamarine;}section[class$=data] {color: blueviolet;}</style>
</head>
<body><!--1.利用属性选择器就可以不借助与类或者id选择器--><input type="text" value="请输入用户名"><input type="text"><!--2.选择属性=值的元素 重点！！！--><input type="text"><input type="password"><!--3.选择属性值开头的某些元素--><div class="icon1">小图标1</div><div class="icon2">小图标2</div><div class="icon3">小图标3</div><div class="icon4">小图标4</div><!--4.选择属性值结尾的某些元素--><section class="icon1-data">我是安其拉</section><section class="icon2-data">我是哥斯拉</section><section class="icon3-ico">我是谁</section>
</body>

2.新增结构伪类选择器-选择第n个元素

常用于根据父级选择里面的子元素

E:first-child：匹配父元素中第一个子元素E
E:last-child：匹配父元素中最后一个元素E
E:nth-child(n)：匹配父元素中的第n个子元素E 
E:first-of-type：指定类型E的第一个
E:last-of-type：指定类型E的最后一个
E:nth-of-type(n)：指定类型E的第n个区别：<style>/*第一个孩子是p 然后再看条件不满足div 所以没有选出来*//*先看第几个孩子 再看是不是指定的元素*/section div:nth-child(1) {background-color: aquamarine;}/*会把指定元素的盒子排列序号*//*先看指定的元素，再找第几个孩子*/section div:nth-of-type(1){background-color: bisque;}</style>
</head>
<body><section><p>光头强</p><div>熊大</div><div>熊二</div></section>
</body>区别：nth-child会把所有的盒子都排列序号

nth-child(n):可以选择某个父元素的一个或多个特定的子元素。n可以是数字、关键字、公式。如果是数字，就是选择第n个子元素。关键字even偶数，odd奇数。公式是从0开始极端，但是第0个元素或者超出了元素的个数会被忽略

2n 偶数
2n+1 奇数
5n 5 10 15 …
n+5 从第5个开始(包含第五个)到最后
-n+5 前5个(包含第5个)

<style>/*选择第一个孩子*/ul li:first-child {background-color: pink;}ul li:last-child {background-color: blueviolet;}ul li:nth-child(3) {background-color: brown;}ul li:nth-child(even) {color: chartreuse;}</style>

3.伪元素选择器

伪元素选择器可以帮助我们用CSS创建新标签元素，而不需要HTML比群殴爱你，从而简化HTML结构

::before  在元素内部的前面插入内容
::after  在元素内部的后面插入内容- before和after创建一个元素，但是属于行内元素- 新创建的这个元素在文档树中是找不到的，所以称为伪元素- before和after必须有content属性- 伪元素选择器和标签选择器一样，权重为1

伪元素字体图标：

 <style>@font-face {font-family: 'icomoon';src:  url('fonts/icomoon.eot?2pkz3x');src:  url('fonts/icomoon.eot?2pkz3x#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?2pkz3x') format('truetype'),url('fonts/icomoon.woff?2pkz3x') format('woff'),url('fonts/icomoon.svg?2pkz3x#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}div {position: relative;width: 200px;height: 35px;border: 1px solid red;}div::after {position: absolute;top: 10px;right: 10px;font-family: 'icomoon';content: '\e905';color: red;}</style>
</head>
<body><div></div>
</body>

半透明盒子：鼠标经过图片出现阴影盒子

 <style>.box {position: relative;width: 444px;height: 320px;}.box img {width: 100%;height: 100%;}.box::before {content: '';display: none;position:absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .4);}.box:hover::before {display: block;}</style>
</head>
<body><div class="box"><img src="../img/image.jpg" alt=""></div>
</body>

伪元素清除浮动：

         第一种.clearfix::after {content: '';display: block;height: 0;clear: both;visibility: hidden;}/*第二种*/.clearfix::before,.clearfix::after {content: '';display: table;/*把这两个盒子放到一行上*/}.clearfix::after {clear: both;}

4.CSS3盒子模型

CSS3中可以通过box-sizing来指定盒子模型，有两个值：即可指定为content-box、border-box

box-sizing：congtent-box 盒子大小为width+padding+border
box-sizing：border-box 盒子大小为width padding和border就不会撑大盒子了(padding和border不超过width宽度)

5.滤镜filter 让图片模糊

filter:blur(数值); 数值越大越模糊

6.计算盒子宽度cacl

比如 width:calc(100%-80px); 可以用加减乘除计算

7.过渡

transition过渡动画：是从一个状态渐渐过渡到另一个状态
transition:要过渡的属性花费时间运动曲线何时开始; 后面两个值可以省略

属性：想要变化的CSS属性，宽度高度、背景颜色、内外边距都可以，如果想要所有的属性都变化就写一个all
花费时间：单位是s
运动曲线：默认是ease
何时开始：单位是s 可以设置延迟触发时间默认0s

        div {width: 200px;height: 100px;background-color: bisque;transition: width 0.5s,height 0.5s ;}div:hover {width: 400px;height: 400px;}

五.项目命名规范

1.网站favicon图标

制作favicon图标
favicon图标放到网站的根目录下
HTML页面引入favicon图标

制作：

把品优购图标切成png图片
把png转换为ico图标，需要借助于第三方的网站，例如：比特虫http://www.bitbug.net/

引入：

在<head></head>间引入<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>

2.网站TDK三大标签SEO化

一般会由SEO人员准备好相关内容

网站标题title:建议是网站名(产品名)-网站的介绍尽量不要超过30个汉字
网页描述description
网页关键字keywords

3.常见模块类名命名

名称	说明
快捷导航栏	shortcut
头部	header
标志	logo
购物车	shopcar
搜索	search
热点词	hotwords
导航	nav
导航左侧	dropdown 包含.dd .dt
导航右侧	navitems
页面底部	footer
页面底部服务模块	mod_service
页面底部帮助模块	mod_help
页面底部版权模块	mod_copyright

4.LOGO SEO优化

logo里面放一个h1标签，目的是为了提权，告诉搜索引擎，这个地方很重要
h1里面再放一个链接，可以直接返回首页，把logo的背景图片给链接即可
为了搜索引擎收录我们，我们链接里面要放文字(网站名称)，但是文字不要显示出来
方法一：text:indent移动到盒子外面，然后overflow:hidden
直接给font-size:0
最后给链接一个title属性，这样鼠标放到logo上就可以看到提示文字了

在这里插入图片描述

flex弹性盒子

Flex弹性布局

当把父盒子设为flex布局之后，子元素的float\clear\vertical-align属性都将失效
通过给父盒子添加flex属性来控制子盒子的位置和排列方式

flex布局父元素常见的属性：

flex-direction：设置主轴的方向，元素是根据主轴来排列的

默认的主轴方向是水平向右的，默认的测轴方向是垂直向下

属性值	说明
row	默认从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

justify-content：设置主轴上子元素的排列方式

属性值	说明
flex-start	默认值从头部开始，如果主轴是x轴，则从左到右
flex-end	从尾部开始排列，但是子元素的顺序是不变的
center	在主轴居中对齐
space-around	平分剩余空间
space-between	先两边贴边再平分剩余空间

flex-wrap：设置子元素是否换行

默认子元素是不会换行的，如果装不下，会缩小子元素的宽度

属性值	说明
nowrap	默认值，不换行
wrap	换行

align-content：设置测轴上的子元素的排列方式（多行）

属性值	说明
flex-start	默认值在测轴的头部开始排列
flex-end	在测轴的尾部开始排列
center	在测轴中间显示
space-around	子项在测轴平分剩余空间
space-between	子项在测轴先平分在两头，再平分剩余空间
stretch	设置子项元素高度平分父元素的高度

align-items：设置测轴上的子元素的排列方式（单行），以测轴为y轴为例，适合在单行的时候使用

属性值	说明
flex-start	从上到下
flex-end	从下到上
center	垂直居中
stretch	拉伸(默认值) 不要给高度

flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

flex布局子元素常见的属性：

flex属性：定义子项目分配剩余空间，用flex表示占多少份数

前端学习——html、css

一、HTML

1.简单的HTML结构介绍

2.HTML常用标签

3.表格

四.表单

二、CSS

1.CSS选择器

2.字体和文本属性

3.CSS引入方式

4.emmet语法

5.元素显示模式

6.背景

7.CSS的三大特性

8.盒子模型

9.浮动

10.CSS书写顺序

11.CSS定位

12.CSS高级技巧

三、HTML5新增特性

1.新增的语义化标签

2.视频标签

3.音频标签

4.新增input表单

5.新增表单属性

四、CSS3新增特性

1.新增属性选择器

2.新增结构伪类选择器-选择第n个元素

3.伪元素选择器

4.CSS3盒子模型

5.滤镜filter 让图片模糊

6.计算盒子宽度cacl

7.过渡

五.项目命名规范

1.网站favicon图标

2.网站TDK三大标签SEO化

3.常见模块类名命名

4.LOGO SEO优化

flex弹性盒子

相关文章