HTML5+CSS3详细笔记

HTML-DAY1

<br>: 换行

<hr>:水平线

/*******************************************************************************************/

标题标签——标签名：h1~h6——h1只能用1次

段落标签——标签名：p

/*******************************************************************************************/

文本格式化标签：

1. 加粗：strong
2. 倾斜：em
3. 下划线：ins
4. 删除线：del

/*******************************************************************************************/

图像标签——标签名：img——<img src=’ ’>

SHUXING:

1. alt：替换文本——图片无法显示时显示文字
2. title：提示文本——鼠标悬停显示文字
3. width：图片宽度——数字无单位
4. height：图片高度——数字无单位

/*******************************************************************************************/

相对路径/绝对路径

/*******************************************************************************************/

超链接标签——标签名：a——<a herf=’ ’>xxx</a>

注：

1、开发初期，空连接herf属性设置为‘#’

2、target=’_blank’：点击在新窗口打开

/*******************************************************************************************/

音频标签——标签名：audio

1. src：音频URL
2. controls：显示音频控制面板
3. loop：循环播放
4. autoplay：自动播放

视频标签——标签名：video

1. src：视频URL
2. controls：显示音频控制面板
3. loop：循环播放
4. muted：静音播放
5. autoplay：静音状态可自动播放，否则禁止自动播放
6. HTML-DAY2

列表

无序列表——ul嵌套li，ul是无序列表，li是列表条目

注：

1. ul标签里面只能包裹li标签
2. li标签里面可以包裹任何内容

有序列表——ol嵌套li，ol是有序列表，li是列表条目

注：

1. ol标签里面只能包裹li标签
2. li标签里面可以包裹任何内容

定义列表——dl嵌套dt和dd，dl是定义列表，dt是定义列表的标题，dd是定义列表的描述

注：

1. dl里面只能包含dt和dd
2. dt和dd里面可以包含任何内容

/*******************************************************************************************/

表格

标签：table嵌套tr，tr嵌套td / th

1. table：表格
2. tr：行
3. th：表头单元格
4. td：内容单元格

单元格合并：不能跨结构合并

1. 跨行合并：rowspan
2. 跨列合并：colspan

/*******************************************************************************************/

表单

表单区域——form

input标签——<input type=’ ‘>

type属性值：

1. text：文本框，用于输入单行文本
2. password：密码框
3. radio：单选框——属性：name相同，分为一组；checked默认选中
4. checkbox：多选框
5. file：上传文件——属性：multiple实现文件多选功能

placeholder属性：占位文本，提示信息

/*******************************************************************************************/

下拉菜单——select嵌套option，select是下拉菜单整体，option是下拉菜单的每一项

文本域——textarea

label标签——增大点击范围

/*******************************************************************************************/

按钮——标签名：button——<button type=’ ‘>xxx</button>

1. submit：提交按钮
2. reset：重置按钮
3. button：普通按钮，配合JS使用

/*******************************************************************************************/

无语义的布局标签：

1. div：大盒子，独占一行
2. span：小盒子，不换行

实体字符：

1. 空格：&nbsp;
2. 小于号：&lt;
3. 大于号：&gt;

1. HTML-CSS-DAY3

CSS引入方式：

1. 内部样式表：写在style中
2. 外部样式表：写.css文件，使用link引入.html
3. 行内样式：写在标签内，配合JS使用

/*******************************************************************************************/

选择器：

标签选择器——无法差异化相同标签

类选择器——标签使用class=’类名’，类选择器使用’.类名’

id选择器——通常配合JS使用，少用于设置CSS样式，id=’id名’， id选择器使用’#id名’

通配符选择器——所有标签共用样式，使用’*’

/*******************************************************************************************/

画盒子：

1. width：设置盒子宽度
2. height：设置盒子高度
3. background：设置盒子背景色

/*******************************************************************************************/

文字控制属性：

1. 字体大小：font-size
2. 字体粗细：font-weight——正常：normal；加粗：bold
3. 字体倾斜：font-style——正常：normal；倾斜：italic
4. 行高：line-height——行高：上间距+字体高+下间距——数字：倍数；数字+单位：间距
5. 字体族：font-family——最后设置无衬线字体：sans-serif
6. 字体复合属性：font——设置网页文字公共样式；倾斜-加粗-字号/行高-字体
7. 文本缩进：text-indent——建议使用em，1em = 当前标签字号大小
8. 文本对齐：text-align——左对齐：left；居中：center；右对齐：right
9. 修饰线：text-decoration——无：none；下划线：underline；删除线：line-through；上划线：overline
10. 颜色：color——rgb表示法；rgba表示法；十六进制表示法

