HTML+CSS

一 HTML

1-HTML:超文本标记语言

1.1是用各种标签组成的网页

1.2 超越文本的,有图片,有链接

2-Web 标准:

Web标准构成
主要包括结构,表现,行为
结构:结构用于对网页元素进行整理和分类,现阶段主要学的就是HTML
表现:表现用于设置网页元素的版式,颜色,大小等外观样式,主要指的就是CSS
行为:行为是指网页模型的定义及交互的编写,现阶段主要学习是的Javascript

3-常用标签

段落和换行标签

段落: <p></p>
换行标签: <br/>

文字格式化标签

4-<div>和<span>标签

div 一个div就会独占一行,相当于超大的盒子,h4标签也是独占一行
span 一行可以有多个span,相当于小的盒子

5-图像标签和路径

<img src="图片的URL"/>

alt 属性:图片不能显示时,就会替换会alt的文字

<img src="图片的URL"  alt="替换的信息写这里"/>

效果如下:

<img src="图片的URL"  alt="我是pink老师"/>

title: 提示文本,鼠标放在图像上,提示文字

<img src="图片URL" title="提示的文字"/>

效果如下

width: 宽度 width=“500” 默认就是像素
height: 高度 height=“500”
border: 边框的粗细

5.1 路径之相对路径

5.1 路径之绝对路径

一般指从盘符开始的路径
如:

C:\Users\admin\Desktop\个人笔记

6-超链接标签(重点)

1-超链接的语法格式

<a href="跳转目标" > </a>

2-链接分类:

2.1 外部链接

第二个属性:tartget=""
arget="_self"--在原本的窗口打开新的网页
target="_blank"--在新的窗口打开新的网页

2.2 内部连接

网站内部页面之间的相互链接

<a href="直接写这个页面的名称即可">公司简介</a>

2.3 空链接

网页还没确定链接目标是

<a href="#">这是一个空链接</a>

2.4 下载链接

<a href="文件的.exe或者是zip等压缩形式>下载文件</a>
如:
<a href="img.zip>下载文件</a>

2.5 网页元素链接

可以给图片,音频,表格,视频加超链接,

如 在a标签中包含一个图片标签,可以给这个图片增加一个超链接

<a href ="跳转的目标链接" ><img src="img.jpg"/>网页元素标签</a>

点击图片就会跳转到目标链接

2.6 锚点链接

当我们点击链接时,可以快速定位到页面中的某个位置

<a href="#jump"></a>

之后跳转到这个
<h3 id="jump"></h>

就是用超链接跳转到对应的id选择器上,

7-注释标签和特殊字符

7.1 注释标签

ctrl+ /

7.2 特殊字符

8-表格标签

8.1 表头标签

自带效果:加粗,居中

<th></th>

<table>
       <tr>
           <th>姓名</th>  <th>性别</th> <th>年龄</th>
      </tr>
</table>

8.2 表格标签属性

8.3 表结构标签

表头标签:代表表头区域,而 th 只是代表一个单元格的表头

<thead></thead>

表主体:除了表头结构,其他 tr 标签都可以用 tbody 标签 包含,这样搞结构更清晰

<tbody></tbody>

8.4 合并单元格

合并单元格的方式:
跨行合并: rowspan="合并单元格的个数"
跨列合并:colspan="合并单元格的个数"

目标单元格: (写合并代码)
跨行: 最上侧的单元格作为目标单元格,写合并代码
跨列: 最左侧的单元格作为目标单元格,写合并代码

合并单元格三步骤
1-先确定是跨行还是跨列合并,
2-找到目标单元格,写上合并方式,=合并单元格个数,比如: <td  colspan="2" ></td>
3-删除多余的单元格

9-列表标签

9.1 无序列表

定义:即列表不会按照一定的规则,顺序去排列定义

 <ul>
       <li></li>
 </ul>

 <ul>
       <li>A</li>
       <li>B</li>
       <li>C</li>
   </ul>
1．无序列表的各个列表项之间没有顺序级别之分，是并列的。
2. <ul><ul>中只能嵌套<li><li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。但是可以放<li>标签里
3. <li>与</li>之间相当于一个容器，可以容纳所有元素。
4．无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

9.2 有序列表

定义:即列表会按照一定的规则,顺序去排列定义

<ol>
	<li>A</li>
    <li>B</li>
    <li>C</li>
</ol>

9.3 自定义列表

自定义列表内容
使用场景如下

HTML中,<dl>标签用于定义描述列表(或者定义列表),该标签会与
<dt>(定义项目/名字)和<dd>(描述每一个项目名字/名字)一起使用.

1. <dl></dl>里面只能包含<dt>和<dd>。
2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>.

10-表单标签

10.1 为什么需要表单

使用表单的目的就是为手机用户的信息
日常使用场景一:

日常使用场景二:

10-2 表单的组成

在HMTL中,一个完整的表单通常由表单域,表单控件(表单元素)和提示信息3个部分构成.

10-3 表单域

表单域是一个包含表单元素的’区域
在HTML标签中,<from>标签用于定义表单域,已实现用户信息的手机和传递,<form>会把他范围内的表单元素提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
里面是表单元素控件
</form>

10-4 表单控件(表单元素)

