前端Web学习笔记（CSS+html）

前端Web学习笔记

第一天

html标签：分为单标签和双标签，双标签有开始标签和结束标签，一般为<>***的格式

html基本骨架：html,head(网页头部，输入css)，title(标题，一般为菜单栏显示名称),body(文字，图片)

标签关系:父子关系（嵌套，子集标签换行且缩进），兄弟关系（并列）

注释：形象为“<! — * —>的样子，ctrl+l生成

标题标签：

<h1>
    一级标签哦
</h1>

有1-6级标签，独占一行，行与行之间有间隙。

段落标签：

<p>
    段落哦
</p>

独占一行，段落之间有间隙。

换行标签和水平线标签（单标签）

<br>我是换行
<hr>我是水平线

文本格式化

<strong>我是加粗</strong>		<b>我也是加粗</b>
<em>倾斜</em>		<i>倾斜</i>
<ins>下划线</ins>		<u>下划线</u>
<del>删除线</del>		<s>删除线</s>

左边标签自带强调含义（语义上），左边较为重点。

图像标签

<img src="图片的URL">

图片的URL含义:图像的位置与名称。相对路径为“./xxxx”

属性	作用	说明
alt	替换文本	图像无法显示时候显示的文字
title	提示文本	鼠标悬停时候显示的文字
width	图片宽度	值为数字，没有单位【等比缩放】
height	图片高度	值为数字，没有单位

属性写在尖括号内，标签名后，标签名和属性之间用空格隔开，不区分先后顺序。

相对路径和绝对路径

• 相对路径： 从当前文件位置出发查找目标文件。找自己电脑的文件一般用相对路径
• 绝对路径：从盘符【C:/ D:/…】出发查找目标文件。一般用于友情链接。

./：当前文件夹【相对路径】

../：当前文件夹的上一级文件夹【相对路径】

C:/img/xx.jpg：绝对路径，win默认为\，建议一致写为/

超链接标签

<a href="www.baidu.com">跳转到百度</a>
<a href="./01.html">跳转到01html文件</a>

超链接标签的属性

target=”_blank”:意思是点击之后会新开一个窗口，如果不加这个属性则会覆盖原来的窗口直接转到新窗口。

开发初期不知道超链接跳转地址，一般在href里面写#，意思为空连接

多媒体标签

<audio src="音频的URL"></audio>

属性	作用	特殊说明
src[必须属性]	音频URL	支持MP3,ogg,wav
controls	显示音频控制面板
loop	循环播放
autoplay	自动播放	一般不开

html5里面，属性名和属性值完全一致，可以简写为一个单词

<video src="视频的URL"></video>

属性	作用	特殊说明
src[必须属性]	视频URL	支持mp4,WebM,Ogg
controls	显示控制面板
loop	循环播放
muted	静音播放
autoplay	自动播放	必须和muted搭配使用

第二天

列表

无序列表

<ul>
    <li>第一列</li>
    <li>第二列</li>
    <li>第三列</li>
</ul>

ul标签里面只能包含li标签,li标签里可以包裹任何内容。

有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ol>

ul标签里面只能包含li标签,li标签里可以包裹任何内容。

定义列表(一般用在网页底部)

<dl>
    <dt>标题</dt>
    <dd>列表描述/详情</dd>
</dl>

dl里面只能包含dt和dd，dt和dd里面可以包含任何内容。

表格

<table border="1">
    <caption>我是表格标题</caption>
    <thead>
    <tr>
    	<th>姓名</th>
        <th>语文</th>
        <th>数学</th>
    </tr>
    </tbody>
    <tr>
    	<td>张三</td>
        <td>99</td>
        <td>99</td>
    </tr>
</table>

标签名字	说明
table	表格
tr	行
th	表头单元格
td	内容单元格

在网页里表格默认没有边框线。使用border属性可以为表格加线。

表格结构标签（了解）

标签名	含义	特殊说明
thead	表格头部	表格头部内容
tbody	表格主体	主要内容区域
tfoot	表格底部	汇总信息区域

表格结构标签加入之后人眼观察表格不会变化，是为了让结构更加清晰所以加入，可以不写

