【学习笔记】前端三件套——HTML和CSS

第1章 html和css

1.1 什么是html+css

它们是两种编程语言，一般情况下它们需要搭配使用，是作为网站开发的基础语言。

网站的编程语言：代码经过浏览器编译之后，变成网站
网站是由很多的网页构成的 - 网站 30网页 .html- 电视剧 30集 .mp4
鼠标右键：查看网页源代码
保存：ctrl+s
截切：ctrl+x
全选：ctrl+a
复制：ctrl+c
粘贴：ctrl+v

1.2 编辑器 vscode

VS Code，全称visual studio code,来自微软，是一个开源的、基于Electron的轻量级代码编辑器。

软件下载地址：https://code.visualstudio.com/
插件安装： - 中文包：Chinese (Simplified) Language Pack for Visual Studio Code- 浏览器预览页面：open in browser- 浏览器预览页面：View In Browser- 格式化代码：Beautify
vscode的基本操作： - 打开文件夹：文件-打开文件夹；手动拖动文件夹到vscode- 打开文件- 创建文件- 创建文件夹- 修改文件名- 保存文件，设置：文件->自动保存- 快捷键： - 保存：ctrl+s- 截切：ctrl+x- 全选：ctrl+a- 复制：ctrl+c- 粘贴：ctrl+v- 撤销：ctrl+z- 前进：ctrl+y- 快速复制一行：shift+alt+↓- 快速移动一行：alt+↓或↑- 向后缩进：tab- 向前缩进：shift+tab- 多光标：alt+鼠标左键- 选中相同元素的下一个：ctrl+d- 快速注释：ctrl+/- 查找替换 ctrl+f- 自动换行设置：查看-自动换行- 文字大小：文件--首选项--设置（文字大小、word wrap）- 皮肤切换：文件--首选项-主题- 删除文件- 快速回到文件夹

1.3 chrome浏览器（谷歌）

谷歌浏览器（google chrome）是一款可以让您更快速、轻松且安全地使用网络的浏览器。

了解：市场上有哪些常用的浏览器，市场份儿怎么样，了解五大浏览器？

谷歌浏览器下载：https://www.google.cn/chrome/
浏览器市场份额：https://baijiahao.baidu.com/s?id=1698991311590951436&wfr=spider&for=pc
谷歌浏览器的操作 - 切换移动端模式：F12或鼠标右键：检查
了解网站开发过程 - 需求、项目经理、老板- 产品:绘制原型图- ui设计：设计效果图的- 前端开发工程师（h5工程师）：拿到效果图，转成网页 html- 后端工程师：实现页面的功能
软件测试：白盒测试、黑盒测试、压力测试、回归测试
运维工程师：部署项目、部署环境
运营：写文章、做外链、公众号、论坛

1.4 web前端的三大核心技术

html：结构：房子的主体
css：样式：装修房子
javascript：行为==特效==交互，电梯，空调

第2章 html基本标签

2.1 HTML基础结构和属性

      HTML叫做超文本标记语言（英语：HyperText Markup Language，简称：HTML），

是一种用于创建网页的标准标记语言。是网页制作必备的编程语言，您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

什么是超文本标记语言？- 超文本：文本（文字：汉字+英文字母+数字+符号）+非文本（图片、视频、音频）- 标记：<单词>- 标记==标签- 分类- 单标签：
换行- 双标签：
一级标题- 属性：<标签属性="属性值" 属性="属性值">- 标签书写- 快速生成：单词+回车键- 标签可以上下排列，也可以嵌套组合- 语言：编程语言
常用标记有哪些：http://www.html5star.com/manual/html5label-meaning/
菜鸟教程：https://www.runoob.com/html/html-tutorial.html

2.2 HTML初始代码

每一个html页面都需要添加初始代码，初始代码就是说无论你是什么网页，都需要具备的，就是初始代码，也是网页的基础结构。

快捷键方式创建初始代码：!+tab键(回车键)

<!DOCTYPE html> //文档声明：告诉浏览器这是一个html文件DOCTYPE html> //文档声明：告诉浏览器这是一个html文件

<html lang="en"> //html文件最外层的标签：包裹所有的标签。lang="en" 表示这是一个英文网站。lang="zh-CN" 代表中文网站html lang="en"> //html文件最外层的标签：包裹所有的标签。lang="en" 表示这是一个英文网站。lang="zh-CN" 代表中文网站

    <head> //存放页面头部所有的标签<head> //存放页面头部所有的标签

        <meta charset="UTF-8"> //元信息：设置网页的编码方式为UTF-8(国际编码)<meta charset="UTF-8"> //元信息：设置网页的编码方式为UTF-8(国际编码)

        <title>Document</title> //设置网页标题<title>Document</title> //设置网页标题

    </head></head>

    <body><body>

        网页内容    网页内容

    </body></body>

</html>/html>

2.3 html中的注释

注释的代码，只有在文件中看得到，但是浏览器显示不出来

<!--注释的内容-->

注释的意义 - 对开发人员的一个提示- 把暂时不需要显示的代码注释起来，方便后期使用
注释的快捷方式 - ctrl + / （光标停在本行即可）- shift + alt + a (需要先选中文本)

2.4 HTML语义化

所谓HTML语义化指的是：根据网页中内容的结构，选择合适的标签进行编写。