1-<input></input>输入表单元素

2-<select></select>下拉表单元素

3-<textarea></textarea>  文本域元素

1-<input type=" "></input>输入表单元素

type 属性的属性值及其描述如下:

除了type属性外,input标签还有其他的很多的属性

<input type="text" name="username" value="请输入用户名">
<input type="text" name="username" value="请输入用户名">
<input type="text" name="username" value="请输入用户名">

2-下拉表单元素

<form name="date">
             <select name="year" onchange="selectYear(this.value)">
                        <option value="">选择 年</option>
             </select>
             <select name="month" onchange="selectMonth(this.value)">
                        <option value="">选择 月</option>
             </select>
              <select name="day" onchange="selectDay(this.value)">
                        <option value="">选择 日</option>
             </select>
</form>

3- 文本域元素

 <tr>
            <td>自我介绍: </td>
            <td>
                <textarea >自我介绍阿斯达四大所大所</textarea>
            </td>
        </tr>

11- lable标签

lable标签会绑定一个表单元素,当点击lable标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户的体验

语法:lable 标签要把点击的字体包含起来

语法1:
<lable for="sex"> 男</lable>
<input type="radio " id="sex" name="sex">




语法2:
<lable for="sex">
<input type="radio " id="sex" name="sex"> 男
</lable>

二 CSS

2.1 定义

CSS:网页的美容师,给网页修改样式的
语法

选择器{样式}
给谁该样式{改什么样式}


属性和属性值是以"键值对"的形式出现
如:
p { 
	color: red;
	font-size: 12px;
}

2.2 CSS选择器

2.2.1 标签选择器

标签选择器: 选中所有的此类标签
标签+{ 改成什么样式}

类选择器口诀:样式点定义,结构类(class)调用,一个或者多个,开发最常用.
自己定义一个class属性,然后再给这个类选择器进行修改样式
<head>
<style>
        .red{
           background-color: red;
       }
</style>
</head>
<body>  
    <div class="red">第3个</div>
</body>

2.3 类选择器

类选择器-多类名
定

第1个

第2个

第3个

第4个

义:我们可以给一个标签指定多个类名,从而达到更多的选择目的,这些类名都可以选出这个标签.简单理解就是一个标签有多个名字.

语法:

在定义class属性时,定义多个属性值,中间用空格隔开
如:
<div class="font20 man"></div>    ---这个标签就可以通过font20  或者 man 选到这个标签了

2.4.1

1-多类名使用方式

<head>
<style>
		.box{
           font-size: 12px;
       }
        .red{
           background-color: red;
       }
</style>
</head>
<body>  
    <div class="red  box">第3个</div>
</body>

1. 在标签class属性中写多个类名
2. 多个类名中间必须用空格分开
3. 这个标签就可以分别具有这些类名的样式

2-使用场景
1)可以把一些标签元素相同的样式(共同的部分)放到一个类里面.
2)这些标签都可以调用这个公共的类然后再调用自己独有的类.
3) 从而节省CSS代码,统一修改仑非常方便.

2.5 id选择器

2.5.1 定义:
id选择器可以为标有特定的id的HTML元素指定特定的样式.
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义.

2.5.2 口诀:
id选择器的口诀:样式#定义,结构id调用,只能调用一次,别的标签切勿使用(别的标签调用无用)

<head>
<style>
        #pink{
           background-color: red;
       }
</style>
</head>
<body>  
    <div id="pink">第3个</div>
</body>

2.5.3 id选择器和类选择器的区别

2.5.4 通配符选择器

*{
color:red
}

2.5.5 基础选择器总结

2.6 字体复合属性

简写时:
至少保留font-size,和 font-family属性

2.7文本属性

对齐方式

选好标签{ 定义文本属性,text-align: 属性值}
默认是左对齐

装饰文本
text-decoration

文本缩进
text-indent
用来指定文本的第一行的缩进,通常是将段落的首行缩进.

3 CSS的样式引入方式

3.1 内部样式表

位置:就是把标签style写在html的里面,理论上可以放在html任何地方,一般放在标签head里面
控制范围:控制整个页面的CSS

3.1 行内样式表

位置:写在某个要样式化标签的里面
控制范围:控制一个标签的样式