合并单元格

作用：将多个单元格合并成一个单元格，以合并同类信息。

合并单元格的步骤：

1. 明确合并的目标
2. 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
   • 跨行合并，保留最上单元格，添加属性 rowspan
   • 跨列合并，保留最左单元格，添加属性 colspan
3. 删除其他单元格

<table border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>语文</th>
      <th>数学</th>
      <th>总分</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>99</td>
      <td rowspan="2">100</td>
      <td>199</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>98</td>
      <!-- <td>100</td> -->
      <td>198</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>总结</td>
      <td colspan="3">全市第一</td>
      <!-- <td>全市第一</td>
      <td>全市第一</td> -->
    </tr>
  </tfoot>
</table>

注意：不能跨表格结构标签合并单元格（thead、tbody、tfoot）。

表单

作用：收集用户信息

input标签

<input type="…">

type 属性值	说明
text	输入单行文本
password	密码框【输入什么都是点点点】
radio	单选框【如选择是或否，点击的按钮】
checkbox	多选框
file	上传文件

input标签占位文本

占位文本：提示文本

<input type="…" placeholder="请输入用户名">

单选框radil属性

属性名	作用	特殊说明
name	控件名称	控件分组，同组只能选中一个（单选）
checked	默认选中	属性名和属性值相同，简写为一个单词

<input type="radio" name="gender" checked>男
<input type="radio" name="gender" >女

file属性

<input type="file" multiple>

加入multiple之后可以上传多份文件

多选框

有checked属性，和上面一样是默认选中。

下拉菜单

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option selected>4</option>
</select>

标签：select嵌套option,select为下拉菜单整体，option为选项。selected默认选中。

文本域

作用:输入多行文本的表单控件

<textarea>默认提示文字</textarea>

右下角有拖拽一般禁用，用css设置尺寸。

label标签

作用：标签说明文本。用label绑定文字和表单控件，增大表单控件的点击范围。（意思就是不用专门去点击选项，点击文字一样能选中）

写法1：

<input type="radio" id="man">
<label for "man">男</label>

写法2：

<label><input type="radio">女</label>

适用范围：文本框，密码框，上传文件，单选多选，文本域……

按钮-button

<button type="">按钮</button>

type属性值	说明
submit(默认)	提交按钮，点击之后可以提交数据到后台
reset	充值按钮，点击之后将表单恢复到默认值（配合form使用）
button	配合JavaScript使用，默认没有功能

<form action="">
    用户名:<input type="text">
    密码:<input type="password">
    <button type="">重置</button>
</form>

这样按reset才能重置。action为传数据到后台。

无语义布局标签

作用：布局（划分网页，摆放区域等）

• div：独占一行（大盒子）
• span：不换行（小盒子）

<div>
    独占一行
</div>
<span>标签，不换行</span>

字符实体

作用：在网页中显示预留字符

显示结果	描述	实体名称
	空格	&nbsp分号
<	小于	&lt分号
>	大于	&gt分号

在这里面打分号会自动变成小于大于号救命啊都是由&开头;结尾

第三天

初试css

书写位置：title下方添加style双标签里面书写css

<title>我的css初体验</title>
<style>
    /*选择器{}*/
    <!-- 我在这里美化p标签 -->
    p{
        /*css属性*/
        color:red;
    }
</style>
<p>体验css</p>

css书写规则：选择器{属性名:属性值;}

引入css：

• 内部样式表（如上面那样）：学习使用

• 外部样式表：开发使用

  • css写在.css文件中，在title后面用link引入：

  • ```html
    

    - 行内样式：配合JavaScript使用
    
      - ```html
        <div style="color:red; font-size:20px">
            这是div标签
        </div>

选择器

标签选择器：选中同名标签设置相同的样式，例如：p,h1,div,a,img……

类选择器：

作用：查找标签，差异化设置标签的显示效果。

步骤：

• 定义类选择器：.类名
• 使用类选择器→标签添加class=”类名”

<style>
    .red{
        color: red;
    }
    .font{
        font-size: 50px;
    }