技巧：

垂直居中：height == line-height

HTML-CSS-DAY4

复合选择器：

1. 后代选择器：父选择器 子选择器 {CSS属性}，父子选择器用空格隔开——所有后代
2. 子代选择器：父选择器 > 子选择器 {CSS属性}，父子选择器用 > 隔开——最近子代
3. 并集选择器：选择器1, 选择器2, …, 选择器n {CSS属性}
4. 交集选择器：选择器1选择器2 {CSS属性}，标签选择器写在最前面，选择器连写
5. 伪类选择器：选择器:hover {CSS属性}——鼠标悬停状态
6. 伪类-超链接：按照LVHA顺序书写
   • :link：访问前
   • :visited：访问后
   • :hover：鼠标悬停
   • :active：点击时

/*******************************************************************************************/

CSS特性

1. 继承性：子类继承父类属性，自身属性优于父类属性显示
2. 层叠性：相同属性后面的覆盖前面的，不同的属性都生效
3. 优先级：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

/*******************************************************************************************/

Emmet写法：

1. 类选择器——标签名.类名
2. id选择器——标签名#id名
3. 同级标签——'+’
4. 父子级标签——‘>’
5. 多个相同标签——标签名*num
6. 有内容的标签——标签名(内容)

/*******************************************************************************************/

背景属性：

1. 背景色：background-color（bgc）
2. 背景图：background-image（bgi）
3. 背景图平铺方式：background-repeat（bgr）

• no-repeat：不平铺
• repeat：平铺
• repeat-x：水平方向平铺
• repeat-y：垂直方向平铺

1. 背景图位置：background-position（bgp）

• left：左侧
• right：右侧
• center：居中
• top：顶部
• bottom：底部

1. 背景图缩放：background-size（bgs）

• cover：完全覆盖，图片或缺失
• contain：不完全覆盖，背景色或残留
• 百分比：100%——宽度和盒子一样，高度等比缩放

1. 背景图固定：background-attachment（bga）

• fixed：固定背景

1. 背景图复合属性：background

属性值：背景色-背景图-平铺方式-背景图位置/缩放-背景图固定（空格隔开）

/*******************************************************************************************/

显示模式：

1. 块级元素

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

1. 行内元素

• 一行共存多个
• 尺寸由内容展开
• 添加宽高属性不生效

1. 行内块元素

• 一行共存多个
• 默认尺寸由内容展开
• 添加宽高属性生效

转换显示模式：display——block：块级；inline：行内块；inline：行内

HTML-CSS-DAY5

结构伪类选择器：

选择器:first-child：查找第一个选择器元素

选择器:last-child：查找最后一个选择器元素

选择器:nth-child(N)：查找第N个选择器元素(第一个元素N值为1)

选择器:nth-child(a*N+b)：查找多个元素，从b开始，每次±a

/*******************************************************************************************/

伪元素选择器：

标签::before：在标签里面最前面添加一个伪元素

标签::after：在标签里面最后面添加一个伪元素

注：

1. 必须设置content=’ ’属性，用来设置伪元素的内容，没内容留空即可
2. 伪元素默认是行内显示模式
3. 权重和标签选择器相同

/*******************************************************************************************/

PxCook软件

盒子模型：

1. 内容区域：width&height
2. 内边距：padding
   • 左右上下边框线：padding -left、padding -right、padding -top、padding -bottom
   • padding多值写法：4：上 右 下 左；3：上 左/右 下；2：上/下 左/右
3. 边框线：border

• 线条样式：实线：solid；虚线：dashed；点线：dotted
• 左右上下边框线：border-left、border-right、border-top、border-bottom

1. 外边距：margin

版心居中：margin: 0 auto;

1. 圆角：border-radius
2. 阴影：box-shadow

盒子模型-尺寸计算：

盒子尺寸=内容尺寸+border尺寸+内边距尺寸

内减模式：box-sizing: border-box，加padding和border不会撑大盒子

盒子模型-元素溢出：

overflow: hidden：隐藏多余

overflow:scroll：无论是否溢出都设置滚动条

overflow:auto：不溢出无滚动条、溢出设置滚动条

盒子模型-合并现象：

兄弟级标签，上下边距取大值合并

盒子模型-塌陷现象：

父子级标签，子级设置上边距导致父级一起向下移动

解决方法：