3.1 外部样式表```java

位置:就是把标签style写在html的里面,理论上可以放在html任何地方,
控制范围:控制多个页面的CSS

1- 先建立一个 .css文件

2- 需要样式的地方,使用link标签引入这个文件

<link rel="stylesheet" href="css文件路径">

4 CSS的样式引入方式

Emmet语法

快速生成HTML结构语法

快速生成CSS样式

5 CSS的复合选择器

5.1 复合选择器—后代选择器(重要)

元素1 + 空格 + 元素2{ CSS样式} 
上诉语法表示选择元素1里面的所有元素2(后代元素)--即是选择最后一个标签元素

只有一组父子级时

或者
有多组同样的父子级时

元素1和元素2中间用空格隔开
元素1是父级,元素2是子级,最终选择的是元素2
元素2可以是儿子,也可以是孙子等,只要是元素1的后代就行
元素1和元素2可以是任意基础选择器

5.2 子选择器(重要)

子元素选择器(子选择器)只能选择作为某元素的最近一级子元素.简单理解就是选亲儿子元素

元素1 > 元素2 {样式声明}
上诉语法表示选择 元素1 里面的所有直接后代(子元素)元素2

例如

注意

5.3 并集选择器(重要)

可以选择多组标签,同时为他们定义相同的样.通常用于集体声明

5.3 伪类选择器

伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第N个元素 .
伪类选择器书写最大的特点就是用冒号 : 表示,比如:hover, : first-child.
因为伪类选择器很多,比如有链接伪类,结构伪类等,所以这里先给大家讲解常用的链接伪类选择器.

<style>
选择未访问的链接 a:link {}
a: link {
}

选择点击过的(访问过的)链接 a: visited{}
a: visited {
}

选择鼠标经过时的链接 a: hover{}
a: hover{
}

选择正在点击鼠标的那个还没有弹起鼠标的那个链接 a: avtive{}
a: avtive{
}

</style>

注意事项:
1 . 为了确保生效,请按照LVHA的顺序声明:link :visited :hover :avtive
2 . 记忆法: LV 包包 好 或者 love hate.
3 . 因为a 链接在浏览器中具有默认样式,所以我们实际工作中都需要给链接单独指定样式

实际开发中的写法

   a是标签选择器 所有的连接
a{
	color: gray;//灰色
}
   : hover 是链接伪类选择器 鼠标经过时
a: hover{
	color: red;     鼠标经过时,由原来的灰色变成了红色
}

5.4 focus伪类选择器

把获得光标的input表单元素选择出来

input:focus{
	background-color: pink;
}

即 获得了光标就会获得样式

5.5 复合选择器的总结

三 CSS的元素显示模式

3.1 块元素

3.2 行内元素

3.4 行内块元素

3.5 元素显示模式总结

块级标签 

特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；

典型的块级标签有：<div> ，h系列，<li>，<dt>，<dd>，<p> ，<form>，<ul>

行内标签 

特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！

典型的行内标签有：<span>，<a>，<b>，<i>，<u>，<em>，<strong>，<label>，<br>

行内块标签 ：

特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；

典型的行内标签有：<img>，<input>

那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：

 

1、块级标签转换为行内标签：display:inline;----把标签切换成 不!!!  独占一行

2、行内标签转换为块级标签：display:block; ----把标签切换成独占一行,并且可以设置宽,高

3、转换为行内块标签：display：inline-block;

四 CSS

4.1 三大特性

1-层叠性:相同的选择器设置相同的样式,就会进行覆盖,覆盖原则: 哪个样式离结构近,就执行哪个
记忆口诀:长江后浪推前浪

2-继承性:子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承,以及color属性)
3-优先级:当同一个元素被多个选择器选中时,就会有优先级的产生.
选择器权重如下:

!important的用法优先级从低到高如:
快速写代码

快速格式化代码 保存以后自动格式化代码:

4.2文字居中—让文字的行高等于盒子的高度

文字居中的原理:

文字居中—让文字的行高等于盒子的高度

文字水平居中—text-align: center
文字垂直居中–line-height: 200px(行高等于盒子的高度就可以)
文字水平上下居中–text-align: center;line-height: 200px

实例演示:

<!DOCTYPE HTML>
<html lang="en">
<head>
 <title>html文字居中测试</title>
 <meta charset="UTF-8">
 <style type="text/css">
 body{background: #ddd;}
 div{width:300px;height:180px;margin:10px auto;color:#fff;font-size:24px;}
 .box1{background: #71a879;text-align: center;}
 .box2{background: #6a8bbc;line-height: 200px;}
 .box3{background: #dea46b;text-align: center;line-height: 200px;}
 </style>
</head>
<body>
<div  class="box1">html文字水平居中</div>
<div  class="box2">html文字垂直居中</div>
<div  class="box3">html文字水平上下居中</div>
</body>
</html>

以上代码效果在本地测试如下图：

4.3 CSS 背景总结

元素背景颜色半透明:

background-color:rgba(0,152,50,0.7);// -->70%的不透明度
 
background-color:transparent;支持完全透明

背景复合属性的写法

语法格式

background : background-color background-image background-repeat background-attachment background-position;

默认值

background: transparent none repeat scroll 0% 0%;


默认值(中文意思)


background: 透明 / 无背景图片 / 平铺 / 背景图片随文本滚动(不理解的一定要自己动手试一下) / 位于元素左上角

4.4 css的层叠性

如果说是某样式冲突了，比如下面的div样式，因为代码的执行顺序是由上往下，所以执行的样式 出现层叠要满足两个条件：
1-同一个目标冲突 （如：同一个div）
2-相同的CSS样式属性冲突 （这个div中的color被定义两次样式）
会显示style的最下面的样式
但是其他的属性不冲突(如下:第一个div的颜色冲突了被后面的覆盖了,但是第一个定义的字体大小没有冲突所以样式会被正常应用上)

网页显示如下:

4.5 css的继承性

1-子标签是继承父标签的某些样式,如文本颜色和字号,
2-可以继承的样式(text-,font-,line-这些开头的可以继承,以及color属性)

4.5.1 行高的继承性

4.5 权重的优先级

4.6 盒子模型的组成

4.7 盒子模型内边距–padding

paddding:5px;	1个值,代表上下左右都有5像素的内边距
paddding:5px 10px;	2个值,代表上下内边距是5像素,左右内边距是10像素
paddding:5px 10px 20px;	3个值,代表上内边距5像素,左右内边距10像素,下内边距20像素
paddding:5px 10px 20px 30px;	4个值,代表上是5像素,右10像素,左20像素,左是30像素,顺时针
内容和边框有了距离(padding),添加了内边距	padding影响了盒子的实际大小,也就是说如果盒子已经有了宽度和高度,此时在制定内边框,会撑大盒子

但是以下情况,添加padding不会 撑开盒子大小
如果盒子本身没有指定width/height属性,则此时padding不会撑开盒子大小;

4.8 盒子模型外边距–margin

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距
给值的时候和padding一致	1个值–上下左右;两个值是:第一个是上下,第二值是:左右;三个值是:上,左右,下;四个值:上,右,下,左,(顺时针)

4.8.1 外边距典型应用–块级盒子水平居中

外边距可以让块级盒子水平居中,但是必须满足两个条件:

1.盒子必须指定了宽度(width)
2.盒子左右的外边距都设置为auto

如:
   .header{width:960px;margin:0 auto}

以下三种常见的写法都可以:

• margin-left:auto;margin-right:auto;
• margin-auto;
• margin:0 auto;

4.8.2 外边距典型应用–行内元素或者行内块元素水平居中

给其父元素添加:text-align:center 即可

如:要给图片水平居中


<style>
	/*给其父元素添加:text-align:center 即可*/
	.header{
		text-aligin:center;
	}
</style>

<body>
	<div class="header">
		<span>里面的文字</span>
	</div>
 	<div class="header">
		<img src="down.jpg" alt="">
	</ div>

</body>

4.8.3 外边距合并-嵌套块元素塌陷

解决方案:
1.可以为父元素定义上边框
2.可以为父元素定义上内边距
3.可以为父元素添加overflow:hidden

4.8.4.清除网页默认的内外边距

这句话一般都是CSS的第一句话

* {
	padding:0;
	margin: 0;
}
注意:行内元素为了照顾兼容性,尽量值设置左右外边距,不要设置上下内外边距,但是转换为块级和行内块元素就可以了

4.9 圆角边框

语法: border-radius:length;
如:
border-radius:20px;

4.10 盒子阴影

box-shadow:0  0  0  0 rgba(0,0,0,0.3);
前面四个零分别是:水平方向 垂直方向,水平的模糊距离,垂直的模糊距离,注意后面是:rgba   有 "a" !!  rgba里面是逗号隔开

4.11 斜杠,竖分割线

代码: <em>|</em>---这里的 "|" 不加css样式 还是倾斜的

效果:

加了以下css就会变为竖分割线:
em{
    font-style:normal
}

效果

四.浮动

多个块级元素纵向排列 找标准流,多个块级元素横向排列找浮动

定义: float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

浮动特性:(重难点)
1.脱离标准普通流的控制(浮)并移动到指定位置(动) 俗称(脱标)
2.浮动的盒子不再保留原先的位置

为啥有时候要清除浮动:
因为浮动后,不占空间,会出现层叠现象
如:背景色粉红色是div应该独占一行,但是这些绿色的 li 添加了浮动. 所以出现这种层叠情况

如何清除浮动
1-先在css样式定义样式

.clearfix: before,.clearfix: after {
	content: "";
	display :table;
}
.clearfix: after {
	clear : both;
}
.clearfix{
	*zoom: 1;
}

2-然后再在这个浮动的元素的 父元素 添加 class=“clearfix”

五 页面布局思路

1. 必须确定页面的版心,布局时通常有以下的整体思路:
2. 分析页面中的模板,以及每个行模块中的列模块,遵循页面布局第一准则(标准流:竖)_.
3. 一行中的列模块经常浮动布局,先确定每个列的大小,之后确定列的位置,页面布局第二准则(浮动:横)
4. 先有结构,后有样式.结构永远最重要

六6.1 头部制作

实际开发中,我们不会直接用链接a,而是用li 包含链接( li + a )的做法.

 1. li +  a 语义更清晰,一看就是有条理的列表内容
 2. 如果直接用a ,搜索引擎容易识别为有堆砌关键字嫌疑,(故意堆砌关键字容易被搜索引擎有降权的风险,从而影响网址排名)

七 定位

7.1 定位的组成

定位:将盒子定在某一个位置,所以定位也是在摆放盒子,按照定位的方式移动盒子,
定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式.边偏移则决定该元素的最终位置.

7.2.定位模式

7.2.1 定义:

7.2.2 语法:

选择器{
	position: fixed;
}

7.2.3 总结:

7.3.1 静态定位

`在这里插入代码片`

7.3.2 相对定位(relative)

想对定位(relative): 不会脱标,原先的位置会保留 不会被其他元素占用

7.3.3 绝对定位(absolute)

绝对定位的特点:(务必记住)
1．如果没有祖先元素或者祖先元素没有定位，则以浏览器为准定位( Document文档)。
2．如果祖先元素有定位(相对、绝对、固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3．绝对定位不再占有原先的位置。（脱标）

绝对定位(absolute): 会脱标,原先的位置 会被其他元素占用

7.3.4 固定定位(fixed)

1-以浏览器的可视化窗口固定位置.
2-原先的位置会被占用,

7.3.5 粘性定位(Sticky)

1-定义:可以被认定是相对定位和固定地位的混合体 Sticky:粘性的
语法:

选择器 {
	position: sticky; 
	top: 10px;
}

2-粘性定位的特点:
2-1 以浏览器的可视化窗口为参照点移动元素(固定定位也是这个特点)
2-2 粘性定位占有原先的位置(相对定位特点)
2-3 必须添加 top,left,right,bottom其中一个才有效
(跟页面滚动搭配使用).兼容性较差,IE不支持.

7.4 子绝父相

7.6 边偏移

7.7 绝对定位的盒子剧中居中算法

1-left 走50%,父容器的一半
2-margin:负值 (往左边走) 自己的盒子宽度的一半
如:

postition: absolue;
left:50%;
margin-left:-100px;
width:200px;
height:200px;

八 网页布局总结

通过盒子模型,清除知道大部分html标签是一个盒子
通过CSS浮动,定位可以让每个盒子排列成网页
一个完整的网页,是标准流,浮动,定位一起完成布局的,每个都有自己的专门用法,
1- 标准流
可以让盒子上下排列或者左右排列,垂直的块级盒子显示就用标准布局
2- 浮动
可以让多个块级元素一行显示或者左右对齐盒子,多个块级盒子水平显示就用浮动布局
3- 定位
定位最大的特点是有层叠的概念,就是可以让多个盒子前后叠压来显示.如果要想元素自由在某个盒子内移动就用定位布局.

九 元素的显示与隐藏

9.1 display 属性

display 属性用于设置一个元素应如何显示

display:none;隐藏对象
display:block;除了转换为块级元素之外,同时还有显示元素的意思.

display隐藏元素后,不再占有原来的位置.,后面应用及其广泛,搭配JS可以做很多的网页特效

9.2 visibility 可见性

visibility:inherit(默认)|visible|collapse|hidden
参数:
inherit: 继承上一个父对象的可见性
visible: 对象可视
hidden: 对象隐藏
collapse: 主要用来 隐藏表格的行或列,隐藏的行或列能够被其他内容使用.对于表格外的其他对象,起作用哦等用于hidden.IE5 .5尚不支持此属性

9.3 overflow 溢出

语法：

overflow : visible | auto | hidden | scroll 

参数：

visible : 　不剪切内容也不添加滚动条。假如显式声明此默认值，对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效 
auto : 　此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条 
hidden : 　不显示超过对象尺寸的内容
scroll : 　总是显示滚动条

十 CSS 高级技巧

10.1 精灵图

定义: 就是好多张背景图 放进同一张大的背景图里面,然后用backgroup-position: X Y; 去我们想要展示的背景图对应到盒子上.其实底下是一整张背景图,但是我们看到的知识盒子那区域显示的图.

10.2 字体图标

10.2.0 字体图标的引入

常用免费图标网址:

国外:
https://icomoon.io

国内:
https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.4

10.2.1 把下载的压缩包里面的fonts文件夹放入页面的根目录下(我们写的页面在哪个文件夹,就把fonts放在那个文件夹下)

ps:fonts里面有四个格式的字体文件–保证兼容性

10.2.2 把压缩包里面的style.css的部分代码引入页面

引入这一段到页面当中

如下:

10.2.3打开压缩包里面的demo.html 找到代表图标的符号

复制图中的特殊字符,然后放进一个盒子

10.2.4 给对应的盒子定义—“font-family:”

重点是:盒子的"font-family" 一般都是和第二步引入的CSS样式定义中的 fonts-family 是一样的.

效果如下

1号,2号,颜色,大小 要自己定义,3号就是没有定义颜色和大小原图标

10.2.5 字体图标的追加

如果我们想在项目里面添加新的图标,但是之前的图标也要保留,怎么添加?

1-重新打开图标的网址,找到这个东西

2-然后再弹出的窗口中选择并打开我们之前下载的文件夹里面的selelction.json

之后再从新下载导入就可以了

10.3 CSS的三角制作

三角形的代码:其实就是用边框先去做三角形 ,然后用父盒子装着,利用父相子决调整位置即可,调整的时候就是要是三角在上的话,就是边框的两倍或者负两倍

 			width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: rgb(212, 129, 129);

事例:

代码:

<!DOCTYPE html>
<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>CSS三角的制作</title>

    <style>
        .jd {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: rgb(212, 129, 129);
            margin-top: 100px;
        }

        .jd span {
            position: absolute;
            top: -20px;
            right: 10px;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            border: 10px solid transparent;
            border-bottom-color: rgb(212, 129, 129);
        }
    </style>
</head>

<body>
    <div class="jd">
        <span></span>
    </div>
</body>



</html>

10.4 鼠标样式 cursor

10.4 用户界面样式-表单轮廓和防止拖拽文本域

10.4.1 取消轮廓线

给表单添加ouline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边框

input{outline:none;}

10.4.2 防止拖拽文本域 resize

为防止用户拖拽文本域,致使界面用样式错乱,所以都会设定文本域取消拖拽.

textarea {
	resize:none;
}

10.5 vertical-align 实现行内块和文字的垂直居中

首先要知道文字和图片在盒子中是怎么站位的

默认是这样的样式

是以基线对齐,所以并没有实现垂直居中,

要想图片和文字同时,垂直居中我们只需要把这个图片加上样式

img{
	vertical-align:middle;
}

事例

页面显示

10.6 解决图片底部默认空白缝隙问题

bug:图片底侧会有一个空白缝隙,原因是行内块元素会和文字的基线对齐.
主要有两种解决方案:
1.给图片添加 vertical-align:middle| top | bottom 等.(提倡使用的)
2.把图片转换为块级元素:dispaly:block;

10.7 单行文字溢出显示省略号–必须满足三个条件

/*1．先强制一行内显示文本*/
white-space: nowrap;(默认normal自动换行)
/*2．超出的部分隐藏*/
overflow: hidden;
/*3．文字用省略号替代超出的部分*/
text-overflow : ellipsis;

10.8 多行文本溢出显示省略号

1-给盒子加入以下代码

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

2-之后再把盒子调整为合适的固定高度

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少个字，操作更简单。

10.9 常见布局技巧

1. margin 负值运用
   
   实际开发中,让每个li元素浮动后,会让贴合的边框变粗,
   所以让每个盒子margin 往左侧移动 -1px 移动 ,正好压住相邻盒子的边框

2. 鼠标经过某个盒子的会后,提高当前盒子的层级即可,(如果没有定位,则在xxx:hover中添加相对定位,如果有定位,就用z-index :1; 就能压住其他的图层样式(其他的定位默认是z-index:0))

2.1 这个是第一种 其他的元素没有加定位的

<!DOCTYPE html>
<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>margin负值的巧妙运用</title>
    <style>
        ul li {
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        ul li:hover {
            position: relative;
            border-color: royalblue;

        }
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

第二种 其他元素有加定位的,则利用z-index提高层级即可

<!DOCTYPE html>
<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>margin负值的巧妙运用</title>
    <style>
        ul li {
            position: relative;
            float: left;
            list-style: none;
            width: 150px;
            height: 200px;
            border: 1px solid red;
            margin-left: -1px;
        }

        /* 这是第一种 */
        /* ul li:hover {
            position: relative;
            border-color: royalblue;

        } */
        /* 这是第二种方式 */
        ul li:hover {
            z-index: 1;
            border-color: royalblue;
    </style>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>

</html>

10.10 三角形的强化–不等腰直角三角形

width: 0;
height: 0;
line-height: 0;
font-size: 0;
/*把上边框宽度调大*/
/* border-top: 100px solid transparent;border-right: 5opx solid skyblue;*/
/*左边和下边的边框宽度设置为*/
/* border-bottom: 0 solid bLue;border-Left: 0 solid green;*/
/*1.只保留右边的边框有颜色*/
  border-color: transparent rgb(55, 63, 114) transparent transparent;
/* 2．样式都是soLid */
border-style: solid;
/*3．上边框宽度要大，右边框宽度稍小，其余的边框该为0*/
border-width: 24px 10px 0 0;

事例-做以下页面

代码如下

<!DOCTYPE html>
<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>CSS三角的制作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .price {
            text-align: center;
            width: 180px;
            height: 24px;
            border: 1px solid red;
            margin: 100px auto;
        }

        .miaosha {
            position: relative;
            float: left;
            height: 100%;
            width: 100px;
            background-color: red;
        }

        .miaosha i {
            position: absolute;
            right: 0;
            width: 0;
            height: 0;
            line-height: 0;
            font-size: 0;
            /*把上边框宽度调大*/
            /* border-top: 100px solid transparent;border-right: 5opx solid skyblue;*/
            /*左边和下边的边框宽度设置为*/
            /* border-bottom: 0 solid bLue;border-Left: 0 solid green;*/
            /*1.只保留右边的边框有颜色*/
            border-color: transparent #fff transparent transparent;
            /* 2．样式都是soLid */
            border-style: solid;
            /*3．上边框宽度要大，右边框宽度稍小，其余的边框该为0*/
            border-width: 24px 10px 0 0;
        }

        .origin del {
            color: rgba(0, 0, 0, 0.459);
        }
    </style>
</head>

<body>
    <div class="box1">

    </div>
    <div class="price">
        <span class="miaosha">￥1650.00
            <i></i>
        </span>
        <span class="origin"><del>￥6650.00</del></span>
    </div>
</body>

</html>

十一 html5 新语义

11.1 视频播放标签

<video src="文件地址" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>

<!DOCTYPE html>
<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>H5视频标签</title>
    <style>
        div {
            text-align: center;
            margin: 100px auto;
        }
        video {
            display: inline-block;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
    <div>
        <video src="/第十天/media/7f.mp4" autoplay="autoplay" muted="muted" controls="controls" loop="loop"></video>
    </div>
</body>
</html>

11.2 音频播放标签

语法:

<audio src="文件地址" controls="controls"></audio>

11.3 视频,音频 总结

11.4 表单的标签的类型

<!DOCTYPE html>
<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>HTML新增表单input</title>
    <style>
        ul li {
            list-style: none;
            margin-top: 10px;
        }
        form {
            border: 1px solid;
            width: 400px;
        }
    </style>
</head>
<body>
    <form action="">
        <ul>
            <li>邮箱:<input type="email"></li>
            <li>网址: <input type="url"></li>
            <li>日期: <input type="week"></li>
            <li>时间: <input type="time"></li>
            <li>数量: <input type="number"></li>
            <li>手机号码: <input type="tel"></li>
            <li>搜索: <input type="search"></li>
            <li>颜色: <input type="color"></li>
            <li>提交:<input type="submit"></li>
        </ul>
    </form>
</body>
</html>

11.4 HTML5 新增的表单属性

属性	值	说明
required	required	表单拥有该属性表示其内容不能为空,必填
placeholder	提示文本	表单的提示信息,存在默认值将不显示,
autofocus	autofocus	自动聚焦属性,页面加载完成自动把光标聚焦到此表单
autocomplete	off/on	当用户在字段开始键入时,浏览器会提示之前成功提交过的值.但是得满足两个条件:1-autocomplete=“on” 需要放在表单内,2-name属性有值,同时成功提交此属性 ,autocomplete是默认打开的
multiple	multiple	在input是文件提交类型时候,可以变为多选文件

可以通过以下设置方式修改placeholder里面的字体颜色∶

input:placeholder {
	color: pink;
}

11.5 CSS3新增的选择器

11.5.1 属性选择器

选择符	简介
E[att]	选择具有att属性的E元素
E[ att="val]	选择具有att属性且属性值等于 val的 E元素
E[ att^="val]	匹配所有具有att属性且以val开头的 E元素
E[att$=“val” ]	匹配具有att属性值且以val结尾的 E元素
E[ att*=“val”]	匹配具有att属性且值中含有val的E元素

11.5.2 结构伪类选择器

选择符	简介
A E:first-child	匹配父元素 A 中的第一个子元素E
A E:last-child	匹配父元素 A 中的最后一个子元素E
A E:nth-child	匹配父元素 A 中的第n个子元素E ,n 可以是数字,关键字,也可以是公式,如果n是数字,就是选择第n个子元素,里面数字从1开始,如果是关键字:even 偶数,odd:奇数,n 所有的孩子
A E:first-of-type	指定类型 E 的第一个
A E:last-child	指定类型 E 的最后一个
A E:nth-of-type(n)	指定类型E 的第n个

nth-child(1) 和 nth-of-type(1)的区别

区别:
1-nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
2-nth-of-type 对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子

代码演示:

以下代码--要选中第一个p标签
<section>
        <p>光头强</p>
        <div>熊大</div>
        <div>熊二</div>
    </section>

section div:nth-child(1){
	这个选择器,选不到
	--因为这个选择器是先执行nth-child(1)--找到section的孩子:p,div1, div2,并编号,则p就是第一个孩子,之后再匹配div:nth-child(1)中的div,结果人家是p 不是div,所以选不上
}
section div:nth-of-type(1){
	这个是选择器可以选到--
	因为这个选择器是先找到孩子当中所有的div,然后再找到这群孩子的第一个div
}

n可以搭配的公式有:

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

小结:

• 结构伪类选择器一般用于选择父级里面的第几个孩子
• nth-child对父元素里面所有孩子排序选择（序号是固定的）先找到第n个孩子，然后看看是否和E匹配
• nth-of-type对父元素里面指定子元素进行排序选择。先去匹配E，然后再根据E找第n个孩子
• 关于nth-child ( n)我们要知道n是从О开始计算的，要记住常用的公式
• 如果是无序列表，我们肯定用nth-child更多
• 类选择器、属性选择器、伪类选择器，权重为10。

11.5.3 伪元素选择器(重点)

11.5.3.1 伪元素的作用:

伪元素选择器可以帮助我们利用CSS创建标签元素,而不需要HTML标签,从而简化HTML结构.

选择符	简介
::beforn	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

代码演示:

<!DOCTYPE html>
<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>伪元素选择器</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgb(128, 122, 122);
        }

        div::before {
            display: inline-block;
            width: 40px;
            height: 40px;
            content: '我';
            background-color: rgb(148, 73, 73);
        }

        div::after {
            content: '小猪佩奇';
        }
    </style>
</head>

<body>
    <div>
        是
    </div>
</body>

</html>

页面显示如下

11.5.3.2 注意

• before 和 after创建一个元素,但是属于行内元素
• 新创建的 这个元素在文档树中(在浏览器F12中找不到该该元素的)是找不到的,所以我们称为伪元素.
• 语法:element::before{ }
• before 和 after 必须有content 属性
• before 在父元素内容的前面创建元素,after 在父元素内容的后面插入元素

11.5.3.3 伪元素选择器的使用场景1:伪元素字体图标

1- 先从图标库中找到下拉三角,然后利用::before的content属性加入图标的特殊字符,然后就是图标的引入操作(忘了可以回看图标的引入)
2-图标引进去后,再用父相子决定位 去调整位置就可以

11.5.3.4 伪元素选择器的使用场景2:视频播放时候的遮罩

1-给放视频的土豆盒子的before伪元素定义好

2-当我们的鼠标经过 土豆这个盒子,就让遮罩层伪元素显示出来
(.tudou:hover::before, 里面不能有空格)

代码如下

<!DOCTYPE html>
<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>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .tudou {
            position: relative;
            height: 200px;
            width: 500px;
            background-color: rgb(219, 192, 192);
            line-height: 200px;
            margin: 0 auto;
        }
        .tudou img {
            width: 100%;
            height: 100%;
        }

        .tudou::before {
            position: absolute;
            content: '';
            display: none;
            width: 100%;
            height: 100%;
            background: url(/第八天/images/ico.png) no-repeat center rgba(122, 43, 43, 0.4);
        }
        .tudou:hover::before {
            display: block;
        }
    </style>
</head>
<body>
    <div class="tudou">
        <img src="/第八天/images/bj.png" alt="">
    </div>
</body>

</html>

页面显示如下

鼠标未经过时

鼠标经过时

11.5.3.5 伪元素选择器的使用场景3:伪元素清除浮动

如何清除浮动
1-就是在浮动的元素后面(推荐)或者前面添加一个块级盒子,然后加入核心代码:clear:both

方式1 :在CSS中定义清除浮动代码,再给父盒子伪元素添加 “clearfix” 类选择器

方式2 闭合清除浮动法

这里的display:table; 就是闭合after和before时,这两个转换为块级的时候就都会独占一行, table 的作用就是转换为块级盒子并且不独占一行

十二 css3 新特性

12.1 盒子模型

CSS3中可以通过box-sizing来指定盒模型，有2个值:即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。
可以分成两种情况︰

1. box-sizing:content-box盒子大小为width + padding + border (以前默认的)
2. box-sizing: border-box盒子大小为width
   如果盒子模型我们改为了box-sizing: border-box ，那padding和border就不会撑大盒子了（前提padding和border不会超过width宽度)

所以开发的时候一般CSS都是首个样式都会这么写

12.2 CSS3过渡效果

口诀:谁做过渡,给谁加 transition

transition:要过渡的属性(两个以上的要用逗号隔开) 过度时间 运动曲线 何时开始;

1-属性,想要变化的CSS属性,宽度,高度,背景颜色,内外边距都可以,如果想要所有属性都变化,就写一个all 就可以
2-话费的时间:单位是 秒 (必须写单位) 比如 0.5s
3-运动曲线: 默认是ease (可以省略)
4-何时开始:单位是 秒 (必须写单位) 可以设置延迟触发时间 默认是0秒 (可以省略)

十三 网站的制作

13.1 网站的制作流程

13.2 需要创建的文件夹及文件

13.3 京东css初始化代码(base.css) 适合商城类页面开发

/*清除元素默认的内外边距  */
* {
    margin: 0;
    padding: 0;
    /* css3的盒子模型 */
    box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {
    font-style: normal;
}
/*去掉列表前面的小点*/
li {
    list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
    border: 0;  /*ie6*/
    vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
    cursor: pointer;
}
/*取消链接的下划线*/
a {
    color: #666;
    text-decoration: none;
}

a:hover {
    color: #e33333;
}

button,
input {
    font-family: 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    /* 默认有灰色边框,和聚焦时候有蓝色边框变化效果我们需要去掉 */
    border: 0;
    outline:none;
}

body {
    background-color: #fff;
    font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
    color: #666
}

.hide,
.none {
    display: none;
}
/*清除浮动*/
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

13.4 样式的模式化开发

如:

13.4.1 如何添加自己的网站favicon 图标

13.4.2 制作favicon图标

1-先找到自己想要的favicon图片,(png或者jpg都可以)
2-去到这个网址上传这个图片并转换为.icon格式图片

https://www.bitbug.net/

3-生成以后把这个图片放大到页面的根目录上,之后在首页的html的头部引入

<link rel="shortcut icon" href=".ico的所在目录地址" />

之后刷新一下就能看到

13.5 网站TDK三大标签SEO优化–增加排名的

1-title 标题:

具有不可替代性,是我们内页的第一个重要标签,是搜索引擎了解网页的入口和网页主题归属的最佳判断点
建议命名格式:网站(产品名)-网站的介绍(尽量不要超过30个汉字)
例如:

<title>品优购 - 网上商城 - 正品低价、品质保障、及时发货、快乐购物！</title>

• 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物!小米商城
• 小米5s、红米Note 4、小米MIX、小米笔记本官方网站

2- description 网站说明:
简要说明我们网站主要是做什么的
我们提倡,description 作为网站的总体业务和主题概括,多采用,“我们是…”,"我们提供… "“xxx网站作为…” "电话:00101…"之类的语句
例如:

<meta name="description" content="京东JD.COM-专业的综合网上购物商城销售家电、数码通讯、电脑.家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!"/>

3- keywords 关键字:
是页面的关键字,是搜索引擎的关注点之一.
keywords 最好限制为6~8个关键字,关键字之间用应为逗号隔开,采用关键字1,关键字2的形式

例如:

<meta name="keyword" content="网上购物,网上商城,服饰,母婴,品优购">

13.5.1 LOGO SEO 优化

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