</style>
<div class="red">这是红色的</div>
<div>这是黑色的</div>
<p class="red font">我也是红色的还是字体加大的</p>

一个标签可以有多个类名，用空格隔开

id选择器

作用：配合js使用，用来查找标签，差异化设置标签的显示效果。

步骤：

• 定义id选择器→#id名
• 使用id选择器→标签添加id=”id名”

#red{
	color: red;
}
<div id="red">红色的字</div>

通配符选择器

作用：全局更改所有标签，设置相同样式

形式：

*{
	color: red;
}

一般用在清除标签自带属性

画盒子

属性	作用
width	宽度
height	高度
backgroud-color	背景颜色

文字修饰属性

描述	属性
字体大小	font-size
字体粗细	font-weight
字体倾斜	font-style
行高	line-height
字体族	font-family
字体复合属性	font
文本缩进	text-indent
文本对齐	text-align
修饰线(下划线上划线删除线)	text-decoration
颜色	color

字体大小

p{
	font-size: 30px;
}

px为像素的意思，必须带单位。谷歌浏览器文字默认像素为16px

字体粗细

• 数字（开发常用）：正常400，加粗700
• 关键字（了解）：正常normal，加粗bold

font-style

属性值：正常normal倾斜italic

行高

属性值：数字+px，或者直接写数字（为font-size属性值的倍数）

行高测量方法：一行文字最顶端到下一行文字最顶端

字体族

属性值：字体名。如：font-family: 楷体;

拓展：font-family属性值可以书写多个字体名，用逗号隔开，执行顺序从左到右。最好最后设置一个字体族名，网页开发建议使用无衬线字体【没有笔锋】

font

div{
	/ * font: 是否倾斜 是否加粗 字号/行高 字体;*/
	font: italic 700 30px/2 楷体;
}

使用场景：设置网页公共样式。字号和字体必须写不然font属性不生效

文本缩进

属性值：数字+px或者数字+em（1em＝当前标签的字号大小）

text-indent: 2em;（首行缩进两字符）

文本对齐&图片对齐

属性值：left左对齐（默认），center居中对齐，right右对齐。

调整的是内容的对齐方式，不是标签的位置。

修饰线

可以去掉下划线，比如超链接取消下划线。

属性值	效果
none	无线
underline	下划线
line-through	删除线
overline	上划线

文字颜色（认识就行）

颜色表示方式	属性值	说明	使用场景
颜色关键字	颜色英文单词	red、grenn…	学习测试
rgb	rgb(r,g,b)	0-255	了解
rgba	rgba(r,g,b,a)	a为透明度，取值0-1	实现透明色
十六进制	#RRGGBB	#ffcc00	开发使用从设计稿直接复制

调试工具

作用：检查调试代码

1.打开：f12

2.使用调试工具：选择之后黄色三角表示属性有误，css属性可以关闭。

第四天

复合选择器

定义：由两个或多个基础选择器通过不同的方式组合而成

后代选择器：选中某元素的后代元素

写法：父选择器 子选择器{css属性}，父子选择器用空格隔开。

div span{
	color: red;
}
<div>
    我不是红的
    <span>我是红的</span>
    <p>
        <span>我也是红的</span>
    </p>
</div>

后代选择器会选择所有的后代

子代选择器

作用：只选中子代。

写法：父>子{css}

div > span{
	color: red;
}
<div>
    我不是红的
    <span>我是红的</span>
    <p>
        <span>我不是红的</span>
    </p>
</div>

并集选择器

作用：选中多组标签设置相同样式。

写法：选择器1,选择器2,……,选择器N{CSS属性}

div,
p,
span{
	color: red;
}

<div>我是红色的</div>
<p>我也</p>
<span>我也</span>

交集选择器

作用：选中同时满足多个条件的元素

写法：选择器1选择器2{CSS}

p.box{
	color: red;
}

<p class="box">我是红的</p>
<p>我不是</p>
<div class="box">我也不是</div>

注意：如果里面有标签选择器，标签选择器必须写在最前面。

伪类选择器

作用：伪类表示元素状态，为选中元素的某个状态设置样式（比如超链接，鼠标移上去为黄色的，鼠标悬停的状态是一种伪类）