取消子级margin，父级设置padding。

特别：

行内元素垂直内外边距：line-height

/*******************************************************************************************/

清除默认样式：

‘*’ {

       margin: 0;

       padding: 0;

       box-sizing: border-box;

}

/*******************************************************************************************/

CSS书写顺序：

1. 盒子模型属性
2. 文字样式
3. 圆角、阴影等修饰属性

HTML-CSS-DAY6

标准流：默认的排布规则

/*******************************************************************************************/

浮动布局：

浮动属性：float——左对齐：left；右对齐：right

1. 浮动后的盒子顶对齐
2. 浮动后的盒子具备行内块特点
3. 父级宽度不够。浮动的子级会换行
4. 浮动后的盒子脱标

清除浮动の解决方法：

1. 额外标签法
2. 单伪元素法
3. 双伪元素法 à 推荐使用
4. overflow

/*******************************************************************************************/

Flex布局：

设置方式：给父元素设置display: flex，子元素可以自动挤压或拉缩

1. 创建flex容器：display: flex
2. 主轴对齐方式：justify-content

• flex-start：默认效果
• flex-end：弹性盒子从终点开始排列
• center：弹性盒子沿主轴居中排列
• space-between：空白间距均匀分布在弹性盒子之间
• space-around：空白间距均分在弹性盒子两侧
• space-evenly：弹性盒子与容器之间间距相等

1. 侧轴对齐方式：align-items
   • stretch：弹性盒子沿侧轴拉伸至铺满容器，没设置高度默认拉伸
   • center：弹性盒子沿侧轴居中
   • flex-start：从侧轴起点排列
   • flex-end：从侧轴终点排列
2. 某个弹性盒子侧轴对齐方式：align-self
3. 修改主轴方向：flex-direction

• row：默认
• column：垂直排列

1. 弹性伸缩比：flex

• 剩余宽高按比例划分给弹性盒子

1. 弹性盒子换行：flex-wrap

• wrap：换行
• nowrap：默认值，不换行

1. 行对齐方式：align-content
   • flex-start：默认效果
   • flex-end：弹性盒子从终点开始排列
   • center：弹性盒子沿主轴居中排列
   • space-between：空白间距均匀分布在弹性盒子之间
   • space-around：空白间距均分在弹性盒子两侧
   • space-evenly：弹性盒子与容器之间间距相等
2. HTML-CSS-DAY7

网页制作思路

布局思路：先整体后局部、从外到内、从上到下、从左到右

CSS实现思路：

1. 画盒子，调整盒子范围 à 宽高背景色
2. 调整盒子位置 à flex布局、内外边距
3. 控制图片、文字内容样式

/*******************************************************************************************/

logo功能：

1. 单击跳转到首页
2. 搜索引擎优化：提升网站百度搜索排名

实现方式：

1. 标签结构：h1 – a -网站名称（搜索关键字）
2. CSS样式：
3. .logo {
4.     display: block;
5.     width: 195px;
6.     height: 41px;
7.     background-image: url();
8.     font-size: 0;
9. }

导航功能：单击跳转页面

实现方法：

1. 标签结构：ul – li – a
2. 优势：避免堆砌a标签，网站搜素排名降级

搜索区域：

实现方法：.search – input – a/button

用户区域：

标签结构：.user – a – img + span

banner区域：

结构：通栏banner – 版心 - .left + .right

左侧导航栏：

标签结构：.left – ul – li * 9 – a

布局思路：a默认状态：背景图为白色箭头

右侧更新内容表

标签结构：.right – h3 + .content

精品推荐

标签结构：.recommend – h3 + ul + a.modify

精选视频

标签结构：.hd + .bd

布局思路：盒子模型

版权区域

1. HTML-CSS-DAY8

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

实现：

1. 定位模式：position
   1. relative：相对定位
   2. absolute：绝对定位——子级绝对定位、父级相对定位
   3. fixed：固定定位
2. 边偏移：设置盒子位置
   1. left
   2. right
   3. top
   4. bottom

/*******************************************************************************************/

定位居中

1. 绝对定位
2. 水平、垂直边偏移50%
3. 子级向左、上移动自身尺寸的一半
   1. 左、上的外边距为 -尺寸的一半
   2. transform: translate(-50%. -50%)

/*******************************************************************************************/

堆叠层级：z-index

默认效果：按照标签书写顺序，后来者居上

作用：设置定位元素的层级顺序，改变定位元素的显示顺序

/*******************************************************************************************/