意义 - 在没有css的情况下，页面也能呈现较好的内容结构。- 利于SE0(搜索引擎优化),让搜索引擎爬虫更好的理解网页。- 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。- 便于团队开发与维护。

2.5 标题与段落

标题：h标签 - 双标签- 有六对：
……
- 每一个网页中，只能出现一次h1标签，h1的权重最高
段落：p标签 - 双标签-

2.6 文本修饰标签

文本修饰标签 - :双标签，表示强调，会对文本进行加粗- :双标签，表示强调，会对文本进行斜体展示- _{、^{:下标文本、上标文本- :删除文本- :插入文本}}

2.7 图片标签与图片属性

:图片 - 单标签- 属性 - src：引入图片的地址（绝对路径、相对路径）- alt：图片损坏的时候出现的提示信息- title：鼠标移入图片的提示信息- width：图片的宽- height：图片的高

2.8 引入文件的地址路径

相对路径 - ./ 在路径中表示当前路径- ../ 在路径中表示上一级路径

绝对路径 - 某盘下面的文件路径- 网上的文件：https://nimg.ws.126.net/?url=http%3A%2F%2Fcms-bucket.ws.126.net%2F2021%2F0809%2F04cccd0ej00qxjv2d003hc000sg00lcc.jpg&thumbnail=660x2147483647&quality=80&type=jpg

2.9 跳转链接

标签 - 双标签- 属性 - href：要跳转的地址（可以是相对路径，可以是绝对路径）- target：跳转新页面的打开方式 - _self 当前页面打开，默认效果就是这个- _blank 新窗口打开页面

<base>标签 - 单标签- 用于给页面所有的a标签设置页面跳转打开方式

2.10 跳转锚点

效果：百度百科

做法 - 方法一： - #号：- id属性:- 方法二： - #号:- name属性（注意name属性是加到a标签身上的）

2.11 特殊符号

HTML 中的预留字符必须被替换为字符实体。一些在键盘上找不到的字符也可以使用字符实体来替换。

在 HTML 中，某些字符是预留的。在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。

浏览器总是会截短 HTML 页面中的空格。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用字符实体。

w3school：https://www.w3school.com.cn/html/html_entities.asp

2.12 无序列表

- 双标签-
是无序列表的外层容器、
是列表项- ul和li必须是组合出现的，他们之间不能有其他标签- 属性 - type：https://www.w3school.com.cn/tags/tag_ul.asp - circle- square- disc- type属性真实开发很少用，基本是用css去控制

2.13 有序列表

- 双标签-
是有序列表的外层容器、
是列表项- 注：有序列表用得非常少，经常都是用无序列表，无序列表可以代替有序列表

2.14 定义列表

:定义列表 -
:添加标题-
: 添加标题的描述- 注：一般用于内容左右结构的情形

2.15 嵌套列表

列表之间可以相互嵌套形成多层级列表。

2.16 表格标签

：表格的最外层容器 - ：定义表格行- :包裹表格头部内容，一个表格只能出现一次- :包裹表格正文内容，一个表格可以出现多次- <tFood>:包裹表格尾部内容，一个表格只能出现一次
2.17 表格属性

图标下载：https://www.iconfont.cn/

表格的属性 - border：表格边框- cellpadding：单元格内的空间，内边距- cellspacing：单元格之间的空间- rowspan：合并行- colspan:合并列- align:左右对齐方式 - left ：左- center ：中- right ：右- valign：上下对齐方式 - top ：上- middle ：中- bottom：下

作业：

2.18 表单input标签

<form> ：表单的最外层容器，双标签 - <input>：表单标签，单标签，用于收集用户信息 - 属性 - type：不同的type展示不同的控件。如输入框、密码框、复选框- checked：设置选中状态- disabled:是否可用- placeholder:设置提示信息

2.19 表单相关标签

<form> ：表单的最外层容器，双标签

<textarea>：多行文本框，双标签

<select>：下拉菜单，双标签 - <option>:下拉列表的每一项内容

<label>：辅助表单，双标签

作业：

2.20 表格表单组合实例
表格表单之间可以相互组合形成数据展示效果。
2.21 div与span

：块 - 双标签- div全称division，“分割、分区”的意思，div标签用于区分一个区域，相当一个局域容器，里面可以容纳标题、段落、表格、图片等多种网页标签。div里面还可以嵌套多层div，用于实现网页规划和布局。

：内联 - 双标签- 用于修饰文字，div和span都没有任何默认样式，需要配合css才行。

第3章 css常用样式
css教程：https://www.runoob.com/css/css-tutorial.html
3.1 CSS语法格式

格式