鼠标悬停状态：选择器:hover{CSS}

a:hover{
	color: yellow;
}
<a href="#">a标签，鼠标悬停时候为黄色</a>

任何标签都可以设置鼠标悬停状态。

伪类-超链接

选择器	作用
:link	访问前
:visited	访问后（被点了之后的样子，比如点击之后为紫色）
:hover	鼠标悬停
:active	点击时，长按（激活）

如果要给超链接设置四个状态，需要按照LVHA顺序书写。

CSS特性

特性：化简代码/定位问题

继承性

性质：子级默认继承父级的文字控制属性。

当标签自己默认有设定，就不会继承父级的。

层叠性

特点：

• 相同属性会覆盖：后面的css覆盖前面的
• 不同属性会叠加：不同的css都生效

div{
	color: red;
	font-weight: 700;
}
div{
	color: green;
	font-size: 30px
}
<div>
    我是一个颜色为绿色但是font-weight为700；fontsize为30px的文字
</div>

优先级

也叫权重，一个标签用了多个选择器时候，基于不同种类的选择器的匹配规则。

div{
	color: red !important;
}
.box{
	color: green;
}
<div class="box">
    我是红的因为有!important。
</div>

规则：选择器优先级高的生效

公式：通配符<标签<类<id<行内<!important

(选中范围越大优先级越低)

!important慎用

优先级-叠加计算规则

叠加计算：如果是复合选择器则需要权重叠加计算

公式：（每一级之间不存在进位）

（行类样式，id选择器个数，类选择器个数，标签选择器个数）

规则：

• 从左向右一次比较选择个数，同一级个数多的优先级高，如果个数相同则向后比较。
• !important权重最高
• 继承权重最低，即使继承里面有!important仍然是最低的。

.c1 .c2 div{
	color: blue;
	# c1里面的c1里面的div,不是继承。
	# 有0个id选择器，2个类选择器，1个标签选择器
}
div #box3{
	color: green;
	# div里面id为box3的，不是继承
	# 有1个id选择器，0个类选择器，1个标签选择器
}
#box1 .c3{
	color: red
	# id为box1里面的c3类，不是继承
	# 有1个id选择器，1个类选择器，0个标签选择器
}

<div id="box1" class="c1">
    <div id="box2" class="c2">
        <div id="box3" class="c3">
            我是红色的。
        </div>
    </div>
</div>

Emmet写法（了解）

代码的简写方法，输入缩写VS会自带生成对应代码。

html

说明	标签格式	Emmet
类选择器	div class=”box”	标签名.类名
id选择器	div id=”box”	标签名字#id名
同级标签	《div》《/div》《p》《/p》	div+p
父子集标签	《div》《p》《/p》《/div》	div>p
多个相同标签	《span》1《/span》《span》2《/span》《span》3《/span》	span*3
有内容的标签	《div》内容《/div》	div{内容}

CSS：大多数简写方式为属性单词首字母

背景属性

描述	属性
背景色	backgroud-color
背景图	backgroud-image
背景图平铺方式	backgroud-repeat
背景图位置	backgroud-position
背景图缩放	backgroud-size
背景图固定	backgroud-attachment
背景复合属性	backgroud

背景图

不只是背景，图标也是一种背景图

属性名： backgroud-image(bgl)

属性值：url(背景图,URL)

background-image: url(./image/1.png);

平铺方式

属性值	说明
no-repeat	不平铺
repeat	平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

位置

属性值：水平方向位置 垂直方向位置

• 关键字：left,right,center,top,bottom（可以叠加使用
• 坐标（数字+px，可以和关键字一起用）

显示模式

块级元素（如div)

• 独占一行
• 宽度默认是父级的100%
• 添加宽高属性生效

行内元素(如span)

• 一行共存多个
• 宽高属性不生效
• 宽高由内容撑开

行内块(如img)

• 一行共存多个
• 宽高属性生效
• 宽高默认内容撑开

转换显示模式

属性名：display

属性值：block,inline-block,inline(不太常用inline)

第五天

结构伪类选择器

作用：根据元素的结构关系查找元素