CSS精灵：

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

实现步骤：

1. 创建盒子，盒子尺寸与小图尺寸相同
2. 设置盒子背景图为精灵图
3. 添加background-position属性，改变背景图位置
   1. 使用PxCook测量小图片左上角坐标
   2. 取负数坐标为background-position属性值（向左上移动图片位置）

/*******************************************************************************************/

字体图标：展示的是图标，本质是字体

作用：在网页中添加简单的、颜色单一的小图标

优点：

1. 灵活性：灵活地修改样式，例如：尺寸、颜色等
2. 轻量级：体积小、渲染快、降低服务器请求次数
3. 兼容性：几乎兼容所有主流浏览器
4. 使用方便：先下载崽使用

字体图标 – 上传矢量图

/*******************************************************************************************/

垂直对齐方式：vertical-align

1. 基线对齐：baseline（默认）
2. 顶部对齐：top à 可以去除图片底部空白 à display: block
3. 居中对齐：middle à 可以去除图片底部空白à display: block
4. 底部对齐：bottom à 可以去除图片底部空白à display: block

/*******************************************************************************************/

过渡：transition

作用：可以为一个元素在不同状态之间切换的时候添加过渡效果

属性名：transition（复合属性）

属性值：过渡的属性 花费的时间（s）

提示：

1. 过渡的属性可以是具体的CSS属性
2. 也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
3. transition设置给元素本身

/*******************************************************************************************/

透明度：opacity

作用：设置整个元素的透明度（包含背景和内容）

属性值：0~1

1、0：完全透明

2、1：不透明

3、0~1之间：半透明

/*******************************************************************************************/

光标类型：cursor

作用：鼠标悬停在元素上时指针显示样式

属性值：

1. default：默认值，通常是箭头
2. pointer：小手效果，提示用户可以点击
3. text：工字型，提示用户可以选择文字
4. move：十字光标，提示用户可以移动

HTML-CSS-DAY9

SEO：搜索引擎优化，提升网站百度搜索排名

方法：

1. 竞价排名
2. 将网页制作成html后缀
3. 标签语义化

网页头部SEO标签：

1. title：网页标题标签
2. description：网页描述
3. keywords：网页关键词

Favicon图标：网页图标，出现在浏览器标题栏，增加网站辨识度

图标：favicon，一般存放在网站的根目录里面

使用：link:favcion

版心：

/* 版心 */

.wrapper {

  margin: 0 auto;

  width: 1240px;

}

快捷导航：shortcut

结构：通栏 – 版心 – 导航ul

布局：flex-end

头部：header

结构：.header – logo + 导航（nav） + 搜索（search） + 稍后再看（cart）

banner

结构：通栏 – 版心 – 轮播图（ul.pic） + 侧导航（subnav > ul） + 远点指示器（ol）

HTML-高级CSS-DAY1

平面转换：transform

作用：为元素添加动态效果，一般与过渡配合使用

概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

注：平面转换又叫2D转换，配合过渡（transition）使用

属性：

1. 平移：transform：translate（x轴移动距离，y轴移动距离）；
   1. 像素单位数值
   2. 百分比（参照盒子自身尺寸计算结果）
   3. 正负均可

平移实现居中效果：transform：translate（-50%，-50%）

1. 旋转：transform：rotate（旋转角度）
   1. 角度单位是deg
   2. 正负均可：正顺时针旋转，负逆时针旋转

3、缩放：transform：scale（缩放倍数）/（x轴缩放倍数，y轴缩放倍数）

4、倾斜：transform：skew（） —— q取值：角度度数deg

平面转换：改变转换远点

默认情况下，转换远点是盒子中心点

属性：transform-origin：水平原点位置 垂直原点位置；

取值：

1. 方位名词（left、top、right、bottom、center）
2. 像素单位数值
3. 百分比

平面转换：多重转换 à 以第一种转换形态的坐标轴为准

顺序：平移 – 旋转

渐变：bgi

1. 线性渐变

属性：linear-gradient（渐变方向，颜色1 终点位置，颜色2 终点位置，……）

取值：

渐变方向：可选——to 方位名词 / 角度读数

终点位置：可选——百分比

常用：background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.364));

1. 径向渐变

作用：给按钮添加高光效果

属性：radial-gradient（半径 at 圆心位置，颜色1 终点位置，颜色2 终点位置，……）

取值：

半径可以是2条，则为椭圆

圆心位置取值：像素单位取值/百分比/方位名词

HTML-高级CSS-DAY2