选择器{属性1：值1;属性2：值2}{属性1：值1;属性2：值2}
或
选择器{{
属性1：值1;属性1：值1;
属性2：值2属性2：值2
}

单位 - px-像素- %-百分比 - 注：相对于父级标签

基本样式 - width-宽- height-高- background-color：背景颜色

3.2 内联样式与内部样式
样式css的书写位置有三种：

内联样式：也叫行内样式、行间样式 - 在html标签上加上style属性来实现效果的

内部样式 - 在<style>标签内添加的样式，<style>标签写在<head>标签内部- 注：内部样式的优点是可以复用代码

外部样式 - 准备一个外部文件xxx.css，引入到html页面中，下个小节详细介绍

3.3 外部样式及两种写法
准备一个外部文件xxx.css，引入到html页面中。

<link>标签 - rel="stylesheet" --rel属性指定外部资源与页面的关系- href="css文件路径" ----- (资源的路径可以是绝对也可以是相对路径)

@import - 写在<style>里面- @import url("css路径地址") ----- (路径可以是绝对也可以是相对路径)- 注：不建议使用该方式，会存在一定的问题。- link和@import的区别（面试题）：https://blog.csdn.net/z591102/article/details/105532801/

3.4 CSS颜色表示法

css中颜色的表示方式： - 单词表示法：开发当中用得不多- 十六进制表示法：要用软件吸取颜色值，最常用的写法- 简写：#aabb66-#ab6- RGB三原色表示法 - rgb(x,x,x) x:0-255

颜色名称查询：https://www.cnblogs.com/xmm2017/p/8441124.html

颜色提取工具：photoshop

3.5 背景样式
css背景样式：

background-color：背景颜色

background-image:url("图片路径") ：背景图片 - 默认情况，如果图片小于块的区域，背景图会平铺整个块，水平和垂直都会平铺

background-repeat：背景图的平铺方式 - repeat-x ：x轴平铺- repeat-y ：y轴平铺- repeat ：默认方式，就是x和y轴都平铺

background-position ：背景图的位置 - 单位 - 百分比- 像素- 单词 - 水平方向：left（左）、center（中）、right（右）- 垂直方向：top(上)、center(中)、bottom（下）

background-attachment ：背景图随滚动条的移动方式 - scroll：默认值，跟着滚动条滚动。（此时的背景图位置是按照当前元素便宜）- fixed：固定不动。（此时的背景图位置按照浏览器标准）

background：复合写法. - 可以设置的属性分别是：background-color、background-position、background-size、background-repeat、background-origin（不常用）、background-clip（不常用）、background-attachment 和 background-image。- 各值之间用空格分隔，不分先后顺序- background: #00ff00 url('smiley.gif') no-repeat fixed center;

3.6 背景实现视觉差效果
3.7 边框样式
css边框样式

border-style：边框样式 - solid ：实线- dashed：虚线- dotted：点线

border-width：边框大小

border-color：边框颜色 - 注：针对某一边需要单独设置：border-left-color，中间单词写方向：left right top bottom

border: 1px solid red;复合写法，不分先后顺序

3.8 边框实现三角形
3.9 family字体类型

font-family：字体类型 - 英文字体：Arial（默认）、'Times New Roman'……- 中文字体：微软雅黑、宋体、华为隶书……

中文字体的英文名称 - 微软雅黑：'Microsoft YaHei'- 宋体:SimSun

衬线体和非衬线体

注意事项 - 设置多字体的方式- 引号的问题- 字体的显示与本地电脑字体库有关

3.10 字体大小粗细样式

font-size：字体大小 - 默认大小：16px- 写法 - 用px：最常用，字体大小一般是偶数- 用单词：很少用

font-weight：字体粗细 - 属性值： - 单词法：normal(正常，默认效果)、bold（加粗）、bolder（更粗）、lighter（变细）- 数值法：100-900(实际上：100-500都是正常，500-900才是加粗)

font-style：字体样式 - 属性值 - normal：正常- italic：斜体(常用，能让本身具备斜体属性的字体变斜体)- oblique：斜体（能让不具备斜体的字体变斜体，很少用，不够规范）

color：字体大小

3.11 文本修饰与文本大小写

text-decoration：文本装饰 - underline：下划线- line-through：删除线- overline：上划线- none：不添加任何样式(一般用于a标签)- 注：可以对一个文本添加多个装饰

text-transform：文本大小写(针对英文段落) - lowercase：转成小写- uppercase：转成大写- capitalize：首字母大写

3.12 文本缩进与文本对齐

text-indent：文本缩进 - 单位： - 像素 px- 相对单位 em

text-align：文本水平方向对齐方式 - 属性值：left、center、right、justify(两端对齐)

3.13 文本的行高

line-height：定义行高 - 小技巧：文字垂直方向居中对齐

行高（自己理解）与行高（w3c）：
默认情况下一行文本的行高分为：上间距，文本的高度，下间距，并且上间距是等于下间距的，所以文字默认在这一行中是垂直居中的。
问题：为什么行高等于容器的高度，元素在父容器中垂直居中？
因为如果行高等于容器的高度，那么相当这个容器中只有这一行文本，并且容器被这一行文本占满。而本身文字在自己的一行中是垂直居中的，所以看起来就像是在容器中垂直居中。
当文字只有一行的时候，height和line-height的值相同，能实现文字垂直方向居中。
3.14 文本间距与英文折行

letter-spacing：定义字间距

word-spacing：定义词间距（针对英文）

强制折行（针对英文） - word-break：break-all （非常强烈折行）- word-wrap：break-word （不那么强烈折行）

**3.15 **文本与段落实现个人简介
3.16 css复合样式

含义 - 一句css样式控制一种效果，叫单一样式- 一句css样式控制多种效果，叫复合样式

分类： - 无先后顺序 - background- border- 有先后顺序 - font - 至少写两个值：size family，它们的顺序是size需要在family前面，且该两个样式需要放后面

写法举例 - weight style size family- style weight size family- weight style size/line-height family

注意 - 单一样式和复合样式不要混写- 如果非要混写单一样式和复合样式，则必须先写复合样式再写单一样式。

3.17 ID选择器及注意事项

id选择器 - css：#elem{}- html:id="elem"

注： - 在一个页面中，id值是唯一性的，否则不规范（后期学习js经常用id来查找元素）- 命名规范，字母、数字、下划线、中划线组合(不能是数字开头)- 命名方式： - 驼峰命名法：searchButton（小驼峰，常用）、SearchButton(大驼峰)- 下划线法：search_button- 短线式法：search-button- 命名规范： - 百度：css命名规范 https://www.cnblogs.com/ipoplar/p/4539415.html- 参考大厂官网，如淘宝网

3.18 CLASS选择器及注意事项

class选择器（类选择器） - css：.elem{}- html:class="elem"

注： - class选择器可以复用（页面中可以出现多次）- 可以添加多个class样式- 多个样式名的时候，样式优先级根据css顺序决定，不由class的属性先后顺序决定- 标签+类写法

3.19 标签群组通配等选择器

标签选择器 - 写法 - css： div{}- html:
- 使用场景 - 去掉某些标签默认样式- 复杂选择器中，如层次选择器中使用

群组选择器 - 写法：通过逗号隔开，同时给多个选择器加同样的样式，实现代码的复用

通配选择器 - 写法：*{} 表示选中页面中的所有标签，统一设置样式，要慎用- 使用场景 - 去掉所有标签的默认样式

3.20 层次选择器

后代： M N{ } 包括后代

父子： M > N{ } 不包括后代

兄弟： M ~ N{ } 所有的弟弟，当前M下面所有的兄弟N标签

相邻 M + N { } 当前M相邻的N标签

3.21 属性选择器
3.22 hover等伪类选择器

伪类选择器：css伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。 - 写法 - :link - :visited- :hover- :active- 注 - link visited只能给a标签添加，hover和active可以给所有标签添加- 如果需要同时使用四个伪类，必须按照顺序：LVHA (买了lv包包，乐haha)- 常用写法： a{} a:hover{}- 实例： - 巨丑的导航制作- 仿网易新闻效果

3.23 after等伪类选择器

:after、:before

:checked、:disabled - 漂亮的复选框

:focus

3.24 结构伪类选择器

:nth-of-type()、 :nth-child() - 角标：1-n- 区别：nth-of-type按类来算个数，nth-child按类按孩子排名算

first-of-type、:first-child

last-of-type、last-child

only-of-type、:only-child

3.25 css样式的继承

文字相关样式可以被继承

布局相关样式不能被继承 - 如果想继承，需要设置：inherit属性。如：border:inherit;

3.26 单一样式的优先级

相同样式优先级 - 后面的优先级较高

内部样式与外包样式优先级 - 内部样式与外包样式优先级是一样的。效果取决于最后面的代码。

单一样式优先级 - !important>行内样式>id>class>标签

类型权重权重
!important 1200important 1200
style 1000 1000
id 100 100
class 10 10
tag 1 1
权重比较法
ul li .box span li .box span
1+1+10+1=13+1+10+1=13
.red li #ssred li #ss
10+1+100=111+1+100=111
约分比较法
ul li .box span #ss li .box span #ss
---------------------
.red li #ssred li #ss
3.27 important群组等优先级

!important

标签+类与单类

群组与单一选择器

3.28 层次的优先级

权重比较法

约分比较法

第4章 html和css拓展
4.1 css盒子模型
为了更好的理解盒模型，请理解下面的举例：有一辆卡车运输很多的物品，每一个箱子里面放着一个
花瓶(content),为了防止花瓶破损，盒子里面放着很多
棉花（padding）填充，箱子是木制品，有一定的
厚度(border),为了防止箱子碰撞，箱子之间还放了很多
海绵(margin)隔开。

盒子的模型主要就是由下面参数组成： - content:就是内容局域，由width和height决定- padding：内填充物，内边距，不一定需要设置 - 写法 - 一个值：padding:30px;(上下左右)- 两个值：padding:20px 30px;(上下、左右)- 三个值：padding:10px 20px 30px;(上、左右、下)- 四个值：padding：10px 20px 30px 40px;(上、右、下、左)- border：边框，不一定需要设置- margin：外填充物，外边距，不一定要设置 - 写法有四种，参考padding的写法。

注意 - 背景颜色会填充到margin以内区域。- 文字或图片等内容，只会在content区域。- padding不能出现负数，margin可以出现负数。

4.2 box-sizing改变盒模型

盒子的宽度是由：content+padding+border+margin决定。（学会计算盒子的宽度）

box-sizing：盒尺寸，可以改变盒模型的展示形式。 - content-box：默认值，盒子的宽度：宽width+左右padding+左右border+左右margin，标准盒模型（手动计算）- border-box：盒子的宽度：width(content+border+padding)+左右margin,怪异盒模型(自动计算)

怪异盒模型的优点 - 不用手动计算数值- 解决100%的问题

4.3 盒模型之margin叠加问题
margin的叠加：当两个盒子同时添加上下外边距的时候，会出现叠加问题。该问题只有上下有，左右没有。

解决方案 - 只给一个元素添加外边距- BFC规范(后面再补充)

4.4 盒模型之margin传递问题
margin的传递：当两个盒子嵌套的时候，子盒子设置margin-top，会出现传递现象。（其他三个方向没有这个问题）

解决方案 - 给父容器加边框- margin换成padding(代码写在父盒子身上)- BFC规范(后面再补充)

4.5 css盒子模型之扩展

margin实现容器(盒子)水平居中

不设置width的现象

4.7 按类型划分标签

按类型划分标签： - block：块标签 div、h1-h6、p、ul、li…… - 独占一行- 支持所有的样式- 不写宽的时候，宽度会自动继承父容器的宽- 所占的空间是一个矩形区域- inline：内联标签(行标签) span、a、em、strong、img、b、i…… - 挨在一起，占据一行- 有些样式不支持：width/height/margin/padding- 不写宽的时候，宽度由内容决定- 所占区域不一定是矩形- 内联标签中间会有空隙，换行引起的- inline-block：内联块标签 input、select - 在一行显示- 能设置宽高

4.8 按内容划分标签

按内容划分标签： - Flow:流内容- Metadata:元数据(meta、link、base、style、script……)- Sectioning：分区（footer、header、nav……）- Heading:标题(h1、h2……)- Phrasing：措辞(strong、em、span……)- Embedded：嵌入的（img、video、audio……）- Interacive：互动的(input、select……)

网上介绍：https://html.spec.whatwg.org/multipage/dom.html

4.9 按显示划分标签

按显示划分标签： - 替换元素：浏览器根据标签和属性来决定显示的效果 - img、input……- 非替换元素：浏览器只根据标签就可以显示效果 - h1、p、strong……

4.10 display显示框类型

display的部分属性值 - block- inline- inline-block- none：注意与 visibility：hidden；的区别

4.11 标签嵌套规范

块标签可以装内联标签

块标签不一定能装块标签

内联标签不能装块标签 - a标签例外

4.12 overflow溢出隐藏

overflow溢出隐藏属性值 - visible：默认- hidden：隐藏- scroll：显示滚动条- auto：自动- x轴、y轴单独设置 - overflow-x- overflow-y

4.13 透明度与手势

透明度 - opacity：0-1之间，占空间，所有子内容都会跟着透明- rgba：0-1之间，占空间，可以指定某个样式透明而不影响其他样式

手势 - cursor：定义鼠标样式

4.14 最大最小宽高

min-width、max-width

min-height、max-height

注意：%单位的细节

4.15 css默认样式
有些标签有默认样式，有些标签没有默认样式。

没有默认样式 - div、span……

有默认样式 - body、h1-h6、ul、p……

body：margin：8px；
h1：margin:上下 21.44px ;font-weight:bold;:上下 21.44px ;font-weight:bold;
p: margin:上下 16px: margin:上下 16px
ul：默认小点。margin：上下16px； padding-left：40px padding-left：40px
a:默认带下划线，蓝色字体:默认带下划线，蓝色字体
4.16 css重置样式
简单的css reset：https://www.cnblogs.com/weizhxa/p/9885329.html
*{margin:0;padding:0;}{margin:0;padding:0;}
ul{ list-style:none}{ list-style:none}
a{text-decoration: none;}{text-decoration: none;}
img{display:block;}{display:block;}
写页面的顺序：

写结构

css重置样式

写具体样式

第5章 ps切图
5.1 PS基本操作与图片格式

ps的基本操作和快捷键 - ps：界面 - 菜单栏- 工具栏- 面板- 基本操作 - 放大缩小：alt+滚动滑轮- 抓手工具：按住空格键- 标尺：ctrl+r -拉参考线 - 测量尺寸： - 选框工具：alt 裁剪选区- 参考线：比较好用- 针对源文件：psd格式，按住ctrl键+点击图层缩略图- 取消选区：ctrl+d

图片格式 - 结果文件：已经合并图层：jpg、png、git- 源文件：未合并图层：psd

5.2 PNG等图片切图流程

利用选框工具 - 复制：ctrl+c- 创建：ctrl+n- 粘贴：ctrl+v- 保存：ctrl+s

利用切片工具

5.4 PSD源文件切图流程

ps：一张张去切

像素大厨：和ps配合使用一个插件：切图+标注图制作

利用ps：插件，扩展。photoshop版本 cc： 1. 编辑-首选项-增效工具-启用生成器2. 文件-生成-图形资源3. 改文件图层名字，回车即可切图（加后缀）

蓝湖：切图+标注图。photoshop版本 cc

5.5 企业中的切图流程
蓝湖：切图+标注图。photoshop版本 cc
蓝湖:https://lanhuapp.com/
第6章 html和css高级应用
6.1 float浮动概念及原理

文档流：文档流是文档中可显示对象在排列时占用的位置。

float特性：加浮动的元素，会让其脱离文档流，会沿着父容器靠左或靠右排列，如果之前有浮动的元素，则新浮动的元素会挨着已浮动元素进行顺序排列。

float取值 - left- right- none

6.2 float注意点整理
float的细节：

只会影响后面的元素

内容默认提升半层

默认宽度根据内容决定

换行排列

主要用于块标签，但也可以用在行标签 - 块标签用于布局，行标签一般用于修饰文本

6.3 清除float浮动（上）

垂直排列的元素：兄弟关系 - clear属性：清除浮动，（代码写在下方兄弟节点里面） - left- right- both

嵌套排列的元素：父子关系 - 固定高度：不推荐，固定高度就不能做到自适应效果(代码写在父盒子里面)- 父元素浮动：不推荐，因为父容器脱离文档流也会影响后面元素(代码写在父盒子里面)- overflow:hidden : BFC规范，如果子元素想溢出，会受到影响(代码写在父盒子里面)- display:inline-block :BFC规范，不推荐，父容器会影响后面元素(代码写在父盒子里面)- 设置空标签：不推荐，会新增一个标签- after伪类：推荐，是空标签的加强版，目前是大部分公司的做法

6.4 清除float浮动（下）

嵌套排列的元素：

设置空标签：不推荐，会新增一个标签（代码写在下方兄弟节点里面）

after伪类：推荐，是空标签的加强版，目前是大部分公司的做法(代码写在父盒子里面) - clear属性只能作用于块标签

6.5 中国体彩网导航条制作
6.6-6.7 中国体彩网商铺
6.8 新浪搜索条
6.9 -6.11 relative相对定位

position定位特性:可以指定一个元素在文档中的定位方式（叠加效果） - 位置设置：下面属性可以决定元素的位置 - top- bottom- left- right- position取值 - static（默认），没有定位，元素出现在正常的流中- relative：生成相对定位的元素，相对于其正常位置进行定位 - 如果没有定位偏移量，对元素本身没有任何影响- 不使元素脱离文档流- 不影响其他元素布局- left、right、top、bottom是相对于当前元素自身进行偏移的- absolute：生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 - 使元素脱离文档流- 使内联元素（行元素）支持宽高- 使块元素默认宽高根据内容决定（块元素具备行元素的特性）- 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素就相对于文档偏移（绝对、相对、固定）- fixed：生成固定定位的元素，相对于浏览器窗口进行定位 - 使元素脱离文档流- 使内联元素（行元素）支持宽高- 使块元素默认宽高根据内容决定（块元素具备行元素的特性）- 相对于整个浏览器进行偏移，不受浏览器滚动的影响- sticky：粘性定位- 在指定的位置进行粘性操作。- z-index:定位层级 - 默认层级是0- 嵌套的时候的层级问题

6.12 定位实现下拉菜单
6.13 定位实现居中和装饰点
6.14 穷游网模块
6.15 css添加省略号

css处理内容溢出的办法 - width：必须有一个固定宽度- white-space:nowrap; 不让内容折行- overflow:hidden; 隐藏溢出的内容- text-overflow:ellipsis; 添加省略号

6.16 css精灵及好处

css sprite：雪碧图、精灵图 - 是一种网页图片应用处理方式。它允许你将一个网页所有零星小图片都包含到一个大图里面去加载。

使用雪碧图 - 准备雪碧图，ps打开- 测量大小，给一个容器一样的大小- 给背景图定位

制作雪碧图

6.17 css圆角设置

圆角设置：border-radius：10px

6.18 布局技巧

排版：float

细节的布局：padding、position

第7章项目实战-企业站布局
7.1- 7.8 PC端企业类型整页制作

整页布局步骤 - 准备效果图：png（自己截图）、psd（蓝湖-企业开发）- 把里面用到的图片准备好（切图）- 创建项目目录- 准备公共样式：common.css- 结合蓝湖和ps开始写代码

名词 - 通栏：宽度自适应的 100%- 版心：固定大小居中的容器

7.9-7.16 pc端游戏类型整页制作
{year}热门页游排行榜
第8章 HTML5新增标签
8.1 HTML和CSS发展历史

html发展历史

css发展历史 - 1994年10月，Hakon Wium Lie提出了层叠样式表，直到1996年css才成为我们今天看到的样式。-

8.2 HTML与XHTML的区别

doctype和meta编码的区别

元素大小写

属性的布尔值

属性的引号

单标签和双标签

图片的alt属性

8.3 b标签与i标签

表示强调，有加粗效果 - strong：有语义- b：无语义

表示斜体 - em：有语义- i：无语义

8.4 引用标签

blockquote:引用大段的段落解释

q:引用小段的短语解释

addr：缩写或首字母略词

address：引用地址信息

cite：引用著作的标题

8.5 iframe嵌套页面
iframe可以实现在页面中插入页面。

属性 - frameborder：边框- width：宽- height：高- scrolling：是否显示滚动条- src：引入文件路径- srcdoc：在iframe中显示的内容

应用场景 - 代码共享- 数据传输- 局部刷新- 第三方介入

8.6 br标签与wbr标签

br：硬换行

wbr：软换行，单词换行时机（word break opportunity）

8.7 pre标签与code标签

pre :预格式文本，被该标签包含的文本会保留空格和换行效果

code：一般用于装代码

<!DOCTYPE html>DOCTYPE html>
<html>html>
<head>head>
<meta charset="UTF-8"><meta charset="UTF-8">
<title>轮播图</title><title>轮播图</title>
</head>/head>
<body>body>
<div class="container"><div class="container">
<div class="wrap" style="left:-600px;"><div class="wrap" style="left:-600px;">
<img src="./img/5.jpg" alt=""><img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
<img src="./img/2.jpg" alt=""><img src="./img/2.jpg" alt="">
<img src="./img/3.jpg" alt=""><img src="./img/3.jpg" alt="">
<img src="./img/4.jpg" alt=""><img src="./img/4.jpg" alt="">
<img src="./img/5.jpg" alt=""><img src="./img/5.jpg" alt="">
<img src="./img/1.jpg" alt=""><img src="./img/1.jpg" alt="">
</div></div>
<div class="buttons"><div class="buttons">
<span>1</span><span>1</span>
<span>2</span><span>2</span>
<span>3</span><span>3</span>
<span>4</span><span>4</span>
<span>5</span><span>5</span>
</div></div>
<a href="javascript:;" class="arrow arrow_left"><</a><a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a><a href="javascript:;" class="arrow arrow_right">></a>
</div></div>
</body>/body>
</html>/html>
8.8 map标签与area标签
定义一个客户端映射：图像映射是指一个图像可以建立多个连接，就是在图像上面定义多个区域，每个区域连接到不同的地址。（
能实现一个图多个链接）

map ：设置热点（图像映射）

area：设置作用域 - shape：设置区域形状 - rect : 矩形，coords对应的坐标为左上角和右下角- circle:圆，coords对应的是圆心（x，y，r），和半径r。 - poly：多边形，coords对应的是每个点的坐标。- coords：坐标，根据shape的值去定义。- href：跳转链接

8.9 video标签与audio标签

video：嵌入视频文件 - src：资源路径- sourse：双标签，解决浏览器兼容的写法

audio：嵌入音频文件 - src：资源路径- sourse：双标签，解决浏览器兼容的写法

8.10 link标签扩展学习
//添加外部样式表
<link rel="stylesheet" href="./css/style.css">link rel="stylesheet" href="./css/style.css">
//添加icon小图标
<link rel="icon" type="/images/x-icon" href="https://www.baidu.com/favicon.ico">link rel="icon" type="/images/x-icon" href="https://www.baidu.com/favicon.ico">
//dns预解析，优化手段
<link rel="dns-prefetch" href="//g.alicdn.com" />link rel="dns-prefetch" href="//g.alicdn.com" />
8.11 meta标签扩展学习
//添加元信息meta：辅助信息，写给浏览器和搜索引擎（SEO）看的
//设置编码方式
<meta charset="utf-8" />meta charset="utf-8" />
//设置网站描述
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
//设置网站关键字
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
//设置双内核浏览器，按高的内核进行渲染
<meta name="renderer" content="webkit"/>meta name="renderer" content="webkit"/>
//设置ie浏览器用最新版
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
8.12 HTML5新语义化标签
//语义化标签的使用：为了搜索引擎优化(SEO)，无语义标签：div、span、b、i
<header>页眉-一个页面只能出现一次</header>header>页眉-一个页面只能出现一次</header>
<footer>页脚-一个页面只能出现一次</footer>footer>页脚-一个页面只能出现一次</footer>
<main>主体-一个页面只能出现一次</main>main>主体-一个页面只能出现一次</main>
<hgroup>标题组合</hgroup>hgroup>标题组合</hgroup>
<nav>导航</nav>nav>导航</nav>
<article>独立的内容</article>article>独立的内容</article>
<aside>辅助信息，侧栏内容</aside>aside>辅助信息，侧栏内容</aside>
<section>区域</section>section>区域</section>
<figure>描述图像或视频</figure>figure>描述图像或视频</figure>
<figcaption>描述图像或视频的标题或摘要部分</figcaption>figcaption>描述图像或视频的标题或摘要部分</figcaption>
<datalist id="">选项列表-和表单配合使用</datalist>datalist id="">选项列表-和表单配合使用</datalist>
<details open>文档细节</details>details open>文档细节</details>
<summary>文档标题</summary>summary>文档标题</summary>
<progress min="0" max="10" value="5">定义进度条</progress>progress min="0" max="10" value="5">定义进度条</progress>
<meter min="0" max="100" value="80" low="10" high="60">定义度量范围</meter>meter min="0" max="100" value="80" low="10" high="60">定义度量范围</meter>
<time>定义日期或时间</time>time>定义日期或时间</time>
<mark>带有记号的文本-突出</mark>mark>带有记号的文本-突出</mark>
8.13 表格扩展学习
隐藏空单元：empty-cells: hide;-cells: hide;
添加单线：border-collapse: collapse;-collapse: collapse;
斜线分类：border / rotate / rotate
列分组：colgroup / col / col
8.14 表单的扩招学习

表单的修饰：

1.利用 label 和 :checked 实现

2.利用 position 和 opacity实现

新的input控件

email:电子邮件输入框:电子邮件输入框
url：网址输入框
number:数值输入框:数值输入框
range:滑动条:滑动条
data/month/week：日期控件/month/week：日期控件
search:搜索框:搜索框
color:颜色控件:颜色控件
tel:电话号码输入框：移动端，输入的时候会自动跳出数字键盘:电话号码输入框：移动端，输入的时候会自动跳出数字键盘
time：时间控件

新的表单属性

autocomplete:自动完成 off on:自动完成 off on
autofocus:获取焦点:获取焦点
required:不能为空:不能为空
pattern:正则验证:正则验证

扩展标签

fieldset:表单元素分组:表单元素分组
legend:为fieldset元素定义标题:为fieldset元素定义标题
optgroup:定义选项组:定义选项组
8.15 BFC规范
BFC即Block Formatting Contexts（块级格式化上下文），他属于格式化上下文的其中一种规范。具有BFC特性的元素可以看做是个例了的独立容器，容器中的元素不会再布局上印象到外面的元素，并且BFC具有普通ring器没有的一些特性。（解决布局问题）
总结：如果能触发BFC规范，该元素就可以成为一个独立的容器，不受到外面容器的影响，从而解决一些布局问题。

触发BFC的条件

1.浮动元素：float出none之外的值浮动元素：float出none之外的值
2.绝对定位元素：position（absolute，fixed）绝对定位元素：position（absolute，fixed）
3.display为inline-block、table-cells、flexdisplay为inline-block、table-cells、flex
4.overflow除了visible之外的值（hidden、auto、scroll）overflow除了visible之外的值（hidden、auto、scroll）

BFC特性以及作用

1、解决margin值叠加问题：margin、解决margin值叠加问题：margin
2、解决margin传递问题、解决margin传递问题
3、解决浮动问题、解决浮动问题
4、解决覆盖问题、解决覆盖问题
第9章 CSS3属性
9.1 浏览器内核与浏览器前缀
浏览器厂商以前就一直在实施Css3，但是它还未形成真正的标准。为此，有些css3语法还在波动的时候，他们提成了针对浏览器的前缀。（
css3不兼容所有的浏览器，需要加上前缀。前缀主要针对旧的浏览器，新浏览器基本不用添加前缀了）
浏览器内核前缀IETrident-ms-Firefox(火狐)Gecko-moz-Opera(欧朋)Opera-o-Chrome(谷歌)webkit-webkit-Safari(苹果)webkit-webkit-Google和Opera SoftwareBlink
9.2 过渡效果 transition
transition 属性是一个简写属性(复合写法)，用于设置四个过渡属性:
transition-property:规定设置过渡效果的 CSS 属性的名称-property:规定设置过渡效果的 CSS 属性的名称
transition-duration:规定完成过渡效果需要多少秒或毫秒-duration:规定完成过渡效果需要多少秒或毫秒
transition-timing-function:规定速度效果的速度曲线-timing-function:规定速度效果的速度曲线
transition-delay:定义过渡效果何时开始(正数是延迟，负数的提前)-delay:定义过渡效果何时开始(正数是延迟，负数的提前)
值描述linear（匀速）规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。ease（默认-慢快慢）规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。ease-in（加速）规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。ease-out（减速）规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。ease-in-out（先加速后减速）规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。cubic-bezier(n,n,n,n)在 cubic-bezier 函数中定义自己的值。可
来源： CSS transition-timing-function 属性
贝塞尔曲线数据设置：https://cubic-bezier.com/#.17,.67,.83,.67
9.3 过渡菜单的制作
9.4-9.5 变形效果 transform
translate:位移:位移
translateX:x轴translateX:x轴
translateY：Y轴translateY：Y轴
translateZ：z轴（3d）translateZ：z轴（3d）
scale:缩放(正常是1,2就是放大一倍，0.5就是缩小一倍.以当前元素中心点进行缩放)：可以简写成一个值:缩放(正常是1,2就是放大一倍，0.5就是缩小一倍.以当前元素中心点进行缩放)：可以简写成一个值
scaleXscaleX
scaleYscaleY
scaleZ（3d）scaleZ（3d）
rotate:旋转(旋转的值，单位是度：deg):旋转(旋转的值，单位是度：deg)
rotateX（3d）rotateX（3d）
rotateY（3d）rotateY（3d）
rotateZ(平面和rotate复合写法是等价关系。正数：顺时针，负数：逆时针)rotateZ(平面和rotate复合写法是等价关系。正数：顺时针，负数：逆时针)
skew:斜切(单位：deg):斜切(单位：deg)
skewX:正数，向左倾斜，负数向右倾斜skewX:正数，向左倾斜，负数向右倾斜
skewY:正数，向左倾斜，负数向右倾斜skewY:正数，向左倾斜，负数向右倾斜
9.6 transform复合写法与注意点

transform使用的注意事项 - 变形操作不会影响到其他元素- 变形操作只能添加给块元素，不能添加给内联元素（行元素）- 复合写法，可以同时添加多个变形操作 - 执行是有顺序的。先执行后面，再执行前面的操作

标签：前端学习笔记

本文转载自: https://blog.csdn.net/ubanXia/article/details/140881155
版权归原作者 ubanXia 所有，如有侵权，请联系我们删除。

发表评论

登录后发布评论

“【学习笔记】前端三件套——HTML和CSS”的评论:
还没有评论

关于作者

overfit同步小助手
文章同步

相关阅读

记录一次Linux服务器被人使用SSH字典爆破

docker搭建dify实操、使用

Unity扩展 UI线段绘制组件——UI上的LineRenderer

[LLM性能优化]聊聊长文本推理性能优化方向

浅谈电商数据采集重要的一环：数据清洗

【实战】Spring Boot 嵌套事务REQUIRES_NEW与NESTED在项目中的运用

NVIDIA RTX 4090解析：卓越的性能表现带来全新的AI探索高度

文章导航

：定义表格列- ：定义表头-
：定义表格标题
语义化标签 -