选择器	说明
E:first-child	查找第一个
E:last-child	查找最后一个
E:nth-child(N)	查找第N个（第一个为1）

E为标签名字，如p,li等等…

nth-child(公式)

功能	公式
偶数标签	2n
奇数标签	2n+1;2n-1
找到5为倍数的标签	5n
找到第5个以后的标签	n+5
找到第5个之前的标签	-n+5

伪元素选择器

作用：创建虚拟元素（伪元素），用来放置装饰性内容。

选择器	说明
E::before	在E元素里面最前面添加一个伪元素
E::after	在E元素里面最后面添加一个伪元素

注：

• 必须设置content:””属性，用来设置伪元素的内容。如果没有内容则引号内留空。
• 伪元素默认是行内显示模式
• 权重和标签选择器相同

PxCook

切图设计软件。自动智能识别PSD文件的文字、颜色、距离。

• 开发面板（自动智能识别）
• 设计面板（手动）

快捷键和ps一样。

盒子模型

作用：布局网页，摆放盒子和内容

组成部分：

• 内容区域：width&height
• 内边距：padding（内容和盒子边缘之间）
• 边框线：border
• 外边距：margin(在盒子外面，拉开盒子距离)

border

属性值： 边框线粗细 线条样式 颜色（不分顺序）

线条样式：solid(实线)、dashed（虚线）dotted（点线）

单方向边框线：border+方位名词（left right top bottom，可以叠加使用）

padding/padding+方位词

属性值：距离

多值写法：

取值	含义
1	四个方向
4	上右下左（顺时针）
3	上 左右 下
2	上下 左右

尺寸计算

默认情况：盒子尺寸=内容尺寸+border+内边距

解决方式：

• 手动减法：减去border和padding尺寸
• 内减模式：box-sizing:border-box

margin

属性值：和padding设置一样含义相同

版心居中

margin: 0 auto;（上下不论，左右auto）

注意：盒子必须设置宽度

清除默认样式

• 用通配符
• 用选中所有有默认样式的标签

*{
	margin: 0;
	padding: 0;
    box-sizing: border-box
}
li{
    list-style: none;
    /* 去掉列表的项目符号 */
}

元素溢出

作用：控制溢出元素内容的显示方式

属性名：overflow

属性值：hidden(溢出隐藏),scroll(溢出滚动，无论是否溢出都显示滚动条),auto（溢出之后才显示滚动条）

外边距问题-合并现象

场景：垂直排列的兄弟元素，如果同时有设置上下margin，上下margin会合并。

现象：取两个margin中较大值生效。

外边距问题-塌陷问题

场景：父子级，子级添加上外边距，会产生塌陷

现象：父级一起向下移动

解决办法：

• 取消子级margin，设置父级padding
• 父级设置overflow:hidden
• 父级设置border-top

行内元素-内外边距问题

场景：行内元素添加margin和padding，无法改变元素垂直位置

解决方法：给行内元素加入line-height可以改变垂直问题

圆角属性

属性名：border-radius

属性值：数字+px/百分比（圆角半径）

多值写法：左上角开始顺时针，没有取值的角和对角取值一样。

常见应用：

• 正圆：正方形盒子设置圆角属性值为宽高的一半（50%）
• 胶囊：长方形盒子设置圆角属性值为盒子高度一半

阴影

属性名：box-shadow

属性值：x轴偏移量 y轴偏移量 模糊半径 扩散半径 颜色 内外阴影

注意：xy轴偏移量必须书写，默认为外阴影内阴影需要加inset

第六天

标准流

也叫文档流，指的是标签在页面中默认的排布规则。如：块元素独占一行，行内元素可以一行显示多个……

浮动

作用：让块级元素水平排列

属性名：float

属性值：left(左对齐),right(右对齐)

特点：顶对齐，具备行内块显示特点。

脱标现象：加了浮动的盒子会脱离标准流的限制。

清除浮动

场景：浮动元素脱标，如果父级没有高度，子级没法撑开父级高度

解决办法：清除浮动

1.额外标签法：在父元素内容的最后添加一个块元素，设置css为clear:both

（类名一般叫clearfix)

