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

ubanXia

已于 2024-08-03 19:39:33 修改

阅读量1k

点赞数 11

文章标签：前端学习笔记 html css vscode

于 2024-08-02 22:01:24 首次发布

本文链接：https://blog.csdn.net/ubanXia/article/details/140881155

版权

第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 运行在浏览器上，由浏览器来解析。

什么是超文本标记语言？
- 超文本：文本（文字：汉字+英文字母+数字+符号）+非文本（图片、视频、音频）
- 标记：<单词>
  - 标记==标签
  - 分类
    - 单标签：<br> 换行
    - 双标签：<h1></h1> 一级标题
  - 属性：<标签属性="属性值" 属性="属性值">
  - 标签书写
    - 快速生成：单词+回车键
    - 标签可以上下排列，也可以嵌套组合
- 语言：编程语言
常用标记有哪些：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> …… <h6></h6>
- 每一个网页中，只能出现一次h1标签，h1的权重最高
段落：p标签
- 双标签
- <p></p>

2.6 文本修饰标签

文本修饰标签
- <strong> :双标签，表示强调，会对文本进行加粗
- <em>:双标签，表示强调，会对文本进行斜体展示
- <sub>、<sup>:下标文本、上标文本
- <del>:删除文本
- <ins>:插入文本

2.7 图片标签与图片属性

<img>:图片
- 单标签
- 属性
  - 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 跳转链接

<a> 标签
- 双标签
- 属性
  - href：要跳转的地址（可以是相对路径，可以是绝对路径）
  - target：跳转新页面的打开方式
    - _self 当前页面打开，默认效果就是这个
    - _blank 新窗口打开页面
<base>标签
- 单标签
- 用于给页面所有的a标签设置页面跳转打开方式

2.10 跳转锚点

效果：百度百科
做法
- 方法一：
  - #号：<a href="#one">
  - id属性:<a id="one">
- 方法二：
  - #号:<a href="#two">
  - name属性（注意name属性是加到a标签身上的） <a name="two">

2.11 特殊符号

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

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

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

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

2.12 无序列表

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

2.13 有序列表

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

2.14 定义列表

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

2.15 嵌套列表

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

2.16 表格标签

<table> ：表格的最外层容器
- <tr> ：定义表格行
- <td>：定义表格列
- <th>：定义表头
- <caption>：定义表格标题
语义化标签
- <tHead>:包裹表格头部内容，一个表格只能出现一次
- <tBody>:包裹表格正文内容，一个表格可以出现多次
- <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>：块
- 双标签
- div全称division，“分割、分区”的意思，div标签用于区分一个区域，相当一个局域容器，里面可以容纳标题、段落、表格、图片等多种网页标签。div里面还可以嵌套多层div，用于实现网页规划和布局。
<span>：内联
- 双标签
- 用于修饰文字，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: <div></div>
- 使用场景
  - 去掉某些标签默认样式
  - 复杂选择器中，如层次选择器中使用
群组选择器
- 写法：通过逗号隔开，同时给多个选择器加同样的样式，实现代码的复用
通配选择器
- 写法：*{} 表示选中页面中的所有标签，统一设置样式，要慎用
- 使用场景
  - 去掉所有标签的默认样式

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">&lt;</a><a href="javascript:;" class="arrow arrow_left">&lt;</a>

        <a href="javascript:;" class="arrow arrow_right">&gt;</a><a href="javascript:;" class="arrow arrow_right">&gt;</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不兼容所有的浏览器，需要加上前缀。前缀主要针对旧的浏览器，新浏览器基本不用添加前缀了）

浏览器	内核	前缀
IE	Trident	-ms-
Firefox(火狐)	Gecko	-moz-
Opera(欧朋)	Opera	-o-
Chrome(谷歌)	webkit	-webkit-
Safari(苹果)	webkit	-webkit-
Google和Opera Software	Blink

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

ubanXia

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
1
评论
【学习笔记】前端三件套——HTML和CSS

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

扫一扫