2.单伪元素法

.clearfix::after{
    content: "";
    display: block;
    clear: both;
}

3.双伪元素法（推荐）

/* before解决塌陷问题 */
.clearfix::before,
.clearfix::after{
    content: "";
    display: table;
}
.clearfix::after{
    clear: both;
}

4.overflow

父元素添加css overflow:hidden

Flex布局

也叫弹性布局，适合结构化布局。flex模型不会脱标。

设置方法：给父级元素设置display: flex，子级可以自动挤压或者拉伸

组成部分：

• 弹性容器
• 弹性盒子（沿着主轴方向排列）
• 主轴：默认水平方向
• 侧轴/交叉轴：默认垂直方向

描述	属性
创建flex容器	display: flex
主轴对齐方式	justify-content
侧轴对齐方式	align-items
特定弹性盒子侧轴对齐方式	align-self
修改主轴方向	flex-direction
弹性伸缩比	flex
弹性盒子换行	flex-wrap
行对齐方式	align-content

主轴对齐方式

属性名：justify-content

属性值：

属性值	效果
flex-star(不常用)	默认值，弹性盒子从起点开始依次排列
flex-end(不常用)	弹性盒子从终点开始依次排列
center	弹性盒子沿主轴居中排列
space-between	弹性盒子沿主轴均匀排列，空白间距在盒子之间
space-around	空白间距在盒子两侧
space-evenly	弹性盒子和容器之间间距相等

侧轴对齐方式

属性值	效果
stretch	弹性盒子沿着侧轴线被拉伸至铺满容器（盒子没有设置侧轴方向尺寸则默认拉伸）
center	弹性盒子沿侧轴居中排列
flex-start	弹性盒子从起点开始依次排列
flex-end	弹性盒子从终点开始依次排列

有设定height（侧轴方向尺寸）就没法拉伸。

默认情况下，没有设置的情况下，主轴方向靠内容撑开，侧轴默认拉伸。

修改主轴方向

属性值	效果
column（只记这个即可）	垂直方向从上向下
row	水平方向从左向右（默认）
row-reverse	水平方向从右向左
column-reverse	从下向上

弹性伸缩比

属性值：整数数字，表示占用父级剩余尺寸的份数。（比如给四个盒子写了flex:1，每个盒子占据1/4）

弹性盒子换行

属性值：wrap（换行）；nowrap（默认值，不换行）

行对齐方式

属性值：（和主轴方向对齐的属性值一样）对单行不生效

第七天

定位

作用：灵活改变盒子在网页中的位置

实现：

​ 1.定位模式：position

​ 2.边偏移设置盒子位置（left,right……）

相对定位：position:relative

​ 特点：移位参照原来位置，不脱标占位，标签显示模式特点不变

绝对定位：position:absolute

​ 使用场景：子级绝对定位父级相对定位

​ 特点：移位参照最近的祖先相对（如果不父相，那么会参照浏览器定位），脱标不占位，显示模式特点会变化成宽高生效，具备行内块特点。

定位居中

实现步骤：1.绝对定位2.水平，垂直边平移50% 3.子级向左向上移动自身尺寸一半

• 左、上外边距为尺寸的一半
• transform:transtate(-50%,-50%)

比如有一张图片尺寸为530x254

那么我们可以这么设置：

img{
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -265px;
    margin-top: -127px;
}

或者

img{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

固定定位：position: fixed

​ 场景：滑动时候不动的部分（比如网页侧边栏）

​ 特点：脱标不占位，改变位置的参照物是浏览器窗口，显示模式改为行内块

堆叠层级z-index

取值是整数，默认为0，取值越大越靠上。

css Sprites

是一种网页图片应用的处理方式，把网页中一些背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置。

优点：减少服务器被请求次数，减轻服务器压力，提高页面加载速度。

步骤：

• 创建盒子，盒子尺寸和小图尺寸相同
• 设置盒子背景图为精灵图（蒙版的感觉）
• 添加background-position属性，改变背景图位置。
  • 打开pxcook测量小图左上角的坐标
  • 取负数坐标为bg-p属性值（向左上移动图片位置）